import * as FormatterFn from '@/common/constants/enumsName'; import { ColumnType, getTableHead } from '@/common/methods/table'; import { TableKey } from '@/common/methods/table/interface'; import { ref } from "vue"; /** * 获取动态表头数据 * ant-design 表格数据的过滤功能与表头绑定在一起 */ export function getTableColumns() { // 表头数据 const columns = ref([]); // 过滤信息 const filteredInfo = ref(); // 缓存 注册表头回调 let cacheColumnCB: Function = (): void => { }; // 缓存 动态表头 key let cacheTableKey: keyof TableKey = 'table_pcweb_userinfo'; let cacheFilterKeyList: string[] = [] /** * 注册表头 * @param tableName 动态表头数据key * @param filterKeyList 添加过滤属性的key * @param cb 回调函数,处理添加不同表格过滤,排序等功能 */ function registerColumn(tableName: keyof TableKey, filterKeyList: string[], cb?: Function) { cacheTableKey = tableName; cacheColumnCB = cb ? cb : () => { }; cacheFilterKeyList = filterKeyList; const list = getTableHead(tableName); const filtered = filteredInfo.value || {}; columns.value.length = 0; list.forEach((e, i) => { const { columnfield, columntitle, columnwidth, aligntype, formatterstring } = e; const item: ColumnType = { key: String(i + 'th'), dataIndex: columnfield, // 表格数据对应的key title: columntitle, align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right', slots: { customRender: columnfield }, }; // 序号 if (columntitle === '序号') { item.customRender = (obj: any) => `${obj.index + 1}` item.width = 30 } // 设置表格宽度 if (columnwidth && columnwidth !== '0') { item.width = +columnwidth } else { if (columntitle.includes('时间') || columntitle.includes('编号')) { item.width = 200 } else { const len = columntitle.length if (len > 4) { item.width = 120 + 10 * (len - 4) } else { item.width = 120 // 默认120 } } } // 数据格式化 if (formatterstring) { const fn = getFromatterFn(formatterstring) if (fn) { item.customRender = fn } } // 以下添加过滤数据对应的方法 filterKeyList.forEach(el => { if (e.columnfield === el) { item.onFilter = (value: string, record: any) => record[el].toString().includes(String(value)); item.filteredValue = filtered[el] || null; } }) cb && cb(e, item, filtered); columns.value.push(item); }); console.log('columns', columns); } /** * 更新动态表头 */ function updateColumn(value: object) { console.log('过滤参数', value); filteredInfo.value = value registerColumn(cacheTableKey, cacheFilterKeyList, cacheColumnCB) } return { columns, registerColumn, updateColumn } } /** * 获取对应的格式化函数 * @param val * @returns 格式化函数 */ function getFromatterFn(val: string) { const arr = val.split(','); const first = arr[0] let result: Function | null = null switch (first) { case 'FormatterUnit': // 处理单位 result = (obj: any) => arr[1] ? obj.text + obj.record[arr[1]] : obj.text break; case 'FromatterPercent': // 数值百分比 result = (obj: any) => (Number(obj.text) * 100).toFixed(2) + '%' break case 'FromatterDecimal': // 数值小数位 result = (obj: any) => { const value = obj.text; return (value && arr[1]) ? value.toFixed(obj.record[arr[1]]) : value } break case 'getContractTypeName': // 合同类型名称 result = FormatterFn.getContractTypeName break case 'getBizTypeName': // 业务类型 result = FormatterFn.getBizTypeName break case 'getBuyOrSellName': // 持仓方向 result = FormatterFn.getBuyOrSellName break case 'getChangeLogType': // 变更流水类型 result = FormatterFn.getChangeLogType break case 'getLogType': // 计划类型 result = FormatterFn.getLogType break default: if (first) { console.warn(`请开发人员配置${first}格式化函数!`) } break } return result } // table的expandIcon属性,修改默认展开关闭按钮 子表无数据时不显示展开图标 export function expandIcon(props: any) { return null }