文档管理 优化文件预览功能，使用kkfile在线预览工具

src/components/addDoc/file-table-listTemplate.vue

@@ -27,172 +27,173 @@
 </template>
 
 <script>
-import { filePageAPI } from './api';
-import browse from './browse.vue';
+  import { filePageAPI } from './api';
+  import browse from './browse.vue';
+  import { setFileUrl } from './util.js';
 
-export default {
-  components: { browse },
-  props: {
-    // 上级
-    parentData: {
-      type: Object,
-      default: () => {}
+  export default {
+    components: { browse },
+    props: {
+      // 上级
+      parentData: {
+        type: Object,
+        default: () => {}
+      },
+
+      disabledTableList: {
+        //已选择列表
+        default: () => []
+      }
     },
 
-    disabledTableList: {
-      //已选择列表
-      default: () => []
-    }
-  },
+    data() {
+      return {
+        selection: [],
+        columns: [
+          {
+            width: 45,
+            type: 'selection',
+            columnKey: 'selection',
+            align: 'center',
+            selectable: (row, index) => {
+              return !this.disabledTableList
+                .map((item) => item.id)
+                .includes(row.id);
+            }
+          },
+          {
+            label: '编码',
+            prop: 'code',
+            width: 180,
+            align: 'center',
+            fixed: 'left',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: '文档名称',
+            align: 'center',
+            slot: 'name',
+            showOverflowTooltip: true,
+            minWidth: 200
+          },
+          {
+            prop: 'storagePath',
+            label: '文件名称',
+            align: 'center',
 
-  data() {
-    return {
-      selection: [],
-      columns: [
-        {
-          width: 45,
-          type: 'selection',
-          columnKey: 'selection',
-          align: 'center',
-          selectable: (row, index) => {
-            return !this.disabledTableList
-              .map((item) => item.id)
-              .includes(row.id);
-          }
-        },
-        {
-          label: '编码',
-          prop: 'code',
-          width: 180,
-          align: 'center',
-          fixed: 'left',
-          showOverflowTooltip: true
-        },
-        {
-          prop: 'name',
-          label: '文档名称',
-          align: 'center',
-          slot: 'name',
-          showOverflowTooltip: true,
-          minWidth: 200
-        },
-        {
-          prop: 'storagePath',
-          label: '文件名称',
-          align: 'center',
-
-          showOverflowTooltip: true,
-          minWidth: 200,
-          formatter: (_row, _column, cellValue) => {
-            return cellValue[0]?.name;
-          }
-        },
-        {
-          prop: 'version',
-          label: '版本',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
-        {
-          prop: 'checkOutUserName',
-          label: '检出人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
-        {
-          prop: 'checkOutStatus',
-          label: '检出状态',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100,
-          formatter: (_row, _column, cellValue) => {
-            return cellValue == 1 ? '已检出' : '';
+            showOverflowTooltip: true,
+            minWidth: 200,
+            formatter: (_row, _column, cellValue) => {
+              return cellValue[0]?.name;
+            }
+          },
+          {
+            prop: 'version',
+            label: '版本',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'checkOutUserName',
+            label: '检出人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'checkOutStatus',
+            label: '检出状态',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            formatter: (_row, _column, cellValue) => {
+              return cellValue == 1 ? '已检出' : '';
+            }
+          },
+          {
+            prop: 'checkOutTime',
+            label: '检出时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 160
+          },
+          {
+            prop: 'createUserName',
+            label: '创建人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 160,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            prop: 'updateUserName',
+            label: '修改人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'updateTime',
+            label: '修改时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 160
+          },
+          {
+            prop: 'sizeUnit',
+            label: '文档大小',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 150,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true,
+            fixed: 'right'
           }
-        },
-        {
-          prop: 'checkOutTime',
-          label: '检出时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 160
-        },
-        {
-          prop: 'createUserName',
-          label: '创建人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
-        {
-          prop: 'createTime',
-          label: '创建时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 160,
-          formatter: (_row, _column, cellValue) => {
-            return this.$util.toDateString(cellValue);
-          }
-        },
-        {
-          prop: 'updateUserName',
-          label: '修改人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
-        {
-          prop: 'updateTime',
-          label: '修改时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 160
-        },
-        {
-          prop: 'sizeUnit',
-          label: '文档大小',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
-        {
-          columnKey: 'action',
-          label: '操作',
-          width: 150,
-          align: 'center',
-          resizable: false,
-          slot: 'action',
-          showOverflowTooltip: true,
-          fixed: 'right'
-        }
-      ]
-    };
-  },
-  created() {},
-
-  methods: {
-    /* 表格数据源 */
-    datasource({ page, limit, where, order }) {
-      return filePageAPI({
-        ...where,
-        ...order,
-        pageNum: page,
-        size: limit,
-        directoryId: this.parentData?.id
-      });
-    },
-    /* 刷新表格 */
-    reload(where) {
-      this.$refs.table.reload({ pageNum: 1, where: where });
+        ]
+      };
     },
+    created() {},
 
-    browseOpen(row) {
-      this.$refs.browseRef.open(row);
-    },
-    getTableList() {
-      return JSON.parse(JSON.stringify(this.selection));
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return filePageAPI({
+          ...where,
+          ...order,
+          pageNum: page,
+          size: limit,
+          directoryId: this.parentData?.id
+        });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ pageNum: 1, where: where });
+      },
+
+      browseOpen(row) {
+        window.open(setFileUrl(row));
+      },
+      getTableList() {
+        return JSON.parse(JSON.stringify(this.selection));
+      }
     }
-  }
-};
+  };
 </script>

src/components/addDoc/main.vue

@@ -63,7 +63,7 @@
       custom-class="ele-dialog-form"
       append-to-body
       :maxable="true"
-    :resizable="true"
+      :resizable="true"
     >
       <doc_template
         :disabledTableList="tableList"
@@ -79,140 +79,141 @@
 </template>
 
 <script>
-import doc_template from './doc_template.vue';
-import fileEdit from './file-edit.vue';
-import browse from './browse.vue';
-import { queryIds } from './api';
+  import doc_template from './doc_template.vue';
+  import fileEdit from './file-edit.vue';
+  import browse from './browse.vue';
+  import { queryIds } from './api';
+  import { setFileUrl } from './util.js';
 
-export default {
-  components: { doc_template, fileEdit, browse },
+  export default {
+    components: { doc_template, fileEdit, browse },
 
-  data() {
-    return {
-      fileId: [],
-      fileShow: false,
-      showEditFlag: false,
-      tableList: [],
-      type: 'add',
-      columns: [
-        {
-          label: '编码',
-          prop: 'code',
-          width: 180,
-          align: 'center',
-          showOverflowTooltip: true
-        },
-        {
-          prop: 'name',
-          label: '文档名称',
-          align: 'center',
-          slot: 'name',
-          showOverflowTooltip: true,
-          minWidth: 200
-        },
-        {
-          prop: 'storagePath',
-          label: '文件名称',
-          align: 'center',
+    data() {
+      return {
+        fileId: [],
+        fileShow: false,
+        showEditFlag: false,
+        tableList: [],
+        type: 'add',
+        columns: [
+          {
+            label: '编码',
+            prop: 'code',
+            width: 180,
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: '文档名称',
+            align: 'center',
+            slot: 'name',
+            showOverflowTooltip: true,
+            minWidth: 200
+          },
+          {
+            prop: 'storagePath',
+            label: '文件名称',
+            align: 'center',
 
-          showOverflowTooltip: true,
-          minWidth: 200,
-          formatter: (_row, _column, cellValue) => {
-            return cellValue && cellValue[0]?.name;
-          }
-        },
-        {
-          prop: 'version',
-          label: '版本',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
+            showOverflowTooltip: true,
+            minWidth: 200,
+            formatter: (_row, _column, cellValue) => {
+              return cellValue && cellValue[0]?.name;
+            }
+          },
+          {
+            prop: 'version',
+            label: '版本',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
 
-        {
-          prop: 'createUserName',
-          label: '创建人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
-        {
-          prop: 'createTime',
-          label: '创建时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 160
-        },
+          {
+            prop: 'createUserName',
+            label: '创建人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 160
+          },
 
-        {
-          prop: 'sizeUnit',
-          label: '文档大小',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 100
-        },
+          {
+            prop: 'sizeUnit',
+            label: '文档大小',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
 
-        {
-          columnKey: 'action',
-          label: '操作',
-          width: 200,
-          align: 'center',
-          resizable: false,
-          slot: 'action',
-          showOverflowTooltip: true
-        }
-      ]
-    };
-  },
-  created() {},
-
-  methods: {
-    open(fileId, type) {
-      //查看详情:view 新增:add
-      this.showEditFlag = true;
-      this.fileId = fileId || [];
-      if (type) {
-        this.type = type;
-      }
-      this.init();
-    },
-    fileEditOpen() {
-      this.$refs.fileEditRef.open();
-    },
-    remove(row) {
-      this.tableList = this.tableList.filter((item) => item.code != row.code);
-      this.fileId = this.tableList.map((item) => item.id);
-    },
-    async init() {
-      if (this.fileId.length > 0) {
-        this.tableList = await queryIds({ ids: "'" + this.fileId + "'" });
-      } else {
-        this.tableList = [];
-      }
-    },
-    done(id) {
-      this.fileId.push(...id);
-      this.init();
-    },
-    browseOpen(row) {
-      this.$refs.browseRef.open(row);
-    },
-    addFile() {
-      this.$emit(
-        'success',
-        this.tableList.map((item) => item.id)
-      );
-      this.showEditFlag = false;
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 200,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ]
+      };
     },
-    addTemplate() {
-      let list = this.$refs.doc_templateRef.getTableList();
-      this.fileShow = false;
-      if (list.length == 0) {
-        this.$message.error('请选择一条数据');
-        return;
+    created() {},
+
+    methods: {
+      open(fileId, type) {
+        //查看详情:view 新增:add
+        this.showEditFlag = true;
+        this.fileId = fileId || [];
+        if (type) {
+          this.type = type;
+        }
+        this.init();
+      },
+      fileEditOpen() {
+        this.$refs.fileEditRef.open();
+      },
+      remove(row) {
+        this.tableList = this.tableList.filter((item) => item.code != row.code);
+        this.fileId = this.tableList.map((item) => item.id);
+      },
+      async init() {
+        if (this.fileId.length > 0) {
+          this.tableList = await queryIds({ ids: "'" + this.fileId + "'" });
+        } else {
+          this.tableList = [];
+        }
+      },
+      done(id) {
+        this.fileId.push(...id);
+        this.init();
+      },
+      browseOpen(row) {
+        window.open(setFileUrl(row));
+      },
+      addFile() {
+        this.$emit(
+          'success',
+          this.tableList.map((item) => item.id)
+        );
+        this.showEditFlag = false;
+      },
+      addTemplate() {
+        let list = this.$refs.doc_templateRef.getTableList();
+        this.fileShow = false;
+        if (list.length == 0) {
+          this.$message.error('请选择一条数据');
+          return;
+        }
+        this.tableList.push(...list);
       }
-      this.tableList.push(...list);
     }
-  }
-};
+  };
 </script>

src/components/addDoc/util.js

@@ -1,65 +1,122 @@
 import store from '@/store';
-const userId = store.state.user?.info?.userId
-const userName = store.state.user?.info?.name
+const userId = store.state.user?.info?.userId;
+const userName = store.state.user?.info?.name;
 export function isPower(data = {}, power, selection = []) {
-
-    if (power == 'add' && data.userAuthority.length == 0) { //文件夹默认开放新增权限
-        return true
-    }
-    if (!data?.id && selection.length == 0) {
-        return false
-
-    }
-    if (power == 'checkEnter' && data?.checkOutUserId != userId) { //检入特殊处理
-        return false
-    }
-    if (selection.length > 0) { //多选情况处理
-        let isPower = true
-        let userAuthorityS = []
-        let createUserIdS = selection.map(item => item.createUserId).filter(createUserId => createUserId == userId)
-        if (createUserIdS.length == selection.length || userName == 'admin') {
-            return true
-        }
-        selection.forEach(val => {
-            const powerObj = val.userAuthority.find(item => item.id == userId)
-            if (powerObj) {
-                userAuthorityS.push(powerObj)
-            }
-        })
-
-        if (userAuthorityS.length == 0) {
-            isPower = false
-        }
-        userAuthorityS.forEach(item => {
-            if (item[power] != '1') {
-                isPower = false
-            }
-        })
-        return isPower
+  if (power == 'add' && data.userAuthority.length == 0) {
+    //文件夹默认开放新增权限
+    return true;
+  }
+  if (!data?.id && selection.length == 0) {
+    return false;
+  }
+  if (power == 'checkEnter' && data?.checkOutUserId != userId) {
+    //检入特殊处理
+    return false;
+  }
+  if (selection.length > 0) {
+    //多选情况处理
+    let isPower = true;
+    let userAuthorityS = [];
+    let createUserIdS = selection
+      .map((item) => item.createUserId)
+      .filter((createUserId) => createUserId == userId);
+    if (createUserIdS.length == selection.length || userName == 'admin') {
+      return true;
     }
+    selection.forEach((val) => {
+      const powerObj = val.userAuthority.find((item) => item.id == userId);
+      if (powerObj) {
+        userAuthorityS.push(powerObj);
+      }
+    });
 
-    if (data.createUserId == userId || userName == 'admin') { //创建人/admin所有权限
-        return true
-    }
-    if (!power) {
-        return false
+    if (userAuthorityS.length == 0) {
+      isPower = false;
     }
-    const powerObj = data.userAuthority.find(item => item.id == userId)
-    if (powerObj) {
+    userAuthorityS.forEach((item) => {
+      if (item[power] != '1') {
+        isPower = false;
+      }
+    });
+    return isPower;
+  }
 
-        return powerObj[power] == '1'
-    }
+  if (data.createUserId == userId || userName == 'admin') {
+    //创建人/admin所有权限
+    return true;
+  }
+  if (!power) {
+    return false;
+  }
+  const powerObj = data.userAuthority.find((item) => item.id == userId);
+  if (powerObj) {
+    return powerObj[power] == '1';
+  }
 }
-
-export function setFolderList(data) { //递归过滤文件夹权限
-    data.forEach((item) => {
-        item['disabled'] = !isPower(item, 'add');
-        if (item.sonDirectoryList && item.sonDirectoryList.length > 0) {
-            setFolderList(item.sonDirectoryList);
-        }
-    });
+export function setFileUrl(row) {
+  let file = row.storagePath[0];
+  let fileNames = file.storePath.split('/');
+  let url =
+    window.location.origin +
+    '/api/main/file/getFile?objectName=' +
+    file.storePath +
+    '&fullfilename=' +
+    fileNames[fileNames.length - 1];
+  return '/kkfile/onlinePreview?url=' + btoa(url);
+}
+export function setFolderList(data) {
+  //递归过滤文件夹权限
+  data.forEach((item) => {
+    item['disabled'] = !isPower(item, 'add');
+    if (item.sonDirectoryList && item.sonDirectoryList.length > 0) {
+      setFolderList(item.sonDirectoryList);
+    }
+  });
 }
 //新迪预览工具支持的文件格式
 export function getFileType() {
-    return ['par', 'asm', 'psm', 'dft', 'sldprt', 'sldasm', 'ipt', 'iam', 'prt', '3dxml', 'CATPart', 'CATProduct', 'cgr', 'model', 'exp', 'session', 'x_t', 'xmt_txt', 'x_b', 'xmp_bin', 'xmp_txt', 'sat', 'sab', 'igs', 'iges', 'stp', 'step', 'jt', 'xcgm', '3dm', 'stl', 'obj', '3mf', 'fbx', 'vda', 'dxf', 'dwg', 'pdf', 'idf', 'idb', 'emn', 'brd']
-}
+  return [
+    'par',
+    'asm',
+    'psm',
+    'dft',
+    'sldprt',
+    'sldasm',
+    'ipt',
+    'iam',
+    'prt',
+    '3dxml',
+    'CATPart',
+    'CATProduct',
+    'cgr',
+    'model',
+    'exp',
+    'session',
+    'x_t',
+    'xmt_txt',
+    'x_b',
+    'xmp_bin',
+    'xmp_txt',
+    'sat',
+    'sab',
+    'igs',
+    'iges',
+    'stp',
+    'step',
+    'jt',
+    'xcgm',
+    '3dm',
+    'stl',
+    'obj',
+    '3mf',
+    'fbx',
+    'vda',
+    'dxf',
+    'dwg',
+    'pdf',
+    'idf',
+    'idb',
+    'emn',
+    'brd'
+  ];
+}