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', |