文件共享-提交2023/5/9

src/assets/icons/file1.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.489" height="18.434" viewBox="0 0 15.489 18.434">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55391" data-name="路径 55391" d="M166.008,68.191h-7.244a1.77,1.77,0,0,0-1.8,1.743l-.009,13.947a1.77,1.77,0,0,0,1.8,1.743H169.63a1.778,1.778,0,0,0,1.811-1.743V73.421Zm1.811,13.947h-7.244V80.395h7.244Zm0-3.487h-7.244V76.908h7.244ZM165.1,74.293V69.5l4.981,4.794Z" transform="translate(-156.452 -67.691)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/file2.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.489" height="18.434" viewBox="0 0 15.489 18.434">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#28a6ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55392" data-name="路径 55392" d="M166.008,68.191h-7.244a1.77,1.77,0,0,0-1.8,1.743l-.009,13.947a1.77,1.77,0,0,0,1.8,1.743H169.63a1.778,1.778,0,0,0,1.811-1.743V73.421Zm1.811,13.947h-7.244V80.395h7.244Zm0-3.487h-7.244V76.908h7.244ZM165.1,74.293V69.5l4.981,4.794Z" transform="translate(-156.452 -67.691)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/files/details/edit.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.166" height="14.162" viewBox="0 0 14.166 14.162">
+  <g id="组_13206" data-name="组 13206" transform="translate(0)">
+    <g id="组_6288" data-name="组 6288">
+      <g id="组_4590" data-name="组 4590">
+        <path id="路径_3289" data-name="路径 3289" d="M44.781,46.569h-11.4A1.387,1.387,0,0,1,32,45.184V33.8a1.385,1.385,0,0,1,1.383-1.383h7.6a.542.542,0,1,1,0,1.083H33.8a.725.725,0,0,0-.726.726V44.769a.728.728,0,0,0,.727.727H44.357a.721.721,0,0,0,.513-.213.731.731,0,0,0,.212-.514V37.174a.542.542,0,0,1,1.083,0v8.017a1.383,1.383,0,0,1-1.385,1.378Zm-11.4-13.922a1.152,1.152,0,0,0-1.15,1.15V45.184a1.153,1.153,0,0,0,1.152,1.152h11.4a1.15,1.15,0,0,0,1.152-1.145V37.174a.308.308,0,0,0-.617,0v7.6a.966.966,0,0,1-.28.679.952.952,0,0,1-.679.281H33.8a.961.961,0,0,1-.96-.961V34.223a.959.959,0,0,1,.959-.96h7.183a.308.308,0,1,0,0-.617Zm4.209,8.461a.54.54,0,0,1-.381-.924l7.586-7.62a.54.54,0,1,1,.763.764l-7.586,7.619a.541.541,0,0,1-.382.16Zm7.587-8.469a.306.306,0,0,0-.216.09l-7.588,7.621a.307.307,0,1,0,.434.435L45.4,33.164a.3.3,0,0,0,.091-.217.31.31,0,0,0-.307-.307Z" transform="translate(-32 -32.407)" fill="#fff"/>
+        <path id="路径_3288" data-name="路径 3288" d="M52.549,53.682H41.169A1.267,1.267,0,0,1,39.9,52.415V41.044a1.265,1.265,0,0,1,1.265-1.265h7.589a.425.425,0,0,1,0,.849H41.587a.841.841,0,0,0-.842.842V52a.841.841,0,0,0,.842.843H52.125A.841.841,0,0,0,52.967,52V44.417a.424.424,0,1,1,.849,0v8.006a1.26,1.26,0,0,1-1.266,1.259ZM45.67,48.1a.423.423,0,1,1-.6-.6l7.577-7.61a.423.423,0,1,1,.6.6Zm0,0" transform="translate(-39.776 -39.646)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/images/files/details/file1.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.489" height="18.434" viewBox="0 0 15.489 18.434">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3df6ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55391" data-name="路径 55391" d="M166.008,68.191h-7.244a1.77,1.77,0,0,0-1.8,1.743l-.009,13.947a1.77,1.77,0,0,0,1.8,1.743H169.63a1.778,1.778,0,0,0,1.811-1.743V73.421Zm1.811,13.947h-7.244V80.395h7.244Zm0-3.487h-7.244V76.908h7.244ZM165.1,74.293V69.5l4.981,4.794Z" transform="translate(-156.452 -67.691)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/files/details/file2.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.489" height="18.434" viewBox="0 0 15.489 18.434">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#28a6ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55392" data-name="路径 55392" d="M166.008,68.191h-7.244a1.77,1.77,0,0,0-1.8,1.743l-.009,13.947a1.77,1.77,0,0,0,1.8,1.743H169.63a1.778,1.778,0,0,0,1.811-1.743V73.421Zm1.811,13.947h-7.244V80.395h7.244Zm0-3.487h-7.244V76.908h7.244ZM165.1,74.293V69.5l4.981,4.794Z" transform="translate(-156.452 -67.691)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/files/details/search.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.91" height="12.289" viewBox="0 0 11.91 12.289">
+  <g id="组_4749" data-name="组 4749" transform="translate(0 0)">
+    <path id="路径_16311" data-name="路径 16311" d="M175.976,181.286a5.31,5.31,0,1,1,5.31-5.31A5.277,5.277,0,0,1,175.976,181.286Zm0-1.517a3.793,3.793,0,1,0-3.793-3.793A3.756,3.756,0,0,0,175.976,179.769Zm4.476,0,2.124,2.124-1.062,1.062-2.124-2.124Z" transform="translate(-170.666 -170.666)" fill="#fff"/>
+  </g>
+</svg>

