菜单回显bug

src/views/personnel/memberManagement.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="member">
     <div class="member-tree">
-      <el-inputel-input
+      <el-input
         v-model="filterText"
         style="width: 240px"
         placeholder="姓名，手机号，工号查询"
@@ -272,7 +272,7 @@ type tableType = {
   name: string;
 };
 //获取机构列表
-const deptTreeData = ref<tableType[]>([]);
+const deptTreeData = ref();
 
 const getInstitutionList = () => {
   // pageInfo.pageNum=item.pageNum
@@ -383,7 +383,7 @@ interface Page {
    [key: string]: any
 
 }
-const tableData = ref<Page>([])
+const tableData = ref<Page[]>([])
 const columns = [
   { prop: "name", label: "姓名" },
   { prop: "mobile", label: "手机号" },

src/views/personnel/roleManagement.vue

@@ -58,8 +58,7 @@
           <el-tabs :tab-position="'left'" class="demo-tabs">
             <el-tab-pane label="菜单/操作权限" style="height: 340px;overflow-y: auto;">
               <ElTree :data="treeData" ref="permsRef" :props="defaultProps" show-checkbox node-key="id"
-                :default-expand-all="true" check-strictly  :default-checked-keys="checkedKeys"
-                @check="handleCheckChange">
+                :default-expand-all="true" :default-checked-keys="checkedKeys" @check="handleCheckChange">
                 <template #default="{ node, data }">
                   <div class="flex a-c ">
                     <span>{{ node.label }}</span>
@@ -77,8 +76,8 @@
                 <el-radio value="3" size="large">指定机构</el-radio>
               </el-radio-group>
               <ElTree style="max-height: 440px; overflow-y: auto;" :data="deptTreeData" :props="deptProps" show-checkbox
-                node-key="id" :check-strictly="true" :default-expand-all="true" :default-checked-keys="roleInfo.deptIds"
-                @check="handleDeptCheckChange" ref="deptTree" />
+                node-key="id" :check-strictly="false" :default-expand-all="true"
+                :default-checked-keys="roleInfo.deptIds" @check="handleDeptCheckChange" ref="deptTree" />
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -154,9 +153,13 @@ const handleCheckChange = (
     halfCheckedNodes: any[];
   }
 ) => {
-  roleInfo.permsId = [...checkedInfo.checkedKeys, ...checkedInfo.halfCheckedKeys];
+  const halfCheckedNodes = checkedInfo.halfCheckedNodes.map(val => {
+    return { ...val, halfChecked: 1 };
+  });
+  roleInfo.permsId = [];
   roleInfo.perms = [];
-  roleInfo.perms = [...checkedInfo.checkedNodes, ...checkedInfo.halfCheckedNodes];
+  roleInfo.permsId = [...checkedInfo.checkedKeys, ...checkedInfo.halfCheckedKeys];
+  roleInfo.perms = [...halfCheckedNodes, ...checkedInfo.checkedNodes];
 };
 
 const handleDeptCheckChange = (
@@ -222,6 +225,8 @@ interface Perm {
 const checkedKeys = ref<string[]>([]);
 //选择角色
 function chooseRole(item: any) {
+  deptTree.value!.setCheckedKeys([], true)
+  permsRef.value!.setCheckedKeys([], true)
   roleId.value = item.id;
   api.roleApi
     .roleInfo({
@@ -233,19 +238,17 @@ function chooseRole(item: any) {
       perms: [],
     })
     .then((res) => {
-      // console.log(res);
+      console.log(res);
       roleInfo.name = res.data.name;
       roleInfo.remark = res.data.remark;
       roleInfo.deptId = res.data.deptId;
       roleInfo.permsId = res.data.perms.map((val: Perm) => val.id);
       roleInfo.perms = res.data.perms;
-      checkedKeys.value = res.data.perms.map((val: Perm) => val.id);
-      console.log(checkedKeys.value)
+      checkedKeys.value = res.data.perms.filter((val: any) => val.halfChecked != 1).map((val: Perm) => val.id);
       if (res.data.dataScope?.deptIds) {
         deptTree.value!.setCheckedKeys(res.data.dataScope?.deptIds, true);
         roleInfo.dataMark = res.data.dataScope?.dataMark;
       } else {
-        deptTree.value!.setCheckedKeys([], false);
         roleInfo.dataMark = '1';
       }
 
@@ -312,6 +315,15 @@ async function roleSubmit(roleRef: FormInstance | undefined) {
             }
           });
       } else {
+        const halfCheckedNodes = permsRef.value!.getHalfCheckedNodes().map(val => {
+          return { ...val, halfChecked: 1 };
+        });
+        // 合并选中和半选中节点，并将半选中节点的halfChecked属性设置为1
+        roleInfo.perms = [
+          ...halfCheckedNodes,
+          ...permsRef.value!.getCheckedNodes(false)
+        ];
+        roleInfo.permsId = [...permsRef.value!.getCheckedKeys(), ...permsRef.value!.getHalfCheckedKeys() as any]
         api.roleApi
           .roleUpdate({
             // roleId: roleInfo.id,