通用文件树的操作

src/views/commonFile/FileTree.vue

@@ -11,22 +11,42 @@
       :treeData="treeData"
       :fieldNames="{ key: 'businessId', title: 'fileName' }"
       @select="handleSelect"
+      :beforeRightClick="getRightMenuList"
+      :actionList="actionList"
     />
   </div>
+  <MoveFile @register="registerMoveFile" @success="handleSuccess" />
+  <ResetName @register="registerResetNameModal" @success="handleSuccess" />
+  <CreateFile @register="registerCreateFileModal" @success="handleSuccess" />
+  <CreateTask @register="registerCreateTaskModal" @success="handleSuccess" />
 </template>
 <script lang="ts" setup>
-import {nextTick, onMounted, ref, unref} from 'vue';
-  import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
-  import { getDeptList } from '@/api/system/dept/dept';
-  import {Nullable} from "@vben/types";
-  import { TreeData } from "@/views/commonFile/commonFileData";
+import {h, nextTick, onMounted, ref, unref} from 'vue';
+import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree';
+import { getDeptList } from '@/api/system/dept/dept';
+import {Nullable} from "@vben/types";
+import { TreeData } from "@/views/commonFile/commonFileData";
+import {EventDataNode} from "ant-design-vue/es/vc-tree/interface";
+import {PlusOutlined,EllipsisOutlined} from "@ant-design/icons-vue";
+import {useMessage} from "@/hooks/web/useMessage";
+import {Modal} from "ant-design-vue";
+import {useModal} from "@/components/Modal";
+import MoveFile from './moveFile.vue';
+import ResetName from './resetName.vue';
+import {router} from "@/router";
+import CreateTask from './createTask.vue';
+import CreateFile from './createFile.vue';
 
-  defineOptions({ name: 'DeptTree' });
+defineOptions({ name: 'DeptTree' });
 
-  const emit = defineEmits(['select']);
-
-  const treeData = ref<TreeItem[]>([]);
-  const treeRef = ref<Nullable<TreeActionType>>(null);
+const { createMessage } = useMessage();
+const emit = defineEmits(['select']);
+const treeData = ref<TreeItem[]>([]);
+const treeRef = ref<Nullable<TreeActionType>>(null);
+const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
+const [registerResetNameModal, { openModal: openResetNameModal }] = useModal();
+const [registerCreateTaskModal, { openModal: openCreateTaskModal }] = useModal();
+const [registerCreateFileModal, { openModal: openCreateFileModal }] = useModal();
 function getTree() {
   const tree = unref(treeRef);
   if (!tree) {
@@ -41,9 +61,9 @@ async function fetch() {
   await nextTick(() => {
     getTree().expandAll(true)
   })
-  }
+}
 
-  function handleTree(data, id, parentId, children, rootId) {
+function handleTree(data, id, parentId, children, rootId) {
   id = id || 'id'
   parentId = parentId || 'parentId'
   children = children || 'children'
@@ -61,13 +81,168 @@ async function fetch() {
     return father[parentId] === rootId
   })
   return treeData !== '' ? treeData : data
-  }
+}
 
-  function handleSelect(keys) {
+function handleSelect(keys) {
   emit('select', keys[0]);
-  }
+}
 
-  onMounted(() => {
+onMounted(() => {
   fetch();
+});
+
+// 树的操作列表
+const actionList = [
+  {
+    //全部操作按钮
+    render: (node) => {
+      return h(EllipsisOutlined, {
+        class: 'ml-2',
+        onClick: () => {
+          getRightMenuList(node)
+        },
+      });
+    },
+  },
+];
+
+
+function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
+  const menu = [
+    {
+      label: '打开',
+      handler: () => {
+        handleOpen(node)
+      },
+      icon: 'ant-design:eye-outlined',
+    },
+    {
+      label: '重命名',
+      handler: () => {
+        handleResetName(node)
+      },
+      icon: 'ant-design:edit-outlined',
+    },
+    {
+      label: '新建任务流',
+      handler: () => {
+        createTaskButton()
+      },
+      icon: 'bi:plus',
+    },
+    {
+      label: '新建文件夹',
+      handler: () => {
+        createFileButton()
+      },
+      icon: 'bi:plus',
+    },
+    {
+      label: '复制',
+      handler: () => {
+        copyButton()
+      },
+      icon: 'ant-design:snippets-outlined',
+    },
+    {
+      label: '粘贴',
+      handler: () => {
+        stickButton()
+      },
+      icon: 'ant-design:snippets-twotone',
+    },
+    {
+      label: '删除',
+      handler: () => {
+        deleteButton()
+      },
+      icon: 'ant-design:rest-outlined',
+    },
+    {
+      label: '移动',
+      handler: () => {
+        handleMove(node)
+      },
+      icon: 'bx:bxs-folder-open',
+    },
+  ];
+  return new Promise((resolve) => {
+    resolve(menu);
+  });
+}
+
+/**打开*/
+function handleOpen(data){
+  router.push({
+    path: '/commonFile/fileDetail',
+    query: {
+      fileName: data.anotherName,
+    },
+  });
+}
+
+/**复制按钮*/
+function copyButton() {
+  createMessage.success('复制成功!');
+}
+
+/**粘贴按钮*/
+function stickButton() {
+  createMessage.success('粘贴成功!');
+}
+
+/**删除按钮*/
+function deleteButton() {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除此节点吗？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      // 执行删除逻辑
+      createMessage.success('删除成功!')
+    },
+    onCancel() {
+      console.log('取消删除');
+      createMessage.info('取消删除')
+    },
+  });
+}
+
+/** 重命名按钮*/
+function handleResetName(record: Recordable) {
+  record.fileName = record.anotherName
+  openResetNameModal(true, {
+    record,
+    isReset: true,
   });
+}
+
+/** 移动按钮*/
+function handleMove(record: Recordable) {
+  openMoveFileModal(true, {
+    record,
+    isMove: true,
+  });
+}
+
+
+/**新建文件夹*/
+function createFileButton() {
+  openCreateFileModal(true, {
+    isAdd: true,
+  });
+}
+
+/**新建任务流*/
+function createTaskButton() {
+  openCreateTaskModal(true, {
+    isAdd: true,
+  });
+}
+
+/** 成功回调*/
+function handleSuccess() {
+
+}
 </script>

