Commit dd0647277e62788590f0bba0e78d8e68c17828c7

Authored by ww
1 parent bd736be5

fix: DEFECT-1375修复角色菜单保存未保存半选中菜单

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