[update] 修改企标计划详情和企标详情文件列表，企标新增抽屉样式

src/views/enterpriseStandardLibrary/plan/detail/PlanDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="detail-page">
-    <div class="detail-page-title">{{ pageTitle }}{{ $t('enterpriseStandardLibrary.plan.detailTitle') }}</div>
+    <div class="detail-page-title">{{ $t('enterpriseStandardLibrary.plan.detailTitle') }}</div>
     <div class="detail-page-part">
       <div class="detail-page-part-title">
         <span>{{ $t('enterpriseStandardLibrary.plan.basicInformation') }}</span>
@@ -9,72 +9,72 @@
         <!--  原企标编号  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.oldEnterpriseStandardNum') }}</label>
-          <span>{{ form.originEnStandardNo }}</span>
+          <span>{{ form.originEnStandardNo || global.emptyLine }}</span>
         </div>
         <!--  新企标编号  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.newEnterpriseStandardNum') }}</label>
-          <span>{{ form.newEnStandardNo }}</span>
+          <span>{{ form.newEnStandardNo || global.emptyLine }}</span>
         </div>
         <!--  原企标名称  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.oldEnterpriseStandardName') }}</label>
-          <span>{{ form.originEnStandardName }}</span>
+          <span>{{ form.originEnStandardName || global.emptyLine }}</span>
         </div>
         <!--  新企标名称  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.newEnterpriseStandardName') }}</label>
-          <span>{{ form.newEnStandardName }}</span>
+          <span>{{ form.newEnStandardName || global.emptyLine }}</span>
         </div>
         <!--  企标英文名称  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.englishNameOfEnterpriseStandard') }}</label>
-          <span>{{ form.enStandardEnglishName }}</span>
+          <span>{{ form.enStandardEnglishName || global.emptyLine }}</span>
         </div>
         <!--  企标等级分类  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.gradeClassification') }}</label>
-          <span>{{ form.enStandardClassification }}</span>
+          <span>{{ form.enStandardClassification || global.emptyLine }}</span>
         </div>
         <!--  项目状态  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.projectStatus') }}</label>
-          <span>{{ form.projectStatus_dictText }}</span>
+          <span>{{ form.projectStatus_dictText || global.emptyLine }}</span>
         </div>
         <!--  项目类型  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.projectType') }}</label>
-          <span>{{ form.projectType_dictText }}</span>
+          <span>{{ form.projectType_dictText || global.emptyLine }}</span>
         </div>
         <!--  草稿计划完成日期  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.draftPlanFinishDate') }}</label>
-          <span>{{ form.draftPlannedCompleteDate }}</span>
+          <span>{{ form.draftPlannedCompleteDate || global.emptyLine }}</span>
         </div>
         <!--  征求意见稿计划完成日期  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.exposureDraftPlanFinishDate') }}</label>
-          <span>{{ form.solicitationDraftPlanCompleteDate }}</span>
+          <span>{{ form.solicitationDraftPlanCompleteDate || global.emptyLine }}</span>
         </div>
         <!--  计划报批日期  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.planSubmissionDate') }}</label>
-          <span>{{ form.planApprovalDate }}</span>
+          <span>{{ form.planApprovalDate || global.emptyLine }}</span>
         </div>
         <!--  草稿完成日期  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.draftFinishDate') }}</label>
-          <span>{{ form.draftCompletionDate }}</span>
+          <span>{{ form.draftCompletionDate || global.emptyLine }}</span>
         </div>
         <!--  征求意见稿完成日期  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.exposureDraftFinishDate') }}</label>
-          <span>{{ form.solicitationDraftCompletionDate }}</span>
+          <span>{{ form.solicitationDraftCompletionDate || global.emptyLine }}</span>
         </div>
         <!--  报批日期  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.submissionDate') }}</label>
-          <span>{{ form.approvalDate }}</span>
+          <span>{{ form.approvalDate || global.emptyLine }}</span>
         </div>
       </div>
     </div>
@@ -86,57 +86,60 @@
         <!--  主起草人  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.principalDrafter') }}</label>
-          <span>{{ form.mainDraftingUser }}</span>
+          <span>{{ form.mainDraftingUser || global.emptyLine }}</span>
         </div>
         <!--  主起草单位  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.mainDraftingUnit') }}</label>
-          <span>{{ form.mainDraftingUnit }}</span>
+          <span>{{ form.mainDraftingUnit || global.emptyLine }}</span>
         </div>
         <!--  企标体系  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.enterpriseStandardSystem') }}</label>
-          <span>{{ form.enStandardSystem }}</span>
+          <span>{{ form.enStandardSystem || global.emptyLine }}</span>
         </div>
         <!--  零部件名称  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.partName') }}</label>
-          <span>{{ form.componentName }}</span>
+          <span>{{ form.componentName || global.emptyLine }}</span>
         </div>
         <!--  标准适用范围  -->
         <div class="detail-page-part-form-item">
           <label>{{ $t('enterpriseStandardLibrary.plan.scopeOfApplication') }}</label>
