Commit 40babc2276a43f8305c196cd2cbd06eae96d104a
1 parent
bcbdb448
fix:DEFECT-504 数据流转状态改变为场景联动一样的启用禁用问题
Showing
2 changed files
with
41 additions
and
92 deletions
@@ -55,13 +55,7 @@ export const columns: BasicColumn[] = [ | @@ -55,13 +55,7 @@ export const columns: BasicColumn[] = [ | ||
55 | title: '状态', | 55 | title: '状态', |
56 | dataIndex: 'status', | 56 | dataIndex: 'status', |
57 | width: 120, | 57 | width: 120, |
58 | - customRender: ({ record }) => { | ||
59 | - const status = record.status; | ||
60 | - const enable = ~~status === 1; | ||
61 | - const color = enable ? '#2aae67' : '#eb846f'; | ||
62 | - const text = enable ? '启用' : '禁用'; | ||
63 | - return h(Tag, { color: color }, () => text); | ||
64 | - }, | 58 | + slots: { customRender: 'status' }, |
65 | }, | 59 | }, |
66 | { | 60 | { |
67 | title: '描述', | 61 | title: '描述', |
@@ -64,32 +64,18 @@ | @@ -64,32 +64,18 @@ | ||
64 | return record.status == 0; | 64 | return record.status == 0; |
65 | }, | 65 | }, |
66 | }, | 66 | }, |
67 | - { | ||
68 | - label: '启用', | ||
69 | - icon: 'ant-design:check-circle-outlined', | ||
70 | - color: 'success', | ||
71 | - popConfirm: { | ||
72 | - title: '是否启用?', | ||
73 | - confirm: handleEnableOrDisable.bind(null, record), | ||
74 | - }, | ||
75 | - ifShow: (_action) => { | ||
76 | - return record.status == 0; | ||
77 | - }, | ||
78 | - }, | ||
79 | - { | ||
80 | - label: '禁用', | ||
81 | - icon: 'ant-design:close-circle-outlined', | ||
82 | - popConfirm: { | ||
83 | - title: '是否禁用?', | ||
84 | - confirm: handleDisable.bind(null, record), | ||
85 | - }, | ||
86 | - ifShow: (_action) => { | ||
87 | - return record.status == 1; | ||
88 | - }, | ||
89 | - }, | ||
90 | ]" | 67 | ]" |
91 | /> | 68 | /> |
92 | </template> | 69 | </template> |
70 | + <template #status="{ record }"> | ||
71 | + <Switch | ||
72 | + :checked="record.status === 1" | ||
73 | + :loading="record.pendingStatus" | ||
74 | + checkedChildren="启用" | ||
75 | + unCheckedChildren="禁用" | ||
76 | + @change="(checked:boolean)=>statusChange(checked,record)" | ||
77 | + /> | ||
78 | + </template> | ||
93 | </BasicTable> | 79 | </BasicTable> |
94 | <div> | 80 | <div> |
95 | <DataTransferDrawer @register="registerModal" @success="handleSuccess" /> | 81 | <DataTransferDrawer @register="registerModal" @success="handleSuccess" /> |
@@ -110,10 +96,11 @@ | @@ -110,10 +96,11 @@ | ||
110 | import { useMessage } from '/@/hooks/web/useMessage'; | 96 | import { useMessage } from '/@/hooks/web/useMessage'; |
111 | import { Authority } from '/@/components/Authority'; | 97 | import { Authority } from '/@/components/Authority'; |
112 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | 98 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
99 | + import { Switch } from 'ant-design-vue'; | ||
113 | 100 | ||
114 | export default defineComponent({ | 101 | export default defineComponent({ |
115 | name: 'Index', | 102 | name: 'Index', |
116 | - components: { BasicTable, TableAction, DataTransferDrawer, Authority }, | 103 | + components: { BasicTable, TableAction, DataTransferDrawer, Authority, Switch }, |
117 | setup() { | 104 | setup() { |
118 | const enableObj = reactive({ | 105 | const enableObj = reactive({ |
119 | convertIds: [], | 106 | convertIds: [], |
@@ -191,64 +178,6 @@ | @@ -191,64 +178,6 @@ | ||
191 | }); | 178 | }); |
192 | }, 10); | 179 | }, 10); |
193 | }; | 180 | }; |
194 | - | ||
195 | - const handleEnableOrDisable = async (record: Recordable) => { | ||
196 | - setLoading(true); | ||
197 | - enableObj.convertIds.length = 0; | ||
198 | - try { | ||
199 | - enableObj.status = record.status; | ||
200 | - enableObj.convertIds.push(record.id as never); | ||
201 | - if (enableObj.status == 0) { | ||
202 | - enableObj.status = 1; | ||
203 | - } | ||
204 | - const res = await isEnableOrDisableApi(enableObj as never); | ||
205 | - if (res !== '') { | ||
206 | - createMessage.success('流转配置启用成功'); | ||
207 | - setLoading(false); | ||
208 | - handleSuccess(); | ||
209 | - singleStopDeleteStatus.value = true; | ||
210 | - disabledStatus1.value = true; | ||
211 | - disabledStatus2.value = true; | ||
212 | - disabledStatus3.value = true; | ||
213 | - resetSelectedRowKeys(); | ||
214 | - clearSelectedRowKeys(); | ||
215 | - } else { | ||
216 | - createMessage.error('流转配置启用失败'); | ||
217 | - } | ||
218 | - } catch (e) { | ||
219 | - return e; | ||
220 | - } finally { | ||
221 | - setLoading(false); | ||
222 | - } | ||
223 | - }; | ||
224 | - const handleDisable = async (record: Recordable) => { | ||
225 | - setLoading(true); | ||
226 | - enableObj.convertIds.length = 0; | ||
227 | - try { | ||
228 | - enableObj.status = record.status; | ||
229 | - enableObj.convertIds.push(record.id as never); | ||
230 | - if (enableObj.status == 1) { | ||
231 | - enableObj.status = 0; | ||
232 | - } | ||
233 | - const res = await isEnableOrDisableApi(enableObj as never); | ||
234 | - if (res !== '') { | ||
235 | - createMessage.success('流转配置禁用成功'); | ||
236 | - setLoading(false); | ||
237 | - handleSuccess(); | ||
238 | - singleStopDeleteStatus.value = true; | ||
239 | - disabledStatus1.value = true; | ||
240 | - disabledStatus2.value = true; | ||
241 | - disabledStatus3.value = true; | ||
242 | - resetSelectedRowKeys(); | ||
243 | - clearSelectedRowKeys(); | ||
244 | - } else { | ||
245 | - createMessage.error('流转配置禁用失败'); | ||
246 | - } | ||
247 | - } catch (e) { | ||
248 | - } finally { | ||
249 | - setLoading(false); | ||
250 | - } | ||
251 | - }; | ||
252 | const useSelectionChange = () => { | 181 | const useSelectionChange = () => { |
253 | selectedRowKeys.value = getSelectRowKeys(); | 182 | selectedRowKeys.value = getSelectRowKeys(); |
254 | isJudgeSelectRowsArr.value = getSelectRows(); | 183 | isJudgeSelectRowsArr.value = getSelectRows(); |
@@ -310,7 +239,6 @@ | @@ -310,7 +239,6 @@ | ||
310 | clearSelectedRowKeys(); | 239 | clearSelectedRowKeys(); |
311 | } | 240 | } |
312 | }; | 241 | }; |
313 | - | ||
314 | const handleMutiuteEnable = async () => { | 242 | const handleMutiuteEnable = async () => { |
315 | enableObj.convertIds.length = 0; | 243 | enableObj.convertIds.length = 0; |
316 | try { | 244 | try { |
@@ -339,6 +267,34 @@ | @@ -339,6 +267,34 @@ | ||
339 | clearSelectedRowKeys(); | 267 | clearSelectedRowKeys(); |
340 | } | 268 | } |
341 | }; | 269 | }; |
270 | + const statusChange = async (checked, record) => { | ||
271 | + setProps({ | ||
272 | + loading: true, | ||
273 | + }); | ||
274 | + enableObj.convertIds.length = 0; | ||
275 | + resetSelectedRowKeys(); | ||
276 | + clearSelectedRowKeys(); | ||
277 | + const newStatus = checked ? 1 : 0; | ||
278 | + try { | ||
279 | + enableObj.convertIds.push(record.id as never); | ||
280 | + enableObj.status = newStatus; | ||
281 | + await isEnableOrDisableApi(enableObj as never); | ||
282 | + if (newStatus) { | ||
283 | + createMessage.success(`流转配置启用成功`); | ||
284 | + } else { | ||
285 | + createMessage.success('流转配置禁用成功'); | ||
286 | + } | ||
287 | + singleStopDeleteStatus.value = true; | ||
288 | + disabledStatus1.value = true; | ||
289 | + disabledStatus2.value = true; | ||
290 | + disabledStatus3.value = true; | ||
291 | + } finally { | ||
292 | + setProps({ | ||
293 | + loading: false, | ||
294 | + }); | ||
295 | + reload(); | ||
296 | + } | ||
297 | + }; | ||
342 | 298 | ||
343 | return { | 299 | return { |
344 | disabledStatus1, | 300 | disabledStatus1, |
@@ -351,13 +307,12 @@ | @@ -351,13 +307,12 @@ | ||
351 | registerModal, | 307 | registerModal, |
352 | handleSuccess, | 308 | handleSuccess, |
353 | handleEdit, | 309 | handleEdit, |
354 | - handleEnableOrDisable, | ||
355 | useSelectionChange, | 310 | useSelectionChange, |
356 | handleMutiuteDisable, | 311 | handleMutiuteDisable, |
357 | - handleDisable, | ||
358 | hasBatchDelete, | 312 | hasBatchDelete, |
359 | handleDeleteOrBatchDelete, | 313 | handleDeleteOrBatchDelete, |
360 | singleStopDeleteStatus, | 314 | singleStopDeleteStatus, |
315 | + statusChange, | ||
361 | }; | 316 | }; |
362 | }, | 317 | }, |
363 | }); | 318 | }); |