plus-pro-components
Version:
Page level components developed based on Element Plus.
658 lines (653 loc) • 24.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashEs = require('lodash-es');
var iconsVue = require('@element-plus/icons-vue');
var index$1 = require('../../form/index.js');
var index = require('../../utils/index.js');
require('../../../hooks/index.js');
require('../../../constants/index.js');
var index$2 = require('../../render/index.js');
var elementPlus = require('element-plus');
var displayItem$1 = require('./display-item.js');
var useGetOptions = require('../../../hooks/useGetOptions.js');
var displayItem = require('../../../constants/display-item.js');
var is = require('../../utils/is.js');
var form = require('../../../constants/form.js');
const _hoisted_1 = ["innerHTML"];
const _hoisted_2 = { class: "plus-display-item" };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode(
"svg",
{
fill: "none",
viewBox: "0 0 24 24",
width: "1em",
height: "1em",
class: "t-icon t-icon-edit-1",
"pointer-events": "none"
},
[
/* @__PURE__ */ vue.createElementVNode("path", {
fill: "currentColor",
d: "M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
})
],
-1
/* HOISTED */
);
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusDisplayItem"
},
__name: "index",
props: {
column: { default: () => ({ prop: "", label: "" }) },
row: { default: () => ({}) },
index: { default: 0 },
editable: { type: [Boolean, String], default: false },
rest: { default: () => ({}) },
formProps: { default: () => ({}) }
},
emits: ["change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const customFieldProps = vue.ref({});
const customFieldPropsIsReady = vue.ref(false);
const customFormProps = vue.ref({});
const customFormPropsIsReady = vue.ref(false);
const formInstance = vue.ref();
const { customOptions: options } = useGetOptions.useGetOptions(props.column);
const columns = vue.ref([]);
const subRow = vue.ref(lodashEs.cloneDeep(props.row));
const isEdit = vue.ref(false);
const falseArray = [false, "click", "dblclick"];
vue.watch(
() => props.row,
(val) => {
subRow.value = lodashEs.cloneDeep(val);
},
{
deep: true
}
);
vue.watch(
() => [props.editable, props.column.editable],
() => {
if (props.column.editable === true) {
isEdit.value = true;
return;
}
if (props.column.editable === false) {
isEdit.value = false;
return;
}
if (props.editable === true) {
isEdit.value = true;
return;
}
if (falseArray.includes(props.editable)) {
isEdit.value = false;
return;
}
},
{
immediate: true
}
);
const hasEditIcon = vue.computed(
() => (props.editable === "click" || props.editable === "dblclick") && props.column.editable !== false
);
const displayValue = vue.computed({
get() {
return index.getValue(subRow.value, props.column.prop);
},
set(value) {
index.setValue(subRow.value, props.column.prop, value);
}
});
const formatterValue = vue.computed(() => {
const value = props.column.valueType === "link" ? props.column.linkText || displayValue.value : displayValue.value;
if (!displayItem.selectValueTypeList.includes(props.column.valueType) && !isEdit.value) {
if (props.column.formatter && is.isFunction(props.column.formatter)) {
return props.column.formatter(value, renderParams.value);
}
if (displayComponent.value.format && is.isFunction(displayComponent.value.format)) {
return displayComponent.value.format(
value,
customFieldProps.value.format || customFieldProps.value.valueFormat
);
}
}
return value;
});
const modelValues = vue.computed({
get() {
return { [props.column.prop]: displayValue.value };
},
set(values) {
displayValue.value = values[props.column.prop];
}
});
const isTagAndNoValue = vue.computed(
() => props.column.valueType === "tag" && (displayValue.value === void 0 || displayValue.value === null || displayValue.value === "")
);
const renderParams = vue.computed(() => ({
prop: props.column.prop,
valueType: props.column.valueType,
row: subRow.value,
index: props.index,
rowIndex: props.index,
fieldProps: customFieldProps.value,
options: options.value,
...props.rest,
column: { ...props.rest.column, ...props.column }
}));
const tableRowInfo = vue.computed(() => ({
row: subRow.value,
index: props.index,
rowIndex: props.index,
...props.rest,
column: { ...props.rest.column, ...props.column }
}));
vue.provide(form.TableFormRowInfoInjectionKey, tableRowInfo);
const imageUrl = vue.computed(() => {
const option = formatterValue.value;
if (option && is.isString(option)) {
return { options: [option], url: option };
}
if (is.isArray(option)) {
return { options: option, url: option[0] };
}
return { options: [], url: "" };
});
const getStatus = vue.computed(() => {
var _a, _b, _c, _d, _e;
if (((_a = props.column) == null ? void 0 : _a.customGetStatus) && is.isFunction((_b = props.column) == null ? void 0 : _b.customGetStatus)) {
const option2 = (_c = props.column) == null ? void 0 : _c.customGetStatus({
options: options.value,
value: displayValue.value,
row: subRow.value
});
return option2 || { label: "", value: "" };
}
if (
// select 多选
props.column.valueType === "select" && customFieldProps.value.multiple === true || // checkbox
props.column.valueType === "checkbox"
) {
const option2 = ((_d = options.value) == null ? void 0 : _d.filter((i) => {
var _a2;
return (_a2 = displayValue.value) == null ? void 0 : _a2.includes(i.value);
})) || [];
return option2;
}
const option = ((_e = options.value) == null ? void 0 : _e.find(
(i) => i.value === displayValue.value
)) || { label: "", value: "" };
return option;
});
const displayComponent = vue.computed(() => displayItem$1.getDisplayComponent(props.column.valueType));
const displayComponentProps = vue.computed(() => {
return {
// img
...props.column.valueType === "img" ? {
fit: "cover",
previewTeleported: true,
src: imageUrl.value.url,
previewSrcList: props.column.preview !== false ? imageUrl.value.options : []
} : null,
// progress
...props.column.valueType === "progress" ? {
percentage: formatterValue.value
} : null,
// link
...props.column.valueType === "link" ? {
type: "primary"
} : null,
// avatar
...props.column.valueType === "avatar" ? {
src: formatterValue.value
} : null,
...customFieldProps.value
};
});
vue.watch(
() => props.column,
(val) => {
if (val) {
columns.value = [val];
}
},
{
immediate: true,
deep: true
}
);
vue.watch(
() => props.column.fieldProps,
(val) => {
index.getCustomProps(val, displayValue.value, subRow.value, props.index, "fieldProps").then((data) => {
customFieldProps.value = data;
customFieldPropsIsReady.value = true;
}).catch((err) => {
throw err;
});
},
{
immediate: true,
deep: true
}
);
vue.watch(
() => [props.column.formProps, subRow.value],
() => {
index.getCustomProps(
props.column.formProps,
displayValue.value,
subRow.value,
props.index,
"formProps"
).then((data) => {
customFormProps.value = data;
customFormPropsIsReady.value = true;
}).catch((err) => {
throw err;
});
},
{
immediate: true,
deep: true
}
);
vue.watch(
() => props.row,
(val) => {
subRow.value = { ...val };
},
{
deep: true
}
);
const copy = (data) => {
const url = data;
const textarea = document.createElement("textarea");
textarea.readOnly = true;
textarea.style.position = "absolute";
textarea.style.left = "-9999px";
textarea.value = url;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("Copy");
textarea.remove();
};
const handelClickCopy = (item, row) => {
copy(formatterValue.value);
row.isCopy = true;
setTimeout(() => {
row.isCopy = false;
}, 3e3);
};
const handleChange = (values) => {
emit("change", {
value: values[props.column.prop],
prop: props.column.prop,
// 兼容 value 代码
row: { value: subRow.value, ...subRow.value }
});
};
const startCellEdit = () => {
if (props.column.editable === false) {
isEdit.value = false;
return;
}
isEdit.value = true;
};
const stopCellEdit = () => {
if (props.column.editable === true) {
isEdit.value = true;
return;
}
isEdit.value = false;
};
const getDisplayItemInstance = () => {
return {
isEdit,
index: props.index,
rowIndex: props.index,
cellIndex: props.rest.cellIndex,
prop: props.column.prop,
formInstance: vue.computed(() => {
var _a;
return (_a = formInstance.value) == null ? void 0 : _a.formInstance;
})
};
};
__expose({
startCellEdit,
stopCellEdit,
getDisplayItemInstance
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createCommentVNode(" \u8868\u5355\u7B2C\u4E00\u4F18\u5148\u7EA7 "),
isEdit.value ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
customFormPropsIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusForm), vue.mergeProps({
key: 0,
ref_key: "formInstance",
ref: formInstance,
modelValue: modelValues.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValues.value = $event),
model: modelValues.value,
columns: columns.value,
"has-footer": false,
"has-label": false
}, { ...customFormProps.value, ..._ctx.formProps }, {
class: "plus-display-item__form",
onChange: handleChange
}), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots[vue.unref(index.getFieldSlotName)(_ctx.column.prop)] ? {
name: vue.unref(index.getFieldSlotName)(_ctx.column.prop),
fn: vue.withCtx((scoped) => [
vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(_ctx.column.prop), vue.normalizeProps(vue.guardReactiveProps(scoped)))
]),
key: "0"
} : void 0,
_ctx.$slots[vue.unref(index.getExtraSlotName)(_ctx.column.prop)] ? {
name: vue.unref(index.getExtraSlotName)(_ctx.column.prop),
fn: vue.withCtx((scoped) => [
vue.renderSlot(_ctx.$slots, vue.unref(index.getExtraSlotName)(_ctx.column.prop), vue.normalizeProps(vue.guardReactiveProps(scoped)))
]),
key: "1"
} : void 0
]), 1040, ["modelValue", "model", "columns"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : _ctx.column.render && vue.unref(is.isFunction)(_ctx.column.render) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" \u81EA\u5B9A\u4E49\u663E\u793A "),
customFieldPropsIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.PlusRender), {
key: 0,
render: _ctx.column.render,
params: renderParams.value,
"callback-value": displayValue.value,
"custom-field-props": customFieldProps.value
}, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : _ctx.$slots[vue.unref(index.getTableCellSlotName)(_ctx.column.prop)] ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createCommentVNode(" \u63D2\u69FD "),
vue.renderSlot(_ctx.$slots, vue.unref(index.getTableCellSlotName)(_ctx.column.prop), vue.mergeProps({ value: displayValue.value }, renderParams.value))
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : _ctx.column.renderHTML && vue.unref(is.isFunction)(_ctx.column.renderHTML) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 3 },
[
vue.createCommentVNode("\u663E\u793AHTML "),
vue.createElementVNode("span", {
class: "plus-display-item",
innerHTML: _ctx.column.renderHTML(displayValue.value, renderParams.value)
}, null, 8, _hoisted_1)
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : vue.unref(displayItem.selectValueTypeList).includes(_ctx.column.valueType) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 4 },
[
vue.createCommentVNode(" \u72B6\u6001\u663E\u793A `select`, `radio`, `checkbox`"),
vue.createElementVNode(
"span",
vue.mergeProps({ class: "plus-display-item plus-display-item__badge" }, customFieldProps.value, {
class: { "is-list": vue.unref(is.isArray)(getStatus.value) }
}),
[
vue.createCommentVNode(" \u591A\u9009 "),
vue.unref(is.isArray)(getStatus.value) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.unref(is.isFunction)(_ctx.column.formatter) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createTextVNode(
vue.toDisplayString(_ctx.column.formatter(displayValue.value, renderParams.value)),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(getStatus.value, (item) => {
return vue.openBlock(), vue.createElementBlock("span", {
key: String(item.value),
class: "plus-display-item__badge__item"
}, [
vue.createElementVNode(
"i",
{
class: vue.normalizeClass([
"plus-display-item__badge__dot",
item.type && !item.color ? "plus-display-item__badge__dot--" + item.type : ""
]),
style: vue.normalizeStyle({ backgroundColor: item.color })
},
null,
6
/* CLASS, STYLE */
),
vue.createTextVNode(
" " + vue.toDisplayString(item.label),
1
/* TEXT */
)
]);
}),
128
/* KEYED_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" \u5355\u9009 "),
getStatus.value.color || getStatus.value.type ? (vue.openBlock(), vue.createElementBlock(
"i",
{
key: 0,
class: vue.normalizeClass([
"plus-display-item__badge__dot",
getStatus.value.type && !getStatus.value.color ? "plus-display-item__badge__dot--" + getStatus.value.type : ""
]),
style: vue.normalizeStyle({ backgroundColor: getStatus.value.color })
},
null,
6
/* CLASS, STYLE */
)) : vue.createCommentVNode("v-if", true),
vue.createTextVNode(
" " + vue.toDisplayString(vue.unref(is.isFunction)(_ctx.column.formatter) ? _ctx.column.formatter(displayValue.value, renderParams.value) : getStatus.value.label),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
],
16
/* FULL_PROPS */
)
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : _ctx.column.valueType === "copy" ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 5 },
[
vue.createCommentVNode(" \u590D\u5236 "),
vue.createElementVNode("span", _hoisted_2, [
vue.createTextVNode(
vue.toDisplayString(formatterValue.value) + " ",
1
/* TEXT */
),
displayValue.value ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElIcon),
vue.mergeProps({
key: 0,
size: "16",
class: "plus-display-item__icon__copy"
}, customFieldProps.value, {
onClick: _cache[1] || (_cache[1] = ($event) => handelClickCopy(_ctx.column, subRow.value))
}),
{
default: vue.withCtx(() => [
!subRow.value.isCopy ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.DocumentCopy), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.Select), { key: 1 }))
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true)
])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : vue.unref(displayItem$1.hasDisplayComponent)(_ctx.column.valueType) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 6 },
[
vue.createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
vue.createCommentVNode("has slots "),
displayComponent.value.hasSlots ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(isTagAndNoValue.value ? "span" : displayComponent.value.component), vue.mergeProps({
key: 0,
class: ["plus-display-item", displayComponent.value.class]
}, { ...renderParams.value, ...displayComponentProps.value }), vue.createSlots({
default: vue.withCtx(() => [
vue.createTextVNode(
" " + vue.toDisplayString(formatterValue.value),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(_ctx.column.fieldSlots, (fieldSlot, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({ value: displayValue.value }, { ...renderParams.value, ...data }), null, 16, ["value"]))
])
};
})
]), 1040, ["class"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode("no slots "),
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(displayComponent.value.component), vue.mergeProps({
class: ["plus-display-item", displayComponent.value.class]
}, { ...renderParams.value, ...displayComponentProps.value }), {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(formatterValue.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 16, ["class"]))
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
)) : _ctx.column.valueType === "divider" ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElDivider),
vue.mergeProps({
key: 7,
ref: "fieldInstance",
class: "plus-form-item-field"
}, customFieldProps.value),
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(formatterValue.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 8 },
[
vue.createCommentVNode(" \u6CA1\u6709format "),
vue.createElementVNode(
"span",
vue.mergeProps({ class: "plus-display-item" }, customFieldProps.value),
vue.toDisplayString(formatterValue.value),
17
/* TEXT, FULL_PROPS */
)
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)),
vue.renderSlot(_ctx.$slots, "edit-icon", {}, () => [
hasEditIcon.value && !isEdit.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
key: 0,
size: 16,
class: "plus-display-item__edit-icon",
"pointer-events": "none"
}, {
default: vue.withCtx(() => [
_hoisted_3
]),
_: 1
/* STABLE */
})) : vue.createCommentVNode("v-if", true)
])
],
64
/* STABLE_FRAGMENT */
);
};
}
});
exports.default = _sfc_main;