@fmdevui/fm-dev/es/packages/core/hook/useVxeTableOptionsHook.mjs

Page level components developed based on Element Plus.

import { reactive } from 'vue';
import { dayjs } from 'element-plus';
import '../stores/index.mjs';
import { merge } from 'lodash-es';
import { useThemeConfig } from '../stores/themeConfig.mjs';
import { pinia } from '../stores/inpinia.mjs';

const vxeSize = useThemeConfig(pinia).themeConfig.globalComponentSize == "small" ? "mini" : useThemeConfig(pinia).themeConfig.globalComponentSize == "default" ? "small" : "medium";
const useVxeTable = (opt, extras) => {
  opt.id = opt.id ? opt.id : String((/* @__PURE__ */ new Date()).getTime());
  const spanFields = opt.spanFields ?? [];
  const spanValueField = opt.spanValueField ?? "id";
  const options = reactive({
    id: opt.id,
    height: "auto",
    autoResize: true,
    size: vxeSize,
    loading: false,
    align: "center",
    // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
    // data: [] as Array<T>,
    spanMethod: spanFields.length > 0 ? ({ row, rowIndex, column, visibleData }) => {
      const cellValue = row[spanValueField];
      if (cellValue && spanFields.includes(column.field)) {
        const prevRow = visibleData[rowIndex - 1];
        let nextRow = visibleData[rowIndex + 1];
        if (prevRow && prevRow[spanValueField] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[spanValueField] === cellValue) {
            nextRow = visibleData[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    } : opt.spanMethod ? opt.spanMethod : ({ row, rowIndex, column, visibleData }) => {
    },
    columns: opt.columns,
    showFooter: opt.showFooter,
    footerData: opt.footerData,
    footerMethod: opt.footerMethod,
    toolbarConfig: {
      size: vxeSize,
      slots: { buttons: "toolbar_buttons", tools: "toolbar_tools" },
      refresh: true,
      refreshOptions: {
        code: "query"
      },
      export: true,
      print: true,
      zoom: true,
      custom: true
    },
    checkboxConfig: { range: true },
    // sortConfig: { trigger: 'cell', remote: true },
    exportConfig: {
      remote: false,
      // 设置使用服务端导出
      filename: `${opt.name}\u5BFC\u51FA_${dayjs().format("YYMMDDHHmmss")}`
    },
    pagerConfig: {
      enabled: true,
      size: vxeSize,
      pageSize: 50
    },
    printConfig: { sheetName: "" },
    importConfig: {
      remote: false,
      // true=后端导入，false=前端导入
      types: ["xlsx"],
      // 允许的文件类型
      mode: "insert"
      // 导入模式：'insert'(追加)/'cover'(覆盖)
    },
    customConfig: {
      storage: {
        // 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
        visible: true,
        // 启用显示/隐藏列状态
        resizable: true,
        // 启用列宽状态
        sort: true,
        // 启用列顺序缓存
        fixed: true
        // 启用冻结列状态缓存
      }
    }
  });
  if (opt.data) {
    options.data = opt.data;
  } else {
    options.proxyConfig = {
      enabled: true,
      autoLoad: false,
      sort: true,
      response: {
        list: "data.result",
        // 全量
        result: "data.result.items",
        // 分页
        total: "data.result.total",
        message: "data.message"
      }
    };
  }
  if (opt.sortConfig) {
    options.sortConfig = opt.sortConfig;
  } else {
    options.sortConfig = { remote: true };
  }
  return extras ? merge(options, extras) : options;
};

export { useVxeTable };