src/assets/images/files/details/upload.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.789" height="12.94" viewBox="0 0 18.789 12.94">
+  <g id="组_13198" data-name="组 13198" transform="translate(-14.043 -7.179)">
+    <path id="路径_55385" data-name="路径 55385" d="M18.789,7.6c0,1.75-1.912,3.168-4.27,3.168H11.956V9.5h2.562a2.361,2.361,0,0,0,2.559-1.787c.081-1-.905-1.881-2.251-2l-.816-.072.066-.608a2.613,2.613,0,0,0,.015-.284c0-1.925-2.1-3.485-4.7-3.485-2.229,0-4.151,1.162-4.6,2.781l-.1.377-.5.106A2.78,2.78,0,0,0,1.708,6.97c0,1.4,1.529,2.535,3.416,2.535H6.832v1.267H5.124C2.294,10.772,0,9.07,0,6.97,0,5.389,1.313,4,3.239,3.434,4.032,1.4,6.541,0,9.394,0c3.46,0,6.278,2.035,6.4,4.58,1.781.415,2.993,1.639,2.993,3.024Z" transform="translate(14.043 7.179)" fill="#fff"/>
+    <path id="路径_55386" data-name="路径 55386" d="M10.248,8.388V15.1H8.54V8.388L6.207,10.227,5.214,8.694,9.394,5.4l4.18,3.294-.993,1.533Z" transform="translate(14.043 5.02)" fill="#fff"/>
+  </g>
+</svg>

src/assets/images/files/homes/file.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27.288" height="32.631" viewBox="0 0 27.288 32.631">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abdcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55383" data-name="路径 55383" d="M173.382,68.191H160.238a3.211,3.211,0,0,0-3.27,3.163l-.016,25.3a3.211,3.211,0,0,0,3.27,3.163h19.732a3.225,3.225,0,0,0,3.286-3.163V77.68Zm3.286,25.3H163.524V90.333h13.144Zm0-6.326H163.524V84.007h13.144Zm-4.929-7.908v-8.7l9.036,8.7Z" transform="translate(-156.452 -67.691)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/files/homes/sp.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27.247" height="33.126" viewBox="0 0 27.247 33.126">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abfcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55384" data-name="路径 55384" d="M171.1,61.65a7.3,7.3,0,0,0-7.451,7.126,7.09,7.09,0,0,0,3.639,6.124l-.726,5.614H160.49a2.253,2.253,0,0,0-2.3,2.2v4.6a2.253,2.253,0,0,0,2.3,2.2h20.924a2.253,2.253,0,0,0,2.3-2.2v-4.6a2.253,2.253,0,0,0-2.3-2.2h-5.788l-.724-5.606a7.088,7.088,0,0,0,3.653-6.132A7.3,7.3,0,0,0,171.1,61.65Zm11.7,29.673H159.1a1.227,1.227,0,1,0,0,2.453h23.7a1.227,1.227,0,1,0,0-2.453Z" transform="translate(-157.329 -61.15)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/components/Tree/src/BasicTree.vue

@@ -1,25 +1,8 @@
 <script lang="tsx">
   import type { CSSProperties } from 'vue';
-  import type {
-    FieldNames,
-    TreeState,
-    TreeItem,
-    KeyType,
-    CheckKeys,
-    TreeActionType,
-  } from './types/tree';
-
-  import {
-    defineComponent,
-    reactive,
-    computed,
-    unref,
-    ref,
-    watchEffect,
-    toRaw,
-    watch,
-    onMounted,
-  } from 'vue';
+  import type { FieldNames, TreeState, TreeItem, KeyType, CheckKeys, TreeActionType } from './types/tree';
+
+  import { defineComponent, reactive, computed, unref, ref, watchEffect, toRaw, watch, onMounted } from 'vue';
   import TreeHeader from './components/TreeHeader.vue';
   import { Tree, Spin, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
@@ -109,9 +92,7 @@
         return omit(propsData, 'treeData', 'class');
       });
 
