修改知识库树

src/views/knowledgeBase/GroupTree.vue

 <template>
-  <div class="m-5 mr-0 overflow-hidden bg-white">
+  <div class="m-4 mr-0 overflow-hidden bg-white">
     <BasicTree
-      title=""
+      title="调度"
       ref="treeRef"
+      toolbar
+      search
       treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
-      :clickRowToExpand="true"
+      :clickRowToExpand="false"
       :defaultExpandAll="true"
       :treeData="treeData"
       :fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
       @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 { h, nextTick, onMounted, ref, unref } from 'vue';
+  import { BasicTree, ContextMenuItem, TreeActionType, TreeItem } from '@/components/Tree';
   import { Nullable } from '@vben/types';
-  import { TreeData } from '@/views/knowledgeBase/knowledgeBaseData';
+  import { TreeData } from './knowledgeBaseData';
+  import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
+  import { 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' });
 
+  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) {
@@ -75,4 +97,155 @@
   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/knowledgeBase/account.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'fileName',
+    width: 150,
+    slots: { customRender: 'fileName' },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 150,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateDate',
+    width: 150,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'holder',
+    width: 150,
+  },
+];
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入名称',
+    },
+    colProps: { span: 7 },
+  },
+];
+export const accountFormSchema: any[] = [
+  {
+    field: 'fileName',
+    label: '文件名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'location',
+    label: '保存位置',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'createDate',
+    label: '创建时间',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'updateDate',
+    label: '最近修改',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      disabled: true,
+    },
+  },
+];
+
+/**移动*/
+export const MoveFormSchema: any[] = [
+  {
+    field: 'taskId',
+    label: '路径',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+];
+
+export const resetNameFormSchema: FormSchema[] = [
+  {
+    field: 'fileName',
+    label: '文件名称',
+    component: 'Input',
+    rules: [
+      {
+        required: true,
+        message: '请输入文件名称',
+      },
+    ],
+    componentProps: {
+      placeholder: '请输入文件名称',
+    },
+    colProps: { span: 8 },
+  },
+];
+export const createFileFormSchema: FormSchema[] = [
+  {
+    field: 'taskId',
+    label: '路径',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'fileName',
+    label: '文件名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    rules: [
+      {
+        required: true,
+        message: '请输入文件名称',
+      },
+    ],
+    componentProps: {
+      placeholder: '请输入文件名称',
+    },
+  },
+];
+export const createTaskFormSchema: FormSchema[] = [
+  {
+    field: 'taskId',
+    label: '路径',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'fileName',
+    label: '文件名称',
+    component: 'Input',
+    rules: [
+      {
+        required: true,
+        message: '请输入文件名称',
+      },
+    ],
+    componentProps: {
+      placeholder: '请输入文件名称',
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'name',
+    label: '文件类型',
+    component: 'Input',
+    defaultValue: '任务流',
+    componentProps: {
+      disabled: true,
+      placeholder: '请输入路径',
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/knowledgeBase/createFile.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { createFileFormSchema } from './account.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { TreeData } from './knowledgeBaseData';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: createFileFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    const formData = {
+      taskId: '100',
+    };
+    // 塞值
+    setFieldsValue({
+      ...formData,
+    });
+    const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    updateSchema([
+      {
+        field: 'businessId',
+        componentProps: {
+          treeData: treeList,
+        },
+      },
+    ]);
+  });
+
+  const getTitle = computed(() => '新建文件夹');
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+</script>

src/views/knowledgeBase/createTask.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { createTaskFormSchema } from './account.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { TreeData } from './knowledgeBaseData';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: createTaskFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    const formData = {
+      taskId: '100',
+    };
+    // 塞值
+    setFieldsValue({
+      ...formData,
+    });
+    const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    updateSchema([
+      {
+        field: 'businessId',
+        componentProps: {
+          treeData: treeList,
+        },
+      },
+    ]);
+  });
+
+  const getTitle = computed(() => '新建任务流');
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>

src/views/knowledgeBase/knowledgeBaseData.ts

@@ -12,6 +12,7 @@ export const TreeData: any[] = [
     selectType: null,
     createTime: '2024-10-24 10:04:04',
     createBy: 'admin',
+    icon: 'ant-design:partition-outlined',
   },
   {
     delFlag: '0',
@@ -26,6 +27,7 @@ export const TreeData: any[] = [
     selectType: null,
     createTime: '2024-10-24 10:04:04',
     createBy: 'admin',
+    icon: 'ant-design:folder-open-outlined',
   },
   {
     delFlag: '0',
@@ -40,6 +42,7 @@ export const TreeData: any[] = [
     selectType: null,
     createTime: '2024-10-24 10:04:04',
     createBy: 'admin',
+    icon: 'ant-design:folder-open-outlined',
   },
   {
     delFlag: '0',
@@ -54,6 +57,7 @@ export const TreeData: any[] = [
     selectType: null,
     createTime: '2024-10-24 10:04:04',
     createBy: 'admin',
+    icon: 'ant-design:folder-open-outlined',
   },
   {
     delFlag: '0',
@@ -68,6 +72,7 @@ export const TreeData: any[] = [
     selectType: null,
     createTime: '2024-10-24 10:04:04',
     createBy: 'admin',
+    icon: 'ant-design:partition-outlined',
   },
   {
     delFlag: '0',
@@ -82,6 +87,7 @@ export const TreeData: any[] = [
     selectType: null,
     createTime: '2024-10-24 10:04:04',
     createBy: 'admin',
+    icon: 'ant-design:partition-outlined',
   },
   {
     delFlag: '0',
@@ -96,6 +102,7 @@ export const TreeData: any[] = [
     selectType: null,
     createTime: '2024-10-24 10:04:04',
     createBy: 'admin',
+    icon: 'ant-design:partition-outlined',
   },
 ];
 

src/views/knowledgeBase/moveFile.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+    minHeight="50"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { MoveFormSchema } from './account.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { TreeData } from './knowledgeBaseData';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const idList = ref([]);
+  const rowData = ref([]);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: MoveFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //每次点击弹窗 需要清空存储的数据
+    rowData.value = [];
+    //重置表单数据
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    if (data.idList != null && data.idList != undefined && data.idList.length > 0) {
+    } else {
+      rowData.value.push(data.record);
+      //单个移动
+      rowId.value = data.record.businessId;
+      data.record.taskId = data.record.businessId;
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    updateSchema([
+      {
+        field: 'taskId',
+        componentProps: {
+          treeData: treeList,
+        },
+      },
+    ]);
+    console.log('treeList:', treeList);
+  });
+
+  const getTitle = computed(() => '移动');
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    createMessage.success('移动成功！');
+    closeModal();
+  }
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+</script>

src/views/knowledgeBase/resetName.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { resetNameFormSchema } from './account.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: resetNameFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  const getTitle = computed(() => '重命名');
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    createMessage.success('重命名成功');
+    closeModal();
+  }
+</script>