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

import { BtnList } from '@/common/components/btnList/interface';
import { ContextMenuTemp } from "@/common/components/contextMenu/interface";
import { handleContextMenu } from "@/common/components/contextMenu/setup";
import { getTableColumns, initData } from "@/common/export/table";
import { TableKey } from '@/common/methods/table/interface';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { onUnmounted, ref } from "vue";
import { getBtnList_ } from './button';
import { ButtonListKey, TableEventCB } from './interface';

/**
 * 表格事件
 * @param param TableEventCB
 * @returns
 */
export function getTableEvent<T>(param: TableEventCB) {
    // 表格展开行
    const expandedRowKeys = ref<string[]>([]);
    // 表格选中的数据
    const selectedRow = ref<T>()
    // 右键数据
    const contextMenu = ref<ContextMenuTemp>({
        position: { clientX: 0, clientY: 0 },
        show: false,
    })
    function Rowclick(record: T, index: number) {
        return {
            onClick: () => {  // 表格点击
                selectedRow.value = record
                const key = (record as any).key
                // 控制表格折腾面板
                const value = expandedRowKeys.value;
                if (value && value.length && value[0] === key) {
                    expandedRowKeys.value = []
                } else {
                    expandedRowKeys.value = [key]
                }
                param.clickCB && param.clickCB(record)
            },
            // onDblclick: () => { // 双击
            //     console.log('onDblclick');
            // },
            onContextmenu: (event: MouseEvent) => {  // 表格右键
                selectedRow.value = record
                const { clientX, clientY } = event;
                const value = {
                    position: { clientX, clientY },
                    show: true,
                }
                param.contextmenuCB && param.contextmenuCB(record, value)
            },
        };
    }
    // 处理表格展开行 数据不会及时更新问题
    function btnClick(record: T) {
        selectedRow.value = record
    }
    // 关闭右键
    function closeContext() {
        contextMenu.value.show = false
    }

    return { expandedRowKeys, selectedRow, Rowclick, btnClick, contextMenu, closeContext }
}

export interface ComposeTableParam {
    queryFn: Function,  // 查询表格数据
    menuType: keyof ButtonListKey,  // 操作按钮列表key
    tableName: keyof TableKey, // 表头key
    tableFilterKey: string[], // 表格过滤字段
    isDetail: boolean,  // 是否需要详情
}

// 表格 + 表头 + 右键 + 单击表格 + 按钮列表 通用处理逻辑
export function handleComposeTable<T>({ queryFn, menuType, isDetail, tableName, tableFilterKey }: ComposeTableParam) {
    // 右键逻辑
    const { contextMenu, openContext, closeContext: closeContextAction } = handleContextMenu();
    // 表头数据
    const { columns, registerColumn, updateColumn } = getTableColumns();
    // 右键回调函数
    const eventsCB: TableEventCB = {
        contextmenuCB: (record: T, value: ContextMenuTemp) => {
            // 控制打开右键
            contextMenu.value = value
        }
    }
    // 表格事件
    const { expandedRowKeys, selectedRow, Rowclick } = getTableEvent<T>(eventsCB);
    // 表格操作按钮列表
    const [firstBtn, secondBtn] = getBtnList_(menuType, isDetail).value;
    // 控制异步组件
    const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, selectedRow);
    // 关闭右键
    function closeContext(value: BtnList | null) {
        // 打开对应的弹窗组件
        if (value) openComponent(value, selectedRow.value)
        // 关闭右键
        closeContextAction()
    }
    onUnmounted(() => {
        // 离开组件，手动关闭右键，防止出现bug
        closeContextAction()
    })
    initData(() => {
        // 获取列表数据
        queryFn();
        // 注册表头信息 过滤
        registerColumn(tableName, tableFilterKey);
    }); return {
        contextMenu, openContext, closeContext, // 右键
        columns, registerColumn, updateColumn,  // 表头
        expandedRowKeys, selectedRow, Rowclick, // 表格折腾面板数据与单击、双击事件
        componentId, closeComponent, openComponent,  // 控制异步组件
        firstBtn, secondBtn, // 表格按钮
    }
}