src/views/commonFile/account.data.ts

@@ -30,11 +30,6 @@ export const columns: BasicColumn[] = [
     dataIndex: 'holder',
     width: 150,
   },
-  {
-    title: '大小',
-    dataIndex: 'fileSize',
-    width: 150,
-  },
 ];
 export const searchFormSchema: FormSchema[] = [
   {
@@ -84,15 +79,6 @@ export const accountFormSchema: any[] = [
       disabled: true
     }
   },
-  {
-    field: 'fileSize',
-    label: '大小',
-    component: 'Input',
-    colProps: { lg: 24, md: 24 },
-    componentProps: {
-      disabled: true
-    }
-  },
 ];
 
 /**移动*/

src/views/commonFile/commonFileData.ts

@@ -57,12 +57,12 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 100,
     "fileName" : "任务流",
+    "anotherName" : "任务流",
     "parentId" : 0,
     "code:": "001",
     "ancestors" : "0",
     "orderNum" : 0,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流",
     "holder":"admin",
     "createDate": "2024-10-24 10:04:04",
@@ -74,12 +74,12 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 101,
     "fileName" : "典型案例",
+    "anotherName" : "典型案例",
     "parentId" : 100,
     "code:": "002",
     "ancestors" : "0,100",
     "orderNum" : 1,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流/典型案例",
     "holder":"admin",
     "createDate": "2024-10-24 10:04:04",
@@ -91,12 +91,12 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 107,
     "fileName" : "个人体验",
+    "anotherName" : "个人体验",
     "parentId" : 100,
     "code:": "003",
     "ancestors" : "0,100",
     "orderNum" : 2,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流/个人体验",
     "holder":"admin",
     "createDate": "2024-10-24 10:04:04",
@@ -108,12 +108,12 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 201,
     "fileName" : "总-智慧财务总体流程",
+    "anotherName" : "总-智慧财务总体流程",
     "parentId" : 101,
     "code:": "005",
     "ancestors" : "0,100,101",
     "orderNum" : 2,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流/典型案例/总-智慧财务总体流程",
     "holder":"admin",
     "createDate": "2024-10-22 8:04:04",
@@ -125,12 +125,12 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 202,
     "fileName" : "分-落地区",
+    "anotherName" : "分-落地区",
     "parentId" : 101,
     "code:": "006",
     "ancestors" : "0,100,101",
     "orderNum" : 3,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流/典型案例/分-落地区",
     "holder":"admin",
     "createDate": "2024-10-21 9:04:04",
@@ -142,12 +142,12 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 203,
     "fileName" : "分-改良区",
+    "anotherName" : "分-改良区",
     "parentId" : 101,
     "code:": "008",
     "ancestors" : "0,100,101",
     "orderNum" : 5,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流/典型案例/分-改良区",
     "holder":"admin",
     "createDate": "2024-10-23 12:04:04",
@@ -159,12 +159,12 @@ export const TreeData: any[] = [
     "flag" : "1",
     "businessId" : 204,
     "fileName" : "分-个人体验1",
+    "anotherName" : "分-个人体验1",
     "parentId" : 107,
     "code:": "009",
     "ancestors" : "0,100,107",
     "orderNum" : 1,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流/典型案例/分-个人体验1",
     "holder":"admin",
     "createDate": "2024-10-24 13:04:04",
@@ -176,12 +176,12 @@ export const TreeData: any[] = [
     "flag" : "0",
     "businessId" : 205,
     "fileName" : "分-个人体验2",
+    "anotherName" : "分-个人体验2",
     "parentId" : 107,
     "code:": "010",
     "ancestors" : "0,100,107",
     "orderNum" : 2,
     "selectType" : null,
-    "fileSize": '1024KB',
     "location":"/任务流/典型案例/分-个人体验2",
     "holder":"admin",
     "createDate": "2024-10-24 14:04:04",

src/views/commonFile/createFile.vue

@@ -53,7 +53,7 @@
     ]);
   });
 
-  const getTitle = computed(() => ('新建文件流'));
+  const getTitle = computed(() => ('新建文件夹'));
 
 
   /**确定按钮*/

src/views/commonFile/index.vue

@@ -99,8 +99,10 @@
     api: async (params) => {
       //过滤掉tableData.value中，businessId等于100的
       var data = [];
-      if (params.taskId === undefined){
+      if (params.taskId == undefined  || params.taskId == ''){
         data = tableData.value.filter((item) => item.businessId >= 200);
+      }else if (params.taskId >= 200){
+        data = tableData.value.filter((item) => item.businessId == params.taskId);
       }else {
         data = tableData.value.filter((item) => item.parentId == params.taskId);
       }

src/views/commonFile/moveFile.vue

@@ -66,6 +66,7 @@ const getTitle = computed(() => ('移动'));
 
 /**确定按钮*/
 async function handleSubmit() {
+  createMessage.success('移动成功！')
   closeModal()
 }