update 国内标准-详情

src/components/jero/JUpload.vue

@@ -32,6 +32,12 @@
         </slot>
       </template>
     </a-upload>
+
+    <div id="images">
+      <div class="image" v-viewer="{movable: false}">
+        <img v-show="image" :src="imageUrl" alt="">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -74,7 +80,9 @@ export default {
       fileList: [],
       newFileList: [],
       uploadGoOn: true,
-      fileTypes: this.fileType
+      fileTypes: this.fileType,
+      image: false,
+      imageUrl: null
     }
   },
   props: {

src/views/standardRegulationLibrary/commonPage/StandardDetailPage.vue

@@ -26,7 +26,26 @@
         <div class="detail-page-part-form" v-if="index !== 3">
           <div class="detail-page-part-form-item" v-for="formItem in form[part]" :key="formItem.id">
             <label>{{ formItem.dbFieldTxt }}</label>
-            <span>{{ detailData[needDictFieldList.includes(formItem.fieldShowType) ? formItem.dbFieldName + '_dictText' : formItem.dbFieldName] }}</span>
+            <!--文件需要显示预览-->
+            <span v-if="!fileField.includes(formItem.dbFieldName)">{{ detailData[needDictFieldList.includes(formItem.fieldShowType) ? formItem.dbFieldName + '_dictText' : formItem.dbFieldName]
+              }}</span>
+            <div class="file-box" v-else>
+              <div class="detail-page-process-manuscript-file" v-for="file in detailData[formItem.dbFieldName + 'List']" :key="file.id">
+                <div class="detail-page-process-manuscript-file-info">
+                  <a-icon type="link" />
+                  <div class="detail-page-process-manuscript-file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
+                </div>
+                <!--                下载-->
+                <a-button type="link" icon="download" v-has="btnPermission.download" class="file-btn" @click="handleDownload(file)">{{ $t('download')
+                  }}
+                </a-button>
+                <!--                无水印下载-->
+                <!--<a-button type="link" v-has="btnPermission.unwatermarkedDownload" class="file-btn">-->
+                <!--  <i class="iconfont icon-water-drop-slash"></i>-->
+                <!--  {{ $t('unwatermarkedDownload') }}-->
+                <!--</a-button>-->
+              </div>
+            </div>
           </div>
         </div>
         <!--      过程稿件特殊处理-->
@@ -35,18 +54,23 @@
             <div class="detail-page-process-manuscript-title">
               <span>{{ formItem.dbFieldTxt }}</span>
               <!--              标准分解单-->
-              <a-button type="primary" ghost icon="file-text" @click="previewStandardResolutionSheet" v-has="btnPermission.standardResolutionSheet">
+              <a-button type="primary"
+                        ghost
+                        icon="file-text"
+                        @click="previewStandardResolutionSheet"
+                        v-has="btnPermission.standardResolutionSheet"
+                        :disabled="!detailData[formItem.dbFieldName + '_standardSplit']">
                 {{ $t('standardRegulationLibrary.standardResolutionSheet') }}
               </a-button>
             </div>
-            <div class="detail-page-process-manuscript-file" v-for="file in detailData[formItem.dbFieldName]" :key="file.id">
+            <div class="detail-page-process-manuscript-file" v-for="file in detailData[formItem.dbFieldName + 'List']" :key="file.id">
               <div class="detail-page-process-manuscript-file-info">
                 <a-icon type="link" />
                 <div class="detail-page-process-manuscript-file-name">{{ file.fileName }}</div>
               </div>
               <div class="detail-page-process-manuscript-file-operate">
                 <!--                下载-->
-                <a-button type="link" icon="download" v-has="btnPermission.download">{{ $t('download') }}</a-button>
+                <a-button type="link" icon="download" v-has="btnPermission.download" @click="handleDownload(file)">{{ $t('download') }}</a-button>
                 <!--                无水印下载-->
                 <a-button type="link" v-has="btnPermission.unwatermarkedDownload">
                   <i class="iconfont icon-water-drop-slash"></i>
@@ -59,6 +83,12 @@
       </div>
     </a-spin>
 
+    <div id="images">
+      <div class="image" v-viewer="{movable: false}">
+        <img v-show="image" :src="imageUrl" alt="">
+      </div>
+    </div>
+
     <!--    更新记录-->
     <update-record-modal ref="uploadRecordModal" />
     <!--    提交问题-->
@@ -78,6 +108,12 @@ import UpdateRecordModal from './modules/UpdateRecordModal.vue'
 import SubmitQuestionModal from './modules/SubmitQuestionModal.vue'
 import UserSelectModal from '../../../components/selection/UserSelectModal.vue'
 import StandardResolutionSheetModal from './modules/StandardResolutionSheetModal.vue'
+import { getFileInfo } from '../../../api/api.js'
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '../../../store/mutation-types.js'
+import { downloadFile, getFileAccessHttpUrl } from '../../../api/manage.js'
+import { previewPdf } from '../../../utils/previewPdf.js'
+import { Base64 } from 'js-base64'
 
 // 国内标准权限
 const DomesticStandardPermission = {
@@ -95,6 +131,9 @@ const DomesticApi = {
   getDetailData: getDomesticStandardDetail // 获取详情数据
 }
 
+const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
+const FILE_TYPE_PDF = 'pdf'
+
 export default {
   name: 'StandardDetailPage',
   components: { UpdateRecordModal, SubmitQuestionModal, UserSelectModal, StandardResolutionSheetModal },
@@ -104,20 +143,13 @@ export default {
       partList: [], // 页面模块列表
       form: {}, // 页面字段
       // 页面数据
-      detailData: {
+      detailData: {},
-        // 修改单
+      // 文件的字段
-        modification_list: [],
+      fileField: ['associated_file', 'modification_list', 'draft_for_review', 'draft_for_approval', 'draft_for_comment', 'draft'],
-        // 报批稿
-        draft_for_review: [],
-        // 送审稿
-        draft_for_approval: [],
-        // 征求意见稿
-        draft_for_comment: [],
-        // 草案
-        draft: []
-      },
       // 需要数据字段翻译的属性类型
-      needDictFieldList: [FieldType.USER_SINGLE.value, FieldType.ORGAN_SINGLE.value, FieldType.STANDARD_MORE.value, FieldType.ORGAN_MORE.value, FieldType.OPTION_SINGLE.value, FieldType.OPTION_MORE.value, FieldType.TREE.value]
+      needDictFieldList: [FieldType.USER_SINGLE.value, FieldType.ORGAN_SINGLE.value, FieldType.STANDARD_MORE.value, FieldType.ORGAN_MORE.value, FieldType.OPTION_SINGLE.value, FieldType.OPTION_MORE.value, FieldType.TREE.value],
+      image: false,
+      imageUrl: null
     }
   },
   computed: {
@@ -160,7 +192,7 @@ export default {
      * 获取页面字段
      */
     initForm () {
-      this.operateApiFunc.getFormFunc().then(res => {
+      this.operateApiFunc.getFormFunc({ type: 1 }).then(res => {
         if (res.success) {
           const data = res.result || {}
           this.partList = Object.keys(data)
@@ -173,9 +205,23 @@ export default {
     // 获取数据
     initDetailData () {
       this.loading = true
-      this.operateApiFunc.getDetailData({ id: this.$route.query.id }).then(res => {
+      this.operateApiFunc.getDetailData({ id: this.$route.query.id, type: 1 }).then(res => {
         if (res.success) {
           this.detailData = Object.assign({}, res.result || {})
+          this.fileField.forEach(item => {
+            if (this.detailData[item]) {
+              const fileList = this.detailData[item].split(',')
+              const fileInfoList = []
+              fileList.forEach(async id => {
+                const fileInfo = await this.getFileInfo(id)
+                if (fileInfo) {
+                  fileInfoList.push(fileInfo)
+                }
+              })
+              this.$set(this.detailData, item + 'List', fileInfoList)
+            }
+          })
+          console.log(this.detailData)
         } else {
           this.$message.warn(res.message)
         }
@@ -183,6 +229,18 @@ export default {
         this.loading = false
       })
     },
+    getFileInfo (fileId) {
+      return new Promise(resolve => {
+        let fileInfo
+        getFileInfo({ id: fileId }).then(res => {
+          if (res.success) {
+            fileInfo = res.result
+          }
+        }).finally(() => {
+          resolve(fileInfo)
+        })
+      })
+    },
     /**
      * 更新记录
      */
@@ -227,11 +285,63 @@ export default {
      */
     previewStandardResolutionSheet () {
       this.$refs.standardResolutionSheetModal.open()
+    },
+    handlePreview (file) {
+      if (!file || !file.url) {
+        return
+      }
+      // 截取文件后缀名
+      const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
+      const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
+      // 判断是否为可预览格式的文件
+      if (!canPreview) {
+        this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
+          this.handleDownload(file)
+        })
+        return
+      }
+      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
+      // 图片预览，使用自己添加的组件
+      if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
+        this.imageUrl = getFileAccessHttpUrl(file.id)
+        // 获取viewer实例
+        const viewer = this.$el.querySelector('.image').$viewer
+        // 调用show方法进行显示预览图
+        viewer.show()
+        // this.$refs.imagePreviewModal.open(file)
+        return
+      }
+      // pdf预览
+      if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
+        const url = previewPdf(file.response.result.id)
+        window.open(url)
+        return
+      }
+      // 其余可预览文件仍使用KKFile进行预览
+      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+      window.open(url)
+    },
+    /**
+     * 单个文件的下载功能
+     * @param file
+     */
+    handleDownload (file) {
+      // 下载文件
+      downloadFile(`/sys/common/download/${file.id}`, file.fileName)
     }
   }
 }
 </script>
 
 <style scoped lang="less">
+.file-box {
+  flex: 1;
+  width: 0;
+}
 
+.file-btn > ::v-deep span {
+  display: inline;
+  color: @primary-color;
+  font-size: 14px;
+}
 </style>