Commit e839d712f7c4cc16b9c983da8607e09043a20e66

Authored by fengtao
1 parent d887fa75

fix:修复角色权限分配菜单回显一级菜单问题,修改批量删除为封装统一格式

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