parking/types/table.d.ts

import type { TagProps, ButtonType, ElForm } from "element-plus";
import Table from "/@/components/table/index.vue";

declare global {
  /* baTable */
  interface BaTable {
    ref?: typeof Table
    pk?: string
    data?: TableRow[]
    remark?: string | null
    loading?: boolean
    expandAll?: boolean
    selection?: TableRow[]
    dblClickNotEditColumn?: (string | undefined)[]
    column: TableColumn[]
    total?: number
    filter?: anyObj
    defaultOrder?: { prop: string; order: string }
    dragSortLimitField?: string
    acceptQuery?: boolean
    extend?: anyObj
    actionStruct?: actionStruct,
    tableName?: string,
    rowStyle?: string,
    headerRowStyle?: string
  }

  /* baTableForm */
  interface BaTableForm {
    ref?: InstanceType<typeof ElForm> | undefined;
    labelWidth?: number;
    operate?: string;
    operateIds?: string[];
    items?: anyObj;
    submitLoading?: boolean;
    defaultItems?: anyObj;
    loading?: boolean;
    extend?: anyObj;
  }

  /* BaTable前置处理函数(前置埋点) */
  interface BaTableBefore {
    getIndex?: Function;
    postDel?: Function;
    requestEdit?: Function;
    onTableDblclick?: Function;
    toggleForm?: Function;
    onSubmit?: Function;
    onTableAction?: Function;
    onTableHeaderAction?: Function;
    mount?: Function;

    [key: string]: Function | undefined;
  }

  /* BaTable后置处理函数(后置埋点) */
  interface BaTableAfter {
    getIndex?: Function;
    postDel?: Function;
    requestEdit?: Function;
    onTableDblclick?: Function;
    toggleForm?: Function;
    onSubmit?: Function;
    onTableAction?: Function;
    onTableHeaderAction?: Function;
    mount?: Function;

    [key: string]: Function | undefined;
  }

  interface ComSearch {
    form: anyObj;
    fieldData: Map<string, any>;
  }

  /* 表格列 */
  interface TableColumn extends ElTableColumn {
    // 是否显示
    show?: boolean;
    // 渲染为:icon|switch|image|images|tag|url|datetime|buttons
    render?: string;
    // 操作按钮组
    buttons?: OptButton[];
    // 渲染为Tag时:el-tag 组件的主题
    effect?: TagProps["effect"];
    // 渲染为Tag时:el-tag 组件的size
    size?: TagProps["size"];
    // 自定义数据:比如渲染为Tag时,可以指定不同值时的Tag的Type属性 { open: 'success', close: 'info' }
    custom?: any;
    // 渲染为链接时,链接的打开方式
    target?: aTarget;
    // 渲染为:a|buttons的点击事件
    click?: Function;
    // 渲染为 datetime 时的格式化方式,字母可以自由组合:y=年,m=月,d=日,h=时,M=分,s=秒
    timeFormat?: "yyyy-mm-dd hh:MM:ss";
    // 默认值
    default?: any;
    // 值替换数据,如{open: '开'}
    replaceValue?: any;
    // 自定义渲染方式时,渲染时对值的预处理方法
    renderFormatter?: Function;
    // 通用搜索操作符,默认值为=,false禁用此字段通用搜索,支持的操作符见下定义
    operator?: boolean | OperatorStr;
    // 通用搜索框的placeholder
    operatorPlaceholder?: string;
  }

  /* 表格右侧操作按钮 */
  interface OptButton {
    // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
    render: string;
    name: string;
    title?: string;
    text?: string;
    class?: string;
    type: ButtonType;
    icon: string;
    popconfirm?: any;
    disabledTip?: boolean;
  }

  /* 表格行 */
  interface TableRow extends anyObj {
    children?: TableRow[];
  }

  /* 表头支持的按钮 */
  type HeaderOptButton = "refresh" | "add" | "edit" | "delete" | "unfold" | "recycle bin" | "comSearch"

  /* 通用搜索操作符支持的值 */
  type OperatorStr =
    | "=" // 等于，默认值
    | "<>"
    | ">"
    | ">="
    | "<"
    | "<="
    | "LIKE"
    | "NOT LIKE"
    | "IN"
    | "NOT IN"
    | "RANGE" // 范围，将生成两个输入框 以输入最小值和最大值
    | "NOT RANGE"
    | "NULL" // 是否为NULL，将生成单个复选框
    | "NOT NULL"
    | "FIND_IN_SET"

  /* 链接打开方式 */
  type aTarget = "_blank" | "_self"

  /* 通用搜索事件返回的Data */
  interface comSearchData {
    field: string;
    val: string;
    operator: string;
    render: string;
  }

  interface ElTreeData {
    label: string;
    children?: ElTreeData[];
  }

  interface actionStruct {
    name: string;
    data: any;
  }

}

/*
 * ElTableColumn可用属性
 * 未找到方法直接导出tableColumn的props类型定义
 * https://element-plus.org/zh-CN/component/table.html#table-column-attributes
 */
interface ElTableColumn {
  type?: "selection" | "index" | "expand";
  index?: number | Function;
  label?: string;
  "column-key"?: string;
  prop?: string;
  width?: string | number;
  "min-width"?: string | number;
  fixed?: string | boolean;
  "render-header"?: Function;
  sortable?: string | boolean;
  "sort-method"?: Function;
  "sort-by"?: Function;
  "sort-orders"?: string[] | null[];
  resizable?: boolean;
  formatter?: Function;
  "show-overflow-tooltip"?: boolean;
  align?: "left" | "center" | "right";
  "header-align"?: "left" | "center" | "right";
  "class-name"?: string;
  "label-class-name"?: string;
  selectable?: Function;
  "reserve-selection"?: boolean;
  filters?: { key: string; value: string }[];
  "filter-placement"?: string;
  "filter-multiple"?: boolean;
  "filter-method"?: Function;
  "filtered-value"?: any[];
}