!25 refactor: 重构菜单选择, 支持联动选择

Merge pull request !25 from 二次元虎哥/master

src/components/Tree/src/BasicTree.vue

@@ -386,7 +386,7 @@ export default defineComponent({
     expose(instance)
 
     return () => {
-      const { title, helpMessage, toolbar, search, checkable } = props
+      const { title, helpMessage, toolbar, search, checkable, showStrictlyButton } = props
       const showTitle = title || toolbar || search || slots.headerTitle
       const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' }
       return (
@@ -399,6 +399,7 @@ export default defineComponent({
               title={title}
               search={search}
               toolbar={toolbar}
+              showStrictlyButton={showStrictlyButton}
               helpMessage={helpMessage}
               onStrictlyChange={onStrictlyChange}
               onSearch={handleSearch}

src/components/Tree/src/components/TreeHeader.vue

@@ -51,6 +51,11 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  // 是否显示toolbar的 层级关联/层级独立按钮
+  showStrictlyButton: {
+    type: Boolean,
+    default: true
+  },
   checkable: {
     type: Boolean,
     default: false
@@ -89,7 +94,7 @@ const getInputSearchCls = computed(() => {
 })
 
 const toolbarList = computed(() => {
-  const { checkable } = props
+  const { checkable, showStrictlyButton } = props
   const defaultToolbarList = [
     { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
     {
@@ -99,19 +104,33 @@ const toolbarList = computed(() => {
     }
   ]
 
-  return checkable
+  const retList = [
-    ? [
+    {
-        { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
+      label: t('component.tree.selectAll'),
+      value: ToolbarEnum.SELECT_ALL
+    },
+    {
+      label: t('component.tree.unSelectAll'),
+      value: ToolbarEnum.UN_SELECT_ALL,
+      divider: checkable
+    },
+    ...defaultToolbarList
+  ]
+  if (showStrictlyButton) {
+    retList.push(
+      ...[
         {
-          label: t('component.tree.unSelectAll'),
+          label: t('component.tree.checkStrictly'),
-          value: ToolbarEnum.UN_SELECT_ALL,
+          value: ToolbarEnum.CHECK_STRICTLY
-          divider: checkable
         },
-        ...defaultToolbarList,
+        {
-        { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
+          label: t('component.tree.checkUnStrictly'),
-        { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY }
+          value: ToolbarEnum.CHECK_UN_STRICTLY
+        }
       ]
-    : defaultToolbarList
+    )
+  }
+  return checkable ? retList : defaultToolbarList
 })
 
 function handleMenuClick(e) {

src/components/Tree/src/types/tree.ts

@@ -66,6 +66,11 @@ export const treeProps = buildProps({
     default: ''
   },
   defaultExpandAll: Boolean,
+  // 是否显示toolbar的 层级关联/层级独立按钮
+  showStrictlyButton: {
+    type: Boolean,
+    default: true
+  },
 
   fieldNames: {
     type: Object as PropType<FieldNames>
@@ -178,3 +183,28 @@ export interface TreeActionType {
   getSearchValue: () => string
   getSelectedNode: (key: KeyType, treeList?: TreeItem[], selectNode?: TreeItem | null) => TreeItem | null
 }
+
+export interface CheckedEvent<T = any> {
+  checked: boolean // 是否选中节点 一个没选为false
+  checkedNodes: T[] // 选中的节点 类型为treeData的类型
+  checkedNodesPositions?: any // 选中节点的位置 eg:0-0-1 节点独立时候为null
+  event: 'check'
+  halfCheckedKeys?: number[] // 父子节点关联时为祖先节点ids, 独立时为null
+  nativeEvent: PointerEvent
+  node: any
+}
+
+/**
+ * 父子节点关联情况下
+ * 为选中的菜单id(包含子菜单 不包含父菜单)
+ *
+ * 父子节点独立情况下
+ * checked为选中的菜单
+ * halfChecked为祖先节点数组
+ */
+export type CheckedKeys =
+  | number[]
+  | {
+      checked: number[]
+      halfChecked: number[]
+    }

src/views/system/role/RoleMenuModal.vue

@@ -3,12 +3,16 @@
     <BasicForm @register="registerForm">
       <template #menuIds="{ model, field }">
         <BasicTree
-          v-model:value="model[field]"
+          ref="treeRef"
+          v-if="treeData.length"
+          v-model:checkedKeys="model[field]"
           :treeData="treeData"
           :fieldNames="{ title: 'name', key: 'id' }"
-          :checkStrictly="true"
           checkable
           toolbar
+          search
+          :showStrictlyButton="false"
+          :selectable="false"
           @check="menuCheck"
           title="菜单分配"
         />
@@ -24,10 +28,11 @@ import { BasicForm, useForm } from '@/components/Form'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { menuScopeFormSchema } from './role.data'
 import { getRole } from '@/api/system/role'
-import { BasicTree, TreeItem } from '@/components/Tree'
+import { BasicTree, TreeItem, CheckKeys, CheckedEvent } from '@/components/Tree'
 import { listSimpleMenus } from '@/api/system/menu'
 import { handleTree } from '@/utils/tree'
 import { assignRoleMenu, listRoleMenus } from '@/api/system/permission'
+import { without } from 'lodash-es'
 
 defineOptions({ name: 'SystemRoleMenuModal' })
 
@@ -38,6 +43,12 @@ const treeData = ref<TreeItem[]>([])
 const menuKeys = ref<number[]>([])
 const menuHalfKeys = ref<number[]>([])
 
+// 默认展开的层级
+const defaultExpandLevel = ref<number>(1)
+// 祖先节点list
+const parentIdSets = ref<Set<number>>(new Set())
+const treeRef = ref()
+
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 120,
   baseColProps: { span: 24 },
@@ -47,19 +58,34 @@ const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
 })
 
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-  resetFields()
+  await resetFields()
   menuReset()
   setModalProps({ confirmLoading: false })
   if (unref(treeData).length === 0) {
     const res = await listSimpleMenus()
     treeData.value = handleTree(res, 'id')
+    // 去重 拿到所有的父节点
+    parentIdSets.value = new Set(res.map((item) => item.parentId))
   }
+  const role = await getRole(data.record.id)
+  const menuIds = await listRoleMenus(data.record.id)
 
-  const res = await getRole(data.record.id)
+  // https://www.lodashjs.com/docs/lodash.without
-  const menuRes = await listRoleMenus(data.record.id)
+  // 默认关联节点  需要排除所有的祖先节点  否则会全部勾选
-  res.menuIds = menuRes
+  // 只保留子节点 关联情况下会自己选中父节点
-  menuKeys.value = res.menuIds
+  // 排除祖先节点后的子节点  达到"独立"的效果 但可以进行关联选择
-  setFieldsValue({ ...res })
+  const excludeParentIds = without(menuIds, ...Array.from(parentIdSets.value))
+  // 这里是后期更新/新增需要用的 需要使用原始参数
+  menuKeys.value = menuIds
+  // 这里是view需要的  需要排除祖先节点才能正常显示  否则传入父节点会勾选所有子节点
+  role.menuIds = excludeParentIds
+  // 这里只负责显示 后期传递参数不使用这里  所以不用祖先节点
+  await setFieldsValue({ ...role })
+
+  // 默认展开的层级
+  if (unref(treeRef)) {
+    unref(treeRef).filterByLevel(defaultExpandLevel.value)
+  }
 })
 
 async function handleSubmit() {
@@ -83,8 +109,12 @@ function menuReset() {
   menuHalfKeys.value = []
 }
 
-function menuCheck(checkedKeys, e) {
+function menuCheck(checkedKeys: CheckKeys, event: CheckedEvent) {
-  menuKeys.value = (checkedKeys.checked || []) as number[]
+  if (checkedKeys instanceof Array) {
-  menuHalfKeys.value = (e.halfCheckedKeys || []) as number[]
+    // 这里是子节点的ID
+    menuKeys.value = checkedKeys as number[]
+    // 这里是父节点的ID 默认空数组
+    menuHalfKeys.value = event.halfCheckedKeys as number[]
+  }
 }
 </script>

src/views/system/tenantPackage/TenantPackageModal.vue

@@ -3,12 +3,16 @@
     <BasicForm @register="registerForm">
       <template #menuIds="{ model, field }">
         <BasicTree
-          v-model:value="model[field]"
+          ref="treeRef"
+          v-if="treeData.length"
+          v-model:checkedKeys="model[field]"
           :treeData="treeData"
           :fieldNames="{ title: 'name', key: 'id' }"
-          :checkStrictly="true"
           checkable
           toolbar
+          search
+          :showStrictlyButton="false"
+          :selectable="false"
           @check="menuCheck"
           title="菜单分配"
         />
@@ -21,12 +25,13 @@ import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { BasicForm, useForm } from '@/components/Form'
-import { BasicTree, TreeItem } from '@/components/Tree'
+import { BasicTree, TreeItem, CheckedKeys, CheckedEvent } from '@/components/Tree'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { formSchema } from './tenantPackage.data'
 import { createTenantPackage, getTenantPackage, updateTenantPackage } from '@/api/system/tenantPackage'
 import { listSimpleMenus } from '@/api/system/menu'
 import { handleTree } from '@/utils/tree'
+import { without } from 'lodash-es'
 
 defineOptions({ name: 'SystemTenantPackageModal' })
 
@@ -37,6 +42,11 @@ const isUpdate = ref(true)
 const treeData = ref<TreeItem[]>([])
 const menuKeys = ref<number[]>([])
 const menuHalfKeys = ref<number[]>([])
+// 默认展开的层级
+const defaultExpandLevel = ref<number>(1)
+// 祖先节点list
+const parentIdSets = ref<Set<number>>(new Set())
+const treeRef = ref()
 
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 120,
@@ -53,13 +63,27 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
   if (unref(treeData).length === 0) {
     const res = await listSimpleMenus()
     treeData.value = handleTree(res, 'id')
+    // 去重 拿到所有的祖先节点
+    parentIdSets.value = new Set<number>(res.map((item) => item.parentId))
   }
   isUpdate.value = !!data?.isUpdate
 
   if (unref(isUpdate)) {
     const res = await getTenantPackage(data.record.id)
+    // 默认关联节点  需要排除所有的祖先节点  否则会全部勾选
+    // 只保留子节点 关联情况下会自己选中父节点
+    // 排除祖先节点后的子节点  达到"独立"的效果 但可以进行关联选择
+    const excludeParentIds: number[] = without(res.menuIds, ...Array.from(parentIdSets.value))
+    // 这里的checkedKeys为包含所有节点的数组  用作判断数组是否修改过
     menuKeys.value = res.menuIds
-    setFieldsValue({ ...res })
+    // 这里只控制页面显示 不包含祖先节点
+    res.menuIds = excludeParentIds
+    await setFieldsValue({ ...res })
+  }
+
+  // 默认展开的层级
+  if (unref(treeRef)) {
+    unref(treeRef).filterByLevel(defaultExpandLevel.value)
   }
 })
 
@@ -86,8 +110,16 @@ function menuReset() {
   menuHalfKeys.value = []
 }
 
-function menuCheck(checkedKeys, e) {
+/**
-  menuKeys.value = (checkedKeys.checked || []) as number[]
+ * 父子节点关联情况下 checkedKeys为选中的菜单 e.halfCheckedKeys为父节点数组
-  menuHalfKeys.value = (e.halfCheckedKeys || []) as number[]
+ * 父子节点独立情况下 checkedKeys为{checked: number[], halfChecked: number[]} e.halfCheckedKeys为null
+ * @param checkedKeys 选中的菜单
+ * @param e event
+ */
+function menuCheck(checkedKeys: CheckedKeys, event: CheckedEvent) {
+  if (checkedKeys instanceof Array) {
+    menuKeys.value = checkedKeys
+    menuHalfKeys.value = event.halfCheckedKeys!
+  }
 }
 </script>