UNIVPLMDataIntegration/Web/src/hooks/useVxeTableOptionsHook.ts

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<T>} extras 要覆盖的参数
 * @returns
 */
export const useVxeTable = <T>(opt: iVxeOption, extras?: VxeGridProps<T>) => {
	// 创建tableId,表格id固定才可以记录调整列宽，再次刷新仍有效。
	opt.id = opt.id ? opt.id : String(new Date().getTime());
	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;
};