部分修改

src/views/mainBody/DeptTree.vue

@@ -9,7 +9,7 @@
       :clickRowToExpand="true"
       :defaultExpandAll="true"
       :treeData="treeData"
-      :fieldNames="{ key: 'key', title: 'title' }"
+      :fieldNames="{ key: 'businessId', title: 'label' }"
       @select="handleSelect"
     />
   </div>

src/views/mainBody/addFolder.vue

@@ -44,9 +44,7 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
   }
   updateSchema({
     field: 'path',
-    componentProps: {
-      treeData: treeDataList
-    },
+    componentProps: { treeData:treeDataList },
   });
 });
 

src/views/mainBody/index.vue

@@ -129,7 +129,12 @@
   }
   /** 新建文件夹*/
   function handleAdd() {
-    openModal(true);
+    openModal(true,{
+
+    });
+  }
+  function handleRemove() {
+    openRemoveModal(true,{})
   }
   function handleAddMainBody() {
     openMainModal(true,{
@@ -158,9 +163,6 @@
     createMessage.success('删除成功!');
     reload();
   }
-  function handleRemove() {
-    openRemoveModal(true)
-  }
   /** 导出按钮*/
   async function handleExport() {
 

src/views/mainBody/mainBody.data.ts

@@ -65,15 +65,43 @@ export const columns: BasicColumn[] = [
 export const formSchemaRemove: any = [
   {
     field: 'path',
-    label: '文件夹路径',
-    component: 'Input',
-    colProps: { span: 8 },
+    label: '路径',
+    component: 'TreeSelect',
+    rules: [
+      {
+        required: true,
+        message: '请选择上级菜单',
+      },
+    ],
     componentProps: {
-      placeholder: '输入文件夹路径',
+      fieldNames: {
+        label: 'label',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
     },
   },
 ]
 export const formSchemaMain: any = [
+  {
+    field: 'path',
+    label: '路径',
+    component: 'TreeSelect',
+    rules: [
+      {
+        required: true,
+        message: '请选择上级菜单',
+      },
+    ],
+    componentProps: {
+      fieldNames: {
+        label: 'label',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+
   {
     field: 'name',
     label: '主体名称',
@@ -93,19 +121,41 @@ export const formSchemaMain: any = [
     },
   },
   {
-    field: 'from',
-    label: '来源',
+    field: 'fileType',
+    label: '文件类型',
+    component: 'Input',
+    defaultValue: '主体管理',
+    colProps: { span: 8 },
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+      placeholder: '输入描述',
+    },
+  },
+  {
+    field: 'menuModal',
+    label: '目录权属模式',
+    component: 'Input',
+    defaultValue: '资源自定义',
+    colProps: { span: 8 },
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+      placeholder: '输入描述',
+    },
+  },
+  {
+    field: 'group',
+    label: '权属工作组',
     component: 'Select',
+    defaultValue: '默认工作组',
+    colProps: { span: 8 },
     componentProps: {
-      placeholder: '选择来源',
+      placeholder: '输入描述',
       options: [
-        { label: 'Inceptor', value: 'Inceptor' },
-        { label: 'oracle', value: 'oracle' },
-        { label: 'oracle2', value: 'oracle2' },
-        { label: '指标汇总表', value: '指标汇总表' },
+        { label: '默认工作组', value: '默认工作组' },
       ],
     },
-    colProps: { span: 8 },
   },
 ]
 export const formSchema: any = [
@@ -120,13 +170,18 @@ export const formSchema: any = [
   },
   {
     field: 'path',
-    label: '文件夹路径',
+    label: '路径',
     component: 'TreeSelect',
-    colProps: { span: 8 },
+    rules: [
+      {
+        required: true,
+        message: '请选择上级菜单',
+      },
+    ],
     componentProps: {
       fieldNames: {
-        label: 'title',
-        value: 'key',
+        label: 'label',
+        value: 'businessId',
       },
       getPopupContainer: () => document.body,
     },

src/views/mainBody/mainBodyModal.vue

 <template>
   <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
     <BasicForm @register="registerForm" />
+    <div class="modalRow">
+      <div>可见范围</div>
+      <div class="right">
+        <div class="clearAll">
+          清空
+        </div>
+        <div>
+          <a-button type="primary">添加工作组</a-button>
+        </div>
+      </div>
+    </div>
+    <div class="addDialogBG">
+      <div style="float: right">
+        <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
+      </div>
+      <TreeTwo class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    </div>
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -8,8 +25,10 @@ import {ref, computed, unref, reactive} from 'vue';
 import { BasicModal, useModalInner } from '@/components/Modal';
 import { BasicForm, useForm } from '@/components/Form';
 import { formSchemaMain } from './mainBody.data';
-
+import TreeTwo from './treeTwo.vue';
 import { useMessage } from '@/hooks/web/useMessage';
+import {getMenuList} from "@/api/system/menu/menu";
+import {treeDataList} from "@/views/mainBody/mock";
 defineOptions({ name: 'AccountModal' });
 
 const emit = defineEmits(['success', 'register']);
@@ -29,6 +48,7 @@ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] =
 });
 //初始化弹框
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+
   resetFields();
   setModalProps({ confirmLoading: false });
   isUpdate.value = !!data?.isUpdate;
@@ -41,6 +61,10 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
     });
   }
 
+  updateSchema({
+    field: 'path',
+    componentProps: { treeData:treeDataList },
+  });
 
 });
 
