权限树勾选时无法级联

src/views/system/tenant/index.vue

@@ -26,73 +26,30 @@
             action: () => openModal('add'),
           },
         ]"
-        @get-list="getList"
-      >
+        @get-list="getList">
         <template #slotName="{ item }">
           {{ item.createTime }}
         </template>
       </byTable>
     </div>
-    <el-dialog
-      :title="modalType == 'add' ? '新增' : '编辑'"
-      v-model="dialogVisible"
-      width="800"
-      v-loading="loading"
-    >
-      <byForm
-        :formConfig="formConfig"
-        :formOption="formOption"
-        v-model="formData.data"
-        :rules="rules"
-        ref="byform"
-      >
-      </byForm>
+    <el-dialog :title="modalType == 'add' ? '新增' : '编辑'" v-model="dialogVisible" width="800" v-loading="loading">
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform"> </byForm>
       <template #footer>
         <el-button @click="dialogVisible = false" size="large">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="submitForm('byform')"
-          size="large"
-          :loading="submitLoading"
-        >
-          确 定
-        </el-button>
+        <el-button type="primary" @click="submitForm('byform')" size="large" :loading="submitLoading"> 确 定 </el-button>
       </template>
     </el-dialog>
-    <el-dialog
-      title="权限配置"
-      v-model="roomDialogVisible"
-      width="500"
-      :before-close="handleClose"
-      v-loading="loading"
-    >
-      <el-tree
-        :data="treeData"
-        :show-checkbox="true"
-        v-model="formData.treeData"
-        ref="tree"
-        node-key="id"
-        @check-change="handleNodeClick"
-        :check-strictly="true"
-      >
-      </el-tree>
+
+    <el-dialog title="权限配置" v-if="roomDialogVisible" v-model="roomDialogVisible" width="500" :before-close="handleClose" v-loading="loading">
+      <el-tree :data="treeData" show-checkbox node-key="id" :default-checked-keys="formData.treeData" :props="defaultProps" ref="tree"> </el-tree>
       <template #footer>
-        <el-button @click="roomDialogVisible = false" size="large"
-          >取 消</el-button
-        >
-        <el-button
-          type="primary"
-          @click="submitTree('byform')"
-          size="large"
-          :loading="submitLoading"
-        >
-          确 定
-        </el-button>
+        <el-button @click="roomDialogVisible = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitTree()" size="large" :loading="submitLoading"> 确 定 </el-button>
       </template>
     </el-dialog>
   </div>
 </template>
-  
+
 <script setup>
 /* eslint-disable vue/no-unused-components */
 import { ElMessage, ElMessageBox } from "element-plus";
@@ -101,6 +58,11 @@ import byForm from "@/components/byForm/index";
 import { computed, defineComponent, ref } from "vue";
 const loading = ref(false);
 const submitLoading = ref(false);
+const defaultProps = {
+  children: "children",
+  label: "label",
+};
+const tree = ref(null)
 const sourceList = ref({
   data: [],
   pagination: {
@@ -113,11 +75,9 @@ let dialogVisible = ref(false);
 let roomDialogVisible = ref(false);
 let modalType = ref("add");
 let rules = ref({
-  tenantId: [{pattern: /^\w+$/, message: '请输入正确的租户号，禁止下划线外的其他符号，不区分大小写'}],
+  tenantId: [{ pattern: /^\w+$/, message: "请输入正确的租户号，禁止下划线外的其他符号，不区分大小写" }],
   password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-  enterpriseName: [
-    { required: true, message: "请输入企业名称", trigger: "blur" },
-  ],
+  enterpriseName: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
 });
 const { proxy } = getCurrentInstance();
 const selectConfig = computed(() => {
@@ -193,11 +153,7 @@ const config = computed(() => {
       },
       render(flowStatus) {
         //1审核中 2审核通过 3审核不通过
-        return flowStatus == 1
-          ? "审核中"
-          : flowStatus == 2
-          ? "审核通过"
-          : "审核不通过";
+        return flowStatus == 1 ? "审核中" : flowStatus == 2 ? "审核通过" : "审核不通过";
       },
     },
     {
@@ -315,7 +271,7 @@ const formConfig = computed(() => {
       type: "input",
       prop: "enterpriseName",
       label: "企业名称",
-      maxlength:100
+      maxlength: 100,
     },
     {
       type: "radio",
@@ -348,16 +304,14 @@ const formConfig = computed(() => {
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
-  proxy
-    .post("/tenantInfo/page", sourceList.value.pagination)
-    .then((message) => {
-      console.log(message);
-      sourceList.value.data = message.rows;
-      sourceList.value.pagination.total = message.total;
-      setTimeout(() => {
-        loading.value = false;
-      }, 200);
-    });
+  proxy.post("/tenantInfo/page", sourceList.value.pagination).then((message) => {
+    console.log(message);
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
 };
 const openModal = () => {
   dialogVisible.value = true;
@@ -372,26 +326,15 @@ const select = (_selection, row) => {
   console.log(_selection.length);
 };
 const openRoomModal = () => {
-  roomDialogVisible.value = true;
-
-  proxy
-    .get("/tenantInfo/roleMenuTreeSelect/" + selection.value.data[0].tenantId)
-    .then((res) => {
-      if (res.code == 200) {
-        treeData.value = res.menus;
-        formData.treeData = res.checkedKeys;
-        tree.value.setCheckedKeys(res.checkedKeys);
-      }
-    });
+  proxy.get("/tenantInfo/roleMenuTreeSelect/" + selection.value.data[0].tenantId).then((res) => {
+    console.log(res);
+    if (res.code == 200) {
+      formData.treeData = res.checkedKeys;
+      treeData.value = res.menus;
+      roomDialogVisible.value = true;
+    }
+  });
 };
-const tree = ref(null);
-
-const handleNodeClick = (e) => {
-
-  
-  
-}
-
 const submitTree = () => {
   proxy
     .post("/tenantInfo/bindingMenu", {
@@ -408,21 +351,23 @@ const submitTree = () => {
 };
 
 const submitForm = () => {
-  console.log(byform.value);
   byform.value.handleSubmit((valid) => {
     submitLoading.value = true;
 
-    proxy.post("/tenantInfo/" + modalType.value, formData.data).then((res) => {
-      ElMessage({
-        message: modalType.value == "add" ? "添加成功" : "编辑成功",
-        type: "success",
+    proxy
+      .post("/tenantInfo/" + modalType.value, formData.data)
+      .then((res) => {
+        ElMessage({
+          message: modalType.value == "add" ? "添加成功" : "编辑成功",
+          type: "success",
+        });
+        dialogVisible.value = false;
+        submitLoading.value = false;
+        getList();
+      })
+      .catch((err) => {
+        submitLoading.value = false;
       });
-      dialogVisible.value = false;
-      submitLoading.value = false;
-      getList();
-    }).catch((err)=>{
-      submitLoading.value = false;
-    });
   });
 };
 
@@ -447,23 +392,21 @@ const changeStatus = (row) => {
       type: "warning",
     }).then(() => {
       // 删除
-      proxy
-        .post("/tenantInfo/" + modalType.value, formData.data)
-        .then((res) => {
-          ElMessage({
-            message: "操作成功",
-            type: "success",
-          });
-          getList();
+      proxy.post("/tenantInfo/" + modalType.value, formData.data).then((res) => {
+        ElMessage({
+          message: "操作成功",
+          type: "success",
         });
+        getList();
+      });
     });
   });
 };
 getList();
 </script>
-  
+
 <style lang="scss" scoped>
 .tenant {
   padding: 20px;
 }
-</style>
+</style>