plus-pro-components
Version:
Page level components developed based on Element Plus.
234 lines (231 loc) • 9.76 kB
JavaScript
import { defineComponent, ref, inject, watch, computed, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, mergeProps, withCtx, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createSlots, normalizeProps, guardReactiveProps } from 'vue';
import { PlusDisplayItem } from '../../display-item/index.mjs';
import { getTableKey, getLabel, getTableHeaderSlotName, getTooltip, getFieldSlotName, getExtraSlotName, getTableCellSlotName } from '../../utils/index.mjs';
import '../../../constants/index.mjs';
import { QuestionFilled } from '@element-plus/icons-vue';
import { PlusRender } from '../../render/index.mjs';
import { set } from 'lodash-es';
import { ElTableColumn, ElTooltip, ElIcon } from 'element-plus';
import { TableFormRefInjectionKey } from '../../../constants/form.mjs';
import { isFunction } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-table-column__header" };
var _sfc_main = /* @__PURE__ */ 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 = ref();
const formRefs = inject(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] = [];
}
set(formRefs.value[item.rowIndex], item.cellIndex, item);
}
};
watch(
() => props.tableDataLength,
() => {
setFormRef();
},
{
flush: "post"
}
);
const hasPropsEditIcon = computed(() => props.editable === "click" || props.editable === "dblclick");
const getKey = (item) => 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 = resolveComponent("PlusTableColumn");
return openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.columns, (item, index) => {
return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
key: getKey(item),
"class-name": "plus-table-column " + (hasPropsEditIcon.value ? "plus-table-column__edit" : ""),
index
}, item.tableColumnProps, {
prop: item.prop,
width: item.width,
"min-width": item.minWidth
}), {
header: withCtx((scoped) => [
createElementVNode("span", _hoisted_1, [
item.renderHeader && unref(isFunction)(item.renderHeader) ? (openBlock(), createBlock(unref(PlusRender), {
key: 0,
render: item.renderHeader,
params: { ...scoped, ...item, cellIndex: index },
"callback-value": unref(getLabel)(item.label)
}, null, 8, ["render", "params", "callback-value"])) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createCommentVNode("\u8868\u683C\u5355\u5143\u683CHeader\u7684\u63D2\u69FD "),
renderSlot(_ctx.$slots, unref(getTableHeaderSlotName)(item.prop), mergeProps({
prop: item.prop,
label: unref(getLabel)(item.label),
fieldProps: item.fieldProps,
valueType: item.valueType,
cellIndex: index
}, scoped, {
column: { ...scoped, ...item }
}), () => [
createTextVNode(
toDisplayString(unref(getLabel)(item.label)),
1
/* TEXT */
)
])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)),
item.tooltip ? (openBlock(), createBlock(
unref(ElTooltip),
mergeProps({
key: 2,
placement: "top"
}, unref(getTooltip)(item.tooltip)),
{
default: withCtx(() => [
renderSlot(_ctx.$slots, "tooltip-icon", {}, () => [
createVNode(unref(ElIcon), {
class: "plus-table-column__header__icon",
size: 16
}, {
default: withCtx(() => [
createVNode(unref(QuestionFilled))
]),
_: 1
/* STABLE */
})
])
]),
_: 2
/* DYNAMIC */
},
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : createCommentVNode("v-if", true)
])
]),
default: withCtx(({ row, column, $index, ...rest }) => {
var _a;
return [
((_a = item.children) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock(
Fragment,
{ key: 0 },
[
createVNode(_component_PlusTableColumn, {
columns: item.children,
editable: _ctx.editable,
"table-data-length": _ctx.tableDataLength,
onFormChange: handleFormChange
}, createSlots({
_: 2
/* DYNAMIC */
}, [
renderList(_ctx.$slots, (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
})
]), 1032, ["columns", "editable", "table-data-length"]),
createTextVNode(
" " + toDisplayString(item.label),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)) : (openBlock(), createBlock(unref(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)
}, createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots[unref(getFieldSlotName)(item.prop)] ? {
name: unref(getFieldSlotName)(item.prop),
fn: withCtx((data) => [
renderSlot(_ctx.$slots, unref(getFieldSlotName)(item.prop), normalizeProps(guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots[unref(getExtraSlotName)(item.prop)] ? {
name: unref(getExtraSlotName)(item.prop),
fn: withCtx((data) => [
renderSlot(_ctx.$slots, unref(getExtraSlotName)(item.prop), normalizeProps(guardReactiveProps(data)))
]),
key: "1"
} : void 0,
_ctx.$slots[unref(getTableCellSlotName)(item.prop)] ? {
name: unref(getTableCellSlotName)(item.prop),
fn: withCtx((data) => [
renderSlot(_ctx.$slots, unref(getTableCellSlotName)(item.prop), normalizeProps(guardReactiveProps(data)))
]),
key: "2"
} : void 0,
_ctx.$slots["edit-icon"] ? {
name: "edit-icon",
fn: withCtx(() => [
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 */
);
};
}
});
export { _sfc_main as default };