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 | +} |