Merge branch 'perf/account-manage' into 'feat/account-role-manage'

perf: 优化账号管理组织树回显

See merge request yunteng/thingskit-front!1320

@@ -54,7 +54,7 @@ export const basicProps = {
   },
 
   checkedKeys: {
-    type: Array as PropType<CheckKeys>,
+    type: [Array, Object] as PropType<CheckKeys>,
     default: () => [],
   },
 

@@ -14,9 +14,10 @@
           </Button>
           <BasicTree
             v-if="organizationTreeData.length"
+            :check-strictly="checkStrictly"
             v-model:value="model[field]"
             :treeData="organizationTreeData"
-            :checked-keys="checkGroup"
+            :checked-keys="checkedKeys"
             :expandedKeys="treeExpandData"
             ref="basicTreeRef"
             @check="handleCheckClick"
@@ -25,6 +26,7 @@
             checkable
             toolbar
             @change="handleTreeSelect"
+            :replace-fields="{ children: 'children', title: 'name', key: 'id' }"
           />
         </template>
         <template #roleSlot="{ model, field }">
@@ -53,8 +55,8 @@
   </BasicModal>
   <RoleDrawer @register="registerRoleDrawer" @success="handleSuccess" />
 </template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive, onMounted, toRaw } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { accountFormSchema } from './account.data';
@@ -64,262 +66,264 @@
     SaveOrUpdateUserInfo,
     filterRoleList,
   } from '/@/api/system/system';
-  import { BasicTree, TreeItem, CheckKeys, CheckEvent } from '/@/components/Tree';
+  import { BasicTree, TreeItem, CheckKeys } from '/@/components/Tree';
   import { findCurrentUserGroups } from '/@/api/system/group';
   import { RoleOrOrganizationParam } from '/@/api/system/model/systemModel';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { copyTransTreeFun } from '/@/utils/fnUtils';
   import { TOption } from '/@/views/rule/linkedge/config/config.data';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { useDrawer } from '/@/components/Drawer';
   import RoleDrawer from '../../role/CustomRoleDrawer.vue';
   import OrganizationDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
+  import { GroupListResultModel } from '/@/api/system/model/groupModel';
+  import { isArray } from '/@/utils/is';
 
