@zhsz/cool-design-crud
Version:
240 lines (239 loc) • 7.95 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const helper = require("./helper.js");
require("../../utils/test.js");
const core = require("../../hooks/core.js");
const proxy = require("../../hooks/proxy.js");
require("@formily/core");
const lodashEs = require("lodash-es");
const index$1 = require("../../utils/index.js");
require("../../hooks/table.js");
const tdesignVueNext = require("tdesign-vue-next");
const index = /* @__PURE__ */ vue.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
} = core.useCore();
const {
getValue,
style,
showWatermark,
watermark,
remoteTableCustom
} = core.useTools();
const config = vue.reactive(index$1.mergeConfig(props, vue.inject("useTable__options") || {}));
config.columns = (config.columns || []).map((e) => getValue(e));
const Table = vue.ref();
const Sort = helper.useSort({
config,
emit,
Table
});
const Row = helper.useRow({
config,
Table,
emit
});
const Height = helper.useHeight({
config,
Table
});
const Data = helper.useData({
config,
Table
});
const Selection = helper.useSelection({
emit,
Table
});
const TableApi = core.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 = vue.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: ""
}
};
}
});
proxy.useProxy(ctx);
expose(ctx);
vue.onMounted(() => {
if (Table == null ? void 0 : Table.value) {
Table.value.getRefMaps().refTable.value.triggerBodyTooltipEvent = () => false;
}
});
return () => {
const {
renderAppend,
renderEmpty
} = helper.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 = vue.computed(() => {
return helper.useTransformColumns(config.columns, config.tableProps);
});
const key = vue.ref(0);
return vue.createVNode("div", {
"class": "cl-table"
}, [vue.createVNode(tdesignVueNext.Watermark, watermarkProps.value, {
default: () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
return vue.createVNode(vue.resolveComponent("vxe-grid"), vue.mergeProps({
"key": key.value,
"ref": Table
}, lodashEs.omit(lodashEs.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);
}
})]);
};
}
});
exports.default = index;