feat: 系统管理 组织架构 选人选组织组件替换

src/views/system/department/components/DeptDrawer.vue

@@ -51,7 +51,7 @@
       title: '基础信息',
       field: 'parentId',
       label: t('上级组织'),
-      component: 'TreeSelect',
+      component: 'Dept',
       componentProps: {
         placeholder: '请选择上级组织',
         fieldNames: {

src/views/system/user/components/UserModal.vue

@@ -136,7 +136,7 @@
     {
       field: 'departmentIds',
       label: t('所属机构'),
-      component: 'TreeSelect',
+      component: 'Dept',
       componentProps: {
         placeholder: '请选择所属机构',
         fieldNames: {
@@ -144,6 +144,7 @@
           key: 'id',
           value: 'id',
         },
+        isArray: true,
         multiple: true,
         getPopupContainer: () => document.body,
       },

src/views/system/user/index.vue

@@ -1,6 +1,11 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <DeptTree class="w-1/3 xl:w-1/4" @select="handleSelect" />
+    <div class="dept-v2 w-1/3 xl:w-1/4">
+      <div class="tree-title">
+        组织列表
+      </div>
+      <DeptTreeV2 @select="handleSelect" />
+    </div>
     <BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
       <template #toolbar>
         <a-button type="primary" v-auth="'user:add'" @click="handleCreate">{{
@@ -53,6 +58,7 @@
   import { useModal } from '/@/components/Modal';
   import AccountModal from './components/UserModal.vue';
   import DeptTree from './components/DeptTree.vue';
+  import DeptTreeV2 from '/@/components/Form/src/components/SelectDepartmentTreeV2.vue'
   import { useI18n } from '/@/hooks/web/useI18n';
   import { Tag } from 'ant-design-vue';
   const { t } = useI18n();
@@ -157,7 +163,7 @@
 
   export default defineComponent({
     name: 'UserManagement',
-    components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction },
+    components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction, DeptTreeV2 },
     setup() {
       const { notification } = useMessage();
       const selectDeptId = ref('');
@@ -301,7 +307,7 @@
         reload();
       }
 
-      function handleSelect(deptId = '') {
+      function handleSelect([deptId]) {
         selectDeptId.value = deptId;
         reload();
       }
@@ -326,3 +332,20 @@
     },
   });
 </script>
+<style lang="less" scoped>
+.dept-v2 {
+  margin-right: 16px;
+  background-color: #fff;
+  padding: 8px;
+  height: 100%;
+  overflow: scroll;
+}
+.tree-title {
+  padding: 8px 16px;
+  font-weight: 600;
+  font-size: 16px;
+}
+:deep(.select-department-tree) {
+  
+}
+</style>