统计

package.json

@@ -44,7 +44,11 @@
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "xlsx": "^0.18.5",
-    "xlsx-js-style": "^1.2.0"
+    "xlsx-js-style": "^1.2.0",
+    "@vue-office/docx": "^1.6.2",
+    "@vue-office/excel": "^1.7.11",
+    "@vue-office/pdf": "^2.0.2",
+    "@vue/composition-api": "^1.7.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/components/onlineFile/onlineFile.vue

@@ -29,10 +29,14 @@ export default {
   },
   methods: {
     open(url) {
-      this.codeUri = `${process.env.VUE_APP_PREVIEW}?url=${encodeURIComponent(
+      const resolve = this.$router.resolve({
-        new Buffer(url).toString("base64")
+        path: '/preview',
-      )}`;
+        query: {
-      this.showModal = true;
+          url
+        }
+      })
+      this.codeUri = resolve.href
+      this.showModal = true
     }
   },
   computed: {},

src/router/index.js

@@ -31,6 +31,11 @@ import Layout from '@/layout'
  * all roles can be accessed
  */
 export const constantRoutes = [
+  {
+    path: '/preview',
+    component: () => import('@/views/preview'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login/index'),

src/views/lease/index.vue

@@ -426,8 +426,10 @@ export default {
                 myAsset = row['land'].find(k => k.id === myAssetLink.land_id)
               } else if (myAssetLink.house_id) {
                 myAsset = row['houses'].find(k => k.id === myAssetLink.house_id)
+              } else {
+                myAsset = row
               }
-              data.push([...myRow,myAsset.name,myAssetLink.chuzumianji])
+              data.push([...myRow,myAsset.name||myAssetLink.name,myAssetLink.chuzumianji,myAssetLink.xiangxiweizhi])
             }
             if (headers.length > 0) {
               for (let q = 0;q < headers.length;q ++) {
@@ -455,6 +457,9 @@ export default {
         headers.push({
           title: '出租面积'
         })
+        headers.push({
+          title: '详细位置'
+        })
         data.unshift(headers.map((header) => header.title));
         const wb = XLSX.utils.book_new();
         const ws = XLSX.utils.aoa_to_sheet(data);
@@ -663,12 +668,9 @@ export default {
             )
           );
         });
-      this.table.unshift({
+      if (this.table.find(row => row.prop === 'chuzufang')) {
-        prop: 'department_id',
+        this.table.find(row => row.prop === 'chuzufang').formatter = (row, column, cellValue, index) => row['chuzufang'] ? row['chuzufang'] : row['department']?.name
-        width: 120,
+      }
-        label: '出租方',
-        formatter: (row, column, cellValue, index) => row['department']?.name
-      })
       this.table.unshift( {
         label: "资产",
         prop: 'assets',

src/views/preview/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="online-preview-container" class="container">
+    <template v-if="type === 'docx'">
+      <VueOfficeDocx :src="url" style="height: 100vh;" />
+    </template>
+    <template v-else-if="type === 'xlsx' || type === 'xls'">
+      <VueOfficeExcel :src="url" style="height: 100vh;" />
+    </template>
+    <template v-else-if="type === 'pdf'">
+      <VueOfficePdf :src="url" style="height: 100vh;" />
+    </template>
+    <template v-else-if="['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].indexOf(type) !== -1">
+      <el-image ref="elImage" fit="contain" :preview-src-list="[url]" :src="url" style="width: 100vw;height: 100vh;" alt="" @load="loadImg" />
+    </template>
+    <template v-else>
+      <div>
+        <h4>文件类型暂不支持在线预览，请下载查看</h4>
+        <el-link target="_blank" type="primary" :href="url">点击下载</el-link>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+// 引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+// 引入相关样式
+import '@vue-office/docx/lib/index.css'
+// 引入VueOfficeExcel组件
+import VueOfficeExcel from '@vue-office/excel'
+// 引入相关样式
+import '@vue-office/excel/lib/index.css'
+// 引入VueOfficePdf组件
+import VueOfficePdf from '@vue-office/pdf'
+// import { renderAsync } from 'docx-preview'
+export default {
+  components: {
+    VueOfficeDocx,
+    VueOfficePdf,
+    VueOfficeExcel
+  },
+  data() {
+    return {
+      url: '',
+      type: ''
+    }
+  },
+  computed: {},
+  watch: {
+    '$route.query': {
+      handler(newVal) {
+        this.resolveUrl(newVal.url)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    loadImg() {
+      this.$refs['elImage']?.$el?.children[0].click()
+      this.$nextTick(() => {
+        document.querySelector('.el-image-viewer__close').style.display = 'none'
+        document.querySelector('.el-image__inner').style.display = 'none'
+        document.querySelector('.el-image-viewer__mask').style.pointerEvents = 'none'
+      })
+    },
+    async resolveUrl(url) {
+      if (url) {
+        try {
+          this.url = window.atob(window.decodeURIComponent(this.$route.query.url ?? ''))
+        } catch (err) {
+          this.url = window.decodeURIComponent(this.$route.query.url ?? '')
+        }
+        this.type = this.$route.query.type || this.url.split('.').at(-1)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: 100vh;
+  width: 100vw;
+}
+</style>