[Wip 0000] 文件共享中心于CAD viewer集成

src/components/CADViewer/index.ts

@@ -1,4 +1,5 @@
 import CADViewer from './src/CADViewer.vue';
+import useCADViewer from './src/hooks/useCADViewer';
 
-export { CADViewer };
+export { CADViewer, useCADViewer };
 export * from './src/types';

src/components/CADViewer/src/hooks/useCADViewer.ts

@@ -0,0 +1,45 @@
+import { CAD_VIEWER_IFRAME_ID } from '../viewer.data';
+import { message } from 'ant-design-vue';
+import { transformCadFile } from '../viewer.api';
+import { SupportedOperationName } from '../types';
+
+export default function useCADViewer() {
+  /** 向CADViewer发送指令 */
+  function postMessage(cmd: SupportedOperationName, param?: unknown) {
+    const dom = document.getElementById(CAD_VIEWER_IFRAME_ID) as any;
+    if (!dom) message.info('CAD预览器尚未准备好，请稍后再试');
+    dom.contentWindow.postMessage(
+      {
+        cmd: cmd,
+        type: 'sendStringToExecute',
+        param: param,
+      },
+      '*'
+    );
+  }
+
+  /** 调用 api 转换文件格式，并返回转换后文件的网络地址 */
+  function processFile(file: Blob) {
+    const data = new FormData();
+    data.append('file', file);
+    const close = message.loading('正在转换文件格式，请稍等', 0);
+    return transformCadFile(data)
+      .then((result) => {
+        const filepath = result.replace('/data/file/', '');
+        if (import.meta.env.PROD) {
+          return window.location.origin + `/sys/common/static/${filepath}`.replace(/\/+/g, '/');
+        } else {
+          return import.meta.env.VITE_GLOB_DOMAIN_URL + `/sys/common/static/${filepath}`.replace(/\/+/g, '/');
+        }
+      })
+      .finally(() => {
+        close();
+      });
+  }
+  return {
+    /** 向CADViewer发送指令 */
+    postMessage,
+    /** 调用 api 转换文件格式，并返回转换后文件的网络地址 */
+    processFile,
+  };
+}

src/components/CADViewer/src/operationMap.ts

@@ -1,11 +1,10 @@
 import type { SupportedOperation, SupportedOperationName } from './types';
 import OpenFile from './components/OpenFile.vue';
-import { CAD_VIEWER_IFRAME_ID } from './viewer.data';
-import { message } from 'ant-design-vue';
 import { downloadByUrl } from '/@/utils/file/download';
-import { transformCadFile } from './viewer.api';
+import useCADViewer from './hooks/useCADViewer';
 
 // MxFun.sendStringToExecute('')
+const { processFile, postMessage } = useCADViewer();
 
 /** CAD Viewer 所支持的全部操作映射表 */
 const operationMap = new Map<SupportedOperationName, SupportedOperation>();
@@ -50,36 +49,4 @@ export function del(opName: SupportedOperationName) {
   operationMap.delete(opName);
 }
 
-function postMessage(cmd: string, param?: unknown) {
-  const dom = document.getElementById(CAD_VIEWER_IFRAME_ID) as any;
-  if (!dom) message.info('CAD预览器尚未准备好，请稍后再试');
-  dom.contentWindow.postMessage(
-    {
-      cmd: cmd,
-      type: 'sendStringToExecute',
-      param: param,
-    },
-    '*'
-  );
-}
-
-/** 调用 api 转换文件格式，并返回转换后文件的网络地址 */
-function processFile(file: Blob) {
-  const data = new FormData();
-  data.append('file', file);
-  const close = message.loading('正在转换文件格式，请稍等', 0);
-  return transformCadFile(data)
-    .then((result) => {
-      const filepath = result.replace('/data/file/', '');
-      if (import.meta.env.PROD) {
-        return window.location.origin + `/sys/common/static/${filepath}`.replace(/\/+/g, '/');
-      } else {
-        return import.meta.env.VITE_GLOB_DOMAIN_URL + `/sys/common/static/${filepath}`.replace(/\/+/g, '/');
-      }
-    })
-    .finally(() => {
-      close();
-    });
-}
-
 export { operationMap };

