数据上传、导出模板列表添加预览功能

src/views/dictionary/attachment/components/ExportTemplate/index.vue

@@ -26,7 +26,7 @@
         <el-form-item>
           <!-- 查询 -->
           <el-button type="primary" icon="el-icon-search" @click="handleSearch">
-            {{ $t("common:button:search") }}
+            {{ $t('common:button:search') }}
           </el-button>
           <!-- 重置 -->
           <el-button
@@ -34,7 +34,7 @@
             icon="el-icon-refresh-left"
             @click="handleReset"
           >
-            {{ $t("common:button:reset") }}
+            {{ $t('common:button:reset') }}
           </el-button>
         </el-form-item>
         <el-button
@@ -44,7 +44,7 @@
           size="small"
           @click="handleAdd"
         >
-          {{ $t("common:button:new") }}
+          {{ $t('common:button:new') }}
         </el-button>
       </el-form>
     </template>
@@ -74,7 +74,7 @@
           <template slot-scope="scope">
             {{
               $fd(
-                "Common_File_BusinessScenario",
+                'Common_File_BusinessScenario',
                 scope.row.BusinessScenarioEnum
               )
             }}
@@ -106,10 +106,10 @@
         >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.IsDeleted" type="danger">{{
-              $fd("YesOrNo", scope.row.IsDeleted)
+              $fd('YesOrNo', scope.row.IsDeleted)
             }}</el-tag>
             <el-tag v-else type="primary">{{
-              $fd("YesOrNo", scope.row.IsDeleted)
+              $fd('YesOrNo', scope.row.IsDeleted)
             }}</el-tag>
           </template>
         </el-table-column>
@@ -122,14 +122,17 @@
 
         <el-table-column :label="$t('common:action:action')">
           <template slot-scope="scope">
+            <el-button type="text" @click="PreviewFile(scope.row)">
+              {{ $t('common:button:preview') }}
+            </el-button>
             <el-button type="text" @click="handleDownload(scope.row)">
-              {{ $t("common:button:download") }}
+              {{ $t('common:button:download') }}
             </el-button>
             <el-button type="text" @click="handleEdit(scope.row)">
-              {{ $t("common:button:edit") }}
+              {{ $t('common:button:edit') }}
             </el-button>
             <el-button type="text" @click="handleDelete(scope.row)">
-              {{ $t("common:button:delete") }}
+              {{ $t('common:button:delete') }}
             </el-button>
           </template>
         </el-table-column>
@@ -166,22 +169,22 @@ import {
   getCommonDocumentList,
   DownloadCommonDoc,
   deleteCommonDocument,
-} from "@/api/dictionary";
-import BaseContainer from "@/components/BaseContainer";
-import Pagination from "@/components/Pagination";
-import TemplateForm from "./TemplateForm";
-const FileTypeEnum = 2;
+} from '@/api/dictionary'
+import BaseContainer from '@/components/BaseContainer'
+import Pagination from '@/components/Pagination'
+import TemplateForm from './TemplateForm'
+const FileTypeEnum = 2
 const searchDataDefault = () => {
   return {
     FileTypeEnum: FileTypeEnum,
     BusinessScenarioEnum: null,
-    Name: "",
+    Name: '',
     PageIndex: 1,
     PageSize: 20,
-  };
-};
+  }
+}
 export default {
-  name: "ExportTemplate",
+  name: 'ExportTemplate',
   components: { BaseContainer, Pagination, TemplateForm },
   data() {
     return {
@@ -189,86 +192,97 @@ export default {
       list: [],
       total: 0,
       currentRow: {},
-      editDialog: { title: "", visible: false },
+      editDialog: { title: '', visible: false },
       loading: false,
-    };
+    }
   },
   mounted() {
-    this.getList();
+    this.getList()
   },
   methods: {
+    PreviewFile(row) {
+      let basePath = window.location.origin
+      if (window.location.protocol !== 'https:') {
+        basePath = 'https://irc.test.extimaging.com'
+      }
+      let data = {
+        name: row.NameCN,
+        path: basePath + row.Path,
+      }
+      this.$emit('PreviewFile', data)
+    },
     handleDelete(row) {
       this.$confirm(
-        this.$t("dictionary:attachment:export:confirm:delete")
+        this.$t('dictionary:attachment:export:confirm:delete')
       ).then(() => {
         deleteCommonDocument(row.Id).then(() => {
-          this.$message.success(this.$t("common:message:deletedSuccessfully"));
-          this.getList();
-        });
-      });
+          this.$message.success(this.$t('common:message:deletedSuccessfully'))
+          this.getList()
+        })
+      })
     },
     getList() {
-      this.loading = true;
+      this.loading = true
       getCommonDocumentList(this.searchData)
         .then((res) => {
-          this.loading = false;
-          this.list = res.Result.CurrentPageData;
-          this.total = res.Result.TotalCount;
+          this.loading = false
+          this.list = res.Result.CurrentPageData
+          this.total = res.Result.TotalCount
         })
         .catch(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     // 新增
     handleAdd() {
-      this.editDialog.title = "Add";
-      this.currentRow = { FileTypeEnum: FileTypeEnum };
-      this.editDialog.visible = true;
+      this.editDialog.title = 'Add'
+      this.currentRow = { FileTypeEnum: FileTypeEnum }
+      this.editDialog.visible = true
     },
     // 下载
     handleDownload(row) {
-      this.loading = true;
+      this.loading = true
       DownloadCommonDoc(row.Code)
         .then((data) => {
-          this.loading = false;
+          this.loading = false
         })
         .catch(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     // 编辑
     handleEdit(row) {
-      this.editDialog.title = "Edit";
-      this.currentRow = { ...row };
-      this.editDialog.visible = true;
+      this.editDialog.title = 'Edit'
+      this.currentRow = { ...row }
+      this.editDialog.visible = true
     },
     handleSearch() {
-      this.searchData.PageIndex = 1;
-      this.getList();
+      this.searchData.PageIndex = 1
+      this.getList()
     },
     handleReset() {
-      this.searchData = searchDataDefault();
-      this.getList();
+      this.searchData = searchDataDefault()
+      this.getList()
     },
     closeDialog() {
-      this.editDialog.visible = false;
+      this.editDialog.visible = false
     },
     // 排序
     handleSortChange(column) {
-      if (column.order === "ascending") {
-        this.searchData.Asc = true;
+      if (column.order === 'ascending') {
+        this.searchData.Asc = true
       } else {
-        this.searchData.Asc = false;
+        this.searchData.Asc = false
       }
-      this.searchData.SortField = column.prop;
-      this.searchData.PageIndex = 1;
-      this.getList();
+      this.searchData.SortField = column.prop
+      this.searchData.PageIndex = 1
+      this.getList()
     },
   },
-};
+}
 </script>
 <style lang="scss" scoped>
-::v-deep .search{
+::v-deep .search {
   display: block;
 }
 </style>

src/views/dictionary/attachment/components/UploadTemplate/index.vue

@@ -118,6 +118,9 @@
 
         <el-table-column label="Action">
           <template slot-scope="scope">
+            <el-button type="text" @click="PreviewFile(scope.row)">
+              {{ $t('common:button:preview') }}
+            </el-button>
             <el-button type="text" @click="handleDownload(scope.row)">
               下载
             </el-button>
@@ -201,6 +204,17 @@ export default {
         })
       })
     },
