简柏林 / thingskit-front · Commits

Commit d6cefc6cc2ce78e27d415357e306699c9ce7d026

Authored by xp.Huang
2 parents 87aeeacf e839d712

Merge branch 'ft-dev' into 'main' 

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

See merge request huang/yun-teng-iot-front!210
Inline Side-by-side
Showing 10 changed files with 258 additions and 362 deletions
@@ -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 {
@@ -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',