refactor: 取消级联权限树

src/views/pms/role/components/CascadeTree.vue

@@ -1,84 +0,0 @@
-<!--------------------------------
- - @Author: Ronnie Zhang
- - @LastEditor: Ronnie Zhang
- - @LastEditTime: 2023/12/05 21:29:32
- - @Email: zclzone@outlook.com
- - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
- --------------------------------->
-
-<template>
-  <n-tree
-    :key-field="keyField"
-    :label-field="labelField"
-    :selectable="false"
-    default-expand-all
-    checkable
-    check-on-click
-    cascade
-    :data="treeData"
-    :checked-keys="checkedKeys"
-    :on-update:checked-keys="(keys) => (checkedKeys = keys)"
-    :on-update:indeterminate-keys="(keys) => (halfCheckedKeys = keys)"
-  />
-</template>
-
-<script setup>
-const props = defineProps({
-  treeData: {
-    type: Array,
-    default: () => [],
-  },
-  value: {
-    type: Array,
-    default: () => [],
-  },
-  labelField: {
-    type: String,
-    default: 'label',
-  },
-  keyField: {
-    type: String,
-    default: 'value',
-  },
-})
-const emit = defineEmits(['update:value'])
-
-const halfCheckedKeys = ref([])
-const checkedKeys = ref([])
-watch([halfCheckedKeys, checkedKeys], ([v1, v2]) => {
-  emit('update:value', Array.from(new Set([...v1, ...v2])))
-})
-onMounted(() => {
-  halfCheckedKeys.value = getHalfCheckedValues(props.value, props.treeData)
-  checkedKeys.value = props.value.filter((item) => !halfCheckedKeys.value.includes(item))
-})
-
-// 获取半选状态的值
-function getHalfCheckedValues(selectedValues, treeData, halfCheckedValues = []) {
-  function isHalfChecked(node) {
-    // 如果存在子节点没有选中或者子节点是半选状态
-    return node.children.some(
-      (item) =>
-        !selectedValues.includes(item[props.keyField]) ||
-        halfCheckedValues.includes(item[props.keyField])
-    )
-  }
-
-  function hasGrandson(node) {
-    return node.children.some((item) => !!item.children?.length)
-  }
-
-  for (const item of treeData) {
-    if (!item.children?.length) continue
-    if (hasGrandson(item)) {
-      // 根据孙节点判断子节点是否是半选
-      getHalfCheckedValues(selectedValues, item.children, halfCheckedValues)
-      isHalfChecked(item) && halfCheckedValues.push(item[props.keyField])
-    } else {
-      isHalfChecked(item) && halfCheckedValues.push(item[props.keyField])
-    }
-  }
-
-  return halfCheckedValues
-}
-</script>

src/views/pms/role/index.vue

@@ -1,7 +1,7 @@
 <!--------------------------------
  - @Author: Ronnie Zhang
  - @LastEditor: Ronnie Zhang
- - @LastEditTime: 2023/12/05 21:29:38
+ - @LastEditTime: 2024/04/01 15:52:40
  - @Email: zclzone@outlook.com
  - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  --------------------------------->
@@ -67,11 +67,16 @@
           <n-input v-model:value="modalForm.code" :disabled="modalAction !== 'add'" />
         </n-form-item>
         <n-form-item label="权限" path="permissionIds">
-          <CascadeTree
-            v-model:value="modalForm.permissionIds"
-            :tree-data="permissionTree"
-            label-field="name"
+          <n-tree
             key-field="id"
+            label-field="name"
+            :selectable="false"
+            :data="permissionTree"
+            :checked-keys="modalForm.permissionIds"
+            :on-update:checked-keys="(keys) => (modalForm.permissionIds = keys)"
+            default-expand-all
+            checkable
+            check-on-click
             class="cus-scroll max-h-200 w-full"
           />
         </n-form-item>
@@ -91,7 +96,6 @@ import { NButton, NSwitch } from 'naive-ui'
 import { MeCrud, MeQueryItem, MeModal } from '@/components'
 import { useCrud } from '@/composables'
 import api from './api'
-import CascadeTree from './components/CascadeTree.vue'
 
 defineOptions({ name: 'RoleMgt' })