plus-pro-components
Version:
Page level components developed based on Element Plus.
238 lines (233 loc) • 9.87 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index$2 = require('../../display-item/index.js');
var index = require('../../utils/index.js');
require('../../../constants/index.js');
var iconsVue = require('@element-plus/icons-vue');
var index$1 = require('../../render/index.js');
var lodashEs = require('lodash-es');
var elementPlus = require('element-plus');
var form = require('../../../constants/form.js');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "plus-table-column__header" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusTableColumn"
},
__name: "table-column",
props: {
columns: { default: () => [] },
editable: { type: [Boolean, String], default: false },
tableDataLength: { default: 0 }
},
emits: ["formChange"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const plusDisplayItemInstance = vue.ref();
const formRefs = vue.inject(form.TableFormRefInjectionKey);
const setFormRef = () => {
var _a, _b;
if (!((_a = plusDisplayItemInstance.value) == null ? void 0 : _a.length)) return;
const list = ((_b = plusDisplayItemInstance.value) == null ? void 0 : _b.map((item) => ({ ...item, ...item == null ? void 0 : item.getDisplayItemInstance() }))) || [];
for (let index = 0; index < list.length; index++) {
const item = list[index];
if (!formRefs.value[item.index]) {
formRefs.value[item.index] = [];
}
lodashEs.set(formRefs.value[item.rowIndex], item.cellIndex, item);
}
};
vue.watch(
() => props.tableDataLength,
() => {
setFormRef();
},
{
flush: "post"
}
);
const hasPropsEditIcon = vue.computed(() => props.editable === "click" || props.editable === "dblclick");
const getKey = (item) => index.getTableKey(item, true);
const handleChange = (data, index, column, item, rest) => {
const formChangeCallBackParams = {
...data,
index,
column: { ...column, ...item },
rowIndex: index,
...rest
};
emit("formChange", formChangeCallBackParams);
};
const handleFormChange = (data) => {
emit("formChange", data);
};
__expose({
plusDisplayItemInstance
});
return (_ctx, _cache) => {
const _component_PlusTableColumn = vue.resolveComponent("PlusTableColumn");
return vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.columns, (item, index$3) => {
return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTableColumn), vue.mergeProps({
key: getKey(item),
"class-name": "plus-table-column " + (hasPropsEditIcon.value ? "plus-table-column__edit" : ""),
index: index$3
}, item.tableColumnProps, {
prop: item.prop,
width: item.width,
"min-width": item.minWidth
}), {
header: vue.withCtx((scoped) => [
vue.createElementVNode("span", _hoisted_1, [
item.renderHeader && vue.unref(is.isFunction)(item.renderHeader) ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusRender), {
key: 0,
render: item.renderHeader,
params: { ...scoped, ...item, cellIndex: index$3 },
"callback-value": vue.unref(index.getLabel)(item.label)
}, null, 8, ["render", "params", "callback-value"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode("\u8868\u683C\u5355\u5143\u683CHeader\u7684\u63D2\u69FD "),
vue.renderSlot(_ctx.$slots, vue.unref(index.getTableHeaderSlotName)(item.prop), vue.mergeProps({
prop: item.prop,
label: vue.unref(index.getLabel)(item.label),
fieldProps: item.fieldProps,
valueType: item.valueType,
cellIndex: index$3
}, scoped, {
column: { ...scoped, ...item }
}), () => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(index.getLabel)(item.label)),
1
/* TEXT */
)
])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)),
item.tooltip ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElTooltip),
vue.mergeProps({
key: 2,
placement: "top"
}, vue.unref(index.getTooltip)(item.tooltip)),
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "tooltip-icon", {}, () => [
vue.createVNode(vue.unref(elementPlus.ElIcon), {
class: "plus-table-column__header__icon",
size: 16
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.QuestionFilled))
]),
_: 1
/* STABLE */
})
])
]),
_: 2
/* DYNAMIC */
},
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : vue.createCommentVNode("v-if", true)
])
]),
default: vue.withCtx(({ row, column, $index, ...rest }) => {
var _a;
return [
((_a = item.children) == null ? void 0 : _a.length) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createVNode(_component_PlusTableColumn, {
columns: item.children,
editable: _ctx.editable,
"table-data-length": _ctx.tableDataLength,
onFormChange: handleFormChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(_ctx.$slots, (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
})
]), 1032, ["columns", "editable", "table-data-length"]),
vue.createTextVNode(
" " + vue.toDisplayString(item.label),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createBlock(vue.unref(index$2.PlusDisplayItem), {
key: 1,
ref_for: true,
ref_key: "plusDisplayItemInstance",
ref: plusDisplayItemInstance,
column: item,
row,
index: $index,
editable: _ctx.editable,
rest: { column, ...rest },
onChange: (data) => handleChange(data, $index, column, item, rest)
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots[vue.unref(index.getFieldSlotName)(item.prop)] ? {
name: vue.unref(index.getFieldSlotName)(item.prop),
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots[vue.unref(index.getExtraSlotName)(item.prop)] ? {
name: vue.unref(index.getExtraSlotName)(item.prop),
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, vue.unref(index.getExtraSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "1"
} : void 0,
_ctx.$slots[vue.unref(index.getTableCellSlotName)(item.prop)] ? {
name: vue.unref(index.getTableCellSlotName)(item.prop),
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, vue.unref(index.getTableCellSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "2"
} : void 0,
_ctx.$slots["edit-icon"] ? {
name: "edit-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "edit-icon")
]),
key: "3"
} : void 0
]), 1032, ["column", "row", "index", "editable", "rest", "onChange"]))
];
}),
_: 2
/* DYNAMIC */
}, 1040, ["class-name", "index", "prop", "width", "min-width"]);
}),
128
/* KEYED_FRAGMENT */
);
};
}
});
exports.default = _sfc_main;