Commit e839d712f7c4cc16b9c983da8607e09043a20e66
1 parent
d887fa75
fix:修复角色权限分配菜单回显一级菜单问题,修改批量删除为封装统一格式
Showing
3 changed files
with
67 additions
and
78 deletions
@@ -93,9 +93,13 @@ | @@ -93,9 +93,13 @@ | ||
93 | roleMenus.value = await getMenusIdsByRoleId(data.record.id); | 93 | roleMenus.value = await getMenusIdsByRoleId(data.record.id); |
94 | originMenus.value = [...roleMenus.value]; | 94 | originMenus.value = [...roleMenus.value]; |
95 | for (let item of treeData.value) { | 95 | for (let item of treeData.value) { |
96 | - pidArr.value.push(item.key); | 96 | + if (item?.children != 0) { |
97 | + pidArr.value.push(item.key); | ||
98 | + } | ||
97 | for (let item1 of item?.children) { | 99 | for (let item1 of item?.children) { |
98 | - pidArr.value.push(item1.key); | 100 | + if (item1?.children != 0) { |
101 | + pidArr.value.push(item1.key); | ||
102 | + } | ||
99 | } | 103 | } |
100 | } | 104 | } |
101 | for (let item of roleMenus.value) { | 105 | for (let item of roleMenus.value) { |
@@ -2,7 +2,6 @@ | @@ -2,7 +2,6 @@ | ||
2 | <div> | 2 | <div> |
3 | <BasicTable | 3 | <BasicTable |
4 | @register="registerTable" | 4 | @register="registerTable" |
5 | - @selection-change="useSelectionChange" | ||
6 | :rowSelection="{ type: 'checkbox' }" | 5 | :rowSelection="{ type: 'checkbox' }" |
7 | :clickToRowSelect="false" | 6 | :clickToRowSelect="false" |
8 | > | 7 | > |
@@ -11,11 +10,25 @@ | @@ -11,11 +10,25 @@ | ||
11 | <a-button type="primary" @click="handleCreate"> 新增角色 </a-button> | 10 | <a-button type="primary" @click="handleCreate"> 新增角色 </a-button> |
12 | </Authority> | 11 | </Authority> |
13 | <Authority value="api:yt:admin:deleteTenantRole"> | 12 | <Authority value="api:yt:admin:deleteTenantRole"> |
14 | - <a-button type="default" :disabled="disabled" @click="handleBatchDelete"> | 13 | + <a-button |
14 | + type="primary" | ||
15 | + color="error" | ||
16 | + @click="handleDeleteOrBatchDelete(null)" | ||
17 | + :disabled="hasBatchDelete" | ||
18 | + > | ||
15 | 批量删除 | 19 | 批量删除 |
16 | </a-button> | 20 | </a-button> |
17 | </Authority> | 21 | </Authority> |
18 | </template> | 22 | </template> |
23 | + <template #status="{ record }"> | ||
24 | + <Switch | ||
25 | + :checked="record.status === 1" | ||
26 | + :loading="record.pendingStatus" | ||
27 | + checkedChildren="启用" | ||
28 | + unCheckedChildren="禁用" | ||
29 | + @change="(checked:boolean)=>statusChange(checked,record)" | ||
30 | + /> | ||
31 | + </template> | ||
19 | <template #action="{ record }"> | 32 | <template #action="{ record }"> |
20 | <TableAction | 33 | <TableAction |
21 | :actions="[ | 34 | :actions="[ |
@@ -32,7 +45,7 @@ | @@ -32,7 +45,7 @@ | ||
32 | color: 'error', | 45 | color: 'error', |
33 | popConfirm: { | 46 | popConfirm: { |
34 | title: '是否确认删除', | 47 | title: '是否确认删除', |
35 | - confirm: handleDelete.bind(null, record), | 48 | + confirm: handleDeleteOrBatchDelete.bind(null, record), |
36 | }, | 49 | }, |
37 | }, | 50 | }, |
38 | ]" | 51 | ]" |
@@ -43,29 +56,30 @@ | @@ -43,29 +56,30 @@ | ||
43 | </div> | 56 | </div> |
44 | </template> | 57 | </template> |
45 | <script lang="ts"> | 58 | <script lang="ts"> |
46 | - import { defineComponent, ref } from 'vue'; | 59 | + import { defineComponent, nextTick } from 'vue'; |
47 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | 60 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
48 | - import { delRole, getRoleListByPage } from '/@/api/system/system'; | 61 | + import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system'; |
49 | import { useMessage } from '/@/hooks/web/useMessage'; | 62 | import { useMessage } from '/@/hooks/web/useMessage'; |
50 | import { useDrawer } from '/@/components/Drawer'; | 63 | import { useDrawer } from '/@/components/Drawer'; |
51 | import RoleDrawer from './RoleDrawer.vue'; | 64 | import RoleDrawer from './RoleDrawer.vue'; |
52 | import { columns, searchFormSchema } from './role.data'; | 65 | import { columns, searchFormSchema } from './role.data'; |
53 | import { RoleEnum } from '/@/enums/roleEnum'; | 66 | import { RoleEnum } from '/@/enums/roleEnum'; |
54 | import { Authority } from '/@/components/Authority'; | 67 | import { Authority } from '/@/components/Authority'; |
68 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | ||
69 | + import { Switch } from 'ant-design-vue'; | ||
55 | 70 | ||
56 | export default defineComponent({ | 71 | export default defineComponent({ |
57 | name: 'TenantRoleManagement', | 72 | name: 'TenantRoleManagement', |
58 | - components: { BasicTable, RoleDrawer, TableAction, Authority }, | 73 | + components: { BasicTable, RoleDrawer, TableAction, Authority, Switch }, |
59 | setup() { | 74 | setup() { |
60 | const [registerDrawer, { openDrawer }] = useDrawer(); | 75 | const [registerDrawer, { openDrawer }] = useDrawer(); |
61 | - let selectedRowKeys: Array<string> = []; | ||
62 | - const disabled = ref(true); | ||
63 | - const { createMessage } = useMessage(); | ||
64 | - const [registerTable, { reload, getSelectRows }] = useTable({ | 76 | + function handleSuccess() { |
77 | + reload(); | ||
78 | + } | ||
79 | + const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({ | ||
65 | title: '租户角色列表', | 80 | title: '租户角色列表', |
66 | api: getRoleListByPage, | 81 | api: getRoleListByPage, |
67 | columns, | 82 | columns, |
68 | - | ||
69 | formConfig: { | 83 | formConfig: { |
70 | labelWidth: 120, | 84 | labelWidth: 120, |
71 | schemas: searchFormSchema, | 85 | schemas: searchFormSchema, |
@@ -82,6 +96,19 @@ | @@ -82,6 +96,19 @@ | ||
82 | fixed: 'right', | 96 | fixed: 'right', |
83 | }, | 97 | }, |
84 | }); | 98 | }); |
99 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } = | ||
100 | + useBatchDelete(delRole, handleSuccess, setProps); | ||
101 | + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => { | ||
102 | + // Demo:status为1的选择框禁用 | ||
103 | + if (record.status === 1) { | ||
104 | + return { disabled: true }; | ||
105 | + } else { | ||
106 | + return { disabled: false }; | ||
107 | + } | ||
108 | + }; | ||
109 | + nextTick(() => { | ||
110 | + setProps(selectionOptions); | ||
111 | + }); | ||
85 | 112 | ||
86 | function handleCreate() { | 113 | function handleCreate() { |
87 | openDrawer(true, { | 114 | openDrawer(true, { |
@@ -95,50 +122,39 @@ | @@ -95,50 +122,39 @@ | ||
95 | isUpdate: true, | 122 | isUpdate: true, |
96 | }); | 123 | }); |
97 | } | 124 | } |
98 | - | ||
99 | - async function handleDelete(record: Recordable) { | ||
100 | - const roleIds = [record.id]; | ||
101 | - delRole(roleIds).then(() => { | ||
102 | - createMessage.success('删除成功'); | ||
103 | - reload(); | 125 | + const statusChange = async (checked, record) => { |
126 | + setProps({ | ||
127 | + loading: true, | ||
104 | }); | 128 | }); |
105 | - } | ||
106 | - | ||
107 | - const useSelectionChange = () => { | ||
108 | - selectedRowKeys = getSelectRows(); | ||
109 | - if (selectedRowKeys.length !== 0) { | ||
110 | - disabled.value = false; | ||
111 | - } else { | ||
112 | - disabled.value = true; | 129 | + setSelectedRowKeys([]); |
130 | + resetSelectedRowKeys(); | ||
131 | + const newStatus = checked ? 1 : 0; | ||
132 | + const { createMessage } = useMessage(); | ||
133 | + try { | ||
134 | + await setRoleStatus(record.id, newStatus); | ||
135 | + if (newStatus) { | ||
136 | + createMessage.success(`启用成功`); | ||
137 | + } else { | ||
138 | + createMessage.success('禁用成功'); | ||
139 | + } | ||
140 | + } finally { | ||
141 | + setProps({ | ||
142 | + loading: false, | ||
143 | + }); | ||
144 | + reload(); | ||
113 | } | 145 | } |
114 | }; | 146 | }; |
115 | - const handleBatchDelete = async () => { | ||
116 | - disabled.value = true; | ||
117 | - let roleIds = selectedRowKeys.map((m: any) => { | ||
118 | - return m.id; | ||
119 | - }); | ||
120 | - await delRole(roleIds); | ||
121 | - createMessage.success('批量删除成功'); | ||
122 | - reload(); | ||
123 | - setTimeout(() => { | ||
124 | - disabled.value = false; | ||
125 | - }, 3000); | ||
126 | - }; | ||
127 | - function handleSuccess() { | ||
128 | - reload(); | ||
129 | - } | ||
130 | 147 | ||
131 | return { | 148 | return { |
132 | - disabled, | ||
133 | - useSelectionChange, | ||
134 | - handleBatchDelete, | 149 | + statusChange, |
135 | registerTable, | 150 | registerTable, |
136 | registerDrawer, | 151 | registerDrawer, |
137 | handleCreate, | 152 | handleCreate, |
138 | handleEdit, | 153 | handleEdit, |
139 | - handleDelete, | ||
140 | handleSuccess, | 154 | handleSuccess, |
141 | RoleEnum, | 155 | RoleEnum, |
156 | + hasBatchDelete, | ||
157 | + handleDeleteOrBatchDelete, | ||
142 | }; | 158 | }; |
143 | }, | 159 | }, |
144 | }); | 160 | }); |
1 | import { BasicColumn } from '/@/components/Table'; | 1 | import { BasicColumn } from '/@/components/Table'; |
2 | import { FormSchema } from '/@/components/Table'; | 2 | import { FormSchema } from '/@/components/Table'; |
3 | -import { h } from 'vue'; | ||
4 | -import { Switch } from 'ant-design-vue'; | ||
5 | -import { setRoleStatus } from '/@/api/system/system'; | ||
6 | -import { useMessage } from '/@/hooks/web/useMessage'; | ||
7 | import { RoleEnum } from '/@/enums/roleEnum'; | 3 | import { RoleEnum } from '/@/enums/roleEnum'; |
8 | export const columns: BasicColumn[] = [ | 4 | export const columns: BasicColumn[] = [ |
9 | { | 5 | { |
@@ -20,35 +16,8 @@ export const columns: BasicColumn[] = [ | @@ -20,35 +16,8 @@ export const columns: BasicColumn[] = [ | ||
20 | title: '状态', | 16 | title: '状态', |
21 | dataIndex: 'status', | 17 | dataIndex: 'status', |
22 | width: 120, | 18 | width: 120, |
23 | - customRender: ({ record }) => { | ||
24 | - if (!Reflect.has(record, 'pendingStatus')) { | ||
25 | - record.pendingStatus = false; | ||
26 | - } | ||
27 | - return h(Switch, { | ||
28 | - checked: record.status === 1, | ||
29 | - checkedChildren: '已启用', | ||
30 | - unCheckedChildren: '已禁用', | ||
31 | - loading: record.pendingStatus, | ||
32 | - onChange(checked: boolean) { | ||
33 | - record.pendingStatus = true; | ||
34 | - const newStatus = checked ? 1 : 0; | ||
35 | - const { createMessage } = useMessage(); | ||
36 | - setRoleStatus(record.id, newStatus) | ||
37 | - .then(() => { | ||
38 | - record.status = newStatus; | ||
39 | - createMessage.success(`已成功修改角色状态`); | ||
40 | - }) | ||
41 | - .catch(() => { | ||
42 | - createMessage.error('修改角色状态失败'); | ||
43 | - }) | ||
44 | - .finally(() => { | ||
45 | - record.pendingStatus = false; | ||
46 | - }); | ||
47 | - }, | ||
48 | - }); | ||
49 | - }, | 19 | + slots: { customRender: 'status' }, |
50 | }, | 20 | }, |
51 | - | ||
52 | { | 21 | { |
53 | title: '备注', | 22 | title: '备注', |
54 | dataIndex: 'remark', | 23 | dataIndex: 'remark', |