Showing
2 changed files
with
12 additions
and
27 deletions
| ... | ... | @@ -18,7 +18,6 @@ |
| 18 | 18 | :treeData="treeData" |
| 19 | 19 | :replace-fields="{ title: 'name', key: 'id' }" |
| 20 | 20 | :checkedKeys="roleMenus" |
| 21 | - @check="handleCheckClick" | |
| 22 | 21 | title="菜单分配" |
| 23 | 22 | /> |
| 24 | 23 | </Spin> |
| ... | ... | @@ -31,7 +30,7 @@ |
| 31 | 30 | import { BasicForm, useForm } from '/@/components/Form/index'; |
| 32 | 31 | import { formSchema, KeysTypeEnum, RoleMenuDictEnum } from './role.data'; |
| 33 | 32 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
| 34 | - import { BasicTree, TreeItem } from '/@/components/Tree'; | |
| 33 | + import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree'; | |
| 35 | 34 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 36 | 35 | const { t } = useI18n(); //加载国际化 |
| 37 | 36 | // 加载菜单数据 |
| ... | ... | @@ -55,9 +54,8 @@ |
| 55 | 54 | const isUpdate = ref<boolean>(true); |
| 56 | 55 | const treeData = ref<TreeData[]>([]); |
| 57 | 56 | const roleMenus = ref<string[]>([]); |
| 58 | - const allCheckedKeys = ref<string[]>([]); | |
| 59 | 57 | const roleId = ref<string>(''); |
| 60 | - const treeRef = ref(); | |
| 58 | + const treeRef = ref<Nullable<TreeActionType>>(); | |
| 61 | 59 | const checked = ref<string[]>([]); //需要选中的节点 |
| 62 | 60 | const spinning = ref(false); |
| 63 | 61 | |
| ... | ... | @@ -80,7 +78,6 @@ |
| 80 | 78 | const { isTenantAdmin, isSysadmin, getRole } = useRole(); |
| 81 | 79 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner( |
| 82 | 80 | async (data: { isUpdate: boolean; record: RoleListItem }) => { |
| 83 | - allCheckedKeys.value = []; | |
| 84 | 81 | resetFields(); |
| 85 | 82 | roleId.value = ''; |
| 86 | 83 | // 在打开弹窗时清除所有选择的菜单 |
| ... | ... | @@ -129,10 +126,10 @@ |
| 129 | 126 | roleId.value = data.record.id; |
| 130 | 127 | |
| 131 | 128 | //通过角色id去获取角色对应的菜单的ids |
| 132 | - allCheckedKeys.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
| 129 | + roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
| 133 | 130 | excludeHalfCheckedKeys(unref(treeData)); |
| 134 | 131 | await nextTick(); |
| 135 | - treeRef.value.setCheckedKeys(roleMenus.value); | |
| 132 | + unref(treeRef)?.setCheckedKeys(roleMenus.value); | |
| 136 | 133 | setFieldsValue(data.record); |
| 137 | 134 | } else { |
| 138 | 135 | } |
| ... | ... | @@ -150,13 +147,14 @@ |
| 150 | 147 | setDrawerProps({ confirmLoading: true }); |
| 151 | 148 | const { createMessage } = useMessage(); |
| 152 | 149 | try { |
| 150 | + const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || []; | |
| 153 | 151 | const values = await validate(); |
| 154 | 152 | const req = { |
| 155 | 153 | id: roleId.value, |
| 156 | 154 | name: values.name, |
| 157 | 155 | remark: values.remark, |
| 158 | 156 | status: values.status, |
| 159 | - menu: unref(allCheckedKeys) || [], | |
| 157 | + menu, | |
| 160 | 158 | }; |
| 161 | 159 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); |
| 162 | 160 | saveOrUpdateRoleInfoWithMenu(req).then(() => { |
| ... | ... | @@ -170,10 +168,6 @@ |
| 170 | 168 | }, 300); |
| 171 | 169 | } |
| 172 | 170 | } |
| 173 | - // Tree check事件 | |
| 174 | - const handleCheckClick = (checkedNodes, { halfCheckedKeys }) => { | |
| 175 | - allCheckedKeys.value = [...checkedNodes, ...halfCheckedKeys]; | |
| 176 | - }; | |
| 177 | 171 | |
| 178 | 172 | const getPermissionByRole = async (roleType: RoleEnum) => { |
| 179 | 173 | try { |
| ... | ... | @@ -254,8 +248,6 @@ |
| 254 | 248 | treeData, |
| 255 | 249 | roleMenus, |
| 256 | 250 | treeRef, |
| 257 | - handleCheckClick, | |
| 258 | - allCheckedKeys, | |
| 259 | 251 | }; |
| 260 | 252 | }, |
| 261 | 253 | }); | ... | ... |
| ... | ... | @@ -15,7 +15,6 @@ |
| 15 | 15 | :treeData="treeData" |
| 16 | 16 | :replaceFields="{ title: 'name', key: 'id' }" |
| 17 | 17 | :checkedKeys="roleMenus" |
| 18 | - @check="handleCheckClick" | |
| 19 | 18 | checkable |
| 20 | 19 | toolbar |
| 21 | 20 | ref="treeRef" |
| ... | ... | @@ -31,7 +30,7 @@ |
| 31 | 30 | import { BasicForm, useForm } from '/@/components/Form/index'; |
| 32 | 31 | import { formSchema } from './role.data'; |
| 33 | 32 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
| 34 | - import { BasicTree, TreeItem } from '/@/components/Tree'; | |
| 33 | + import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree'; | |
| 35 | 34 | const { t } = useI18n(); //加载国际化 |
| 36 | 35 | // 加载菜单数据 |
| 37 | 36 | import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu'; |
| ... | ... | @@ -55,9 +54,8 @@ |
| 55 | 54 | const isUpdate = ref(true); |
| 56 | 55 | const treeData = ref<TreeData[]>([]); |
| 57 | 56 | const roleMenus = ref<string[]>([]); |
| 58 | - const allCheckedKeys = ref<string[]>([]); | |
| 59 | 57 | const roleId = ref(''); |
| 60 | - const treeRef = ref(); | |
| 58 | + const treeRef = ref<Nullable<TreeActionType>>(null); | |
| 61 | 59 | const checked = ref<string[]>([]); //需要选中的节点 |
| 62 | 60 | const spinning = ref(false); |
| 63 | 61 | |
| ... | ... | @@ -79,7 +77,6 @@ |
| 79 | 77 | |
| 80 | 78 | const { isPlatformAdmin } = useRole(); |
| 81 | 79 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
| 82 | - allCheckedKeys.value = []; | |
| 83 | 80 | resetFields(); |
| 84 | 81 | roleId.value = ''; |
| 85 | 82 | // 在打开弹窗时清除所有选择的菜单 |
| ... | ... | @@ -111,11 +108,11 @@ |
| 111 | 108 | roleId.value = data.record.id; |
| 112 | 109 | |
| 113 | 110 | //通过角色id去获取角色对应的菜单的ids |
| 114 | - allCheckedKeys.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
| 111 | + roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
| 115 | 112 | excludeHalfCheckedKeys(unref(treeData)); |
| 116 | 113 | |
| 117 | 114 | await nextTick(); |
| 118 | - treeRef.value.setCheckedKeys(roleMenus.value); | |
| 115 | + treeRef.value?.setCheckedKeys(roleMenus.value); | |
| 119 | 116 | setFieldsValue(data.record); |
| 120 | 117 | } else { |
| 121 | 118 | } |
| ... | ... | @@ -131,6 +128,7 @@ |
| 131 | 128 | setDrawerProps({ loading: true }); |
| 132 | 129 | setDrawerProps({ confirmLoading: true }); |
| 133 | 130 | const { createMessage } = useMessage(); |
| 131 | + const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || []; | |
| 134 | 132 | try { |
| 135 | 133 | const values = await validate(); |
| 136 | 134 | const req = { |
| ... | ... | @@ -139,7 +137,7 @@ |
| 139 | 137 | remark: values.remark, |
| 140 | 138 | status: values.status, |
| 141 | 139 | roleType: RoleEnum.TENANT_ADMIN, |
| 142 | - menu: unref(allCheckedKeys) || [], | |
| 140 | + menu, | |
| 143 | 141 | }; |
| 144 | 142 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); |
| 145 | 143 | const res = await saveOrUpdateRoleInfoWithMenu(req); |
| ... | ... | @@ -157,10 +155,6 @@ |
| 157 | 155 | }, 300); |
| 158 | 156 | } |
| 159 | 157 | } |
| 160 | - // Tree check事件 | |
| 161 | - const handleCheckClick = (checkedNodes, { halfCheckedKeys }) => { | |
| 162 | - allCheckedKeys.value = [...checkedNodes, ...halfCheckedKeys]; | |
| 163 | - }; | |
| 164 | 158 | |
| 165 | 159 | const getPermissionByRole = async (roleType: RoleEnum) => { |
| 166 | 160 | try { |
| ... | ... | @@ -241,7 +235,6 @@ |
| 241 | 235 | treeData, |
| 242 | 236 | roleMenus, |
| 243 | 237 | treeRef, |
| 244 | - handleCheckClick, | |
| 245 | 238 | }; |
| 246 | 239 | }, |
| 247 | 240 | }); | ... | ... |