Showing
1 changed file
with
22 additions
and
14 deletions
| 1 | import { ref, computed } from 'vue'; | 1 | import { ref, computed } from 'vue'; | 
| 2 | +import { BasicTableProps } from '/@/components/Table'; | ||
| 2 | import { useMessage } from '/@/hooks/web/useMessage'; | 3 | import { useMessage } from '/@/hooks/web/useMessage'; | 
| 4 | + | ||
| 3 | /** | 5 | /** | 
| 4 | * | 6 | * | 
| 5 | * @param deleteFn 要删除的API接口方法 | 7 | * @param deleteFn 要删除的API接口方法 | 
| 6 | * @param handleSuccess 刷新表格的方法 | 8 | * @param handleSuccess 刷新表格的方法 | 
| 9 | + * @param setProps 用于设置表格的loading状态函数 - 防止页面重复提交 | ||
| 10 | + * | ||
| 7 | * @returns { | 11 | * @returns { | 
| 8 | * hasBatchDelete: 是否可以删除 | 12 | * hasBatchDelete: 是否可以删除 | 
| 9 | * selectionOptions 表格复选框配置项 | 13 | * selectionOptions 表格复选框配置项 | 
| @@ -21,10 +25,11 @@ interface selectionOptions { | @@ -21,10 +25,11 @@ interface selectionOptions { | ||
| 21 | type: 'radio' | 'checkbox'; | 25 | type: 'radio' | 'checkbox'; | 
| 22 | }; | 26 | }; | 
| 23 | } | 27 | } | 
| 24 | -export const useBatchDelete = ( | 28 | +export function useBatchDelete( | 
| 25 | deleteFn: (deleteIds: string[]) => Promise<void>, | 29 | deleteFn: (deleteIds: string[]) => Promise<void>, | 
| 26 | - handleSuccess: () => void | ||
| 27 | -) => { | 30 | + handleSuccess: () => void, | 
| 31 | + setProps: (props: Partial<BasicTableProps>) => void | ||
| 32 | +) { | ||
| 28 | const { createMessage } = useMessage(); | 33 | const { createMessage } = useMessage(); | 
| 29 | const selectedRowIds = ref<string[]>([]); | 34 | const selectedRowIds = ref<string[]>([]); | 
| 30 | const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0); | 35 | const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0); | 
| @@ -41,20 +46,23 @@ export const useBatchDelete = ( | @@ -41,20 +46,23 @@ export const useBatchDelete = ( | ||
| 41 | selectedRowIds.value = selectedRowKeys; | 46 | selectedRowIds.value = selectedRowKeys; | 
| 42 | }; | 47 | }; | 
| 43 | const handleDeleteOrBatchDelete = async (record: Recordable | null) => { | 48 | const handleDeleteOrBatchDelete = async (record: Recordable | null) => { | 
| 44 | - if (record) { | ||
| 45 | - try { | 49 | + setProps({ | 
| 50 | + loading: true, | ||
| 51 | + }); | ||
| 52 | + try { | ||
| 53 | + if (record) { | ||
| 46 | await deleteFn([record.id]); | 54 | await deleteFn([record.id]); | 
| 47 | createMessage.success('删除成功'); | 55 | createMessage.success('删除成功'); | 
| 48 | - handleSuccess(); | ||
| 49 | - } catch (e) {} | ||
| 50 | - } else { | ||
| 51 | - try { | 56 | + } else { | 
| 52 | await deleteFn(selectedRowIds.value); | 57 | await deleteFn(selectedRowIds.value); | 
| 53 | createMessage.success('批量删除成功'); | 58 | createMessage.success('批量删除成功'); | 
| 54 | - console.log(selectedRowIds.value); | ||
| 55 | - handleSuccess(); | ||
| 56 | - } catch (e) {} | ||
| 57 | - selectedRowIds.value = []; | 59 | + selectedRowIds.value = []; | 
| 60 | + } | ||
| 61 | + } finally { | ||
| 62 | + setProps({ | ||
| 63 | + loading: false, | ||
| 64 | + }); | ||
| 65 | + handleSuccess(); | ||
| 58 | } | 66 | } | 
| 59 | }; | 67 | }; | 
| 60 | 68 | ||
| @@ -72,4 +80,4 @@ export const useBatchDelete = ( | @@ -72,4 +80,4 @@ export const useBatchDelete = ( | ||
| 72 | }, | 80 | }, | 
| 73 | }; | 81 | }; | 
| 74 | return { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete, resetSelectedRowKeys }; | 82 | return { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete, resetSelectedRowKeys }; | 
| 75 | -}; | 83 | +} |