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 | }); |