@@ -60,3 +84,28 @@ async function handleSubmit() {
   }
 }
 </script>
+<style lang="scss" scoped>
+.modalRow{
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .clearAll{
+    padding-right: 10px;
+    font-size: 16px;
+  }
+  .right{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.addDialogBG{
+  margin: 10px;
+  border-radius: 10px;
+  padding: 20px;
+  background-color:  #E8ECF7;
+  width: 98%;
+  height: 400px;
+}
+</style>

src/views/mainBody/mock.ts

@@ -67,13 +67,25 @@ export const tableList: any[] = [
 
 export const treeDataList = [
   {
-    title: '主体管理',
-    key: 1,
+    label: '主体管理',
+    businessId: 1,
+    children: [
+      { label: 'admin_个人工作区', businessId: 2 },
+      { label: '共享工作区', businessId: 3 },
+      { label: '商城工作区', businessId: 4 },
+      { label: '指标工作区', businessId: 5 },
+    ],
+  },
+]
+export const treeDataListTwo = [
+  {
+    label: '默认工作组',
+    businessId: 1,
     children: [
-      { title: 'admin_个人工作区', key: 2 },
-      { title: '共享工作区', key: 3 },
-      { title: '商城工作区', key: 4 },
-      { title: '指标工作区', key: 5 },
+      { label: '默认工作组01', businessId: 2 },
+      { label: '默认工作组02', businessId: 3 },
+      { label: '默认工作组03', businessId: 4 },
+      { label: '默认工作组04', businessId: 5 },
     ],
   },
 ]

src/views/mainBody/removeModal.vue

@@ -10,6 +10,7 @@ import { BasicForm, useForm } from '@/components/Form';
 import { formSchemaRemove } from './mainBody.data';
 
 import { useMessage } from '@/hooks/web/useMessage';
+import {treeDataList} from "@/views/mainBody/mock";
 defineOptions({ name: 'AccountModal' });
 
 const emit = defineEmits(['success', 'register']);
@@ -29,6 +30,7 @@ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] =
 });
 //初始化弹框
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  console.log('bbbbbbbbb')
   resetFields();
   setModalProps({ confirmLoading: false });
   isUpdate.value = !!data?.isUpdate;
@@ -40,7 +42,10 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
       ...data.record,
     });
   }
-
+  updateSchema({
+    field: 'path',
+    componentProps: { treeData:treeDataList },
+  });
 
 });
 

src/views/mainBody/treeTwo.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title="工作组"
+      ref="treeRef"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="true"
+      :checkable="true"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'label' }"
+      @select="handleSelect"
+    />
+  </div>
+</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 {treeDataListTwo} from "./mock";
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+
+
+async function fetch() {
+    treeData.value = treeDataListTwo
+  await nextTick(() => {
+    getTree().expandAll(true)
+  })
+  }
+function getTree() {
+  const tree = unref(treeRef);
+  if (!tree) {
+    throw new Error('tree is null!');
+  }
+  return tree;
+}
+
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>
+<style lang="scss" scoped>
+.bg-white{
+  width: 97%;
+}
+::v-deep(.vben-tree){
+  background-color:  #E8ECF7!important;
+}
+</style>