+    PreviewFile(row) {
+      let basePath = window.location.origin
+      if (window.location.protocol !== 'https:') {
+        basePath = 'https://irc.test.extimaging.com'
+      }
+      let data = {
+        name: row.NameCN,
+        path: basePath + row.Path,
+      }
+      this.$emit('PreviewFile', data)
+    },
     getList() {
       this.loading = true
       getCommonDocumentList(this.searchData)

src/views/dictionary/attachment/index.vue

@@ -7,8 +7,14 @@
         :label="item.label"
         :name="String(item.value)"
       >
-        <UploadTemplate v-if="activeTab === '1' && item.value == activeTab" />
-        <ExportTemplate v-if="activeTab === '2' && item.value == activeTab" />
+        <UploadTemplate
+          v-if="activeTab === '1' && item.value == activeTab"
+          @PreviewFile="PreviewFile"
+        />
+        <ExportTemplate
+          v-if="activeTab === '2' && item.value == activeTab"
+          @PreviewFile="PreviewFile"
+        />
         <EmailTemplate v-if="activeTab === '3' && item.value == activeTab" />
         <CommonTemplate v-if="activeTab === '4' && item.value == activeTab" />
         <SignatureTemplate
@@ -16,6 +22,33 @@
         />
       </el-tab-pane>
     </el-tabs>
+    <!-- 预览 -->
+    <el-dialog
+      v-if="Preview.visible"
+      :visible.sync="Preview.visible"
+      :close-on-click-modal="false"
+      :fullscreen="true"
+      :title="Preview.title"
+      width="600px"
+      custom-class="base-dialog-wrapper"
+    >
+      <vue-office-docx
+        v-if="docxTypes.includes(Preview.type)"
+        :src="Preview.path"
+        style="height: 80vh"
+        @rendered="renderedHandler"
+        @error="errorHandler"
+      />
+      <vue-office-excel
+        v-else-if="excelTypes.includes(Preview.type)"
+        :src="Preview.path"
+        :options="options"
+        style="height: 80vh"
+        @rendered="renderedHandler"
+        @error="errorHandler"
+      />
+      <PreviewFile v-else :file-path="Preview.path" :file-type="Preview.type" />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -24,6 +57,11 @@ import ExportTemplate from './components/ExportTemplate'
 import EmailTemplate from './components/EmailTemplate'
 import CommonTemplate from './components/CommonTemplate'
 import SignatureTemplate from './components/SignatureTemplate'
+import VueOfficeDocx from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import PreviewFile from '@/components/PreviewFile/index'
 export default {
   name: 'Attachment',
   components: {
@@ -32,10 +70,34 @@ export default {
     EmailTemplate,
     CommonTemplate,
     SignatureTemplate,
+    VueOfficeDocx,
+    VueOfficeExcel,
+    PreviewFile,
   },
   data() {
     return {
       activeTab: null,
+      Preview: {
+        visible: false,
+        title: '',
+        type: null,
+        path: null,
+      },
+      excelTypes: ['xlsx', 'xls'],
+      docxTypes: ['docx', 'doc'],
+      options: {
+        xls: false, //预览xlsx文件设为false；预览xls文件设为true
+        minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
+        minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
+        widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
+        heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
+        beforeTransformData: (workbookData) => {
+          return workbookData
+        }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
+        transformData: (workbookData) => {
+          return workbookData
+        }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
+      },
     }
   },
   mounted() {
@@ -51,6 +113,25 @@ export default {
         path: `/dictionary/attachment?tabActive=${tab.name}`,
       })
     },
+    PreviewFile(data) {
+      if (!data.path) return false
+      let type = data.path
+        .substring(data.path.lastIndexOf('.') + 1)
+        .toLocaleLowerCase()
+      this.Preview.path = data.path
+      this.Preview.type = type
+      this.Preview.title = data.name
+      if (this.excelTypes.includes(type)) {
+        this.options.xls = type === 'xls'
+      }
+      this.Preview.visible = true
+    },
+    renderedHandler() {
+      console.log('渲染完成')
+    },
+    errorHandler() {
+      console.log('渲染失败')
+    },
   },
 }
 </script>