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

Merge pull request !25 from 二次元虎哥/master
2 years ago · dce410eede
5 changed files with 143 additions and 31 deletions
--- a/src/components/Tree/src/BasicTree.vue
+++ b/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}
--- a/src/components/Tree/src/components/TreeHeader.vue
+++ b/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
-    ? [
-        { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
+  const retList = [
+    {
+      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'),
-          value: ToolbarEnum.UN_SELECT_ALL,
-          divider: checkable
+          label: t('component.tree.checkStrictly'),
+          value: ToolbarEnum.CHECK_STRICTLY
        },
-        ...defaultToolbarList,
-        { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
-        { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY }
+        {
+          label: t('component.tree.checkUnStrictly'),
+          value: ToolbarEnum.CHECK_UN_STRICTLY
+        }
      ]
-    : defaultToolbarList
+    )
+  }
+  return checkable ? retList : defaultToolbarList
 })

 function handleMenuClick(e) {
--- a/src/components/Tree/src/types/tree.ts
+++ b/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[]
+    }
--- a/src/views/system/role/RoleMenuModal.vue
+++ b/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)
+
+  // https://www.lodashjs.com/docs/lodash.without
+  // 默认关联节点  需要排除所有的祖先节点  否则会全部勾选
+  // 只保留子节点 关联情况下会自己选中父节点
+  // 排除祖先节点后的子节点  达到"独立"的效果 但可以进行关联选择
+  const excludeParentIds = without(menuIds, ...Array.from(parentIdSets.value))
+  // 这里是后期更新/新增需要用的 需要使用原始参数
+  menuKeys.value = menuIds
+  // 这里是view需要的  需要排除祖先节点才能正常显示  否则传入父节点会勾选所有子节点
+  role.menuIds = excludeParentIds
+  // 这里只负责显示 后期传递参数不使用这里  所以不用祖先节点
+  await setFieldsValue({ ...role })

-  const res = await getRole(data.record.id)
-  const menuRes = await listRoleMenus(data.record.id)
-  res.menuIds = menuRes
-  menuKeys.value = res.menuIds
-  setFieldsValue({ ...res })
+  // 默认展开的层级
+  if (unref(treeRef)) {
+    unref(treeRef).filterByLevel(defaultExpandLevel.value)
+  }
 })

 async function handleSubmit() {
@ -83,8 +109,12 @@ function menuReset() {
  menuHalfKeys.value = []
 }

-function menuCheck(checkedKeys, e) {
-  menuKeys.value = (checkedKeys.checked || []) as number[]
-  menuHalfKeys.value = (e.halfCheckedKeys || []) as number[]
+function menuCheck(checkedKeys: CheckKeys, event: CheckedEvent) {
+  if (checkedKeys instanceof Array) {
+    // 这里是子节点的ID
+    menuKeys.value = checkedKeys as number[]
+    // 这里是父节点的ID 默认空数组
+    menuHalfKeys.value = event.halfCheckedKeys as number[]
+  }
 }
 </script>
--- a/src/views/system/tenantPackage/TenantPackageModal.vue
+++ b/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[]
-  menuHalfKeys.value = (e.halfCheckedKeys || []) as number[]
+/**
+ * 父子节点关联情况下 checkedKeys为选中的菜单 e.halfCheckedKeys为父节点数组
+ * 父子节点独立情况下 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>