-          <span>{{ form.enStandardEnglishName }}</span>
+          <span>{{ form.enStandardEnglishName || global.emptyLine }}</span>
         </div>
         <!--  编制说明  -->
         <div class="detail-page-part-form-item-large-file">
           <label>{{ $t('enterpriseStandardLibrary.plan.compilationIllustration') }}</label>
-          <a @click="previewCompilation">{{ form.compilationFileName }}</a>
+          <template v-if="form.compilationFileName">
+            <a v-for="item in form.compilationDescriptionList" :key="item.id" @click="handlePreview(item)">{{ item.fileName }}</a>
+          </template>
+          <span v-else>{{ global.emptyLine }}</span>
         </div>
         <!--  立项背景、立项依据  -->
         <div class="detail-page-part-form-item-large">
           <label>{{ $t('enterpriseStandardLibrary.plan.projectBackground') }}</label>
-          <span>{{ form.projectBackground }}</span>
+          <span>{{ form.projectBackground || global.emptyLine }}</span>
         </div>
         <!--  国际、国家及行业同类标准分析  -->
         <div class="detail-page-part-form-item-large">
           <label>{{ $t('enterpriseStandardLibrary.plan.similarNaStandardsAnalysis') }}</label>
-          <span>{{ form.similarNaStandardsAnalysis }}</span>
+          <span>{{ form.similarNaStandardsAnalysis || global.emptyLine }}</span>
         </div>
         <!--  企业同类标准对比分析  -->
         <div class="detail-page-part-form-item-large">
           <label>{{ $t('enterpriseStandardLibrary.plan.similarEnStandardsAnalysis') }}</label>
-          <span>{{ form.similarEnStandardsAnalysis }}</span>
+          <span>{{ form.similarEnStandardsAnalysis || global.emptyLine }}</span>
         </div>
         <!--  立项标准的领先性与必要性  -->
         <div class="detail-page-part-form-item-large">
           <label>{{ $t('enterpriseStandardLibrary.plan.standardLeadingNecessity') }}</label>
-          <span>{{ form.standardLeadingNecessity }}</span>
+          <span>{{ form.standardLeadingNecessity || global.emptyLine }}</span>
         </div>
         <!--  立项目的及预期效果等  -->
         <div class="detail-page-part-form-item-large">
           <label>{{ $t('enterpriseStandardLibrary.plan.projectExpectedEffects') }}</label>
-          <span>{{ form.projectExpectedEffects }}</span>
+          <span>{{ form.projectExpectedEffects || global.emptyLine }}</span>
         </div>
       </div>
     </div>
@@ -155,6 +158,7 @@ import Vue from 'vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { previewPdf } from '@/utils/previewPdf'
 import { getFileAccessHttpUrl } from '@/api/manage'
+import { getFileInfo } from '../../../../api/api'
 
 const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
 const FILE_TYPE_PDF = 'pdf'
@@ -166,7 +170,8 @@ export default {
     return {
       image: false,
       imageUrl: null,
-      form: {} // 页面字段
+      form: {}, // 页面字段
+      fileField: ['compilationDescription'] // 是文件的字段
     }
   },
   created () {
@@ -181,19 +186,44 @@ export default {
         if (res.success) {
           const data = res.result || {}
           this.form = data
+          this.fileField.forEach(item => {
+            if (this.form[item]) {
+              const fileList = this.form[item].split(',')
+              const fileInfoList = []
+              fileList.forEach(async id => {
+                const fileInfo = await this.getFileInfo(id)
+                if (fileInfo) {
+                  fileInfoList.push(fileInfo)
+                }
+              })
+              this.$set(this.form, item + 'List', fileInfoList)
+            }
+          })
+          console.log(this.form)
         } else {
           this.$message.warn(res.message)
         }
       })
     },
     // 预览编制说明
-    previewCompilation () {
+    handlePreview (file) {
+      if (!file || !file.url) {
+        return
+      }
       // 截取文件后缀名
-      const fileSuffix = this.form.compilationFileName ? this.form.compilationFileName.split('.')[this.form.compilationFileName.split('.').length - 1] : ''
-      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${this.form.compilationDescription}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${this.form.compilationFileName}`
+      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 (FILE_TYPE_IMGS.includes(fileSuffix)) {
-        this.imageUrl = getFileAccessHttpUrl(this.form.compilationDescription)
+      if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
+        this.imageUrl = getFileAccessHttpUrl(file.id)
         // 获取viewer实例
         const viewer = this.$el.querySelector('.image').$viewer
         // 调用show方法进行显示预览图
@@ -202,14 +232,26 @@ export default {
         return
       }
       // pdf预览
-      if (FILE_TYPE_PDF.includes(fileSuffix)) {
-        const url = previewPdf(this.form.compilationDescription)
+      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)
+    },
+    getFileInfo (fileId) {
+      return new Promise(resolve => {
+        let fileInfo
+        getFileInfo({ id: fileId }).then(res => {
+          if (res.success) {
+            fileInfo = res.result
+          }
+        }).finally(() => {
+          resolve(fileInfo)
+        })
+      })
     }
   }
 }