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 | 55 | title: '状态', |
56 | 56 | dataIndex: 'status', |
57 | 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 | 61 | title: '描述', | ... | ... |
... | ... | @@ -64,32 +64,18 @@ |
64 | 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 | 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 | 79 | </BasicTable> |
94 | 80 | <div> |
95 | 81 | <DataTransferDrawer @register="registerModal" @success="handleSuccess" /> |
... | ... | @@ -110,10 +96,11 @@ |
110 | 96 | import { useMessage } from '/@/hooks/web/useMessage'; |
111 | 97 | import { Authority } from '/@/components/Authority'; |
112 | 98 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
99 | + import { Switch } from 'ant-design-vue'; | |
113 | 100 | |
114 | 101 | export default defineComponent({ |
115 | 102 | name: 'Index', |
116 | - components: { BasicTable, TableAction, DataTransferDrawer, Authority }, | |
103 | + components: { BasicTable, TableAction, DataTransferDrawer, Authority, Switch }, | |
117 | 104 | setup() { |
118 | 105 | const enableObj = reactive({ |
119 | 106 | convertIds: [], |
... | ... | @@ -191,64 +178,6 @@ |
191 | 178 | }); |
192 | 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 | 181 | const useSelectionChange = () => { |
253 | 182 | selectedRowKeys.value = getSelectRowKeys(); |
254 | 183 | isJudgeSelectRowsArr.value = getSelectRows(); |
... | ... | @@ -310,7 +239,6 @@ |
310 | 239 | clearSelectedRowKeys(); |
311 | 240 | } |
312 | 241 | }; |
313 | - | |
314 | 242 | const handleMutiuteEnable = async () => { |
315 | 243 | enableObj.convertIds.length = 0; |
316 | 244 | try { |
... | ... | @@ -339,6 +267,34 @@ |
339 | 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 | 299 | return { |
344 | 300 | disabledStatus1, |
... | ... | @@ -351,13 +307,12 @@ |
351 | 307 | registerModal, |
352 | 308 | handleSuccess, |
353 | 309 | handleEdit, |
354 | - handleEnableOrDisable, | |
355 | 310 | useSelectionChange, |
356 | 311 | handleMutiuteDisable, |
357 | - handleDisable, | |
358 | 312 | hasBatchDelete, |
359 | 313 | handleDeleteOrBatchDelete, |
360 | 314 | singleStopDeleteStatus, |
315 | + statusChange, | |
361 | 316 | }; |
362 | 317 | }, |
363 | 318 | }); | ... | ... |