-  export default defineComponent({
-    name: 'AccountModal',
-    components: {
-      BasicModal,
-      BasicForm,
-      Button,
-      BasicTree,
-      OrganizationDrawer,
-      PlusOutlined,
-      RoleDrawer,
-      VNodes: (_, { attrs }) => {
-        return attrs.vnodes;
-      },
-    },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const roleOptions = ref<TOption[]>([]);
-      const isUpdate = ref(true);
-      const rowId = ref('');
-      const organizationTreeData = ref<TreeItem[]>([]);
-      const basicTreeRef = ref();
-      const checkGroup = ref<string[]>([]);
-      const treeExpandData = ref([]);
-      const olderPhoneNumber = ref();
-      const postData = reactive({});
-      const singleEditPostPhoneNumber = reactive({
-        phoneNumber: '',
-      });
-      const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
-      const getRoleList = async () => {
-        const res = await filterRoleList();
-        roleOptions.value = res.map((m) => {
-          return {
-            label: m.name,
-            value: m.id,
-          };
-        });
-      };
-      onMounted(async () => {
-        await getRoleList();
-      });
-      const [registerRoleDrawer, { openDrawer }] = useDrawer();
+  const VNodes = (_, { attrs }) => {
+    return attrs.vnodes;
+  };
 
-      const handleOpenRole = () => {
-        openDrawer(true, {
-          isUpdate: false,
-        });
-      };
-      const clearValidateByField = (field: string) => {
-        clearValidate(field);
-      };
-      const handleRoleSelect = (e) => {
-        if (e?.length > 0) clearValidateByField('roleIds');
-        else validateFields(['roleIds']);
-      };
-      const handleTreeSelect = (e) => {
-        if (e) clearValidateByField('organizationIds');
-      };
-      const handleSuccess = async () => {
-        await getRoleList();
+  const emit = defineEmits(['register', 'success']);
+
+  const checkStrictly = ref(true);
+  const roleOptions = ref<TOption[]>([]);
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const organizationTreeData = ref<TreeItem[]>([]);
+  const basicTreeRef = ref();
+  const checkedKeys = reactive<CheckKeys>({ checked: [], halfChecked: [] });
+  const treeExpandData = ref([]);
+  const olderPhoneNumber = ref();
+  const postData = reactive({});
+  const singleEditPostPhoneNumber = reactive({
+    phoneNumber: '',
+  });
+  const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
+  const getRoleList = async () => {
+    const res = await filterRoleList();
+    roleOptions.value = res.map((m) => {
+      return {
+        label: m.name,
+        value: m.id,
       };
-      const [
-        registerForm,
-        {
-          setFieldsValue,
-          updateSchema,
-          resetFields,
-          validate,
-          getFieldsValue,
-          clearValidate,
-          validateFields,
-        },
-      ] = useForm({
-        labelWidth: 100,
-        schemas: accountFormSchema,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 18,
-        },
+    });
+  };
+  onMounted(async () => {
+    await getRoleList();
+  });
+  const [registerRoleDrawer, { openDrawer }] = useDrawer();
+
+  const handleOpenRole = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  };
+  const clearValidateByField = (field: string) => {
+    clearValidate(field);
+  };
+  const handleRoleSelect = (e) => {
+    if (e?.length > 0) clearValidateByField('roleIds');
+    else validateFields(['roleIds']);
+  };
+  const handleTreeSelect = (e) => {
+    if (e) clearValidateByField('organizationIds');
+  };
+  const handleSuccess = async () => {
+    await getRoleList();
+  };
+  const [
+    registerForm,
+    {
+      setFieldsValue,
+      updateSchema,
+      resetFields,
+      validate,
+      getFieldsValue,
+      clearValidate,
+      validateFields,
+    },
+  ] = useForm({
+    labelWidth: 100,
+    schemas: accountFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 18,
+    },
+  });
+  //获取所有父级id
+  function findForAllId(data = [], arr = []) {
+    for (const item of data) {
+      arr.push(item.id);
+    }
+    return arr;
+  }
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    checkStrictly.value = true;
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    const groupListModel = await findCurrentUserGroups();
+    if (!unref(organizationTreeData).length) {
+      organizationTreeData.value = groupListModel;
+      buildNodeMap(toRaw(unref(groupListModel)));
+      const getAllIds = findForAllId(organizationTreeData.value as any, []);
+      //设置要展开的id
+      treeExpandData.value = getAllIds;
+    }
+    if (unref(isUpdate)) {
+      rowId.value = data.record.id;
+      const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
+      olderPhoneNumber.value = data.record.phoneNumber;
+      singleEditPostPhoneNumber.phoneNumber = data.record.phoneNumber;
+      findCurrentUserRelation(roleParams).then((result) => {
+        Reflect.set(data.record, 'roleIds', result);
+        Reflect.set(data.record, 'password', '******');
+        setFieldsValue(data.record);
       });
-      //获取所有父级id
-      function findForAllId(data = [], arr = []) {
-        for (const item of data) {
-          arr.push(item.id);
-        }
-        return arr;
+      const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
+      const checked = await findCurrentUserRelation(organizationParams);
+      const halfChecked = getHalfCheckedNode(checked);
+      Object.assign(checkedKeys, { checked, halfChecked });
+      setFieldsValue({ organizationIds: toRaw(checkedKeys) });
+    }
+    await updateSchema([
+      {
+        field: 'username',
+        dynamicDisabled: unref(isUpdate),
+      },
+      {
+        field: 'password',
+        ifShow: !unref(isUpdate),
+      },
+    ]);
+  });
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增客户账号' : '编辑客户账号'));
+
+  const getFormatValues = (values: Recordable) => {
+    const organizationIds = values.organizationIds;
+    if (!organizationIds || isArray(organizationIds)) return values;
+
+    values.organizationIds = values?.organizationIds?.checked;
+
+    return values;
+  };
+
+  async function handleSubmit() {
+    setModalProps({ confirmLoading: true });
+    try {
+      const { createMessage } = useMessage();
+      if (unref(isUpdate)) {
+        Object.assign(postData, singleEditPostPhoneNumber);
       }
+      const values = await validate([
+        'id',
+        'username',
+        'realName',
+        'password',
+        'roleIds',
+        'email',
+        'accountExpireTime',
+        'enabled',
+        'remark',
+        'organizationIds',
+        olderPhoneNumber.value === getFieldsValue().phoneNumber ? '' : 'phoneNumber',
+      ]);
 
-      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-        await resetFields();
-        setModalProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
-        const groupListModel = await findCurrentUserGroups();
-        if (!unref(organizationTreeData).length) {
-          copyTransTreeFun(groupListModel);
-          organizationTreeData.value = groupListModel;
-          const getAllIds = findForAllId(organizationTreeData.value as any, []);
-          //设置要展开的id
-          treeExpandData.value = getAllIds;
+      values.accountExpireTime =
+        typeof values.accountExpireTime != 'undefined' && values.accountExpireTime != null
+          ? values.accountExpireTime.format('YYYY-MM-DD HH:mm:ss')
+          : null;
+
+      Object.assign(postData, getFormatValues(values));
+      if (unref(isUpdate)) {
+        if (values.email == '') {
+          delete postData.email;
         }
-        if (unref(isUpdate)) {
-          rowId.value = data.record.id;
-          const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
-          olderPhoneNumber.value = data.record.phoneNumber;
-          singleEditPostPhoneNumber.phoneNumber = data.record.phoneNumber;
-          findCurrentUserRelation(roleParams).then((result) => {
-            Reflect.set(data.record, 'roleIds', result);
-            Reflect.set(data.record, 'password', '******');
-            setFieldsValue(data.record);
-          });
-          const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
-          checkGroup.value = await findCurrentUserRelation(organizationParams);
+      } else {
+        if (values.email == '') {
+          delete postData.email;
         }
-        await updateSchema([
-          {
-            field: 'username',
-            dynamicDisabled: unref(isUpdate),
-          },
-          {
-            field: 'password',
-            ifShow: !unref(isUpdate),
-          },
-        ]);
-      });
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增客户账号' : '编辑客户账号'));
+      }
+      if (!Reflect.get(values, 'accountExpireTime')) {
+        Reflect.deleteProperty(postData, 'accountExpireTime');
+      }
+      await SaveOrUpdateUserInfo(postData as any, unref(isUpdate));
+      closeModal();
+      emit('success');
+      createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
+    } finally {
+      setTimeout(() => {
+        setModalProps({ confirmLoading: false });
+      }, 300);
+    }
+  }
+  // 取消全部的时候清除回显时获取的
+  const handleUnSelectAll = () => {
+    checkedKeysWithHalfChecked.value = [];
+  };
+
+  const strictlyStatus = ref(false); //层级关联或独立的状态 false为层级关联 true为层级独立
 
-      async function handleSubmit() {
-        setModalProps({ confirmLoading: true });
-        try {
-          const { createMessage } = useMessage();
-          if (unref(isUpdate)) {
-            Object.assign(postData, singleEditPostPhoneNumber);
-          }
-          const values = await validate([
-            'id',
-            'username',
-            'realName',
-            'password',
-            'roleIds',
-            'email',
-            'accountExpireTime',
-            'enabled',
-            'remark',
-            'organizationIds',
-            olderPhoneNumber.value === getFieldsValue().phoneNumber ? '' : 'phoneNumber',
-          ]);
-          let treeCheckedKeys: string[] | CheckKeys =
-            (unref(basicTreeRef)?.getCheckedKeys() as string[] | CheckKeys) || [];
-          //fix 取消层级独立后(unref(treeRef)?.getCheckedKeys() as string[])的数据不是数组，是{checked:[],halfChecked:[]}对象，迭代报错
-          if (!Array.isArray(treeCheckedKeys)) {
-            treeCheckedKeys = treeCheckedKeys?.checked;
-          }
-          const organizationIds = [
-            ...new Set([...unref(checkedKeysWithHalfChecked), ...treeCheckedKeys]),
-          ];
-          values.accountExpireTime =
-            typeof values.accountExpireTime != 'undefined' && values.accountExpireTime != null
-              ? values.accountExpireTime.format('YYYY-MM-DD HH:mm:ss')
-              : null;
-          values.organizationIds = organizationIds;
-          Object.assign(postData, values);
-          if (unref(isUpdate)) {
-            if (values.email == '') {
-              delete postData.email;
-            }
-          } else {
-            if (values.email == '') {
-              delete postData.email;
-            }
-          }
-          if (!Reflect.get(values, 'accountExpireTime')) {
-            Reflect.deleteProperty(postData, 'accountExpireTime');
-          }
-          await SaveOrUpdateUserInfo(postData as any, unref(isUpdate));
-          closeModal();
-          emit('success');
-          createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
-        } finally {
-          setTimeout(() => {
-            setModalProps({ confirmLoading: false });
-          }, 300);
+  const handleStrictlyStatus = (status) => (strictlyStatus.value = status);
+
+  const handleCheckClick = () => {
+    if (unref(checkStrictly)) {
+      checkStrictly.value = false;
+    }
+  };
+
+  const [registerDrawer, { openDrawer: addOpenDrawer }] = useDrawer();
+
+  const handleOpenCreate = () => {
+    addOpenDrawer(true, { isUpdate: false });
+  };
+  const handleReload = async () => {
+    const groupListModel = await findCurrentUserGroups();
+    organizationTreeData.value = groupListModel;
+    buildNodeMap(toRaw(unref(groupListModel)));
+  };
+
+  const treeNodeMap = ref<Record<string, { parentId?: string; children?: string[] }>>();
+
+  function buildNodeMap(tree: GroupListResultModel) {
+    const nodeMap: Record<string, { parentId?: string; children?: string[] }> = {};
+
+    function traverse(tree: GroupListResultModel) {
+      for (let node of tree) {
+        Reflect.set(nodeMap, node.id, {
+          parentId: node.parentId,
+          children: node.children?.map((item) => item.id),
+        });
+
+        if (node.children && node.children.length) {
+          traverse(node.children);
         }
       }
-      // 取消全部的时候清除回显时获取的
-      const handleUnSelectAll = () => {
-        checkedKeysWithHalfChecked.value = [];
-      };
+    }
+    traverse(tree);
 
-      const strictlyStatus = ref(false); //层级关联或独立的状态 false为层级关联 true为层级独立
+    treeNodeMap.value = nodeMap;
+  }
 
-      const handleStrictlyStatus = (status) => (strictlyStatus.value = status);
+  function getHalfCheckedNode(keys: string[]) {
+    const relation = unref(treeNodeMap) || {};
+    const halfChecked: string[] = [];
 
-      const handleCheckClick = (selectedKeys: CheckKeys, event: CheckEvent) => {
-        //fix 取消层级独立后selectedKeys不是数组，是{checked:[],halfChecked:[]}对象 迭代报错
-        // 层级独立
-        if (strictlyStatus.value) {
-          if (!Array.isArray(selectedKeys)) {
-            selectedKeys = selectedKeys?.checked;
-            event.halfCheckedKeys = [];
-          }
-        } else {
-          // 层级关联
-          event.halfCheckedKeys = [];
-        }
-        checkedKeysWithHalfChecked.value = [
-          ...selectedKeys,
-          ...(event.halfCheckedKeys as string[]),
-        ];
-      };
+    for (const key of keys) {
+      let current = relation[key];
 
-      const [registerDrawer, { openDrawer: addOpenDrawer }] = useDrawer();
+      while (current) {
+        if (keys.includes(current.parentId!) || !current.parentId) {
+          break;
+        }
 
-      const handleOpenCreate = () => {
-        addOpenDrawer(true, { isUpdate: false });
-      };
-      const handleReload = async () => {
-        const groupListModel = await findCurrentUserGroups();
-        copyTransTreeFun(groupListModel);
-        organizationTreeData.value = groupListModel;
-      };
+        halfChecked.push(current.parentId!);
+        current = relation[current.parentId!];
+      }
+    }
 
-      return {
-        registerModal,
-        registerForm,
-        handleSubmit,
-        getTitle,
-        organizationTreeData,
-        checkGroup,
-        basicTreeRef,
-        treeExpandData,
-        roleOptions,
-        registerRoleDrawer,
-        handleOpenRole,
-        handleSuccess,
-        handleRoleSelect,
-        handleTreeSelect,
-        handleCheckClick,
-        handleUnSelectAll,
-        handleStrictlyStatus,
-        handleOpenCreate,
-        registerDrawer,
-        handleReload,
-      };
-    },
-  });
+    return Array.from(new Set(halfChecked));
+  }
 </script>
 <style scoped lang="less">
   :deep(.vben-basic-tree) {

@@ -14,9 +14,10 @@
           </Button>
           <BasicTree
             v-if="organizationTreeData.length"
+            :check-strictly="checkStrictly"
             v-model:value="model[field]"
             :treeData="organizationTreeData"
-            :checked-keys="checkGroup"
+            :checked-keys="checkedKeys"
             :expandedKeys="treeExpandData"
             ref="basicTreeRef"
             @check="handleCheckClick"
@@ -25,6 +26,7 @@
             checkable
             toolbar
             @change="handleTreeSelect"
+            :replace-fields="{ children: 'children', title: 'name', key: 'id' }"
           />
         </template>
         <template #roleSlot="{ model, field }">
@@ -53,19 +55,18 @@
   </BasicModal>
   <RoleDrawer @register="registerRoleDrawer" @success="handleSuccess" />
 </template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive, onMounted } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { accountFormSchema } from './config';
   import { Button } from 'ant-design-vue';
   import { findCurrentUserRelation, filterRoleList } from '/@/api/system/system';
   import { addTenantList } from '/@/api/system/account';
