租户和角色管理的菜单权限不能滚动

Author: zhoujian888

src/views/system/role/index.vue

@@ -99,37 +99,41 @@
         </el-select>
       </el-form-item>
       <!-- 分配角色的菜单权限对话框 -->
-      <el-form-item
-        label="权限范围"
-        v-if="
-          actionScopeType === 'menu' || dataScopeForm.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
-        "
-      >
-        <el-card shadow="never">
-          <template #header>
-            父子联动(选中父节点，自动选择子节点):
-            <el-switch v-model="checkStrictly" inline-prompt active-text="是" inactive-text="否" />
-            全选/全不选:
-            <el-switch
-              v-model="treeNodeAll"
-              inline-prompt
-              active-text="是"
-              inactive-text="否"
-              @change="handleCheckedTreeNodeAll()"
-            />
-          </template>
-          <el-tree
-            ref="treeRef"
-            node-key="id"
-            show-checkbox
-            :default-checked-keys="defaultCheckedKeys"
-            :check-strictly="!checkStrictly"
-            :props="defaultProps"
-            :data="treeOptions"
-            empty-text="加载中，请稍后"
-          />
-        </el-card>
-      </el-form-item>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item
+            label="权限范围"
+            v-if="
+              actionScopeType === 'menu' ||
+              dataScopeForm.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
+            "
+            style="display: flex"
+          >
+            <el-card class="card" shadow="never">
+              <template #header>
+                <!--父子联动(选中父节点，自动选择子节点):-->
+                <!--<el-switch v-model="checkStrictly" inline-prompt active-text="是" inactive-text="否" />-->
+                <!--全选/全不选:-->
+                <!--<el-switch-->
+                <!--  v-model="treeNodeAll"-->
+                <!--  inline-prompt-->
+                <!--  active-text="是"-->
+                <!--  inactive-text="否"-->
+                <!--  @change="handleCheckedTreeNodeAll()"-->
+                <!--/>-->
+              </template>
+              <el-tree
+                ref="treeRef"
+                node-key="id"
+                show-checkbox
+                :check-strictly="!checkStrictly"
+                :props="defaultProps"
+                :data="treeOptions"
+                empty-text="加载中，请稍后"
+              />
+            </el-card>
+          </el-form-item> </el-col
+      ></el-row>
     </el-form>
     <!-- 操作按钮 -->
     <template #footer>
@@ -245,39 +249,40 @@ const dialogScopeVisible = ref(false)
 const dialogScopeTitle = ref('数据权限')
 const actionScopeType = ref('')
 const dataScopeDictDatas = ref()
-const defaultCheckedKeys = ref()
 // 选项
-const checkStrictly = ref(true)
-const treeNodeAll = ref(false)
+const checkStrictly = ref(false)
+// const treeNodeAll = ref(false)
 // 全选/全不选
-const handleCheckedTreeNodeAll = () => {
-  treeRef.value!.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
-}
+// const handleCheckedTreeNodeAll = () => {
+//   treeRef.value!.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
+// }
 // 权限操作
 const handleScope = async (type: string, row: RoleApi.RoleVO) => {
   dataScopeForm.id = row.id
   dataScopeForm.name = row.name
   dataScopeForm.code = row.code
+  actionScopeType.value = type
+  dialogScopeVisible.value = true
   if (type === 'menu') {
     const menuRes = await listSimpleMenusApi()
     treeOptions.value = handleTree(menuRes)
     const role = await PermissionApi.listRoleMenusApi(row.id)
     if (role) {
-      // treeRef.value!.setCheckedKeys(role as unknown as Array<number>)
-      defaultCheckedKeys.value = role
+      role?.forEach((item: any) => {
+        unref(treeRef)?.setChecked(item, true, false)
+      })
     }
   } else if (type === 'data') {
     const deptRes = await listSimpleDeptApi()
     treeOptions.value = handleTree(deptRes)
     const role = await RoleApi.getRoleApi(row.id)
     dataScopeForm.dataScope = role.dataScope
     if (role.dataScopeDeptIds) {
-      // treeRef.value!.setCheckedKeys(role.dataScopeDeptIds as unknown as Array<number>, false)
-      defaultCheckedKeys.value = role.dataScopeDeptIds
+      role.dataScopeDeptIds?.forEach((item: any) => {
+        unref(treeRef)?.setChecked(item, true, false)
+      })
     }
   }
-  actionScopeType.value = type
-  dialogScopeVisible.value = true
 }
 // 保存权限
 const submitScope = async () => {
@@ -312,3 +317,10 @@ onMounted(() => {
   init()
 })
 </script>
+<style scoped>
+.card {
+  width: 100%;
+  max-height: 400px;
+  overflow-y: scroll;
+}
+</style>

src/views/system/tenantPackage/index.vue

@@ -25,7 +25,7 @@
       ref="formRef"
     >
       <template #menuIds>
-        <el-card class="w-120">
+        <el-card>
           <template #header>
             <div class="card-header">
               全选/全不选:
@@ -91,6 +91,16 @@ const dialogTitle = ref('edit') // 弹出层标题
 const handleCheckedTreeNodeAll = () => {
   treeRef.value!.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
 }
+
+const validateCategory = (rule: any, value: any, callback: any) => {
+  if (!treeRef.value!.getCheckedKeys().length) {
+    callback(new Error('该项为必填项'))
+  } else {
+    callback()
+  }
+}
+rules.menuIds = [{ required: true, validator: validateCategory, trigger: 'blur' }]
+
 const getTree = async () => {
   const res = await listSimpleMenusApi()
   menuOptions.value = handleTree(res)
@@ -125,7 +135,9 @@ const handleUpdate = async (rowId: number) => {
   const res = await TenantPackageApi.getTenantPackageApi(rowId)
   unref(formRef)?.setValues(res)
   // 设置选中
-  unref(treeRef)?.setCheckedKeys(res.menuIds)
+  res.menuIds?.forEach((item: any) => {
+    unref(treeRef)?.setChecked(item, true, false)
+  })
 }
 
 // 提交按钮
@@ -166,3 +178,10 @@ onMounted(async () => {
 })
 // getList()
 </script>
+<style scoped>
+.el-card {
+  width: 100%;
+  max-height: 400px;
+  overflow-y: scroll;
+}
+</style>