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

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 } = e;
            console.log();

            const item: ColumnType = {
                key: String(i),
                dataIndex: columnfield, // 表格数据对应的key
                title: columntitle,
                align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right',
                slots: { customRender: columnfield },
            };
            if (columntitle === '序号') {
                item.render = (text: any, record: any, index: number) => `${index + 1}`
            }
            if (columnwidth) {
                item.width = +columnwidth
            }
            // 以下添加过滤数据对应的方法
            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);
        });
    }
    /**
     * 更新动态表头
     */
    function updateColumn() {
        registerColumn(cacheTableKey, cacheFilterKeyList, cacheColumnCB)
    }
    return { columns, registerColumn, updateColumn, filteredInfo }
}