Showing
3 changed files
with
31 additions
and
71 deletions
... | ... | @@ -397,22 +397,6 @@ |
397 | 397 | ); |
398 | 398 | }); |
399 | 399 | } |
400 | - /** | |
401 | - * 只针对表格分页和组织列表分页的Tree(不是通过弹窗显示,默认是关闭的并且图标显示) | |
402 | - * 如果是其他弹窗出来的Tree(会造成默认是关闭的并且图标显示),则在对应页面重写css样式即可 | |
403 | - * <style scoped lang="less"> | |
404 | - :deep(.vben-basic-tree) { | |
405 | - width: 100% !important; | |
406 | - } | |
407 | - :deep(.is-unflod) { | |
408 | - display: none !important; | |
409 | - } | |
410 | - :deep(.is-flod) { | |
411 | - display: none !important; | |
412 | - } | |
413 | - </style> | |
414 | - TODO下次优化通过传配置值来动态显示那些页面需要默认展开或收起 | |
415 | - */ | |
416 | 400 | return () => { |
417 | 401 | const { title, helpMessage, toolbar, search, checkable } = props; |
418 | 402 | const showTitle = title || toolbar || search || slots.headerTitle; |
... | ... | @@ -454,51 +438,6 @@ |
454 | 438 | }); |
455 | 439 | </script> |
456 | 440 | <style lang="less"> |
457 | - // 使用媒体查询兼容 1920 1280 1024 800 | |
458 | - @media screen and (max-width: 1980px) { | |
459 | - .fold-left { | |
460 | - z-index: 1; | |
461 | - cursor: pointer; | |
462 | - position: absolute; | |
463 | - top: 0.85rem; | |
464 | - left: 1.1vw; | |
465 | - } | |
466 | - | |
467 | - .fold-right { | |
468 | - z-index: 1; | |
469 | - cursor: pointer; | |
470 | - position: absolute; | |
471 | - top: 0.85rem; | |
472 | - left: 18.2vw; | |
473 | - } | |
474 | - } | |
475 | - @media screen and (max-width: 1280px) { | |
476 | - .fold-right { | |
477 | - z-index: 1; | |
478 | - cursor: pointer; | |
479 | - position: absolute; | |
480 | - top: 0.85rem; | |
481 | - left: 17.5vw; | |
482 | - } | |
483 | - } | |
484 | - @media screen and (max-width: 1024px) { | |
485 | - .fold-right { | |
486 | - z-index: 1; | |
487 | - cursor: pointer; | |
488 | - position: absolute; | |
489 | - top: 0.85rem; | |
490 | - left: 14.2vw; | |
491 | - } | |
492 | - } | |
493 | - @media screen and (max-width: 800px) { | |
494 | - .fold-right { | |
495 | - z-index: 1; | |
496 | - cursor: pointer; | |
497 | - position: absolute; | |
498 | - top: 0.85rem; | |
499 | - left: 18vw; | |
500 | - } | |
501 | - } | |
502 | 441 | @prefix-cls: ~'@{namespace}-basic-tree'; |
503 | 442 | |
504 | 443 | .@{prefix-cls} { | ... | ... |
... | ... | @@ -16,6 +16,7 @@ |
16 | 16 | toolbar |
17 | 17 | ref="treeRef" |
18 | 18 | :treeData="treeData" |
19 | + @check="handleCheckClick" | |
19 | 20 | :replace-fields="{ title: 'name', key: 'id' }" |
20 | 21 | :checkedKeys="roleMenus" |
21 | 22 | title="菜单分配" |
... | ... | @@ -58,6 +59,7 @@ |
58 | 59 | const treeRef = ref<Nullable<TreeActionType>>(); |
59 | 60 | const checked = ref<string[]>([]); //需要选中的节点 |
60 | 61 | const spinning = ref(false); |
62 | + const checkedKeysWithHalfChecked = ref<string[]>([]); | |
61 | 63 | |
62 | 64 | const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
63 | 65 | labelWidth: 100, |
... | ... | @@ -126,7 +128,9 @@ |
126 | 128 | roleId.value = data.record.id; |
127 | 129 | |
128 | 130 | //通过角色id去获取角色对应的菜单的ids |
129 | - roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
131 | + checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId( | |
132 | + data.record.id | |
133 | + ); | |
130 | 134 | excludeHalfCheckedKeys(unref(treeData)); |
131 | 135 | await nextTick(); |
132 | 136 | unref(treeRef)?.setCheckedKeys(roleMenus.value); |
... | ... | @@ -147,14 +151,13 @@ |
147 | 151 | setDrawerProps({ confirmLoading: true }); |
148 | 152 | const { createMessage } = useMessage(); |
149 | 153 | try { |
150 | - const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || []; | |
151 | 154 | const values = await validate(); |
152 | 155 | const req = { |
153 | 156 | id: roleId.value, |
154 | 157 | name: values.name, |
155 | 158 | remark: values.remark, |
156 | 159 | status: values.status, |
157 | - menu, | |
160 | + menu: unref(checkedKeysWithHalfChecked), | |
158 | 161 | }; |
159 | 162 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); |
160 | 163 | saveOrUpdateRoleInfoWithMenu(req).then(() => { |
... | ... | @@ -239,6 +242,13 @@ |
239 | 242 | return needExcludeKeys; |
240 | 243 | }; |
241 | 244 | |
245 | + const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => { | |
246 | + checkedKeysWithHalfChecked.value = [ | |
247 | + ...selectedKeys, | |
248 | + ...(event.halfCheckedKeys as string[]), | |
249 | + ]; | |
250 | + }; | |
251 | + | |
242 | 252 | return { |
243 | 253 | spinning, |
244 | 254 | registerDrawer, |
... | ... | @@ -248,6 +258,7 @@ |
248 | 258 | treeData, |
249 | 259 | roleMenus, |
250 | 260 | treeRef, |
261 | + handleCheckClick, | |
251 | 262 | }; |
252 | 263 | }, |
253 | 264 | }); | ... | ... |
... | ... | @@ -15,6 +15,7 @@ |
15 | 15 | :treeData="treeData" |
16 | 16 | :replaceFields="{ title: 'name', key: 'id' }" |
17 | 17 | :checkedKeys="roleMenus" |
18 | + @check="handleCheckClick" | |
18 | 19 | checkable |
19 | 20 | toolbar |
20 | 21 | ref="treeRef" |
... | ... | @@ -30,7 +31,7 @@ |
30 | 31 | import { BasicForm, useForm } from '/@/components/Form/index'; |
31 | 32 | import { formSchema } from './role.data'; |
32 | 33 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
33 | - import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree'; | |
34 | + import { BasicTree, CheckEvent, TreeActionType, TreeItem } from '/@/components/Tree'; | |
34 | 35 | const { t } = useI18n(); //加载国际化 |
35 | 36 | // 加载菜单数据 |
36 | 37 | import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu'; |
... | ... | @@ -58,6 +59,7 @@ |
58 | 59 | const treeRef = ref<Nullable<TreeActionType>>(null); |
59 | 60 | const checked = ref<string[]>([]); //需要选中的节点 |
60 | 61 | const spinning = ref(false); |
62 | + const checkedKeysWithHalfChecked = ref<string[]>([]); | |
61 | 63 | |
62 | 64 | const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
63 | 65 | labelWidth: 90, |
... | ... | @@ -85,7 +87,6 @@ |
85 | 87 | const roleType = RoleEnum.TENANT_ADMIN; |
86 | 88 | try { |
87 | 89 | spinning.value = true; |
88 | - // 需要在setFieldsValue之前先填充treeData,否则Tree组件可能会报key not exist警告 | |
89 | 90 | |
90 | 91 | if (!unref(treeData).length) { |
91 | 92 | // 获取全部的菜单 |
... | ... | @@ -108,7 +109,10 @@ |
108 | 109 | roleId.value = data.record.id; |
109 | 110 | |
110 | 111 | //通过角色id去获取角色对应的菜单的ids |
111 | - roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
112 | + checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId( | |
113 | + data.record.id | |
114 | + ); | |
115 | + | |
112 | 116 | excludeHalfCheckedKeys(unref(treeData)); |
113 | 117 | |
114 | 118 | await nextTick(); |
... | ... | @@ -125,10 +129,8 @@ |
125 | 129 | const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色')); |
126 | 130 | |
127 | 131 | async function handleSubmit() { |
128 | - setDrawerProps({ loading: true }); | |
129 | - setDrawerProps({ confirmLoading: true }); | |
132 | + setDrawerProps({ loading: true, confirmLoading: true }); | |
130 | 133 | const { createMessage } = useMessage(); |
131 | - const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || []; | |
132 | 134 | try { |
133 | 135 | const values = await validate(); |
134 | 136 | const req = { |
... | ... | @@ -137,7 +139,7 @@ |
137 | 139 | remark: values.remark, |
138 | 140 | status: values.status, |
139 | 141 | roleType: RoleEnum.TENANT_ADMIN, |
140 | - menu, | |
142 | + menu: unref(checkedKeysWithHalfChecked), | |
141 | 143 | }; |
142 | 144 | if (req.menu == undefined) return createMessage.error('请勾选权限菜单'); |
143 | 145 | const res = await saveOrUpdateRoleInfoWithMenu(req); |
... | ... | @@ -226,6 +228,13 @@ |
226 | 228 | return needExcludeKeys; |
227 | 229 | }; |
228 | 230 | |
231 | + const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => { | |
232 | + checkedKeysWithHalfChecked.value = [ | |
233 | + ...selectedKeys, | |
234 | + ...(event.halfCheckedKeys as string[]), | |
235 | + ]; | |
236 | + }; | |
237 | + | |
229 | 238 | return { |
230 | 239 | spinning, |
231 | 240 | registerDrawer, |
... | ... | @@ -235,6 +244,7 @@ |
235 | 244 | treeData, |
236 | 245 | roleMenus, |
237 | 246 | treeRef, |
247 | + handleCheckClick, | |
238 | 248 | }; |
239 | 249 | }, |
240 | 250 | }); | ... | ... |