Commit d887fa758c9fc2bf4bc329d28e87f7f98957c9ad

Authored by fengtao
1 parent 87aeeacf

fix:把批量删除修改为统一封装形式,移除我之前单独写的批量删除代码

@@ -75,10 +75,9 @@ @@ -75,10 +75,9 @@
75 </template> 75 </template>
76 76
77 <script lang="ts"> 77 <script lang="ts">
78 - import { defineComponent, reactive, ref, computed } from 'vue'; 78 + import { defineComponent, reactive, nextTick } from 'vue';
79 import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table'; 79 import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
80 import { PageWrapper } from '/@/components/Page'; 80 import { PageWrapper } from '/@/components/Page';
81 - import { useMessage } from '/@/hooks/web/useMessage';  
82 import { useDrawer } from '/@/components/Drawer'; 81 import { useDrawer } from '/@/components/Drawer';
83 import CameraDrawer from './CameraDrawer.vue'; 82 import CameraDrawer from './CameraDrawer.vue';
84 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree'; 83 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
@@ -87,6 +86,7 @@ @@ -87,6 +86,7 @@
87 import VideoPreviewModal from './DialogPreviewVideo.vue'; 86 import VideoPreviewModal from './DialogPreviewVideo.vue';
88 import { useModal } from '/@/components/Modal'; 87 import { useModal } from '/@/components/Modal';
89 import { Authority } from '/@/components/Authority'; 88 import { Authority } from '/@/components/Authority';
  89 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
