MTP2.0_WEB/src/common/setup/table/clolumn.ts

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<ColumnType[]>([]);
    // 过滤信息
    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
}