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

import { ModalName } from '@/common/constants/modalName';
import { OperationTabMenu } from '@/services/go/commonService/interface';
import { sessionStorageUtil } from "@/utils/storage";
import { inject, ref, Ref, toRaw, unref } from 'vue';
import { openModal } from "../modal";
import { BtnClassName, BtnList, ButtonListKey } from './interface';

/**
 * 获取class 名
 * @param val 
 * @returns 
 */
function getClassName(val: string): BtnClassName {
    let result: BtnClassName = 'btnDeafault'
    const btnDanger = ['disable', 'cancle', 'cancel', 'delete', 'logout', 'locked']
    const operBtn = ['add', 'modify', 'reset', 'credit']
    const map = new Map<BtnClassName, string[]>([
        ['btnDanger', btnDanger],
        ['operBtn', operBtn],
    ])
    for (const [key, value] of map) {
        for (const item of value) {
            if (val.includes(item)) {
                result = key
                break;
            }
        }
    }
    return result
}

export function getThirdMenuData(): OperationTabMenu[] {
    const permissionData = inject('thirdMenuList') as Ref<OperationTabMenu[]>;
    const temp = unref(permissionData)
    const name = 'permissionData'
    // 存入sessionStorageUtil 是为了处理页面刷新的情况（这个时候重新从服务获取数据，但页面已经先加载了，vue 中的 依赖注入在异步中不能建立通信）
    const data: OperationTabMenu[] = temp.length ? toRaw(temp) : sessionStorageUtil.getItem(name)
    sessionStorageUtil.setItem(name, data)
    return data;
}

export function handleBtnList(list: OperationTabMenu | undefined, menuType: keyof ButtonListKey, hasDetail: boolean, commonName: string[] = ['新增']) {
    const commonBtn = ref<BtnList[]>([]); // 通用按钮列表，不用选中数据才显示
    const forDataBtn = ref<BtnList[]>([]); // 针对数据按钮列表，选中某条数据才显示
    if (list && list.children) {
        list.children.forEach(e => {
            const { code, type, title, isshow } = e;
            if (type === 2 && isshow) { // 按钮类型
                const { openAction } = openModal(code as keyof ModalName);
                const item = { lable: title, callback: openAction, className: getClassName(code) }
                if (commonName.includes(title)) { // 
                    commonBtn.value.push(item)
                } else {
                    forDataBtn.value.push(item)
                }
            }
        })
    } else {
        console.warn(`menuType: ${menuType}未找到`)
    }
    // 详情
    if (hasDetail) {
        const { openAction } = openModal('detail')
        forDataBtn.value.push({ lable: '详情', callback: openAction, className: getClassName('') })
    }
    return { commonBtn, forDataBtn }
}

export function _handleBtnList(list: OperationTabMenu | undefined, hasDetail: boolean,) {
    const result = ref<BtnList[][]>([])
    const temp: [number, OperationTabMenu[] | undefined] = [0, list?.children]
    while (temp[1] && temp[1].length) {
        temp[1].forEach((e) => {
            const { code, type, title, isshow } = e;
            const index = temp[0]
            if (!Array.isArray(result.value[index])) {
                result.value[index] = []
            }
            if (type === 2 && isshow) { // 按钮类型 并且显示
                const { openAction } = openModal(code as keyof ModalName);
                const item = { lable: title, callback: openAction, className: getClassName(code) }
                result.value[index].push(item)
            }
        })
        const children = temp[1][0].children
        if (children && children.length) {
            temp[0] = temp[0] + 1
            temp[1] = children
        } else {
            temp[1] = []
        }
    }
    // 详情
    if (hasDetail) {
        const len = result.value.length;
        const { openAction } = openModal('detail')
        result.value[len - 1].push({ lable: '详情', callback: openAction, className: getClassName('') })
    }


    return result
}

/**
 * 获取表格操作按钮列表
 * @param menuType 
 * @param hasDetail 操作按钮是否需要详情按钮（详情按钮服务 不配置）
 * @returns 
 */
export function getBtnList(menuType: keyof ButtonListKey, hasDetail: boolean, commonName: string[] = ['新增']) {
    const data = getThirdMenuData()
    const list = data.find((e) => e.code === menuType);
    return handleBtnList(list, menuType, hasDetail, commonName)
}

export function _getBtnList(menuType: keyof ButtonListKey, hasDetail: boolean) {
    const data = getThirdMenuData()
    const list = data.find((e) => e.code === menuType);
    return _handleBtnList(list, hasDetail)
}