feat:[试验管理][试验方法]阅读

.env.development

@@ -7,5 +7,8 @@ ENV = 'development'
 # 华西海圻管理系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
 
+VUE_APP_FILE_DOMAIN = 'http://127.0.0.1:9300'
+
+
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -6,3 +6,5 @@ ENV = 'production'
 
 # 华西海圻管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'
+
+VUE_APP_FILE_DOMAIN = 'http://127.0.0.1:9300'

.env.staging

@@ -10,3 +10,5 @@ ENV = 'staging'
 
 # 华西海圻管理系统/测试环境
 VUE_APP_BASE_API = '/stage-api'
+
+VUE_APP_FILE_DOMAIN = 'http://127.0.0.1:9300'

package.json

@@ -47,6 +47,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-i18n": "7.3.2",
+    "vue-pdf": "^4.3.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

src/api/business/study/studyMethod.js

@@ -18,3 +18,12 @@ export function studyMethod_list(query) {
     params: query
   })
 }
+
+// 阅读
+export function studyMethod_read(data) {
+  return request({
+    url: '/system/business/studyMethod/read',
+    method: 'post',
+    data: data
+  })
+}

src/views/business/study/comp/syff/Xq.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div class="edit-container">
+      <div class="edit-top">
+        <div class="left-top">
+          <img src="@/assets/images/back.png" @click="cancel()" />
+          <div class="left-title"></div>
+        </div>
+        <div class="center-top">
+        </div>
+        <div class="right-top">
+          <el-button @click="cancel()">{{ $t('form.cancel') }}</el-button>
+          <el-button type="primary" @click="yuedu" v-if="form.zt == 0">{{
+            $t('page.business.study.studyMethod.yuedu') }}</el-button>
+        </div>
+      </div>
+      <div class="edit-content ">
+        <div class="pdf-layout">
+          <div class="pdf-content">
+            <pdf id="pdfBox" :page="pageNum" :src="pdfSrc" @progress="loadedRatio = $event"
+              @num-pages="totalPages = $event"></pdf>
+          </div>
+          <div class="btn-layout" v-if="totalPages">
+            <div class="pageNum">{{ pageNum }} / {{ totalPages }}</div>
+            <el-button-group>
+              <el-button round plain type="primary" icon="el-icon-arrow-left" size="mini"
+                @click="prePage">上一页</el-button>
+              <el-button round plain type="primary" size="mini" @click="nextPage">下一页<i
+                  class="el-icon-arrow-right el-icon--right"></i></el-button>
+            </el-button-group>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Yd ref="Yd" @callback="closeYd"/>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import pdf from 'vue-pdf'
+import Yd from './Yd.vue'
+export default {
+  name: "Xq",
+  components: { pdf, Yd },
+  data() {
+    return {
+      pdfSrc: '',
+      open: false,
+      pageNum: 1,
+      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
+      totalPages: 0, //pdf总页数
+      form: {},
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'nickName'
+    ]),
+  },
+  created() {
+
+  },
+  methods: {
+    yuedu() {
+      this.$refs.Yd.show(this.form)
+    },
+
+    cancel() {
+      this.$emit('close')
+    },
+
+    show(row) {
+      this.open = true
+      this.form = row
+      this.pdfSrc = process.env.VUE_APP_FILE_DOMAIN + row.fileUrl
+      this.getPageNum()
+    },
+
+    // 获取PDF总页数
+    getPageNum() {
+      let loadingTask = pdf.createLoadingTask(this.fileUrl);
+      loadingTask.promise
+        .then((pdf) => {
+          this.totalPages = pdf.numPages;
+          this.$nextTick(() => {
+            this.setWatermarkContent();
+          });
+        })
+        .catch((err) => {
+          this.$message.warning("pdf加载失败");
+        });
+    },
+    // 上一页
+    prePage() {
+      let page = this.pageNum;
+      page = page > 1 ? page - 1 : this.totalPages;
+      this.pageNum = page;
+      window.scrollTo(0, 0);
+    },
+
+    // 下一页
+    nextPage() {
+      let page = this.pageNum;
+      page = page < this.totalPages ? page + 1 : 1;
+      this.pageNum = page;
+      window.scrollTo(0, 0);
+    },
+
+    closeYd(val) {
+      this.form.zt = val
+    }
+  }
+}
+</script>
+<style lang="scss">
+.pdf-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.pdf-content {
+  min-width: 1000px;
+  min-height: 550px;
+  position: relative;
+  margin: 0 auto
+}
+
+.btn-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content-edit {
+  background: #f5f5f5;
+  padding: 0;
+
+  .edit-top {
+    background: #fff;
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .left-top {
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      img {
+        height: 16px;
+        margin-right: 20px;
+        cursor: pointer;
+      }
+
+      .right-top {}
+
+    }
+  }
+
+  .edit-content {
+    background: #fff;
+    padding: 20px;
+    min-height: 500px;
+
+    .edit-form {
+      width: 800px;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

src/views/business/study/comp/syff/Yd.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <!-- 阅读弹窗 -->
+    <el-dialog :title="$t('page.business.study.studyMethod.yuedu')" :visible.sync="open" width="500px" append-to-body
+      :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.qmyy')" prop="qmyy">
+              <el-input type="text" :value="form.qmyy" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.remark')" prop="remark">
+              <el-input type="textarea" v-model="form.remark" :rows="5" maxlength="500"
+                :placeholder="$t('form.placeholderInput')">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.signer')">
+              <el-input type="text" v-model="nickName" maxlength="50" disabled
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('form.password')" prop="qmrmm">
+              <el-input type="password" v-model="form.qmrmm" maxlength="20"
+                :placeholder="$t('form.placeholderInput')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save">{{ $t('form.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { studyMethod_read } from "@/api/business/study/studyMethod"
+import { mapGetters } from 'vuex'
+
+export default {
+  name: "Yd",
+  data() {
+    return {
+      open: false,
+      form: {},
+      rules: {
+        qmrmm: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'nickName'
+    ]),
+  },
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.open = false
+    },
+    reset() {
+      this.form = {
+        studyMethodId: null,
+        qmyy: '阅读',
+        remark: '',
+        qmrmm: null
+      }
+      this.resetForm("form")
+    },
+    show(row) {
+      this.reset()
+      this.form.studyMethodId = row.id
+      this.open = true
+    },
+    save() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.$modal.loading()
+          studyMethod_read(this.form).then(response => {
+            this.open = false
+            this.$emit('callback', 1)
+            this.$modal.closeLoading()
+          }).finally(() => {
+            this.$modal.closeLoading()
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/business/study/comp/syffList.vue

@@ -1,7 +1,7 @@
 <!-- 试验方法列表 -->
 <template>
   <div>
-    <div class="tbbd-list">
+    <div class="tbbd-list" v-show="!showDetail">
       <div class="tbbd-search">
         <el-form :model="searchForm" ref="searchForm" class="search-area" :inline="true" label-width="88px">
           <el-row>
@@ -75,12 +75,8 @@
     </div>
     <!-- 新增 -->
     <Xz key="Xz" ref="Xz" @callback="search" />
-    <!-- 更换笼具 -->
-    <Bj key="Bj" ref="Bj" @callback="search" />
-    <!-- 结束使用 -->
-    <Js key="Js" ref="Js" @callback="search" />
-    <!-- 笼具更换记录 -->
-    <Jl key="Jl" ref="Jl" @callback="search" />
+    <!-- 详情 -->
+    <Xq key="Xq" ref="Xq" v-show="showDetail"  @close="xqClose" />
   </div>
 
 </template>
@@ -88,9 +84,7 @@
 <script>
 import { studyMethod_list } from '@/api/business/study/studyMethod'
 import Xz from "./syff/Xz";
-import Bj from "./syj/Bj";
-import Js from "./syj/Js";
-import Jl from "./syj/Jl";
+import Xq from "./syff/Xq";
 import { mapGetters } from 'vuex'
 import moment from "moment";
 export default {
@@ -122,9 +116,10 @@ export default {
       deep: true
     }
   },
-  components: { Xz, Bj, Js, Jl },
+  components: { Xz, Xq },
   data() {
     return {
+      showDetail: false,
       daterange: [],
       showFh: false,
       daterange: [],
@@ -174,17 +169,15 @@ export default {
     add() {
       this.$refs.Xz.show(this.study);
     },
-    edit(row) {
-      this.$refs.Bj.show(row)
-    },
-    end(row) {
-      this.$refs.Js.show(row)
-    },
     detail(row) {
-      this.$refs.Jl.show(row)
-      // this.showDetail = true
-      // this.$emit('showDetail', this.showDetail)
-      // this.$refs.Xq.show(row)
+      this.showDetail = true
+      this.$emit('showDetail', this.showDetail)
+      this.$refs.Xq.show(row)
+    },
+    xqClose() {
+      this.showDetail = false
+      this.$emit('showDetail', this.showDetail)
+      this.search()
     },
   }
 }