-      const getTreeData = computed((): TreeItem[] =>
-        searchState.startSearch ? searchState.searchData : unref(treeDataRef),
-      );
+      const getTreeData = computed((): TreeItem[] => (searchState.startSearch ? searchState.searchData : unref(treeDataRef)));
 
       const getNotFound = computed((): boolean => {
         return !getTreeData.value || getTreeData.value.length === 0;
@@ -201,7 +182,7 @@
         },
         {
           immediate: true,
-        },
+        }
       );
 
       watch(
@@ -210,7 +191,7 @@
           if (val) {
             handleSearch(searchState.searchText);
           }
-        },
+        }
       );
 
       function handleSearch(searchValue: string) {
@@ -220,8 +201,7 @@
           searchState.startSearch = false;
           return;
         }
-        const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } =
-          unref(props);
+        const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } = unref(props);
         searchState.startSearch = true;
         const { title: titleField, key: keyField } = unref(getFieldNames);
 
@@ -229,15 +209,13 @@
         searchState.searchData = filter(
           unref(treeDataRef),
           (node) => {
-            const result = filterFn
-              ? filterFn(searchValue, node, unref(getFieldNames))
-              : node[titleField]?.includes(searchValue) ?? false;
+            const result = filterFn ? filterFn(searchValue, node, unref(getFieldNames)) : node[titleField]?.includes(searchValue) ?? false;
             if (result) {
               matchedKeys.push(node[keyField]);
             }
             return result;
           },
-          unref(getFieldNames),
+          unref(getFieldNames)
         );
 
         if (expandOnSearch) {
@@ -302,7 +280,7 @@
         () => {
           state.checkedKeys = toRaw(props.value || []);
         },
-        { immediate: true },
+        { immediate: true }
       );
 
       watch(
@@ -311,7 +289,7 @@
           const v = toRaw(state.checkedKeys);
           emit('update:value', v);
           emit('change', v);
-        },
+        }
       );
 
       watchEffect(() => {
@@ -369,18 +347,13 @@
         eachTree(data, (item, _parent) => {
           const searchText = searchState.searchText;
           const { highlight } = unref(props);
-          const {
-            title: titleField,
-            key: keyField,
-            children: childrenField,
-          } = unref(getFieldNames);
+          const { title: titleField, key: keyField, children: childrenField } = unref(getFieldNames);
 
           const icon = getIcon(item, item.icon);
           const title = get(item, titleField);
 
           const searchIdx = searchText ? title.indexOf(searchText) : -1;
-          const isHighlight =
-            searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1;
+          const isHighlight = searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1;
           const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`;
 
           const titleDom = isHighlight ? (
@@ -393,10 +366,7 @@
             title
           );
           item[titleField] = (
-            <span
-              class={`${bem('title')} pl-2`}
-              onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
-            >
+            <span class={`${bem('title')} pl-2`} onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}>
               {slots?.title ? (
                 getSlot(slots, 'title', item)
               ) : (
@@ -442,11 +412,7 @@
               <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
                 <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
               </ScrollContainer>
-              <Empty
-                v-show={unref(getNotFound)}
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-                class="!mt-4"
-              />
+              <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
             </Spin>
           </div>
         );

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

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <BasicTable @register="registerTable">
-      <template #tableTitle>
+      <!-- <template #tableTitle>
         <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
-      </template>
+      </template> -->
       <template #action="{ record }">
         <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
       </template>
@@ -47,22 +47,11 @@
       type: Function,
       required: true,
     },
-    // getImportUrl: {
-    //   type: String,
-    //   required: true,
-    // },
-    // getExportUrl: {
-    //   type: String,
-    //   required: true,
-    // },
+
     deleteById: {
       type: Function,
       required: true,
     },
-    // batchDelete: {
-    //   type: Function,
-    //   // required: true,
-    // },
     saveOrUpdate: {
       type: Function,
       required: true,
@@ -103,36 +92,35 @@
       api: props.list,
       columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
       // size: 'small',
-      // bordered: false,
-      formConfig: {
-        // labelWidth: 100,
-        labelAlign: 'left',
-        labelCol: {
-          xs: 24,
-          sm: 24,
-          md: 24,
-          lg: 9,
-          xl: 7,
-          xxl: 5,
-        },
-        schemas: props.searchFormSchema as any[],
-      },
+      bordered: false,
+      // formConfig: {
+      //   // labelWidth: 100,
+      //   labelAlign: 'left',
+      //   labelCol: {
+      //     xs: 24,
+      //     sm: 24,
+      //     md: 24,
+      //     lg: 9,
+      //     xl: 7,
+      //     xxl: 5,
+      //   },
+      //   schemas: props.searchFormSchema as any[],
+      // },
       striped: true,
       showIndexColumn: true, //是否显示序列号
       actionColumn: {
         width: 300,
       },
+      useSearchForm: false, //不使用查询条件
+      pagination: false, //不使用分页组件
       beforeFetch: (params) => {
-        return Object.assign({ column: 'createTime', order: 'desc' }, params);
+        params.parentId = '';
+        params.selectFlag = true;
+        params.likeFileName = '';
+        // return Object.assign({ column: '111', order: 'd11' }, params);
+        // return Object.assign({ parentId: '', selectFlag: true, likeFileName: '' }, params);
       },
     },
-    // exportConfig: {
-    //   name: props.title,
-    //   url: props.getExportUrl,
-    // },
-    // importConfig: {
-    //   url: props.getImportUrl,
-    // },
   });
 
   //注册table数据
@@ -177,12 +165,6 @@
     await props.deleteById({ id: record }, reload);
   }
 
-  // /**
-  //  * 批量删除事件
-  //  */
-  // async function batchHandleDelete() {
-  //   doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
-  // }
   /**
    * 查看
    */
@@ -251,72 +233,35 @@
 <style scoped lang="less">
   @ventSpace: zxm;
 
-  @vent-table-no-hover: #00bfff10;
-  // :deep(.ant-table-header){
-  //   background-color:transparent;
-  //   height: 0;
-  // }
-  // :deep(.jeecg-basic-table .ant-table-wrapper){
-  //   background-color: #ffffff00;
-  // }
-  // :deep(.ant-table-body) {
-  //   height: auto !important;
-  // }
-  // :deep(.ant-table){
-  //   background-color: #ffffff00 !important;
-  // }
-  // :deep(.ant-table-thead > tr > th){
-  //   background-color:transparent
-  // }
-  // :deep(.ant-table-body > tr > th){
-  //   background-color:transparent
-  // }
-  // :deep(.ant-table-body > tr > td){
-  //   border: none;
-  // }
-  // :deep(.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body){
-  //   background-color:transparent
-  // }
-  // :deep(.jeecg-basic-table-row__striped td){
-  //   background-color: transparent;
-  // }
-  :deep(.@{ventSpace}-table-cell-row-hover) {
-    background: #264d8833 !important;
-  }
-  :deep(.@{ventSpace}-table-row-selected) {
-    background: #268bc522 !important;
-  }
-  // :deep(.ant-table-tbody) {
-  //   tr.ant-table-row-selected {
-  //     td {
-  //       background: #007cc415 !important;
-  //     }
-  //   }
-  // }
+  @vent-table-no-hover: rgba(43, 135, 255, 0.1);
 
-  :deep(.@{ventSpace}-table-tbody > tr > td) {
-    background-color: #0dc3ff05;
+  @vent-table-hover: rgba(53, 147, 255, 0.2);
+  :deep(.zxm-table-row) {
+    td {
+      background-color: @vent-table-hover !important;
+    }
   }
   :deep(.jeecg-basic-table-row__striped) {
-    // background: #97efff11 !important;
     td {
-      // background-color: #97efff11 !important;
       background-color: @vent-table-no-hover !important;
     }
   }
-  // :deep(.ant-table-thead) {
-  //   // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
-  //   background-color: #3d9dd45d !important;
-  //   & > tr > th,
-  //   .ant-table-column-title {
-  //     // color: #70f9fc !important;
-  //     color: #fff !important;
-  //     border-color: #91e9fe !important;
-  //     border-left: none !important;
-  //     // border-right: none !important;
-  //     &:last-child {
-  //       border-right: none !important;
-  //     }
-  //   }
-  // }
+
+  ::v-deep .zxm-table-title {
+    display: none;
+  }
+  ::v-deep .zxm-table-thead > tr > th {
+    border-top: 0px !important;
+    border-left: 0px !important;
+    border-right: 0px !important;
+    border-bottom: 1px solid #268bc1 !important;
+    color: #3beff9 !important;
+  }
+  ::v-deep .zxm-table-tbody > tr > td {
+    border: none;
+  }
+
+  ::v-deep .zxm-table-thead {
+    background: linear-gradient(to bottom, transparent, rgba(53, 147, 255, 0.5)) !important;
+  }
 </style>

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

@@ -27,25 +27,36 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive, toRefs, nextTick } from 'vue';
+  import { ref, reactive, toRefs, nextTick, inject, watch } from 'vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
+  import { createFile, deleteById } from '../fileDetail/fileDetail.api';
   components: {
     PlusOutlined;
   }
+  //左侧树列表数据
+  const treeData = inject('treeData') as any;
+  //编辑菜单-新增or删除
+  let flag = ref(true) as any;
+  //编辑菜单-被删除元素ID
+  let delId = ref(0) as any;
   // 声明Emits
   const emit = defineEmits(['saveOrUpdate']);
   const inputRef = ref();
-  const state = reactive({
-    tags: ['台账类文件', '法律法规', '其他', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'],
+  const state = reactive<any>({
+    tags: [],
     inputVisible: false,
     inputValue: '',
   });
   const handleClose = (removedTag: string) => {
+    flag.value = false; //编辑菜单-删除
     const tags = state.tags.filter((tag) => tag !== removedTag);
+    //获取被删除元素ID
+    delId.value = treeData[0].children.filter((el) => el.title === removedTag)[0].id;
     console.log(tags);
     state.tags = tags;
   };
   const showInput = () => {
+    flag.value = true; //编辑菜单-新增
     state.inputVisible = true;
     nextTick(() => {
       inputRef.value.focus();
@@ -64,15 +75,36 @@
       inputValue: '',
     });
   };
+  //新增
+
+  //删除
   //表单提交事件
   async function handleSubmit(v) {
     try {
-      //   emit('saveOrUpdate', values);
+      if (flag.value) {
+        //编辑菜单-新增保存
+        console.log('编辑菜单-新增');
+      } else {
+        //编辑菜单-删除保存
+        console.log('编辑菜单-删除');
+      }
       emit('saveOrUpdate', false);
     } finally {
       // setModalProps({ confirmLoading: false });
     }
   }
+  watch(
+    treeData,
+    (newV) => {
+      console.log(newV, 'new111');
+      let editMenuList = [] as any;
+      newV[0].children.forEach((el) => {
+        editMenuList.push(el.title);
+      });
+      state.tags = [...editMenuList];
+    },
+    { immediate: true }
+  );
 </script>
 
 <style lang="less" scoped>

src/views/vent/performance/fileDetail/fileDetail.api.ts

@@ -2,12 +2,12 @@ import { defHttp } from '/@/utils/http/axios';
 import { Modal } from 'ant-design-vue';
 
 enum Api {
-  getTree = '/fileServerInfo/listFileServerInfo',
-  list = '/safety/ventanalyMonitorParams/list',
+  getTree = '/ventanaly-sharefile/fileServer/list',
+  createFile = '/ventanaly-sharefile/fileServer/add',
+  deleteById = '/ventanaly-sharefile/fileServer/delete',
   save = '/safety/ventanalyMonitorParams/add',
   edit = '/safety/ventanalyMonitorParams/edit',
   selectDevice = '/jeecg-system/sys/dict/DeviceKind/query',
-  deleteById = '/safety/ventanalyMonitorParams/delete',
   deleteBatch = '/sys/user/deleteBatch',
   importExcel = '/sys/user/importExcel',
   exportXls = '/sys/user/exportXls',
@@ -37,10 +37,10 @@ export const getImportUrl = Api.importExcel;
 export const queryDeviceList = (params) => defHttp.get({ url: Api.queryDevice, params });
 
 /**
- * 列表接口
+ * 创建文件夹接口
  * @param params
  */
-export const list = (params) => defHttp.get({ url: Api.list, params });
+export const createFile = (params) => defHttp.post({ url: Api.createFile, params });
 
 /**
  * 设备类型查询接口
@@ -49,7 +49,7 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
 export const selectDevice = (params) => defHttp.get({ url: Api.selectDevice, params });
 
 /**
- * 删除用户
+ * 删除文件/文件夹
  */
 export const deleteById = (params, handleSuccess) => {
   return defHttp.delete({ url: Api.deleteById, params: params.id }, { joinParamsToUrl: true }).then(() => {

src/views/vent/performance/fileDetail/fileDetail.data.ts

@@ -1,34 +1,21 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { TreeItem } from '/@/components/Tree/index';
 
-//tree
-export const treeData: TreeItem[] = [
+export const columns: BasicColumn[] = [
   {
-    title: '全部',
-    key: '0-0',
-    icon: 'home|svg',
-    children: [
-      { title: '台账类文件', icon: 'home|svg', key: '0-0-1' },
-      { title: '法律法规', icon: 'home|svg', key: '0-0-2' },
-      { title: '其他', icon: 'home|svg', key: '0-0-3' },
-    ],
+    title: '文件ID',
+    dataIndex: 'id',
+    ifShow: false,
   },
-];
-export const searchFormSchema: FormSchema[] = [
   {
-    label: '文件名称',
-    field: 'fileName',
-    component: 'Input',
-    colProps: { span: 8 },
+    title: '父文件夹ID',
+    dataIndex: 'parentId',
+    ifShow: false,
   },
-];
-
-export const columns: BasicColumn[] = [
   {
     title: '文件名称',
     dataIndex: 'fileName',
-    width: 260,
+    // width: 260,
   },
 
   {
@@ -36,24 +23,20 @@ export const columns: BasicColumn[] = [
     dataIndex: 'type',
   },
   {
-    title: '文件格式',
-    dataIndex: 'fileSuffix',
-  },
-  {
-    title: '创建人',
-    dataIndex: 'createUser',
+    title: '文件来源',
+    dataIndex: 'fileSource',
   },
   {
-    title: '创建时间',
-    dataIndex: 'updateUser',
+    title: '文件状态',
+    dataIndex: 'bpmStatus',
   },
   {
-    title: '修改人',
-    dataIndex: 'updateUser',
+    title: '当前审批人',
+    dataIndex: 'approveBy',
   },
   {
-    title: '修改时间',
-    dataIndex: 'updateDt',
+    title: '上传时间',
+    dataIndex: 'createDt',
   },
 ];
 

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

@@ -1,23 +1,31 @@
 <template>
   <div class="file-details">
-    <div class="title">文件共享中心</div>
+    <!-- <div class="title">文件共享中心</div> -->
     <div class="content">
       <div class="left-box">
-        <a-button type="primary" style="margin-bottom: 15px" @click="editMenu">编辑目录</a-button>
-        <BasicTree :expandedKeys="expandedKeys" :treeData="treeData" />
+        <a-button type="primary" preIcon="ant-design:form-outlined" style="margin-bottom: 15px" @click="editMenu">编辑目录</a-button>
+        <BasicTree :expandedKeys="expandedKeys" :treeData="treeData" :showLine="showLine" />
       </div>
       <div class="right-box">
-        <NormalTable
-          :columns="columns"
-          :searchFormSchema="searchFormSchema"
-          :list="list"
-          :formSchema="formSchema"
-          :deleteById="deleteById"
-          :saveOrUpdate="saveOrUpdate"
-          designScope="file-detail"
-          title="文件详情"
-          :showTab="false"
-        />
+        <div class="search">
+          <a-input v-model:value="fileName" placeholder="请输入文件名称" />
+          <a-button type="primary" preIcon="ant-design:search-outlined">查询</a-button>
+          <a-button type="primary" style="float: right; right: 15px" preIcon="ant-design:cloud-upload-outlined">文件上传</a-button>
+        </div>
+        <div class="list">
+          <div class="bd-t"></div>
+          <NormalTable
+            :columns="columns"
+            :list="getTree"
+            :formSchema="formSchema"
+            :deleteById="deleteById"
+            :saveOrUpdate="saveOrUpdate"
+            designScope="file-detail"
+            title="文件详情"
+            :showTab="false"
+          />
+          <div class="bd-b"></div>
+        </div>
       </div>
     </div>
     <!-- 编辑目录 -->
@@ -27,24 +35,43 @@
 <script lang="ts" setup name="system-user">
   import { useModal } from '/@/components/Modal';
   import fileMenuDialog from '../comment/fileMenuModal.vue';
-  import { ref, onMounted } from 'vue';
+  import { ref, onMounted, reactive, provide } from 'vue';
   import { BasicTree } from '/@/components/Tree/index';
-  import { treeData } from './fileDetail.data';
   import { CollapseContainer } from '/@/components/Container/index';
   import NormalTable from '../comment/NormalTable.vue';
-  import { columns, searchFormSchema, formSchema } from './fileDetail.data';
-  import { getTree, list, deleteById, saveOrUpdate } from './fileDetail.api';
+  import { columns, formSchema } from './fileDetail.data';
+  import { getTree, deleteById, saveOrUpdate } from './fileDetail.api';
+  import { TreeItem } from '/@/components/Tree/index';
 
   components: {
     CollapseContainer;
   }
-
+  let showLine = ref(true);
   const expandedKeys = ref<string[]>(['0-0']); //默认展开树节点
   let fileName = ref('');
-  // let getTreeList = async () => {
-  //   let data = await getTree({ parentId: '' });
-  //   console.log(data, 'data');
-  // };
+  //tree
+  let treeData = reactive<TreeItem[]>([
+    {
+      title: '全部',
+      key: '0-0',
+      icon: 'file1|svg',
+      children: [],
+    },
+  ]);
+  provide('treeData', treeData);
+  let getTreeList = async () => {
+    let data = await getTree({ parentId: '' });
+    console.log(data, '树节点数据');
+    let child = data.records.map((el, index) => {
+      return {
+        id: el.id,
+        title: el.fileName,
+        key: index,
+        icon: 'file2|svg',
+      };
+    });
+    treeData[0].children?.push(...child);
+  };
 
   //注册弹窗
   const [registerModal, { openModal, closeModal }] = useModal();
@@ -57,7 +84,7 @@
     closeModal();
   };
   onMounted(() => {
-    // getTreeList();
+    getTreeList();
   });
 </script>
 
@@ -67,19 +94,10 @@
     height: 100%;
     padding: 15px;
     position: relative;
-    box-sizing: border-box;
-    .title {
-      height: 25px;
-      line-height: 25px;
-      margin-bottom: 30px;
-      font-size: 22px;
-      font-weight: 600;
-      text-align: center;
-      color: #fff;
-    }
+    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
     .content {
       width: 100%;
-      height: calc(100% - 85px);
+      height: calc(100% - 30px);
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -87,26 +105,69 @@
       .left-box {
         width: 15%;
         height: calc(100% - 20px);
-        border: 1px solid #bbbbbb;
-        border-radius: 15px;
         margin-bottom: 20px;
-        padding: 10px;
+        padding: 20px;
+        border: 2px solid #268bc1;
+        box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
+        -moz-box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
+        -webkit-box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
       }
       .right-box {
         width: 85%;
         height: calc(100% - 20px);
         padding: 0px 0px 0px 15px;
         box-sizing: border-box;
+        .search {
+          height: 34px;
+          line-height: 34px;
+          margin-bottom: 15px;
+          background: url(../../../../assets/images/files/details/cz-b.png) no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .list {
+        height: calc(100% - 49px);
+        position: relative;
+        .bd-t {
+          height: 4px;
+          width: 100%;
+          position: absolute;
+          top: 0px;
+          background: url(../../../../assets/images/files/details/lb-b.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .bd-b {
+          height: 4px;
+          width: 100%;
+          position: absolute;
+          bottom: 0px;
+          background: url(../../../../assets/images/files/details/lb-b.png) no-repeat;
+          background-size: 100% 100%;
+        }
       }
     }
   }
   ::v-deep .jeecg-svg-icon {
     margin-right: 5px;
   }
-  ::v-deep .zxm-tree-switcher {
-    opacity: 0;
-  }
   ::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;
+    margin: 0px 20px;
+    border-radius: 5px;
+  }
 </style>

src/views/vent/performance/fileIndex/fileIndex.api.ts

@@ -1,75 +1,11 @@
 import { defHttp } from '/@/utils/http/axios';
-import { Modal } from 'ant-design-vue';
 
 enum Api {
-  list = '/safety/ventanalyMonitorParams/list',
-  save = '/safety/ventanalyMonitorParams/add',
-  edit = '/safety/ventanalyMonitorParams/edit',
-  selectDevice = '/jeecg-system/sys/dict/DeviceKind/query',
-  deleteById = '/safety/ventanalyMonitorParams/delete',
-  deleteBatch = '/sys/user/deleteBatch',
-  importExcel = '/sys/user/importExcel',
-  exportXls = '/sys/user/exportXls',
-  queryDevice = '/sys/dict/DeviceKind/query',
+  list = '/ventanaly-sharefile/fileServer/queryEachFileNum',
 }
-/**
- * 导出api
- * @param params
- */
-export const getExportUrl = Api.exportXls;
-/**
- * 导入api
- */
-export const getImportUrl = Api.importExcel;
-
-/**
- * 列表接口
- * @param params
- */
-export const queryDeviceList = (params) => defHttp.get({ url: Api.queryDevice, params });
 
 /**
  * 列表接口
  * @param params
  */
-export const list = (params) => defHttp.get({ url: Api.list, params });
-
-/**
- * 设备类型查询接口
- * @param params
- */
-export const selectDevice = (params) => defHttp.get({ url: Api.selectDevice, params });
-
-/**
- * 删除用户
- */
-export const deleteById = (params, handleSuccess) => {
-  return defHttp.delete({ url: Api.deleteById, params: params.id }, { joinParamsToUrl: true }).then(() => {
-    handleSuccess();
-  });
-};
-/**
- * 批量删除用户
- * @param params
- */
-export const batchDeleteById = (params, handleSuccess) => {
-  Modal.confirm({
-    title: '确认删除',
-    content: '是否删除选中数据',
-    okText: '确认',
-    cancelText: '取消',
-    onOk: () => {
-      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
-        handleSuccess();
-      });
-    },
-  });
-};
-/**
- * 保存或者更新用户
- * @param params
- */
-export const saveOrUpdate = (params, isUpdate) => {
-  const url = isUpdate ? Api.edit : Api.save;
-  return isUpdate ? defHttp.put({ url: url, params }) : defHttp.post({ url: url, params });
-};
+export const list = () => defHttp.post({ url: Api.list });

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

@@ -1,19 +1,19 @@
 <template>
   <div class="performance">
-    <div class="title">文件共享中心</div>
     <div class="main-container">
-      <div class="card" v-for="item in titleList" :key="item.label" @click="getDetails">
-        <div class="card-title">{{ item.label }}</div>
-        <div class="card-content">
-          <div class="content-item">
-            <span>文档总数 : </span>
-            <span style="margin: 0px 30px">{{ 1000 }}</span>
-            <span>项</span>
-          </div>
-          <div class="content-item">
-            <span>待审批数 : </span>
-            <span style="margin: 0px 30px">{{ 200 }}</span>
-            <span>项</span>
+      <div
+        class="card"
+        v-for="(item, index) in titleList"
+        :class="index === active ? 'actived' : 'isActived'"
+        :key="index"
+        @click="getDetails(index)"
+      >
+        <div class="card-t">{{ item.sysOrgName }}</div>
+        <div class="card-b">
+          <div class="box" v-for="(items, ind) in item.tab" :key="ind" @click="getToggle(ind)">
+            <div class="img" :class="ind === toggleItem ? 'isPic' : 'pic'"> <img :src="items.src" alt="" /> </div>
+            <div class="text">{{ items.text }}</div>
+            <div class="num" :class="ind === toggleItem ? 'isNum' : 'nums'">{{ items.num }}</div>
           </div>
         </div>
       </div>
@@ -21,89 +21,159 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { useRouter } from 'vue-router';
+  import leftImg from '../../../../assets/images/files/homes/file.svg';
+  import rightImg from '../../../../assets/images/files/homes/sp.svg';
+  import { list } from './fileIndex.api';
+  let router = useRouter(); //路由
+  let active = ref(); //当前选中项
+  let toggleItem = ref(); //当前选中子项
+  let titleList = reactive<any[]>([]);
+  //获取首页数据
+  let getPageList = async () => {
+    let data = await list();
+    console.log(data, '首页数据');
+    if (data.length !== 0) {
+      let datas = data.map((el) => {
+        return {
+          sysOrgName: el.sysOrgName,
+          tab: [
+            { src: leftImg, text: '文档总数', num: el.tolalNum },
+            { src: rightImg, text: '待审批数', num: el.approveNum },
+          ],
+        };
+      });
+      titleList.push(...datas);
+      console.log(titleList, '123456');
+    }
+  };
 
-  let titleList = reactive([
-    { label: '测试1' },
-    { label: '测试2' },
-    { label: '测试3' },
-    { label: '测试4' },
-    { label: '测试5' },
-    { label: '测试6' },
-    { label: '测试7' },
-    { label: '测试8' },
-    { label: '测试9' },
-    { label: '测试10' },
-    { label: '测试11' },
-    { label: '测试12' },
-    { label: '测试13' },
-    { label: '测试14' },
-    { label: '测试15' },
-    { label: '测试16' },
-    { label: '测试17' },
-  ]);
-  let router = useRouter();
-  let getDetails = () => {
+  //切换选项
+  let getDetails = (index) => {
     console.log('详情跳转');
-
+    active.value = index;
     router.push('/fileManager/fileDetail');
   };
+  //切换左右选项
+  let getToggle = (ind) => {
+    console.log(ind);
+    toggleItem.value = ind;
+  };
+  onMounted(() => {
+    getPageList();
+  });
 </script>
 
 <style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url(../../../../assets/images/files/douyuFont.otf);
+  }
   .performance {
     width: 100%;
     height: 100%;
     padding: 15px;
     position: relative;
     box-sizing: border-box;
-    color: #fff;
-    .title {
-      height: 25px;
-      line-height: 25px;
-      margin-bottom: 30px;
-      font-size: 22px;
-      font-weight: 600;
-      text-align: center;
-    }
+    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
     .main-container {
-      width: 90%;
-      height: calc(100% - 85px);
-      margin: 0px auto;
+      width: 100%;
+      height: calc(100% - 30px);
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       align-items: flex-start;
       flex-wrap: wrap;
       .card {
-        width: 240px;
-        height: 132px;
-        border: 1px solid #98a7ba;
-        background: #185cb5;
-        border-radius: 10px;
-        padding: 8px 6px;
-        margin: 0px 20px 15px 20px;
-        box-sizing: border-box;
+        width: 331px;
+        height: 235px;
+        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
+        background-size: 100% 100%;
+        margin: 0px 23px 15px 23px;
         cursor: pointer;
-        .card-title {
-          height: 20px;
-          line-height: 20px;
-          font-size: 16px;
-          text-align: center;
+        .card-t {
+          height: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-family: '思源黑体', 'Microsoft Yahei';
+          font-size: 20px;
+          color: #fff;
         }
-        .card-content {
-          height: calc(100% - 46px);
-          margin-top: 10px;
+        .card-b {
+          height: calc(100% - 65px);
+          margin-top: 15px;
           display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          align-items: flex-start;
-          .content-item {
-            font-size: 14px;
+          flex-direction: row;
+          .box {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+            .img {
+              position: relative;
+              width: 72px;
+              height: 78px;
+              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
+              img {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -75%);
+              }
+            }
+            .pic {
+              width: 72px;
+              height: 78px;
+              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;
+              background-size: 100% 100%;
+            }
+            .isPic {
+              width: 72px;
+              height: 78px;
+              background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;
+              background-size: 100% 100%;
+            }
+            .text {
+              margin: 5px 0px;
+              font-family: '思源黑体', 'Microsoft Yahei';
+              color: #fff;
+              font-size: 14px;
+            }
+            .num {
+              width: 120px;
+              height: 30px;
+              font-family: 'douyuFont';
+              color: #fff;
+              font-size: 20px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
+            }
+            .nums {
+              width: 120px;
+              height: 30px;
+              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
+            }
+            .isNum {
+              width: 120px;
+              height: 30px;
+              background: url(../../../../assets/images/files/homes/sp2.png) no-repeat center;
+            }
           }
         }
       }
+      .actived {
+        background: url(../../../../assets/images/files/homes/mouse.png) no-repeat center;
+        background-size: 100% 100%;
+      }
+      .isActived {
+        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
+        background-size: 100% 100%;
+      }
     }
   }
 </style>