src/views/vent/performance/comment/CADModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="文档管理"
+    width="900px"
+    :defaultFullscreen="true"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+    destroyOnClose
+  >
+    <!-- <button @click="mxcadmode = !mxcadmode">Switch Previewer</button> -->
+    <CADViewer v-if="mxcadmode" class="w-100%" :height="650" />
+    <Iframe v-else class="w-100% h-100%" :frame-src="iframerc" />
+    <!-- <iframe id="ext_cad_viewer" :src="iframerc"></iframe> -->
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { onMounted } from 'vue';
+  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import Iframe from '/@/views/sys/iframe/index.vue';
+
+  let props = defineProps({
+    fileType: {
+      type: String,
+      default: '',
+    },
+    editID: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const { sysOrgCode } = useGlobSetting();
+  // 不是布尔台的使用 mxcad 模式，是布尔台的使用 kkviewer 模式
+  const mxcadmode = ref(sysOrgCode === 'sdmtjtbetmk');
+
+  // CAD预览器的 DEMO 01 相关代码
+  const iframerc = ref('');
+
+  // CAD 预览器的 DEMO 02 相关代码
+  const { processFile, postMessage } = useCADViewer();
+
+  //表单赋值
+  const [registerModal, { setModalProps }] = useModalInner(async ({ record, getBlob }) => {
+    //重置表单
+    setModalProps({ confirmLoading: false });
+
+    if (mxcadmode.value) {
+      getBlob().then((res: Blob) => {
+        // CAD 预览器的 DEMO 02
+        processFile(new File([res], record.fileName)).then((path) => {
+          postMessage('MKY_Open_Mxweb', path);
+        });
+      });
+    } else {
+      // CAD 预览器的 DEMO 01 @link https://kkfileview.keking.cn/zh-cn/docs/usage.html
+      const baseUrl = import.meta.env.PROD ? window.location.origin : import.meta.env.VITE_GLOB_DOMAIN_URL;
+      const url = `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}&fullfilename=preview${record.fileSuffix}`;
+      iframerc.value = 'http://182.92.126.35:8012/onlinePreview?url=' + encodeURIComponent(window.btoa(url));
+    }
+  });
+
+  onMounted(() => {});
+</script>
+
+<style scoped lang="less">
+  ::v-deep .suffix {
+    height: 32px;
+    line-height: 32px;
+    margin-left: 5px;
+    color: #fff;
+  }
+</style>

src/views/vent/performance/comment/KKViewerModal.vue

@@ -0,0 +1,85 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="文档管理"
+    width="900px"
+    :defaultFullscreen="true"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+    destroyOnClose
+  >
+    <iframe id="kk_file_viewer" class="w-100% h-100%" :src="src"></iframe>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { unref, reactive, computed, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { onMounted } from 'vue';
+  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
+  import { useUserStore } from '/@/store/modules/user';
+  import { defHttp } from '/@/utils/http/axios';
+
+  let props = defineProps({
+    fileType: {
+      type: String,
+      default: '',
+    },
+    editID: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const src = ref('');
+
+  //表单赋值
+  const [registerModal, { setModalProps }] = useModalInner(async ({ record, getBlob }) => {
+    //重置表单
+    setModalProps({ confirmLoading: false });
+    console.log('debug', record);
+    const baseUrl = import.meta.env.PROD ? window.location.origin : import.meta.env.VITE_GLOB_DOMAIN_URL;
+    const url = `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}&fullfilename=test.dwg`;
+    // const url = URL.createObjectURL(new File([res], 'test.dwg')) + '&fullfilename=test.dwg';
+    // const url = URL.createObjectURL(res) + '&fullfilename=test.dwg';
+    console.log('debug getBlob: url is ', url);
+    window.open('http://182.92.126.35:8012/onlinePreview?url=' + encodeURIComponent(window.btoa(url)));
+    return;
+    getBlob().then((res: Blob) => {
+      console.log('debug getBlob: blob is ', res);
+      // CAD 预览器的 DEMO 01 @link https://kkfileview.keking.cn/zh-cn/docs/usage.html
+      // const url = 'http://localhost:3100/modelreq/ventanaly-sharefile/fileServer/download&fullfilename=test.dwg';
+      const baseUrl = import.meta.env.PROD ? window.location.origin : import.meta.env.VITE_GLOB_DOMAIN_URL;
+      defHttp.get({
+        url: `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}`,
+      });
+      const url = `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}&fullfilename=test.dwg`;
+      // const url = URL.createObjectURL(new File([res], 'test.dwg')) + '&fullfilename=test.dwg';
+      // const url = URL.createObjectURL(res) + '&fullfilename=test.dwg';
+      console.log('debug getBlob: url is ', url);
+      window.open('http://182.92.126.35:8012/onlinePreview?url=' + encodeURIComponent(window.btoa(url)));
+      // baseFileUrl.value = ;
+
+      // CAD 预览器的 DEMO 02
+      // processFile(new File([res], 'test.dwg')).then((path) => {
+      //   console.log('debug processFile', path);
+      //   postMessage('MKY_Open_Mxweb', path);
+      // });
+    });
+    // Object.assign(record, data.record);
+  });
+
+  onMounted(() => {
+    console.log('debug mounted');
+  });
+</script>
+
+<style scoped lang="less">
+  ::v-deep .suffix {
+    height: 32px;
+    line-height: 32px;
+    margin-left: 5px;
+    color: #fff;
+  }
+</style>

src/views/vent/performance/comment/NormalTable.vue

@@ -13,7 +13,8 @@
         <slot name="filterCell" v-bind="{ column, record }"></slot>
       </template>
     </BasicTable>
-    <DeviceModal :editID="editID" :fileType="fileType" @register="registerModal" />
+    <DeviceModal :editID="editID" :fileType="fileType" @register="registerDeviceModal" />
+    <CADModal @register="registerCADModal" />
   </div>
 </template>
 
@@ -23,6 +24,7 @@
   import { BasicTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import DeviceModal from './DeviceModal.vue';
+  import CADModal from './CADModal.vue';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { useListPage } from '/@/hooks/system/useListPage';
 
@@ -85,10 +87,10 @@
   let editID = ref(0); //文件ID
 
   const isUpdate = ref(false);
-  const record = reactive({});
+  const record = reactive<Record<string, any>>({});
 
   provide('formData', record);
-  const [registerModal, { openModal, closeModal }] = useModal();
+  const [registerDeviceModal, { openModal, closeModal }] = useModal();
 
   const columnList = getTableHeaderColumns(props.columnsType);
   console.log('aaa', columnList);
@@ -148,9 +150,19 @@
     editID.value = record.id;
     console.log(fileType, '文件格式');
     console.log(editID.value, '编辑文件ID');
-    openModal(true, {
-      record,
-    });
+
+    // 根据文件后缀名打开不同的模态框
+    if (fileType.value.match(/[.dwg|.mxcad]/)) {
+      openCADModal(true, {
+        record,
+        // Bad Design 但是为了效率先这样写吧
+        getBlob: () => props.downLoad({ id: record.id }),
+      });
+    } else {
+      openModal(true, {
+        record,
+      });
+    }
   }
 
   /**
@@ -246,6 +258,9 @@
     ];
   }
 
+  // CAD预览相关的逻辑
+  const [registerCADModal, { openModal: openCADModal }] = useModal();
+
   defineExpose({
     doRequest,
   });

src/views/vent/performance/fileDetail/index.vue

@@ -4,8 +4,15 @@
     <div class="content">
       <div class="left-box">
         <!-- 左侧树菜单 -->
-        <fileSystem :selected="selected" :list="listArr" :draggable="true" @delete-node="onDeltet" @on-click="onClick"
-          @change-name="onChangeName" @addNode="onAddNode">
+        <fileSystem
+          :selected="selected"
+          :list="listArr"
+          :draggable="true"
+          @delete-node="onDeltet"
+          @on-click="onClick"
+          @change-name="onChangeName"
+          @addNode="onAddNode"
+        >
           <template #icon="{ item }">
             <template v-if="item.isFolder">
               <SvgIcon v-if="item.expanded" size="18" name="file-open" />
@@ -16,8 +23,7 @@
           <template #operation="{ type }">
             <i class="iconfont icon-xinzeng" v-if="type == 'addDocument'"></i>
             <i class="iconfont icon-bianji" v-if="type == 'Editable'"></i>
-            <a-popconfirm v-if="type == 'deleteNode'" title="是否确认删除!" ok-text="确定" cancel-text="取消"
-              @confirm="confirmDel">
+            <a-popconfirm v-if="type == 'deleteNode'" title="是否确认删除!" ok-text="确定" cancel-text="取消" @confirm="confirmDel">
               <i class="iconfont icon-guanbi"></i>
             </a-popconfirm>
           </template>
@@ -32,9 +38,18 @@
         <div class="list">
           <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
             <a-tab-pane key="1" tab="全部">
-              <NormalTable v-if="alive" :selfParam="selfParam" :searchParam="fileName" :nodeParam="nodeParam"
-                :columns="columns" :list="getTree" :deleteById="deleteById" :downLoad="downLoad"
-                designScope="file-detail" title="文件详情" />
+              <NormalTable
+                v-if="alive"
+                :selfParam="selfParam"
+                :searchParam="fileName"
+                :nodeParam="nodeParam"
+                :columns="columns"
+                :list="getTree"
+                :deleteById="deleteById"
+                :downLoad="downLoad"
+                designScope="file-detail"
+                title="文件详情"
+              />
             </a-tab-pane>
             <a-tab-pane key="2" tab="待审批">
               <approvalPend></approvalPend>
@@ -59,8 +74,7 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item label="文件类型">
-          <JDictSelectTag v-model:value="formState.fileType" placeholder="请选择文件类型" dictCode="file_type"
-            style="width: 260px" />
+          <JDictSelectTag v-model:value="formState.fileType" placeholder="请选择文件类型" dictCode="file_type" style="width: 260px" />
         </a-form-item>
         <a-form-item label="文件上传">
           <a-upload :before-upload="beforeUpload" @remove="handleRemove" :multiple="false" :file-list="fileList">
@@ -72,387 +86,386 @@
   </div>
 </template>
 <script lang="ts" setup name="system-user">
-import customHeader from '/@/components/vent/customHeader.vue';
-import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-import fileSystem from './commen/fileSystem.vue';
-import treeIcon from './commen/Icon/treeIcon.vue';
-import NormalTable from '../comment/NormalTable.vue';
-import approvalPend from '../approvalPend/index.vue'
-import approved from '../approved/index.vue'
-import endEd from '../endEd/index.vue'
-import { useRouter } from 'vue-router';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { SvgIcon } from '/@/components/Icon';
-import { ref, onMounted, reactive, nextTick, watch } from 'vue';
-import { columns } from './fileDetail.data';
-import { getTree, createFile, editMenu, delMenu, uploadApi, downLoad, deleteById } from './fileDetail.api';
-
-
-let activeKey = ref('1');
-let selfParam = reactive({
-  //各矿参数
-  sysOrgCode: '',
-  bpmStatus: null,
-  flag: false,
-});
-let router = useRouter(); //路由
-const { createMessage } = useMessage();
-let fileName = ref('');
-let fileList = reactive<any[]>([]); //上传文件列表
-// let uploadParam = reactive({}); //上传文件参数
-let nodeParam = reactive({}); //点击树节点时传递的参数
-let alive = ref(true); //点击树节点刷新表格数据
-let visible = ref(false); //控制上传弹窗的显示
-let formState = reactive({
-  //上传文件类型，是否审批
-  isApprove: null,
-  fileType: '',
-});
-
-//lxh 当前选中树节点
-let selected = reactive<any>({
-  id: null,
-  pid: null,
-  title: '',
-  isFolder: false,
-});
-let flag = ref('');
-//左侧菜单列表
-let listArr = reactive<any[]>([]);
-//获取要删除的节点数据
-let delNode = reactive({});
-
-//上传文件
-let openModal = (val) => {
-  formState.isApprove = null;
-  formState.fileType = '';
-  fileList.length = 0;
-  visible.value = val;
-};
-
-//tabs选项切换
-let tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-  if (activeKeyVal == 1) {
-    // nextTick(() => {
-    //   MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-    // });
-  }
-};
-
-//文件审批状态切换
-let changeRadio = (val) => {
-  formState.isApprove = val.target.value;
-};
-//开始上传
-let handleOk = () => {
-  if (formState.isApprove === null) {
-    createMessage.warning('请选择文件审批状态！');
-  } else {
-    const formData = new FormData();
-    formData.append('file', fileList[0]);
-    formData.append('parentId', selected.id);
-    formData.append('isApprove', formState.isApprove);
-    formData.append('fileType', formState.fileType);
-    uploadApi(formData).then((res) => {
-      console.log(res, '上传返回');
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import fileSystem from './commen/fileSystem.vue';
+  import treeIcon from './commen/Icon/treeIcon.vue';
+  import NormalTable from '../comment/NormalTable.vue';
+  import approvalPend from '../approvalPend/index.vue';
+  import approved from '../approved/index.vue';
+  import endEd from '../endEd/index.vue';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { SvgIcon } from '/@/components/Icon';
+  import { ref, onMounted, reactive, nextTick, watch } from 'vue';
+  import { columns } from './fileDetail.data';
+  import { getTree, createFile, editMenu, delMenu, uploadApi, downLoad, deleteById } from './fileDetail.api';
+
+  let activeKey = ref('1');
+  let selfParam = reactive({
+    //各矿参数
+    sysOrgCode: '',
+    bpmStatus: null,
+    flag: false,
+  });
+  let router = useRouter(); //路由
+  const { createMessage } = useMessage();
+  let fileName = ref('');
+  let fileList = reactive<any[]>([]); //上传文件列表
+  // let uploadParam = reactive({}); //上传文件参数
+  let nodeParam = reactive({}); //点击树节点时传递的参数
+  let alive = ref(true); //点击树节点刷新表格数据
+  let visible = ref(false); //控制上传弹窗的显示
+  let formState = reactive({
+    //上传文件类型，是否审批
+    isApprove: null,
+    fileType: '',
+  });
+
+  //lxh 当前选中树节点
+  let selected = reactive<any>({
+    id: null,
+    pid: null,
+    title: '',
+    isFolder: false,
+  });
+  let flag = ref('');
+  //左侧菜单列表
+  let listArr = reactive<any[]>([]);
+  //获取要删除的节点数据
+  let delNode = reactive({});
+
+  //上传文件
+  let openModal = (val) => {
+    formState.isApprove = null;
+    formState.fileType = '';
+    fileList.length = 0;
+    visible.value = val;
+  };
+
+  //tabs选项切换
+  let tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    if (activeKeyVal == 1) {
+      // nextTick(() => {
+      //   MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      // });
+    }
+  };
+
+  //文件审批状态切换
+  let changeRadio = (val) => {
+    formState.isApprove = val.target.value;
+  };
+  //开始上传
+  let handleOk = () => {
+    if (formState.isApprove === null) {
+      createMessage.warning('请选择文件审批状态！');
+    } else {
+      const formData = new FormData();
+      formData.append('file', fileList[0]);
+      formData.append('parentId', selected.id);
+      formData.append('isApprove', formState.isApprove);
+      formData.append('fileType', formState.fileType);
+      uploadApi(formData).then((res) => {
+        console.log(res, '上传返回');
+        alive.value = false;
+        nextTick(() => {
+          alive.value = true;
+          visible.value = false;
+        });
+      });
+    }
+  };
+  //取消上传
+  let handleCancel = () => {
+    visible.value = false;
+  };
+  let list2trees = (data) => {
+    // 删除 所有 children,以防止多次调用
+    data.forEach(function (item) {
+      delete item.children;
+    });
+    // 将数据存储为 以 id 为 KEY 的 map 索引数据列
+    let map = {};
+    data.forEach(function (item) {
+      map[item.id] = item;
+    });
+    var val = [];
+    data.forEach(function (item) {
+      item.isFolder = true;
+      item.title = item.fileName;
+      item.pid = item.parentId;
+      // 以当前遍历项，的pid,去map对象中找到索引的id
+      var parent = map[item.pid];
+      // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
+      if (parent) {
+        (parent.children || (parent.children = [])).push(item);
+      } else {
+        //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
+        val.push(item);
+      }
+    });
+    return val;
+  };
+
+  let getTypeTableList = async () => {
+    let parentId = nodeParam.id || '';
+    let selectFlag = nodeParam.id ? false : true;
+    let likeFileName = fileName.value || '';
+    let bpmStatus = selfParam.bpmStatus || '';
+    let sysOrgCode = selfParam.sysOrgCode || '';
+    let res = await getTree({ parentId: parentId, selectFlag: selectFlag, likeFileName: likeFileName, bpmStatus: bpmStatus, sysOrgCode: sysOrgCode });
+    console.log(res, 'tableList--------------------');
+  };
+
+  //获取左侧菜单树数据
+  let getTreeList = async () => {
+    listArr.length = 0;
+    let data = await getTree({ parentId: '' });
+    let datas = data.records.filter((v) => v.fileType == null);
+    let list = list2trees(datas);
+    listArr.push(...list);
+    console.log(listArr, '树节点数据');
+    selected.id = listArr[0].id;
+    selected.pid = listArr[0].pid;
+    selected.title = listArr[0].title;
+    selected.isFolder = listArr[0].isFolder;
+  };
+
+  //点击目录
+  const onClick = (node) => {
+    selected = node;
+    if (flag.value != node.title) {
       alive.value = false;
       nextTick(() => {
         alive.value = true;
-        visible.value = false;
+        nodeParam = node;
+        flag.value = node.title;
       });
+    }
+  };
+  //添加文件
+  const onAddNode = async (node) => {
+    let data = await createFile({ fileName: node.newName, type: 'FOL', parentId: node.id });
+    console.log(data, '新增文件返回');
+    getTreeList();
+  };
+
+  //  修改名字
+  const onChangeName = (node) => {
+    editMenu({
+      id: node.id,
+      fileName: node.newName,
+      parentId: node.pid,
+    }).then((res) => {
+      getTreeList();
     });
-  }
-};
-//取消上传
-let handleCancel = () => {
-  visible.value = false;
-};
-let list2trees = (data) => {
-  // 删除 所有 children,以防止多次调用
-  data.forEach(function (item) {
-    delete item.children;
-  });
-  // 将数据存储为 以 id 为 KEY 的 map 索引数据列
-  let map = {};
-  data.forEach(function (item) {
-    map[item.id] = item;
-  });
-  var val = [];
-  data.forEach(function (item) {
-    item.isFolder = true;
-    item.title = item.fileName;
-    item.pid = item.parentId;
-    // 以当前遍历项，的pid,去map对象中找到索引的id
-    var parent = map[item.pid];
-    // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
-    if (parent) {
-      (parent.children || (parent.children = [])).push(item);
+  };
+  // 删除
+  let onDeltet = (node) => {
+    delNode = { ...node };
+  };
+  //确定删除
+  let confirmDel = () => {
+    if (delNode.pid == 'root') {
+      createMessage.warning('根节点不能被删除!');
+    } else if (delNode.children) {
+      createMessage.warning('该节点无法被删除,请先删除该节点下的子节点!');
     } else {
-      //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
-      val.push(item);
+      delMenu({ id: delNode.id }).then((res) => {
+        console.log(res, '删除文件');
+        getTreeList();
+      });
     }
-  });
-  return val;
-};
-
-let getTypeTableList=async ()=>{
-  let parentId=nodeParam.id || ''
-  let selectFlag=nodeParam.id ? false : true
-  let likeFileName=fileName.value || ''
-  let bpmStatus=selfParam.bpmStatus|| ''
-  let sysOrgCode=selfParam.sysOrgCode|| '' 
-  let res=await getTree({parentId:parentId,selectFlag:selectFlag,likeFileName:likeFileName,bpmStatus:bpmStatus,sysOrgCode:sysOrgCode})
-  console.log(res,'tableList--------------------')
-}
-
-//获取左侧菜单树数据
-let getTreeList = async () => {
-  listArr.length = 0;
-  let data = await getTree({ parentId: '' });
-  let datas = data.records.filter((v) => v.fileType == null);
-  let list = list2trees(datas);
-  listArr.push(...list);
-  console.log(listArr, '树节点数据');
-  selected.id = listArr[0].id;
-  selected.pid = listArr[0].pid;
-  selected.title = listArr[0].title;
-  selected.isFolder = listArr[0].isFolder;
-};
-
-//点击目录
-const onClick = (node) => {
-  selected = node;
-  if (flag.value != node.title) {
+  };
+
+  //查询列表
+  let onSearch = () => {
     alive.value = false;
     nextTick(() => {
       alive.value = true;
-      nodeParam = node;
-      flag.value = node.title;
     });
-  }
-};
-//添加文件
-const onAddNode = async (node) => {
-  let data = await createFile({ fileName: node.newName, type: 'FOL', parentId: node.id });
-  console.log(data, '新增文件返回');
-  getTreeList();
-};
-
-//  修改名字
-const onChangeName = (node) => {
-  editMenu({
-    id: node.id,
-    fileName: node.newName,
-    parentId: node.pid,
-  }).then((res) => {
+  };
+  //上传文件
+  let beforeUpload = (file) => {
+    console.log(file, '选中文件');
+    fileList.length = 0;
+    let index = file.name.indexOf('.');
+    let name = file.name.substring(index + 1);
+    if (name == 'png' || name == 'jpg' || name == 'gif' || name == 'psd' || name == 'webp') {
+      createMessage.warning('禁止上传图片类型的文件!');
+    } else {
+      fileList.push(file);
+    }
+  };
+  // 文件移除
+  let handleRemove = (file) => {
+    const index = fileList.indexOf(file);
+    const newFileList = fileList.slice();
+    newFileList.splice(index, 1);
+    fileList.length = 0;
+  };
+  watch(
+    () => router.currentRoute.value,
+    (val) => {
+      console.log('各矿传参', val);
+      selfParam.bpmStatus = val.query.bpmStatus;
+      selfParam.sysOrgCode = val.query.sysOrgCode;
+      selfParam.flag = val.query.flag;
+    },
+    { immediate: true }
+  );
+  onMounted(() => {
     getTreeList();
+    getTypeTableList();
   });
-};
-// 删除
-let onDeltet = (node) => {
-  delNode = { ...node };
-};
-//确定删除
-let confirmDel = () => {
-  if (delNode.pid == 'root') {
-    createMessage.warning('根节点不能被删除!');
-  } else if (delNode.children) {
-    createMessage.warning('该节点无法被删除,请先删除该节点下的子节点!');
-  } else {
-    delMenu({ id: delNode.id }).then((res) => {
-      console.log(res, '删除文件');
-      getTreeList();
-    });
-  }
-};
-
-//查询列表
-let onSearch = () => {
-  alive.value = false;
-  nextTick(() => {
-    alive.value = true;
-  });
-};
-//上传文件
-let beforeUpload = (file) => {
-  console.log(file, '选中文件');
-  fileList.length = 0;
-  let index = file.name.indexOf('.');
-  let name = file.name.substring(index + 1);
-  if (name == 'png' || name == 'jpg' || name == 'gif' || name == 'psd' || name == 'webp') {
-    createMessage.warning('禁止上传图片类型的文件!');
-  } else {
-    fileList.push(file);
-  }
-};
-// 文件移除
-let handleRemove = (file) => {
-  const index = fileList.indexOf(file);
-  const newFileList = fileList.slice();
-  newFileList.splice(index, 1);
-  fileList.length = 0;
-};
-watch(
-  () => router.currentRoute.value,
-  (val) => {
-    console.log('各矿传参', val);
-    selfParam.bpmStatus = val.query.bpmStatus;
-    selfParam.sysOrgCode = val.query.sysOrgCode;
-    selfParam.flag = val.query.flag;
-  },
-  { immediate: true }
-);
-onMounted(() => {
-  getTreeList();
-  getTypeTableList()
-});
 </script>
 
 <style lang="less" scoped>
-@ventSpace: zxm;
-
-.file-details {
-  width: calc(100% - 10px);
-  height: calc(100% - 100px);
-  padding: 0px 15px 15px 15px;
-  position: relative;
-  margin-top: 100px;
-  // background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
-  // background-size: contain;
-
-  &::after {
-    display: block;
-    content: '';
-    height: 200px;
-    width: 100%;
-    position: absolute;
-    background-image: linear-gradient(#2eb2ff05, #2ea2ff00);
-    border-top: 1px solid #2eb2ff20;
-    top: 0px;
-    left: 0px;
-  }
+  @ventSpace: zxm;
 
-  .content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
+  .file-details {
+    width: calc(100% - 10px);
+    height: calc(100% - 100px);
+    padding: 0px 15px 15px 15px;
     position: relative;
-    z-index: 999;
+    margin-top: 100px;
+    // background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
+    // background-size: contain;
+
+    &::after {
+      display: block;
+      content: '';
+      height: 200px;
+      width: 100%;
+      position: absolute;
+      background-image: linear-gradient(#2eb2ff05, #2ea2ff00);
+      border-top: 1px solid #2eb2ff20;
+      top: 0px;
+      left: 0px;
+    }
 
-    .left-box {
-      width: 15%;
+    .content {
+      width: 100%;
       height: 100%;
-      padding: 20px;
-      border: 1px solid #99e8ff66;
-      background: #27546e1a;
-      box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-      -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-      -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
-
-      // lxh
-      .iconfont {
-        color: #fff;
-        font-size: 12px;
-        margin-left: 5px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      position: relative;
+      z-index: 999;
+
+      .left-box {
+        width: 15%;
+        height: 100%;
+        padding: 20px;
+        border: 1px solid #99e8ff66;
+        background: #27546e1a;
+        box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+        -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+        -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
+
+        // lxh
+        .iconfont {
+          color: #fff;
+          font-size: 12px;
+          margin-left: 5px;
+        }
       }
-    }
 
-    .right-box {
-      width: 85%;
-      height: 100%;
-      padding: 0px 0px 0px 15px;
-      box-sizing: border-box;
+      .right-box {
+        width: 85%;
+        height: 100%;
+        padding: 0px 0px 0px 15px;
+        box-sizing: border-box;
+
+        .search {
+          height: 34px;
+          line-height: 34px;
+          margin-bottom: 15px;
+        }
+      }
 
-      .search {
-        height: 34px;
-        line-height: 34px;
-        margin-bottom: 15px;
+      .list {
+        height: calc(100% - 49px);
+        position: relative;
       }
     }
 
-    .list {
-      height: calc(100% - 49px);
-      position: relative;
+    .zxm-form {
+      padding: 10px !important;
     }
   }
 
-  .zxm-form {
-    padding: 10px !important;
+  ::v-deep .jeecg-svg-icon {
+    margin-right: 5px;
   }
-}
-
-::v-deep .jeecg-svg-icon {
-  margin-right: 5px;
-}
-
-::v-deep .jeecg-basic-table-form-container {
-  padding: 0px 0px;
-}
-
-::v-deep .zxm-btn-primary {
-  background-color: transparent;
-  border: none;
-  background: url(../../../../assets/images/files/details/btn.png) no-repeat !important;
-  background-size: 100% 100% !important;
-}
-
-::v-deep .zxm-tree-switcher {
-  background: transparent;
-}
-
-::v-deep .zxm-input {
-  width: 220px;
-  height: 28px;
-  background: transparent;
-  border: 1px solid #31bccc;
-  color: #fff;
-  margin: 0px 20px;
-  border-radius: 5px;
-}
-
-::v-deep .zxm-btn-group {
-  margin-right: 25px;
-}
-
-::v-deep .zxm-upload-list-item-name {
-  color: #fff;
-}
-
-::v-deep .zxm-upload-list-item:hover .zxm-upload-list-item-info {
-  background-color: transparent;
-}
-
-:deep(.@{ventSpace}-table-cell-row-hover) {
-  background: #264d8833 !important;
-}
-
-:deep(.@{ventSpace}-table-row-selected) {
-  background: #268bc522 !important;
-}
-
-:deep(.@{ventSpace}-select-dropdown) {
-  border: 1px solid #ececec66;
-  // background: #ffffff !important;
-  // left: 0px !important;
-  // backdrop-filter: blur(50px);
-  // background: transparent !important;
-  // backdrop-filter: blur(50px);
-
-  .@{ventSpace}-select-item-option-selected,
-  .@{ventSpace}-select-item-option-active {
-    background-color: #ffffff33 !important;
+
+  ::v-deep .jeecg-basic-table-form-container {
+    padding: 0px 0px;
+  }
+
+  ::v-deep .zxm-btn-primary {
+    background-color: transparent;
+    border: none;
+    background: url(../../../../assets/images/files/details/btn.png) no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+
+  ::v-deep .zxm-tree-switcher {
+    background: transparent;
+  }
+
+  ::v-deep .zxm-input {
+    width: 220px;
+    height: 28px;
+    background: transparent;
+    border: 1px solid #31bccc;
+    color: #fff;
+    margin: 0px 20px;
+    border-radius: 5px;
   }
 
-  .@{ventSpace}-select-item:hover {
-    background-color: #ffffff33 !important;
+  ::v-deep .zxm-btn-group {
+    margin-right: 25px;
   }
-}
 
-::v-deep .zxm-form-item-control-input {
-  width: 90%;
-}
+  ::v-deep .zxm-upload-list-item-name {
+    color: #fff;
+  }
+
+  ::v-deep .zxm-upload-list-item:hover .zxm-upload-list-item-info {
+    background-color: transparent;
+  }
+
+  :deep(.@{ventSpace}-table-cell-row-hover) {
+    background: #264d8833 !important;
+  }
+
+  :deep(.@{ventSpace}-table-row-selected) {
+    background: #268bc522 !important;
+  }
+
+  :deep(.@{ventSpace}-select-dropdown) {
+    border: 1px solid #ececec66;
+    // background: #ffffff !important;
+    // left: 0px !important;
+    // backdrop-filter: blur(50px);
+    // background: transparent !important;
+    // backdrop-filter: blur(50px);
+
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
+      background-color: #ffffff33 !important;
+    }
+
+    .@{ventSpace}-select-item:hover {
+      background-color: #ffffff33 !important;
+    }
+  }
+
+  ::v-deep .zxm-form-item-control-input {
+    width: 90%;
+  }
 </style>