refactor: 通用的表格复选框是否选中事件

This commit is contained in:
dap 2024-10-18 15:39:39 +08:00
parent c6984c164c
commit 6e7fade539
19 changed files with 130 additions and 127 deletions

View File

@ -100,7 +100,6 @@ export { useVbenVxeGrid };
export type * from '@vben/plugins/vxe-table'; export type * from '@vben/plugins/vxe-table';
/** /**
*
* *
* @param checked * @param checked
* @returns function * @returns function

View File

@ -9,7 +9,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { downloadExcel } from '#/utils/file/download'; import { downloadExcel } from '#/utils/file/download';
import { demoExport, demoList, demoRemove } from './api'; import { demoExport, demoList, demoRemove } from './api';
@ -74,12 +78,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -9,7 +9,12 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridDefines,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
loginInfoClean, loginInfoClean,
loginInfoExport, loginInfoExport,
@ -82,13 +87,12 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: (e: VxeGridDefines.CheckboxChangeEventParams) => {
checked.value = e.records.length > 0; const records = e.$table.getCheckboxRecords();
canUnlock.value = e.records.length === 1 && e.records[0]?.status === '1'; checked.value = records.length > 0;
}, canUnlock.value = records.length === 1 && records[0]?.status === '1';
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
}, },
checkboxAll: tableCheckboxEvent(checked),
}, },
}); });

View File

@ -12,7 +12,11 @@ import { Modal, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { isEmpty } from 'lodash-es'; import { isEmpty } from 'lodash-es';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
operLogClean, operLogClean,
operLogDelete, operLogDelete,
@ -98,12 +102,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
sortChange: () => { sortChange: () => {
tableApi.query(); tableApi.query();
}, },
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -9,7 +9,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
clientChangeStatus, clientChangeStatus,
clientExport, clientExport,
@ -68,12 +72,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -9,7 +9,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
configExport, configExport,
configList, configList,
@ -78,12 +82,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });
const [ConfigModal, modalApi] = useVbenModal({ const [ConfigModal, modalApi] = useVbenModal({

View File

@ -9,7 +9,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
dictDataExport, dictDataExport,
dictDataList, dictDataList,
@ -87,12 +91,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -18,7 +18,11 @@ import {
} from 'ant-design-vue'; } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
dictTypeExport, dictTypeExport,
dictTypeList, dictTypeList,
@ -102,12 +106,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
emitter.emit('rowClick', row.dictType); emitter.emit('rowClick', row.dictType);
lastDictType.value = row.dictType; lastDictType.value = row.dictType;
}, },
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });
const [DictTypeModal, modalApi] = useVbenModal({ const [DictTypeModal, modalApi] = useVbenModal({

View File

@ -9,7 +9,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { noticeList, noticeRemove } from '#/api/system/notice'; import { noticeList, noticeRemove } from '#/api/system/notice';
import { columns, querySchema } from './data'; import { columns, querySchema } from './data';
@ -74,12 +78,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -10,7 +10,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
ossConfigChangeStatus, ossConfigChangeStatus,
ossConfigList, ossConfigList,
@ -77,12 +81,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -20,7 +20,11 @@ import {
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { isEmpty } from 'lodash-es'; import { isEmpty } from 'lodash-es';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { configInfoByKey } from '#/api/system/config'; import { configInfoByKey } from '#/api/system/config';
import { ossDownload, ossList, ossRemove } from '#/api/system/oss'; import { ossDownload, ossList, ossRemove } from '#/api/system/oss';
import { downloadByData } from '#/utils/file/download'; import { downloadByData } from '#/utils/file/download';
@ -100,12 +104,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
sortChange: () => { sortChange: () => {
tableApi.query(); tableApi.query();
}, },
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -9,7 +9,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { postExport, postList, postRemove } from '#/api/system/post'; import { postExport, postList, postRemove } from '#/api/system/post';
import { downloadExcel } from '#/utils/file/download'; import { downloadExcel } from '#/utils/file/download';
import DeptTree from '#/views/system/user/dept-tree.vue'; import DeptTree from '#/views/system/user/dept-tree.vue';
@ -91,12 +95,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -9,7 +9,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
roleAllocatedList, roleAllocatedList,
roleAuthCancel, roleAuthCancel,
@ -67,12 +71,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -4,7 +4,11 @@ import { useRoute } from 'vue-router';
import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui'; import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { roleSelectAll, roleUnallocatedList } from '#/api/system/role'; import { roleSelectAll, roleUnallocatedList } from '#/api/system/role';
import { columns, querySchema } from './data'; import { columns, querySchema } from './data';
@ -63,12 +67,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -23,7 +23,11 @@ import {
} from 'ant-design-vue'; } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
roleChangeStatus, roleChangeStatus,
roleExport, roleExport,
@ -97,12 +101,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });
const [RoleDrawer, drawerApi] = useVbenDrawer({ const [RoleDrawer, drawerApi] = useVbenDrawer({

View File

@ -11,7 +11,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
tenantExport, tenantExport,
tenantList, tenantList,
@ -86,12 +90,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -11,7 +11,11 @@ import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
packageChangeStatus, packageChangeStatus,
packageExport, packageExport,
@ -83,12 +87,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -24,7 +24,11 @@ import {
} from 'ant-design-vue'; } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
userExport, userExport,
userList, userList,
@ -128,12 +132,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });

View File

@ -9,7 +9,11 @@ import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { message, Modal, Popconfirm, Space } from 'ant-design-vue'; import { message, Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import {
tableCheckboxEvent,
useVbenVxeGrid,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { import {
batchGenCode, batchGenCode,
generatedList, generatedList,
@ -79,12 +83,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
gridEvents: { gridEvents: {
checkboxChange: (e: any) => { checkboxChange: tableCheckboxEvent(checked),
checked.value = e.records.length > 0; checkboxAll: tableCheckboxEvent(checked),
},
checkboxAll: (e: any) => {
checked.value = e.records.length > 0;
},
}, },
}); });