@zhsz/cool-design-crud/es/components/table/index.mjs

import { defineComponent, reactive, inject, ref, computed, onMounted, createVNode, resolveComponent, mergeProps } from "vue";
import { useSort, useRow, useHeight, useData, useSelection, useRender, useTransformColumns } from "./helper.mjs";
import "../../utils/test.mjs";
import { useCore, useTools, useElApi } from "../../hooks/core.mjs";
import { useProxy } from "../../hooks/proxy.mjs";
import "@formily/core";
import { omit, pickBy } from "lodash-es";
import { mergeConfig } from "../../utils/index.mjs";
import "../../hooks/table.mjs";
import { Watermark } from "tdesign-vue-next";
const index = /* @__PURE__ */ defineComponent({
  name: "cl-table",
  props: {
    /** 表格水印 优先级高于全局设置 */
    watermarkText: String,
    /** 表格水印props，会覆盖watermarkText */
    watermarkProps: {
      type: Object
    },
    /** vxe表格属性配置 */
    tableProps: Object,
    /** 列配置 */
    columns: {
      type: Array
    },
    /** 是否自动计算高度 */
    autoHeight: {
      type: Boolean
    },
    /** 固定高度 */
    height: [String, Number],
    /** 最大高度 */
    maxHeight: [String, Number],
    /** 当前行的 key */
    rowKey: {
      type: String,
      default: "id"
    },
    /** 空数据显示文案 */
    emptyText: String,
    /** 头部标题栏右键菜单 */
    headerMenu: [Boolean, Array],
    /** 单元格右键菜单 */
    contextMenu: [Boolean, Array],
    /** 排序后是否刷新 */
    sortRefresh: {
      type: Boolean,
      default: true
    },
    /** 右键菜单事件 */
    onRowContextmenu: Function,
    /** 该函数的返回值用来决定是否允许显示右键菜单（对于需要对菜单进行权限控制时可能会用到）*/
    visibleMethod: Function
  },
  emits: ["selection-change", "sort-change"],
  setup(props, {
    emit,
    expose,
    slots
  }) {
    const {
      crud
    } = useCore();
    const {
      getValue,
      style,
      showWatermark,
      watermark,
      remoteTableCustom
    } = useTools();
    const config = reactive(mergeConfig(props, inject("useTable__options") || {}));
    config.columns = (config.columns || []).map((e) => getValue(e));
    const Table = ref();
    const Sort = useSort({
      config,
      emit,
      Table
    });
    const Row = useRow({
      config,
      Table,
      emit
    });
    const Height = useHeight({
      config,
      Table
    });
    const Data = useData({
      config,
      Table
    });
    const Selection = useSelection({
      emit,
      Table
    });
    const TableApi = useElApi(["hideColumn", "showColumn", "resetColumn", "getCheckboxRecords", "toggleRowSelection", "toggleAllSelection", "toggleRowExpansion", "setCurrentRow", "clearSort", "clearFilter", "sort", "connect"], Table);
    const ctx = {
      Table,
      columns: config.columns,
      ...Selection,
      ...Data,
      ...Sort,
      ...Row,
      ...Height,
      ...TableApi
    };
    const watermarkProps = computed(() => {
      if (props.watermarkProps)
        if (props.watermarkProps.watermarkContent) {
          return props.watermarkProps;
        } else {
          return {
            ...props.watermarkProps,
            watermarkContent: props.watermarkText
          };
        }
      if (showWatermark) {
        return {
          ...watermark,
          watermarkContent: {
            text: crud.dict.watermark.prefix + crud.dict.watermark.level + crud.dict.watermark.list
          }
        };
      } else {
        return {
          ...watermark,
          watermarkContent: {
            text: ""
          }
        };
      }
    });
    useProxy(ctx);
    expose(ctx);
    onMounted(() => {
      if (Table == null ? void 0 : Table.value) {
        Table.value.getRefMaps().refTable.value.triggerBodyTooltipEvent = () => false;
      }
    });
    return () => {
      const {
        renderAppend,
        renderEmpty
      } = useRender();
      const onCustom = (data) => {
        var _a;
        ((_a = config == null ? void 0 : config.tableProps) == null ? void 0 : _a.onCustom) && config.tableProps.onCustom(data);
        if (remoteTableCustom && ["confirm", "reset"].includes(data.type)) {
          const VISIBLE = localStorage.getItem("VXE_TABLE_CUSTOM_COLUMN_VISIBLE");
          const FIXED = localStorage.getItem("VXE_TABLE_CUSTOM_COLUMN_FIXED");
          const ORDER = localStorage.getItem("VXE_TABLE_CUSTOM_COLUMN_ORDER");
          remoteTableCustom([{
            key: "VXE_TABLE_CUSTOM_COLUMN_VISIBLE",
            value: VISIBLE
          }, {
            key: "VXE_TABLE_CUSTOM_COLUMN_FIXED",
            value: FIXED
          }, {
            key: "VXE_TABLE_CUSTOM_COLUMN_ORDER",
            value: ORDER
          }]);
        }
      };
      const tableSize = {
        small: "mini",
        medium: "medium",
        large: "medium"
      };
      const tableSlots = {
        empty() {
          var _a;
          return renderEmpty(config.emptyText || ((_a = config == null ? void 0 : config.tableProps) == null ? void 0 : _a.emptyText) || crud.dict.label.empty);
        },
        bottom() {
          return renderAppend();
        },
        ...slots
      };
      const innerColumns = computed(() => {
        return useTransformColumns(config.columns, config.tableProps);
      });
      const key = ref(0);
      return createVNode("div", {
        "class": "cl-table"
      }, [createVNode(Watermark, watermarkProps.value, {
        default: () => {
          var _a, _b, _c, _d, _e, _f, _g, _h, _i;
          return createVNode(resolveComponent("vxe-grid"), mergeProps({
            "key": key.value,
            "ref": Table
          }, omit(pickBy(config.tableProps, (value) => value !== void 0), ["data", "columns", "size", "menuConfig", "onMenuClick", "onRadioChange", "onCheckboxChange", "onCheckboxAll", "onSortChange", "onCustom"]), {
            "border": ((_a = config.tableProps) == null ? void 0 : _a.border) || true,
            "columns": innerColumns.value,
            "loading": crud.loading,
            "syncResize": ((_b = config.tableProps) == null ? void 0 : _b.syncResize) || true,
            "autoResize": ctx.isAuto.value,
            "height": ctx.isAuto.value ? config.height : config.height,
            "maxHeight": ctx.isAuto.value ? ctx.maxHeight.value : config.maxHeight,
            "customConfig": {
              storage: true,
              ...(_c = config == null ? void 0 : config.tableProps) == null ? void 0 : _c.customConfig
            },
            "size": tableSize[style.size],
            "rowConfig": {
              isCurrent: true,
              keyField: ((_e = (_d = config == null ? void 0 : config.tableProps) == null ? void 0 : _d.rowConfig) == null ? void 0 : _e.keyField) || config.rowKey,
              ...(_f = config.tableProps) == null ? void 0 : _f.rowConfig
            },
            "sortConfig": {
              defaultSort: ctx.defaultSort,
              remote: true,
              multiple: true,
              ...(_g = config.tableProps) == null ? void 0 : _g.sortConfig
            },
            "radioConfig": {
              reserve: true,
              ...(_h = config.tableProps) == null ? void 0 : _h.radioConfig
            },
            "checkboxConfig": {
              reserve: true,
              ...(_i = config.tableProps) == null ? void 0 : _i.checkboxConfig
            },
            "data": ctx.data.value,
            "menuConfig": ctx.menuConfig,
            "onMenuClick": ctx.onRowContextMenu,
            "onRadioChange": ctx.onRadioChange,
            "onCheckboxChange": ctx.onCheckboxChange,
            "onCheckboxAll": ctx.onCheckboxAll,
            "onSortChange": ctx.onSortChange,
            "onCustom": onCustom
          }), tableSlots);
        }
      })]);
    };
  }
});
export {
  index as default
};