-  import { BasicTree, TreeItem, CheckKeys, CheckEvent } from '/@/components/Tree';
+  import { BasicTree, TreeItem, CheckKeys } from '/@/components/Tree';
   import { findCurrentUserGroups } from '/@/api/system/group';
   import { RoleOrOrganizationParam } from '/@/api/system/model/systemModel';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { copyTransTreeFun } from '/@/utils/fnUtils';
   import { TOption } from '/@/views/rule/linkedge/config/config.data';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { useDrawer } from '/@/components/Drawer';
@@ -74,267 +75,285 @@
   import { useUserStore } from '/@/store/modules/user';
   import { IsPhoneExist } from '/@/api/system/system';
   import { phoneRegexp } from '/@/utils/rules';
+  import { GroupListResultModel } from '/@/api/system/model/groupModel';
+  import { toRaw } from 'vue';
+  import { isArray } from '/@/utils/is';
 
-  export default defineComponent({
-    name: 'TenantModal',
-    components: {
-      BasicModal,
-      BasicForm,
-      Button,
-      BasicTree,
-      OrganizationDrawer,
-      PlusOutlined,
-      RoleDrawer,
-      VNodes: (_, { attrs }) => {
-        return attrs.vnodes;
-      },
-    },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const [registerRoleDrawer, { openDrawer }] = useDrawer();
-      const { createMessage } = useMessage();
-      const userInfo = useUserStore();
+  const VNodes = (_, { attrs }) => {
+    return attrs.vnodes;
+  };
 
-      const roleOptions = ref<TOption[]>([]);
-      const isAdd = ref(true);
-      const rowId = ref('');
-      const organizationTreeData = ref<TreeItem[]>([]);
-      const basicTreeRef = ref();
-      const checkGroup = ref<string[]>([]);
-      const treeExpandData = ref([]);
-      const olderPhoneNumber = ref();
-      const singleEditPostPhoneNumber = reactive({
-        phoneNumber: '',
-      });
-      const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
-      const getRoleList = async () => {
-        const res = await filterRoleList({ roleType: 'TENANT_ADMIN' });
-        roleOptions.value = res.map((m) => {
-          return {
-            label: m.name,
-            value: m.id,
-          };
-        });
-      };
+  const emit = defineEmits(['register', 'success']);
 
-      onMounted(async () => {
-        await getRoleList();
-      });
-      const handleOpenRole = () => {
-        openDrawer(true, {
-          isAdd: false,
-        });
-      };
-      const clearValidateByField = (field: string) => {
-        clearValidate(field);
-      };
-      const handleRoleSelect = (e) => {
-        if (e?.length > 0) clearValidateByField('roleIds');
-        else validateFields(['roleIds']);
-      };
-      const handleTreeSelect = (e) => {
-        if (e) clearValidateByField('organizationIds');
-      };
-      const handleSuccess = async () => {
-        await getRoleList();
+  const [registerRoleDrawer, { openDrawer }] = useDrawer();
+  const { createMessage } = useMessage();
+  const userInfo = useUserStore();
+
+  const checkStrictly = ref(true);
+
+  const roleOptions = ref<TOption[]>([]);
+  const isAdd = ref(true);
+  const rowId = ref('');
+  const organizationTreeData = ref<TreeItem[]>([]);
+  const basicTreeRef = ref();
+  const checkedKeys = reactive<CheckKeys>({ checked: [], halfChecked: [] });
+  const treeExpandData = ref([]);
+  const olderPhoneNumber = ref();
+  const singleEditPostPhoneNumber = reactive({
+    phoneNumber: '',
+  });
+  const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
+  const getRoleList = async () => {
+    const res = await filterRoleList({ roleType: 'TENANT_ADMIN' });
+    roleOptions.value = res.map((m) => {
+      return {
+        label: m.name,
+        value: m.id,
       };
-      const [
-        registerForm,
-        {
-          setFieldsValue,
-          updateSchema,
-          resetFields,
-          validate,
-          getFieldsValue,
-          clearValidate,
-          validateFields,
-        },
-      ] = useForm({
-        labelWidth: 100,
-        schemas: accountFormSchema,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 18,
-        },
-      });
-      //获取所有父级id
-      function findForAllId(data = [], arr = []) {
-        for (const item of data) {
-          arr.push(item.id);
-        }
-        return arr;
-      }
+    });
+  };
 
-      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-        await resetFields();
-        setModalProps({ confirmLoading: false });
-        isAdd.value = !!data?.isAdd;
-        const groupListModel = await findCurrentUserGroups();
-        if (!unref(organizationTreeData).length) {
-          copyTransTreeFun(groupListModel);
-          organizationTreeData.value = groupListModel;
-          const getAllIds = findForAllId(organizationTreeData.value as any, []);
-          //设置要展开的id
-          treeExpandData.value = getAllIds;
-        }
+  onMounted(async () => {
+    await getRoleList();
+  });
+  const handleOpenRole = () => {
+    openDrawer(true, {
+      isAdd: false,
+    });
+  };
+  const clearValidateByField = (field: string) => {
+    clearValidate(field);
+  };
+  const handleRoleSelect = (e) => {
+    if (e?.length > 0) clearValidateByField('roleIds');
+    else validateFields(['roleIds']);
+  };
+  const handleTreeSelect = (e) => {
+    if (e) clearValidateByField('organizationIds');
+  };
+  const handleSuccess = async () => {
+    await getRoleList();
+  };
+  const [
+    registerForm,
+    {
+      setFieldsValue,
+      updateSchema,
+      resetFields,
+      validate,
+      getFieldsValue,
+      clearValidate,
+      validateFields,
+    },
+  ] = useForm({
+    labelWidth: 100,
+    schemas: accountFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 18,
+    },
+  });
+  //获取所有父级id
+  function findForAllId(data = [], arr = []) {
+    for (const item of data) {
+      arr.push(item.id);
+    }
+    return arr;
+  }
 
-        if (!unref(isAdd)) {
-          rowId.value = data.record.id;
-          const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
-          olderPhoneNumber.value = data.record.phoneNumber;
-          singleEditPostPhoneNumber.phoneNumber = data.record.phoneNumber;
-          findCurrentUserRelation(roleParams).then((result) => {
-            Reflect.set(data.record, 'roleIds', result);
-            setFieldsValue(data.record);
-          });
-          updateSchema([
-            {
-              field: 'phoneNumber',
-              dynamicRules: () => {
-                return [
-                  {
-                    required: true,
-                    validator(_, value) {
-                      return new Promise((resolve, reject) => {
-                        if (value == '') {
-                          reject('请输入手机号');
-                        } else if (!phoneRegexp.test(value)) {
-                          reject('请输入正确的手机号');
-                        } else {
-                          resolve();
-                        }
-                      });
-                    },
-                  },
-                ];
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    checkStrictly.value = true;
+    setModalProps({ confirmLoading: false });
+    isAdd.value = !!data?.isAdd;
+    const groupListModel = await findCurrentUserGroups();
+    if (!unref(organizationTreeData).length) {
+      organizationTreeData.value = groupListModel;
+      buildNodeMap(toRaw(unref(organizationTreeData) as GroupListResultModel));
+      const getAllIds = findForAllId(organizationTreeData.value as any, []);
+      //设置要展开的id
+      treeExpandData.value = getAllIds;
+    }
+
+    if (!unref(isAdd)) {
+      rowId.value = data.record.id;
+      const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
+      olderPhoneNumber.value = data.record.phoneNumber;
+      singleEditPostPhoneNumber.phoneNumber = data.record.phoneNumber;
+      findCurrentUserRelation(roleParams).then((result) => {
+        Reflect.set(data.record, 'roleIds', result);
+        setFieldsValue(data.record);
+      });
+      updateSchema([
+        {
+          field: 'phoneNumber',
+          dynamicRules: () => {
+            return [
+              {
+                required: true,
+                validator(_, value) {
+                  return new Promise((resolve, reject) => {
+                    if (value == '') {
+                      reject('请输入手机号');
+                    } else if (!phoneRegexp.test(value)) {
+                      reject('请输入正确的手机号');
+                    } else {
+                      resolve();
+                    }
+                  });
+                },
               },
-            },
-          ]);
-          const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
-          checkGroup.value = await findCurrentUserRelation(organizationParams);
-        } else {
-          updateSchema([
-            {
-              field: 'phoneNumber',
-              dynamicRules: ({ values }) => {
-                return [
-                  {
-                    required: true,
-                    validator(_, value) {
-                      return new Promise((resolve, reject) => {
-                        if (value == '') {
-                          reject('请输入手机号');
-                        } else if (!phoneRegexp.test(value)) {
-                          reject('请输入正确的手机号');
-                        } else {
-                          if (values.phoneNumber != undefined) {
-                            // 此处可以用防抖函数优化性能
-                            IsPhoneExist(value).then(({ data }) => {
-                              if (data != null) {
-                                reject('手机号已存在');
-                              } else {
-                                resolve();
-                              }
-                            });
+            ];
+          },
+        },
+      ]);
+      const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
+      const checked = await findCurrentUserRelation(organizationParams);
+      const halfChecked = getHalfCheckedNode(checked);
+      Object.assign(checkedKeys, { checked, halfChecked });
+      setFieldsValue({ organizationIds: toRaw(checkedKeys) });
+    } else {
+      updateSchema([
+        {
+          field: 'phoneNumber',
+          dynamicRules: ({ values }) => {
+            return [
+              {
+                required: true,
+                validator(_, value) {
+                  return new Promise((resolve, reject) => {
+                    if (value == '') {
+                      reject('请输入手机号');
+                    } else if (!phoneRegexp.test(value)) {
+                      reject('请输入正确的手机号');
+                    } else {
+                      if (values.phoneNumber != undefined) {
+                        // 此处可以用防抖函数优化性能
+                        IsPhoneExist(value).then(({ data }) => {
+                          if (data != null) {
+                            reject('手机号已存在');
                           } else {
                             resolve();
                           }
-                        }
-                      });
-                    },
-                  },
-                ];
+                        });
+                      } else {
+                        resolve();
+                      }
+                    }
+                  });
+                },
               },
-            },
-          ]);
-        }
-        await updateSchema([
-          {
-            field: 'username',
-            dynamicDisabled: !unref(isAdd),
+            ];
           },
-        ]);
+        },
+      ]);
+    }
+    await updateSchema([
+      {
+        field: 'username',
+        dynamicDisabled: !unref(isAdd),
+      },
+    ]);
+  });
+  const getTitle = computed(() => (unref(isAdd) ? '新增管理员账号' : '编辑管理员账号'));
+
+  const getFormatValues = (values: Recordable) => {
+    const organizationIds = values.organizationIds;
+    if (!organizationIds || isArray(organizationIds)) return values;
+
+    values.organizationIds = values?.organizationIds?.checked;
+
+    return values;
+  };
+
+  async function handleSubmit() {
+    setModalProps({ confirmLoading: true });
+    try {
+      const values = getFieldsValue();
+      if (!('organizationIds' in values)) {
+        createMessage.error('组织必选');
+      }
+
+      await validate();
+      await addTenantList({
+        ...getFormatValues(values),
+        level: 4,
+        tenantId: userInfo.getUserInfo.tenantId!,
       });
-      const getTitle = computed(() => (unref(isAdd) ? '新增管理员账号' : '编辑管理员账号'));
+      createMessage.success(unref(isAdd) ? '新增成功' : '编辑成功');
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+  // 取消全部的时候清除回显时获取的
+  const handleUnSelectAll = () => {
+    checkedKeysWithHalfChecked.value = [];
+  };
+
+  const strictlyStatus = ref(false); //层级关联或独立的状态 false为层级关联 true为层级独立
+
+  const handleStrictlyStatus = (status) => (strictlyStatus.value = status);
+
+  const handleCheckClick = () => {
+    if (unref(checkStrictly)) {
+      checkStrictly.value = false;
+    }
+  };
+
+  const [registerDrawer, { openDrawer: addOpenDrawer }] = useDrawer();
+
+  const handleOpenCreate = () => {
+    addOpenDrawer(true, { isAdd: false });
+  };
+  const handleReload = async () => {
+    const groupListModel = await findCurrentUserGroups();
+    organizationTreeData.value = groupListModel;
+    buildNodeMap(toRaw(unref(groupListModel)));
+  };
+
+  const treeNodeMap = ref<Record<string, { parentId?: string; children?: string[] }>>();
 
-      async function handleSubmit() {
-        setModalProps({ confirmLoading: true });
-        try {
-          const values = getFieldsValue();
-          if (!('organizationIds' in values)) {
-            createMessage.error('组织必选');
-          }
-          await validate();
-          await addTenantList({ ...values, level: 4, tenantId: userInfo.getUserInfo.tenantId! });
-          createMessage.success(unref(isAdd) ? '新增成功' : '编辑成功');
-          closeModal();
-          emit('success');
-        } finally {
-          setModalProps({ confirmLoading: false });
+  function buildNodeMap(tree: GroupListResultModel) {
+    const nodeMap: Record<string, { parentId?: string; children?: string[] }> = {};
+
+    function traverse(tree: GroupListResultModel) {
+      for (let node of tree) {
+        Reflect.set(nodeMap, node.id, {
+          parentId: node.parentId,
+          children: node.children?.map((item) => item.id),
+        });
+
+        if (node.children && node.children.length) {
+          traverse(node.children);
         }
       }
-      // 取消全部的时候清除回显时获取的
-      const handleUnSelectAll = () => {
-        checkedKeysWithHalfChecked.value = [];
-      };
+    }
+    traverse(tree);
 
-      const strictlyStatus = ref(false); //层级关联或独立的状态 false为层级关联 true为层级独立
+    treeNodeMap.value = nodeMap;
+  }
 
-      const handleStrictlyStatus = (status) => (strictlyStatus.value = status);
+  function getHalfCheckedNode(keys: string[]) {
+    const relation = unref(treeNodeMap) || {};
+    const halfChecked: string[] = [];
 
-      const handleCheckClick = (selectedKeys: CheckKeys, event: CheckEvent) => {
-        //fix 取消层级独立后selectedKeys不是数组，是{checked:[],halfChecked:[]}对象 迭代报错
-        // 层级独立
-        if (strictlyStatus.value) {
-          if (!Array.isArray(selectedKeys)) {
-            selectedKeys = selectedKeys?.checked;
-            event.halfCheckedKeys = [];
-          }
-        } else {
-          // 层级关联
-          event.halfCheckedKeys = [];
-        }
-        checkedKeysWithHalfChecked.value = [
-          ...selectedKeys,
-          ...(event.halfCheckedKeys as string[]),
-        ];
-      };
+    for (const key of keys) {
+      let current = relation[key];
 
-      const [registerDrawer, { openDrawer: addOpenDrawer }] = useDrawer();
+      while (current) {
+        if (keys.includes(current.parentId!) || !current.parentId) {
+          break;
+        }
 
-      const handleOpenCreate = () => {
-        addOpenDrawer(true, { isAdd: false });
-      };
-      const handleReload = async () => {
-        const groupListModel = await findCurrentUserGroups();
-        copyTransTreeFun(groupListModel);
-        organizationTreeData.value = groupListModel;
-      };
+        halfChecked.push(current.parentId!);
+        current = relation[current.parentId!];
+      }
+    }
 
-      return {
-        registerModal,
-        registerForm,
-        handleSubmit,
-        getTitle,
-        organizationTreeData,
-        checkGroup,
-        basicTreeRef,
-        treeExpandData,
-        roleOptions,
-        registerRoleDrawer,
-        handleOpenRole,
-        handleSuccess,
-        handleRoleSelect,
-        handleTreeSelect,
-        handleCheckClick,
-        handleUnSelectAll,
-        handleStrictlyStatus,
-        handleOpenCreate,
-        registerDrawer,
-        handleReload,
-      };
-    },
-  });
+    return Array.from(new Set(halfChecked));
+  }
 </script>
 <style scoped lang="less">
   :deep(.vben-basic-tree) {