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 | }); | ... | ... |