90 90
91 export default defineComponent({ 91 export default defineComponent({
92 components: { 92 components: {
@@ -100,22 +100,11 @@ @@ -100,22 +100,11 @@
100 Authority, 100 Authority,
101 }, 101 },
102 setup() { 102 setup() {
103 - let selectedRowIds = ref<string[]>([]);  
104 - const hasBatchDelete = ref(true);  
105 - // 复选框事件  
106 - const onSelectRowChange = (selectedRowKeys: string[]) => {  
107 - selectedRowIds.value = selectedRowKeys;  
108 - if (selectedRowIds.value.length > 0) {  
109 - hasBatchDelete.value = false;  
110 - } else {  
111 - hasBatchDelete.value = true;  
112 - }  
113 - };  
114 const searchInfo = reactive<Recordable>({}); 103 const searchInfo = reactive<Recordable>({});
115 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); 104 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
116 const [registerModal, { openModal }] = useModal(); 105 const [registerModal, { openModal }] = useModal();
117 // 表格hooks 106 // 表格hooks
118 - const [registerTable, { reload }] = useTable({ 107 + const [registerTable, { reload, setProps }] = useTable({
119 title: '视频列表', 108 title: '视频列表',
120 api: cameraPage, 109 api: cameraPage,
121 columns, 110 columns,
@@ -129,10 +118,6 @@ @@ -129,10 +118,6 @@
129 useSearchForm: true, 118 useSearchForm: true,
130 showTableSetting: true, 119 showTableSetting: true,
131 bordered: true, 120 bordered: true,
132 - rowSelection: {  
133 - onChange: onSelectRowChange,  
134 - type: 'checkbox',  
135 - },  
136 rowKey: 'id', 121 rowKey: 'id',
137 actionColumn: { 122 actionColumn: {
138 width: 200, 123 width: 200,
@@ -144,12 +129,20 @@ @@ -144,12 +129,20 @@
144 }); 129 });
145 // 弹框 130 // 弹框
146 const [registerDrawer, { openDrawer }] = useDrawer(); 131 const [registerDrawer, { openDrawer }] = useDrawer();
147 - const { createMessage } = useMessage();  
148 132
149 // 刷新 133 // 刷新
150 const handleSuccess = () => { 134 const handleSuccess = () => {
151 reload(); 135 reload();
152 }; 136 };
  137 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
  138 + deleteCameraManage,
  139 + handleSuccess,
  140 + setProps
  141 + );
  142 +
  143 + nextTick(() => {
  144 + setProps(selectionOptions);
  145 + });
153 // 新增或编辑 146 // 新增或编辑
154 const handleCreateOrEdit = (record: Recordable | null) => { 147 const handleCreateOrEdit = (record: Recordable | null) => {
155 if (record) { 148 if (record) {
@@ -163,27 +156,6 @@ @@ -163,27 +156,6 @@
163 }); 156 });
164 } 157 }
165 }; 158 };
166 - // 删除或批量删除  
167 - const handleDeleteOrBatchDelete = async (record: Recordable | null) => {  
168 - if (record) {  
169 - try {  
170 - await deleteCameraManage([record.id]);  
171 - createMessage.success('删除视频成功');  
172 - handleSuccess();  
173 - } catch (e) {}  
174 - } else {  
175 - hasBatchDelete.value = true;  
176 - try {  
177 - await deleteCameraManage(selectedRowIds.value);  
178 - createMessage.success('批量删除视频成功');  
179 - selectedRowIds.value = [];  
180 - handleSuccess();  
181 - setTimeout(() => {  
182 - hasBatchDelete.value = false;  
183 - }, 3000);  
184 - } catch (e) {}  
185 - }  
186 - };  
187 159
188 // 树形选择器 160 // 树形选择器
189 const handleSelect = (organizationId: string) => { 161 const handleSelect = (organizationId: string) => {
@@ -15,7 +15,12 @@ @@ -15,7 +15,12 @@
15 <a-button disabled @click="handleImport"> 导入设备配置 </a-button> 15 <a-button disabled @click="handleImport"> 导入设备配置 </a-button>
16 </ImpExcel> 16 </ImpExcel>
17 <Authority value="api:yt:admin:deleteDeviceConfig"> 17 <Authority value="api:yt:admin:deleteDeviceConfig">
18 - <a-button danger color="error" @click="handleTableDel" :disabled="disabled"> 18 + <a-button
  19 + type="primary"
  20 + color="error"
  21 + @click="handleDeleteOrBatchDelete(null)"
  22 + :disabled="hasBatchDelete"
  23 + >
19 批量删除 24 批量删除
20 </a-button> 25 </a-button>
21 </Authority> 26 </Authority>
@@ -67,7 +72,7 @@ @@ -67,7 +72,7 @@
67 color: 'error', 72 color: 'error',
68 popConfirm: { 73 popConfirm: {
69 title: '是否确认删除', 74 title: '是否确认删除',
70 - confirm: handleDelete.bind(null, record), 75 + confirm: handleDeleteOrBatchDelete.bind(null, record),
71 }, 76 },
72 ifShow: () => { 77 ifShow: () => {
73 return record.default === false; 78 return record.default === false;
@@ -96,6 +101,7 @@ @@ -96,6 +101,7 @@
96 import { ImpExcel, ExcelData } from '/@/components/Excel'; 101 import { ImpExcel, ExcelData } from '/@/components/Excel';
97 // import { jsonToSheetXlsx, ExportModalResult } from '/@/components/Excel'; 102 // import { jsonToSheetXlsx, ExportModalResult } from '/@/components/Excel';
98 import { Authority } from '/@/components/Authority'; 103 import { Authority } from '/@/components/Authority';
  104 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
99 105
100 export default defineComponent({ 106 export default defineComponent({
101 name: 'DeviceProfileManagement', 107 name: 'DeviceProfileManagement',
@@ -112,31 +118,45 @@ @@ -112,31 +118,45 @@
112 const { createMessage } = useMessage(); 118 const { createMessage } = useMessage();
113 const [registerModal, { openModal }] = useModal(); 119 const [registerModal, { openModal }] = useModal();
114 const [registerModalDetail] = useModal(); 120 const [registerModalDetail] = useModal();
115 - const [registerTable, { reload, getSelectRows, setTableData, getForm, getSelectRowKeys }] =  
116 - useTable({  
117 - title: '设备配置列表',  
118 - clickToRowSelect: false,  
119 - api: deviceConfigGetQuery,  
120 - immediate: immediateStatus.value,  
121 - columns,  
122 - formConfig: {  
123 - labelWidth: 120,  
124 - schemas: searchFormSchema,  
125 - },  
126 - rowKey: 'id',  
127 - useSearchForm: true,  
128 - showTableSetting: true,  
129 - bordered: true,  
130 - showIndexColumn: false,  
131 - actionColumn: {  
132 - width: 240,  
133 - title: '操作',  
134 - dataIndex: 'action',  
135 - slots: { customRender: 'action' },  
136 - fixed: 'right',  
137 - },  
138 - });  
139 - 121 + const [
  122 + registerTable,
  123 + { setProps, reload, getSelectRows, setTableData, getForm, getSelectRowKeys },
  124 + ] = useTable({
  125 + title: '设备配置列表',
  126 + clickToRowSelect: false,
  127 + api: deviceConfigGetQuery,
  128 + immediate: immediateStatus.value,
  129 + columns,
  130 + formConfig: {
  131 + labelWidth: 120,
  132 + schemas: searchFormSchema,
  133 + },
  134 + rowKey: 'id',
  135 + useSearchForm: true,
  136 + showTableSetting: true,
  137 + bordered: true,
  138 + showIndexColumn: false,
  139 + actionColumn: {
  140 + width: 240,
  141 + title: '操作',
  142 + dataIndex: 'action',
  143 + slots: { customRender: 'action' },
  144 + fixed: 'right',
  145 + },
  146 + });
  147 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
  148 + useBatchDelete(deviceConfigDelete, handleSuccess, setProps);
  149 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  150 + // Demo:status为1的选择框禁用
  151 + if (record.default === true) {
  152 + return { disabled: true };
  153 + } else {
  154 + return { disabled: false };
  155 + }
  156 + };
  157 + nextTick(() => {
  158 + setProps(selectionOptions);
  159 + });
140 /** 160 /**
141 *@param url,name 161 *@param url,name
142 **/ 162 **/
@@ -251,26 +271,26 @@ @@ -251,26 +271,26 @@
251 disabled.value = true; 271 disabled.value = true;
252 } 272 }
253 }; 273 };
254 - const handleTableDel = () => {  
255 - disabled.value = true;  
256 - deviceConfigDelete(selectedRowKeys)  
257 - .then(() => {  
258 - createMessage.success('删除设备配置成功');  
259 - handleSuccess();  
260 - setTimeout(() => {  
261 - disabled.value = false;  
262 - }, 3000);  
263 - selectedRowKeys.length = 0;  
264 - })  
265 - .catch((e) => {  
266 - selectedRowKeys.length = 0;  
267 - setTimeout(() => {  
268 - disabled.value = false;  
269 - }, 3000);  
270 - createMessage.error(e);  
271 - });  
272 - selectedRowKeys.length = 0;  
273 - }; 274 + // const handleTableDel = () => {
  275 + // disabled.value = true;
  276 + // deviceConfigDelete(selectedRowKeys)
  277 + // .then(() => {
  278 + // createMessage.success('删除设备配置成功');
  279 + // handleSuccess();
  280 + // setTimeout(() => {
  281 + // disabled.value = false;
  282 + // }, 3000);
  283 + // selectedRowKeys.length = 0;
  284 + // })
  285 + // .catch((e) => {
  286 + // selectedRowKeys.length = 0;
  287 + // setTimeout(() => {
  288 + // disabled.value = false;
  289 + // }, 3000);
  290 + // createMessage.error(e);
  291 + // });
  292 + // selectedRowKeys.length = 0;
  293 + // };
274 294
275 function handleDelete(record: Recordable) { 295 function handleDelete(record: Recordable) {
276 let ids = [record.id]; 296 let ids = [record.id];
@@ -304,6 +324,7 @@ @@ -304,6 +324,7 @@
304 function handleSuccess() { 324 function handleSuccess() {
305 reload(); 325 reload();
306 } 326 }
  327 +
307 const handleSetDefault = async (record: Recordable) => { 328 const handleSetDefault = async (record: Recordable) => {
308 let id = record.id; 329 let id = record.id;
309 const obj = { 330 const obj = {
@@ -337,7 +358,7 @@ @@ -337,7 +358,7 @@
337 // register1, 358 // register1,
338 // defaultHeader, 359 // defaultHeader,
339 useSelectionChange, 360 useSelectionChange,
340 - handleTableDel, 361 + // handleTableDel,
341 tableListRef, 362 tableListRef,
342 loadDataSuccess, 363 loadDataSuccess,
343 handleImport, 364 handleImport,
@@ -349,6 +370,8 @@ @@ -349,6 +370,8 @@
349 handleDelete, 370 handleDelete,
350 handleSuccess, 371 handleSuccess,
351 registerModal, 372 registerModal,
  373 + hasBatchDelete,
  374 + handleDeleteOrBatchDelete,
352 }; 375 };
353 }, 376 },
354 }); 377 });
@@ -13,11 +13,12 @@ @@ -13,11 +13,12 @@
13 </Authority> 13 </Authority>
14 <Authority value="api:yt:admin:deleteDataFlow"> 14 <Authority value="api:yt:admin:deleteDataFlow">
15 <a-button 15 <a-button
16 - :disabled="disabledStatus1"  
17 - @click="handleDelete"  
18 - :type="disabledStatus1 ? 'default' : 'primary'" 16 + type="primary"
  17 + color="error"
  18 + @click="handleDeleteOrBatchDelete(null)"
  19 + :disabled="hasBatchDelete"
19 > 20 >
20 - <span :style="{ color: disabledStatus1 ? 'grey' : 'white' }">批量删除</span> 21 + 批量删除
21 </a-button> 22 </a-button>
22 </Authority> 23 </Authority>
23 <a-button 24 <a-button
@@ -55,7 +56,7 @@ @@ -55,7 +56,7 @@
55 color: 'error', 56 color: 'error',
56 popConfirm: { 57 popConfirm: {
57 title: '是否确认删除', 58 title: '是否确认删除',
58 - confirm: handleSingleDelete.bind(null, record), 59 + confirm: handleDeleteOrBatchDelete.bind(null, record),
59 }, 60 },
60 ifShow: (_action) => { 61 ifShow: (_action) => {
61 return record.status == 0; 62 return record.status == 0;
@@ -94,7 +95,7 @@ @@ -94,7 +95,7 @@
94 </div> 95 </div>
95 </template> 96 </template>
96 <script lang="ts"> 97 <script lang="ts">
97 - import { defineComponent, reactive, ref } from 'vue'; 98 + import { defineComponent, reactive, ref, nextTick } from 'vue';
98 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 99 import { BasicTable, useTable, TableAction } from '/@/components/Table';
99 import { columns, searchFormSchema } from './config'; 100 import { columns, searchFormSchema } from './config';
100 import { useModal } from '/@/components/Modal'; 101 import { useModal } from '/@/components/Modal';
@@ -106,6 +107,7 @@ @@ -106,6 +107,7 @@
106 } from '/@/api/datamanager/dataManagerApi'; 107 } from '/@/api/datamanager/dataManagerApi';
107 import { useMessage } from '/@/hooks/web/useMessage'; 108 import { useMessage } from '/@/hooks/web/useMessage';
108 import { Authority } from '/@/components/Authority'; 109 import { Authority } from '/@/components/Authority';
  110 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
109 111
110 export default defineComponent({ 112 export default defineComponent({
111 name: 'Index', 113 name: 'Index',
@@ -123,10 +125,13 @@ @@ -123,10 +125,13 @@
123 let selectedRowKeys: any = ref([]); 125 let selectedRowKeys: any = ref([]);
124 let getSelectRowsArr: any = ref([]); 126 let getSelectRowsArr: any = ref([]);
125 let isJudgeSelectRowsArr: any = ref([]); 127 let isJudgeSelectRowsArr: any = ref([]);
  128 + const handleSuccess = () => {
  129 + reload();
  130 + };
126 const [registerModal, { openModal }] = useModal(); 131 const [registerModal, { openModal }] = useModal();
127 const [ 132 const [
128 registerTable, 133 registerTable,
129 - { reload, getSelectRowKeys, getSelectRows, setLoading, clearSelectedRowKeys }, 134 + { setProps, reload, getSelectRowKeys, getSelectRows, setLoading, clearSelectedRowKeys },
130 ] = useTable({ 135 ] = useTable({
131 title: '数据流转列表', 136 title: '数据流转列表',
132 clickToRowSelect: false, 137 clickToRowSelect: false,
@@ -149,6 +154,22 @@ @@ -149,6 +154,22 @@
149 fixed: 'right', 154 fixed: 'right',
150 }, 155 },
151 }); 156 });
  157 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
  158 + deleteConvertApi,
  159 + handleSuccess,
  160 + setProps
  161 + );
  162 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  163 + // Demo:status为1的选择框禁用
  164 + if (record.status === 1) {
  165 + return { disabled: true };
  166 + } else {
  167 + return { disabled: false };
  168 + }
  169 + };
  170 + nextTick(() => {
  171 + setProps(selectionOptions);
  172 + });
152 173
153 //新增 174 //新增
154 const handleAdd = () => { 175 const handleAdd = () => {
@@ -159,9 +180,6 @@ @@ -159,9 +180,6 @@
159 }, 10); 180 }, 10);
160 }; 181 };
161 182
162 - const handleSuccess = () => {  
163 - reload();  
164 - };  
165 const handleEdit = (record: Recordable) => { 183 const handleEdit = (record: Recordable) => {
166 setTimeout(() => { 184 setTimeout(() => {
167 openModal(true, { 185 openModal(true, {
@@ -217,16 +235,6 @@ @@ -217,16 +235,6 @@
217 setLoading(false); 235 setLoading(false);
218 } 236 }
219 }; 237 };
220 - const handleSingleDelete = async (record: Recordable) => {  
221 - try {  
222 - let ids = [record.id];  
223 - await deleteConvertApi(ids);  
224 - createMessage.success('删除成功');  
225 - reload();  
226 - } catch (e) {  
227 - return e;  
228 - }  
229 - };  
230 const useSelectionChange = () => { 238 const useSelectionChange = () => {
231 selectedRowKeys.value = getSelectRowKeys(); 239 selectedRowKeys.value = getSelectRowKeys();
232 isJudgeSelectRowsArr.value = getSelectRows(); 240 isJudgeSelectRowsArr.value = getSelectRows();
@@ -262,35 +270,6 @@ @@ -262,35 +270,6 @@
262 disabledStatus1.value = true; 270 disabledStatus1.value = true;
263 } 271 }
264 }; 272 };
265 -  
266 - const handleDelete = async () => {  
267 - try {  
268 - disabledStatus1.value = true;  
269 - setLoading(true);  
270 - const data = await deleteConvertApi(selectedRowKeys.value);  
271 - if (data == true) {  
272 - createMessage.success('删除成功');  
273 - setLoading(false);  
274 - setTimeout(() => {  
275 - disabledStatus1.value = false;  
276 - }, 3000);  
277 - reload();  
278 - } else {  
279 - createMessage.error('删除失败');  
280 - }  
281 - } catch (e: any) {  
282 - createMessage.error(e);  
283 - setTimeout(() => {  
284 - disabledStatus1.value = false;  
285 - }, 3000);  
286 - } finally {  
287 - setLoading(false);  
288 - clearSelectedRowKeys();  
289 - setTimeout(() => {  
290 - disabledStatus1.value = false;  
291 - }, 3000);  
292 - }  
293 - };  
294 const handleMutiuteDisable = async () => { 273 const handleMutiuteDisable = async () => {
295 enableObj.convertIds.length = 0; 274 enableObj.convertIds.length = 0;
296 try { 275 try {
@@ -354,15 +333,15 @@ @@ -354,15 +333,15 @@
354 loading, 333 loading,
355 registerTable, 334 registerTable,
356 handleAdd, 335 handleAdd,
357 - handleDelete,  
358 registerModal, 336 registerModal,
359 handleSuccess, 337 handleSuccess,
360 handleEdit, 338 handleEdit,
361 handleEnableOrDisable, 339 handleEnableOrDisable,
362 - handleSingleDelete,  
363 useSelectionChange, 340 useSelectionChange,
364 handleMutiuteDisable, 341 handleMutiuteDisable,
365 handleDisable, 342 handleDisable,
  343 + hasBatchDelete,
  344 + handleDeleteOrBatchDelete,
366 }; 345 };
367 }, 346 },
368 }); 347 });
@@ -44,9 +44,8 @@ @@ -44,9 +44,8 @@
44 </template> 44 </template>
45 45
46 <script lang="ts"> 46 <script lang="ts">
47 - import { defineComponent, reactive, ref, computed, h } from 'vue'; 47 + import { defineComponent, reactive, h, nextTick } from 'vue';
48 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 48 import { BasicTable, useTable, TableAction } from '/@/components/Table';
49 - import { useMessage } from '/@/hooks/web/useMessage';  
50 import { useDrawer } from '/@/components/Drawer'; 49 import { useDrawer } from '/@/components/Drawer';
51 import FeedbackDrawer from './FeedbackDrawer.vue'; 50 import FeedbackDrawer from './FeedbackDrawer.vue';
52 import { feedbackPage, deleteFeedbackManage } from '/@/api/feedback/feedbackManager'; 51 import { feedbackPage, deleteFeedbackManage } from '/@/api/feedback/feedbackManager';
@@ -55,6 +54,7 @@ @@ -55,6 +54,7 @@
55 import { Modal } from 'ant-design-vue'; 54 import { Modal } from 'ant-design-vue';
56 import { JsonPreview } from '/@/components/CodeEditor'; 55 import { JsonPreview } from '/@/components/CodeEditor';
57 import { Authority } from '/@/components/Authority'; 56 import { Authority } from '/@/components/Authority';
  57 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
