Commit f196b082369c6cb08c92622875eb9c590b0f6c0e

Authored by sqy
1 parent 910b1652

fix:优化删除的hook函数-防止多次提交

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