添加excel预览

src/components/PreviewExcel/index.vue

+<template>
+  <div id="preview-excel"></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import LuckyExcel from 'luckyexcel'
+import { getOrderFileById } from '@/api/order'
+import {
+  cellRightClickConfig,
+  sheetRightClickConfig,
+  showsheetbarConfig,
+  showstatisticBarConfig
+} from '@/constants/excelConfig'
+import { useRoute } from 'vue-router';
+import { isFunction } from '@/utils/is';
+
+const props = defineProps(['fileId'])
+const luckysheet = (window as any).luckysheet
+const loading = ref(false)
+const route = useRoute()
+
+/**生成excel */
+const generateExcel = (path: string) => {
+  LuckyExcel.transformExcelToLuckyByUrl(
+    '/api/sys/static/' + path,
+    new Date().getTime() + '.xlsx',
+    async (exportJson: any) => {
+      luckysheet.create({
+        container: 'preview-excel', //luckysheet is the container id
+        showinfobar: false,
+        showtoolbar: false,
+        showsheetbar: false,
+        showsheetbarConfig,
+        cellRightClickConfig,
+        sheetRightClickConfig,
+        showstatisticBarConfig,
+        data: exportJson.sheets,
+        title: exportJson.info.name,
+        userInfo: exportJson.info.name.creator
+      })
+    }
+  )
+}
+
+/**获取文件路径 */
+const getFilePath = async () => {
+  try {
+    loading.value = true
+    const { data } = await getOrderFileById((props.fileId || route.query.fileId) as string)
+    if (data.code == 200) {
+      generateExcel(data.result.mergeFilePath)
+    }
+  } catch {}
+  loading.value = false
+}
+
+watch(
+  () => props.fileId,
+  (val) => {
+    if (val) {
+      getFilePath()
+    }
+  }
+)
+
+onMounted(() => {
+  // luckysheet.create({
+  //   container: 'preview-excel'
+  // })
+
+  getFilePath()
+})
+onUnmounted(() => {
+  isFunction((window as any)?.luckysheet?.destroy) && luckysheet.destroy()
+})
+</script>
+<style lang="scss" scoped>
+#preview-excel {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/router/index.ts

@@ -183,6 +183,14 @@ export const routes = [
       title: '订单上传'
     },
     component: () => import('@/views/comment-excel/CommentUpload.vue')
+  },
+  {
+    path: '/preview-excel',
+    name: 'PreviewExcel',
+    meta: {
+      title: '预览'
+    },
+    component: () => import('@/views/order/preview/index.vue')
   }
 ]
 

src/views/order/orderChange/OrderChange.vue

@@ -37,7 +37,7 @@
         <vxe-column type="checkbox" width="50"></vxe-column>
         <vxe-column field="fileId_dictText" title="文件名称">
           <template #default="{ row }">
-            <el-link target="_blank" :href="'/api/sys/static/' + row.fileId_dictText">{{
+            <el-link target="_blank" :href="'/preview-excel?fileId=' + row.fileId">{{
               row.fileId_dictText
             }}</el-link>
           </template>
@@ -472,7 +472,7 @@ const saveOrderField = async () => {
     })
   }
 
-  await saveConfExcelFileOrderPage(params).then(({ data }) => {
+  saveConfExcelFileOrderPage(params).then(({ data }) => {
     if (data.code == 200) {
       ElMessage.success(data.message || '保存成功！')
     } else {

src/views/order/orderList/OrderList.vue

@@ -33,19 +33,29 @@
         <vxe-column type="checkbox" width="50"></vxe-column>
         <vxe-column field="customerId_dictText" title="客户名称" width="120"></vxe-column>
         <vxe-column title="原始文件地址">
-          <template #default="{row}">
-            <el-link target="_blank" :href="'/api/sys/static/'+ row.filePath">{{ row.filePath }}</el-link>
+          <template #default="{ row }">
+            <el-link target="_blank" :href="'/api/sys/static/' + row.filePath">{{
+              row.filePath
+            }}</el-link>
           </template>
         </vxe-column>
         <vxe-column title="标注文件地址">
-          <template #default="{row}">
-            <el-link target="_blank" :href="'/api/sys/static/'+ row.mergeFilePath">{{ row.mergeFilePath }}</el-link>
+          <template #default="{ row }">
+            <el-link target="_blank" :href="'/preview-excel?fileId=' + row.orderFileId">{{
+              row.mergeFilePath
+            }}</el-link>
           </template>
         </vxe-column>
         <vxe-column field="createTime" title="创建时间" width="180"></vxe-column>
         <vxe-column field="action" title="操作" width="80">
           <template #default="{ row }">
-            <el-link type="primary" style="font-size: 12px;" :href="'/comment-excel?fileId=' + row.orderFileId" target="_blank">查看</el-link>
+            <el-link
+              type="primary"
+              style="font-size: 12px"
+              :href="'/comment-excel?fileId=' + row.orderFileId"
+              target="_blank"
+              >查看</el-link
+            >
           </template>
         </vxe-column>
       </vxe-table>
@@ -98,23 +108,6 @@ const removeRows = async () => {
   }
 }
 
-const toDetail = (row: any) => {
-  router.push({
-    path: '/online-excel',
-    query: {
-      fileId: row.orderFileId
-    }
-  })
-}
-
-const toDetail2 = (row: any) => {
-  router.push({
-    path: '/comment-excel',
-    query: {
-      fileId: row.orderFileId
-    }
-  })
-}
 const onReset = () => {
   Object.assign(formState, {
     filePath: '',

src/views/order/preview/index.vue

+<template>
+  <PreviewExcel />
+</template>
+
+<script lang='ts' setup>
+import PreviewExcel from '@/components/PreviewExcel/index.vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>