58 58
59 export default defineComponent({ 59 export default defineComponent({
60 components: { 60 components: {
@@ -64,21 +64,10 @@ @@ -64,21 +64,10 @@
64 Authority, 64 Authority,
65 }, 65 },
66 setup() { 66 setup() {
67 - let selectedRowIds = ref<string[]>([]);  
68 - const hasBatchDelete = ref(true);  
69 - // 复选框事件  
70 - const onSelectRowChange = (selectedRowKeys: string[]) => {  
71 - selectedRowIds.value = selectedRowKeys;  
72 - if (selectedRowIds.value.length > 0) {  
73 - hasBatchDelete.value = false;  
74 - } else {  
75 - hasBatchDelete.value = true;  
76 - }  
77 - };  
78 const searchInfo = reactive<Recordable>({}); 67 const searchInfo = reactive<Recordable>({});
79 const [registerModal] = useModal(); 68 const [registerModal] = useModal();
80 // 表格hooks 69 // 表格hooks
81 - const [registerTable, { reload }] = useTable({ 70 + const [registerTable, { reload, setProps }] = useTable({
82 title: '意见反馈列表', 71 title: '意见反馈列表',
83 api: feedbackPage, 72 api: feedbackPage,
84 columns, 73 columns,
@@ -91,10 +80,6 @@ @@ -91,10 +80,6 @@
91 useSearchForm: true, 80 useSearchForm: true,
92 showTableSetting: true, 81 showTableSetting: true,
93 bordered: true, 82 bordered: true,
94 - rowSelection: {  
95 - onChange: onSelectRowChange,  
96 - type: 'checkbox',  
97 - },  
98 rowKey: 'id', 83 rowKey: 'id',
99 actionColumn: { 84 actionColumn: {
100 width: 200, 85 width: 200,
@@ -106,12 +91,20 @@ @@ -106,12 +91,20 @@
106 }); 91 });
107 // 弹框 92 // 弹框
108 const [registerDrawer, { openDrawer }] = useDrawer(); 93 const [registerDrawer, { openDrawer }] = useDrawer();
109 - const { createMessage } = useMessage();  
110 94
111 // 刷新 95 // 刷新
112 const handleSuccess = () => { 96 const handleSuccess = () => {
113 reload(); 97 reload();
114 }; 98 };
  99 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
  100 + deleteFeedbackManage,
  101 + handleSuccess,
  102 + setProps
  103 + );
  104 +
  105 + nextTick(() => {
  106 + setProps(selectionOptions);
  107 + });
115 // 新增或编辑 108 // 新增或编辑
116 const handleCreateOrEdit = (record: Recordable | null) => { 109 const handleCreateOrEdit = (record: Recordable | null) => {
117 if (record) { 110 if (record) {
@@ -125,27 +118,6 @@ @@ -125,27 +118,6 @@
125 }); 118 });
126 } 119 }
127 }; 120 };
128 - // 删除或批量删除  
129 - const handleDeleteOrBatchDelete = async (record: Recordable | null) => {  
130 - if (record) {  
131 - try {  
132 - await deleteFeedbackManage([record.id]);  
133 - createMessage.success('删除成功');  
134 - handleSuccess();  
135 - } catch (e) {}  
136 - } else {  
137 - hasBatchDelete.value = true;  
138 - try {  
139 - await deleteFeedbackManage(selectedRowIds.value);  
140 - createMessage.success('批量删除成功');  
141 - selectedRowIds.value = [];  
142 - handleSuccess();  
143 - setTimeout(() => {  
144 - hasBatchDelete.value = false;  
145 - }, 3000);  
146 - } catch (e) {}  
147 - }  
148 - };  
149 121
150 // 树形选择器 122 // 树形选择器
151 const handleSelect = (organizationId: string) => { 123 const handleSelect = (organizationId: string) => {
@@ -90,9 +90,13 @@ @@ -90,9 +90,13 @@
90 roleMenus.value = await getMenusIdsByRoleId(data.record.id); 90 roleMenus.value = await getMenusIdsByRoleId(data.record.id);
91 originMenus.value = [...roleMenus.value]; 91 originMenus.value = [...roleMenus.value];
92 for (let item of treeData.value) { 92 for (let item of treeData.value) {
93 - pidArr.value.push(item.key); 93 + if (item?.children != 0) {
  94 + pidArr.value.push(item.key);
  95 + }
94 for (let item1 of item?.children) { 96 for (let item1 of item?.children) {
95 - pidArr.value.push(item1.key); 97 + if (item1?.children != 0) {
  98 + pidArr.value.push(item1.key);
  99 + }
96 } 100 }
97 } 101 }
98 for (let item of roleMenus.value) { 102 for (let item of roleMenus.value) {
@@ -11,11 +11,25 @@ @@ -11,11 +11,25 @@
11 <a-button type="primary" @click="handleCreate">新增角色</a-button> 11 <a-button type="primary" @click="handleCreate">新增角色</a-button>
12 </Authority> 12 </Authority>
13 <Authority value="api:yt:admin:deleteSysRole"> 13 <Authority value="api:yt:admin:deleteSysRole">
14 - <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="isStatus"> 14 + <a-button
  15 + type="primary"
  16 + color="error"
  17 + @click="handleDeleteOrBatchDelete(null)"
  18 + :disabled="hasBatchDelete"
  19 + >
15 批量删除 20 批量删除
16 </a-button> 21 </a-button>
17 </Authority> 22 </Authority>
18 </template> 23 </template>
  24 + <template #status="{ record }">
  25 + <Switch
  26 + :checked="record.status === 1"
  27 + :loading="record.pendingStatus"
  28 + checkedChildren="启用"
  29 + unCheckedChildren="禁用"
  30 + @change="(checked:boolean)=>statusChange(checked,record)"
  31 + />
  32 + </template>
19 <template #action="{ record }"> 33 <template #action="{ record }">
20 <TableAction 34 <TableAction
21 :actions="[ 35 :actions="[
@@ -44,26 +58,27 @@ @@ -44,26 +58,27 @@
44 </div> 58 </div>
45 </template> 59 </template>
46 <script lang="ts"> 60 <script lang="ts">
47 - import { defineComponent, ref } from 'vue'; 61 + import { defineComponent, nextTick } from 'vue';
48 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 62 import { BasicTable, useTable, TableAction } from '/@/components/Table';
49 - import { delRole, getRoleListByPage } from '/@/api/system/system'; 63 + import { delRole, getRoleListByPage, setRoleStatus } from '/@/api/system/system';
50 import { useDrawer } from '/@/components/Drawer'; 64 import { useDrawer } from '/@/components/Drawer';
51 import RoleDrawer from './RoleDrawer.vue'; 65 import RoleDrawer from './RoleDrawer.vue';
52 import { columns, searchFormSchema } from './role.data'; 66 import { columns, searchFormSchema } from './role.data';
53 import { RoleEnum } from '/@/enums/roleEnum'; 67 import { RoleEnum } from '/@/enums/roleEnum';
54 - import { useMessage } from '/@/hooks/web/useMessage';  
55 import { Authority } from '/@/components/Authority'; 68 import { Authority } from '/@/components/Authority';
  69 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  70 + import { useMessage } from '/@/hooks/web/useMessage';
  71 + import { Switch } from 'ant-design-vue';
56 72
57 export default defineComponent({ 73 export default defineComponent({
58 name: 'RoleManagement', 74 name: 'RoleManagement',
59 - components: { BasicTable, RoleDrawer, TableAction, Authority }, 75 + components: { BasicTable, RoleDrawer, TableAction, Authority, Switch },
60 setup() { 76 setup() {
61 - const { createMessage } = useMessage();  
62 const [registerDrawer, { openDrawer }] = useDrawer(); 77 const [registerDrawer, { openDrawer }] = useDrawer();
63 - const isStatus = ref(true);  
64 - let selectArray: any = [];  
65 -  
66 - const [registerTable, { reload, getSelectRows }] = useTable({ 78 + function handleSuccess() {
  79 + reload();
  80 + }
  81 + const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
67 title: '角色列表', 82 title: '角色列表',
68 api: getRoleListByPage, 83 api: getRoleListByPage,
69 columns, 84 columns,
@@ -83,6 +98,19 @@ @@ -83,6 +98,19 @@
83 fixed: 'right', 98 fixed: 'right',
84 }, 99 },
85 }); 100 });
  101 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
  102 + useBatchDelete(delRole, handleSuccess, setProps);
  103 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  104 + // Demo:status为1的选择框禁用
  105 + if (record.status === 1) {
  106 + return { disabled: true };
  107 + } else {
  108 + return { disabled: false };
  109 + }
  110 + };
  111 + nextTick(() => {
  112 + setProps(selectionOptions);
  113 + });
86 114
87 function handleCreate() { 115 function handleCreate() {
88 openDrawer(true, { 116 openDrawer(true, {
@@ -96,52 +124,27 @@ @@ -96,52 +124,27 @@
96 isUpdate: true, 124 isUpdate: true,
97 }); 125 });
98 } 126 }
99 - function handleSuccess() {  
100 - reload();  
101 - }  
102 127
103 - const useSelectionChange = () => {  
104 - let getRows = getSelectRows();  
105 - const isJudge = getRows.map((m) => m.roleType);  
106 - if (isJudge.includes('SYS_ADMIN')) {  
107 - isStatus.value = true;  
108 - } else {  
109 - isStatus.value = false;  
110 - }  
111 - if (isJudge.length === 0) {  
112 - isStatus.value = true;  
113 - }  
114 - selectArray = getRows.filter((f) => f.status !== 'SYS_ADMIN').map((m) => m.id);  
115 - };  
116 -  
117 - const handleDeleteOrBatchDelete = async (record: Recordable | null) => {  
118 - if (record) {  
119 - try {  
120 - await delRole([record.id]);  
121 - createMessage.success('删除成功');  
122 - handleSuccess();  
123 - } catch (e: any) {}  
124 - } else {  
125 - isStatus.value = true;  
126 - try {  
127 - await delRole(selectArray);  
128 - createMessage.success('批量删除成功');  
129 - handleSuccess();  
130 - selectArray.length = 0;  
131 - setTimeout(() => {  
132 - isStatus.value = false;  
133 - }, 3000);  
134 - } catch (e: any) {  
135 - selectArray.length = 0;  
136 - setTimeout(() => {  
137 - isStatus.value = false;  
138 - }, 3000);  
139 - } finally {  
140 - selectArray.length = 0;  
141 - setTimeout(() => {  
142 - isStatus.value = false;  
143 - }, 3000); 128 + const statusChange = async (checked, record) => {
  129 + setProps({
  130 + loading: true,
  131 + });
  132 + setSelectedRowKeys([]);
  133 + resetSelectedRowKeys();
  134 + const newStatus = checked ? 1 : 0;
  135 + const { createMessage } = useMessage();
  136 + try {
  137 + await setRoleStatus(record.id, newStatus);
  138 + if (newStatus) {
  139 + createMessage.success(`启用成功`);
  140 + } else {
  141 + createMessage.success('禁用成功');
144 } 142 }
  143 + } finally {
  144 + setProps({
  145 + loading: false,
  146 + });
  147 + reload();
145 } 148 }
146 }; 149 };
147 150
@@ -152,9 +155,9 @@ @@ -152,9 +155,9 @@
152 handleEdit, 155 handleEdit,
153 handleSuccess, 156 handleSuccess,
154 RoleEnum, 157 RoleEnum,
  158 + hasBatchDelete,
155 handleDeleteOrBatchDelete, 159 handleDeleteOrBatchDelete,
156 - isStatus,  
157 - useSelectionChange, 160 + statusChange,
158 }; 161 };
159 }, 162 },
160 }); 163 });
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 { getRoleListByPage } from '/@/api/system/system';  
8 -import { USER_INFO_KEY } from '/@/enums/cacheEnum';  
9 -import { getAuthCache } from '/@/utils/auth';  
10 3
11 export const columns: BasicColumn[] = [ 4 export const columns: BasicColumn[] = [
12 { 5 {
@@ -23,46 +16,7 @@ export const columns: BasicColumn[] = [ @@ -23,46 +16,7 @@ export const columns: BasicColumn[] = [
23 title: '状态', 16 title: '状态',
24 dataIndex: 'status', 17 dataIndex: 'status',
25 width: 120, 18 width: 120,
26 - customRender: ({ record }) => {  
27 - if (!Reflect.has(record, 'pendingStatus')) {  
28 - record.pendingStatus = false;  
29 - }  
30 - return h(Switch, {  
31 - checked: record.status === 1,  
32 - checkedChildren: '已启用',  
33 - unCheckedChildren: '已禁用',  
34 - loading: record.pendingStatus,  
35 - async onChange(checked: boolean) {  
36 - record.pendingStatus = true;  
37 - const newStatus = checked ? 1 : 0;  
38 - const { createMessage } = useMessage();  
39 - const data = await getRoleListByPage({  
40 - page: 1,  
41 - pageSize: 100,  
42 - // roleType: 'CUSTOMER_USER',  
43 - });  
44 - const userInfo = (await getAuthCache(USER_INFO_KEY)) as unknown as any;  
45 - const findById = data.items.find((f) => {  
46 - if (f.id === userInfo.plainRoles[0].roleId) {  
47 - return f.id;  
48 - }  
49 - });  
50 - if (record.id == findById?.id) return createMessage.error(`该租户下面有此客户,无法禁用`);  
51 - record.pendingStatus = true;  
52 - setRoleStatus(record.id, newStatus)  
53 - .then(() => {  
54 - record.status = newStatus;  
55 - createMessage.success(`已成功修改角色状态`);  
56 - })  
57 - .catch(() => {  
58 - createMessage.error('修改角色状态失败');  
59 - })  
60 - .finally(() => {  
61 - record.pendingStatus = false;  
62 - });  
63 - },  
64 - });  
65 - }, 19 + slots: { customRender: 'status' },
66 }, 20 },
67 21
68 { 22 {