85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import { dayjs } from 'element-plus';
|
||
import { reactive } from 'vue';
|
||
import { VxeGridProps, VxeGridPropTypes, VxeComponentSizeType } from 'vxe-table';
|
||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||
import { merge } from 'lodash-es';
|
||
|
||
const vxeSize: VxeComponentSizeType = useThemeConfig().themeConfig.globalComponentSize == 'small' ? 'mini' : useThemeConfig().themeConfig.globalComponentSize == 'default' ? 'small' : 'medium';
|
||
|
||
/**
|
||
* @param {String} id 表格唯一标识，为空时自动随机产生;
|
||
* @param {String} id name:表格名称，与导出文件名有关;
|
||
* @param {VxeGridPropTypes.Columns<any>} columns 列配置;
|
||
*/
|
||
interface iVxeOption {
|
||
id?: string;
|
||
name?: string;
|
||
columns: VxeGridPropTypes.Columns<any>;
|
||
}
|
||
|
||
/**
|
||
* Vxe表格参数化Hook
|
||
* @param {iVxeOption} opt 参数
|
||
* @param {VxeGridProps<RowVO>} extras 要覆盖的参数
|
||
* @returns
|
||
*/
|
||
export const useVxeTable = <T>(opt: iVxeOption, extras?: VxeGridProps<T>) => {
|
||
// 默认参数
|
||
opt = Object.assign({ enableExport: true, remoteExport: false }, opt);
|
||
// 创建tableId,表格id固定才可以记录调整列宽，再次刷新仍有效。
|
||
opt.id = opt.id ? opt.id : String(new Date().getTime());
|
||
// console.log(opt);
|
||
const options = reactive<VxeGridProps>({
|
||
id: opt.id,
|
||
height: 'auto',
|
||
autoResize: true,
|
||
size: vxeSize,
|
||
loading: false,
|
||
align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
|
||
// data: [] as Array<T>,
|
||
columns: opt.columns,
|
||
toolbarConfig: {
|
||
size: vxeSize,
|
||
slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' },
|
||
refresh: {
|
||
code: 'query',
|
||
},
|
||
export: true,
|
||
print: true,
|
||
zoom: true,
|
||
custom: true,
|
||
},
|
||
checkboxConfig: { range: true },
|
||
sortConfig: { trigger: 'cell', remote: true },
|
||
exportConfig: {
|
||
remote: false, // 设置使用服务端导出
|
||
filename: `${opt.name}导出_${dayjs().format('YYMMDDHHmmss')}`,
|
||
},
|
||
pagerConfig: {
|
||
enabled: true,
|
||
size: vxeSize,
|
||
pageSize: 20,
|
||
}, // 分页
|
||
printConfig: { sheetName: '' },
|
||
proxyConfig: {
|
||
enabled: true,
|
||
autoLoad: false,
|
||
sort: true,
|
||
props: {
|
||
list: 'data.result', // 不分页时
|
||
result: 'data.result.items', // 分页时
|
||
total: 'data.result.total',
|
||
message: 'data.message',
|
||
},
|
||
},
|
||
customConfig: {
|
||
storage: {
|
||
// 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
|
||
visible: true, // 启用显示/隐藏列状态
|
||
resizable: true, // 启用列宽状态
|
||
},
|
||
},
|
||
});
|
||
return extras ? merge(options, extras) : options;
|
||
};
|