@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
452 lines (449 loc) • 16.6 kB
JavaScript
import { defineComponent, useSlots, ref, computed, watch, nextTick, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, mergeProps, withCtx, renderSlot, toDisplayString, unref, Fragment, normalizeClass, resolveDynamicComponent, toHandlers, isRef, withKeys, createSlots, renderList, createTextVNode, normalizeProps, guardReactiveProps } from 'vue';
const _hoisted_1 = {
key: 0,
class: "cell-content"
};
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { key: 1 };
const _hoisted_4 = { key: 0 };
const _hoisted_5 = { key: 1 };
const _hoisted_6 = { key: 0 };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "SingleEdit"
},
__name: "singleEdit",
props: {
/** 编辑配置项说明
* label: '爱好', // placeholder显示
* editComponent: 'el-select', // 组件
* type: 'select-arr', // option显示
* list: 'hobbyList', // 下拉选择数据源
* arrLabel: 'label', // 下拉选择中文显示
* arrKey: 'value' // 下拉选择number显示（最终传后台）
* bind:{} // 组件衍生属性（即第三方组件属性）
*/
configEdit: {
type: Object,
default: () => ({})
},
// 下拉选择数据源
listTypeInfo: {
type: Object,
default: () => ({})
},
scope: {
type: Object,
default: () => ({})
},
prop: {
type: String,
default: "prop"
},
// 是否开启单击编辑
isClickEdit: {
type: Boolean,
default: false
},
modelValue: {
type: [String, Number, Object, Array, Date]
},
// 列for index
indexColumns: [String, Number]
},
emits: ["handleEvent", "update:modelValue"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const slots = useSlots();
const childCom = ref(["select-arr", "checkbox", "radio", "select-obj", "el-select-multiple"]);
const editMode = ref(false);
const tselecttableref = ref({});
const handleRef = (el) => {
if (el) {
tselecttableref.value[`tselecttableref-${props.indexColumns}`] = el;
}
};
const resetClickTselectTable = () => {
const refList = Object.keys(tselecttableref.value).filter(
(item) => item.includes("tselecttableref")
);
if (refList.length > 0 && tselecttableref.value) {
refList.map((val) => {
tselecttableref.value[val].clear();
});
}
};
let model = computed({
get() {
return props == null ? void 0 : props.modelValue;
},
set(val) {
emits("update:modelValue", val);
}
});
watch(
() => props.modelValue,
(data) => {
model.value = data;
}
);
const cEvent = computed(() => {
return ({ eventHandle }, type = "") => {
let event = { ...eventHandle };
let changeEvent = {};
Object.keys(event).forEach((v) => {
changeEvent[v] = (e, ids) => {
if (type === "t-select-table") {
const argument = {
row: e,
ids,
prop: props.prop,
scope: props.scope
};
event[v] && event[v](argument);
} else {
if (typeof e === "number" && e === 0 || e) {
event[v] && event[v]({ val: e, prop: props.prop, scope: props.scope });
} else {
event[v] && event[v]({ prop: props.prop, scope: props.scope });
}
}
};
});
return { ...changeEvent };
};
});
const childVal = computed({
get() {
let valLabel;
let checkboxVal = [];
let selcetMultiple = [];
props.listTypeInfo[props.configEdit.list] && props.listTypeInfo[props.configEdit.list].map((val) => {
switch (props.configEdit.type) {
case "checkbox":
case "radio":
if (model.value.join(",").includes(val.value)) {
checkboxVal.push(val.label);
}
valLabel = checkboxVal.join(",");
break;
case "select-arr":
if (model.value == val[props.configEdit.arrKey]) {
valLabel = val[props.configEdit.arrLabel];
}
break;
case "el-select-multiple":
if (model.value && model.value.join(",").includes(val[props.configEdit.arrKey])) {
selcetMultiple.push(val[props.configEdit.arrLabel]);
}
valLabel = selcetMultiple.join(",");
break;
case "select-obj":
valLabel = val;
break;
}
});
return valLabel;
},
set(val) {
return val;
}
});
const compChildName = computed(() => {
return (configEdit) => {
switch (configEdit.type) {
case "checkbox":
return "el-checkbox";
case "radio":
return "el-radio";
case "el-select-multiple":
case "select-arr":
case "select-obj":
return "el-option";
}
};
});
const compChildLabel = computed(() => {
return (configEdit, value) => {
switch (configEdit.type) {
case "radio":
case "checkbox":
return value[configEdit.arrLabel || "label"];
case "el-select-multiple":
case "select-arr":
return value[configEdit.arrLabel || "label"];
case "select-obj":
return value;
}
};
});
const compChildValue = computed(() => {
return (configEdit, value, key) => {
switch (configEdit.type) {
case "radio":
case "checkbox":
return value[configEdit.arrKey || "key"];
case "el-select-multiple":
case "select-arr":
return value[configEdit.arrKey || "key"];
case "select-obj":
return key;
}
};
});
const compChildShowLabel = computed(() => {
return (configEdit, value) => {
switch (configEdit.type) {
case "radio":
case "checkbox":
return value[configEdit.arrLabel || "label"];
case "el-select-multiple":
case "select-arr":
return value[configEdit.arrLabel || "label"];
case "select-obj":
return value;
}
};
});
const parentCom = ref();
const onFieldClick = () => {
if (props.isClickEdit) {
editMode.value = true;
nextTick(() => {
let parentRef = parentCom.value;
if (parentRef && parentRef.focus) {
parentRef.focus();
}
});
}
};
const onInputExit = () => {
editMode.value = false;
};
const getPlaceholder = (row) => {
if (!row.editComponent || typeof row.editComponent !== "string") {
return row.label;
}
const componentType = row.editComponent.toLowerCase();
if (componentType.includes("input")) {
return "\u8BF7\u8F93\u5165" + row.label;
} else if (componentType.includes("select") || componentType.includes("date")) {
return "\u8BF7\u9009\u62E9" + row.label;
}
return row.label;
};
const handleEvent = (type, val, comType) => {
if (comType === "datetime") onInputExit();
setTimeout(() => {
emits("handleEvent", { type, val });
}, 0);
};
__expose({ resetClickTselectTable });
return (_ctx, _cache) => {
const _component_el_tooltip = resolveComponent("el-tooltip");
return openBlock(), createElementBlock("div", {
onClick: onFieldClick,
class: "single_edit_cell"
}, [
!editMode.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
__props.configEdit.isShowTips ? (openBlock(), createBlock(
_component_el_tooltip,
mergeProps({
key: 0,
class: "item"
}, {
effect: "light",
content: "\u5355\u51FB\u53EF\u7F16\u8F91",
placement: "top",
...__props.configEdit.tipbind
}),
{
default: withCtx(() => [
childCom.value.includes(__props.configEdit.type) ? (openBlock(), createElementBlock(
"div",
_hoisted_2,
toDisplayString(childVal.value) + "\xA0",
1
/* TEXT */
)) : (openBlock(), createElementBlock(
"div",
_hoisted_3,
toDisplayString(unref(model)) + "\xA0",
1
/* TEXT */
)),
renderSlot(_ctx.$slots, "content")
]),
_: 3
/* FORWARDED */
},
16
/* FULL_PROPS */
)) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
childCom.value.includes(__props.configEdit.type) ? (openBlock(), createElementBlock(
"div",
_hoisted_4,
toDisplayString(childVal.value) + "\xA0",
1
/* TEXT */
)) : (openBlock(), createElementBlock(
"div",
_hoisted_5,
toDisplayString(unref(model)) + "\xA0",
1
/* TEXT */
)),
renderSlot(_ctx.$slots, "content")
],
64
/* STABLE_FRAGMENT */
))
])) : createCommentVNode("v-if", true),
editMode.value ? (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
__props.configEdit.editSlotName ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass([__props.prop, "slot_edit_name"])
},
[
renderSlot(_ctx.$slots, __props.configEdit.editSlotName, { scope: __props.scope })
],
2
/* CLASS */
)) : createCommentVNode("v-if", true),
__props.configEdit.isSelfCom ? (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
__props.configEdit.editComponent === "t-select-table" ? (openBlock(), createBlock(resolveDynamicComponent(__props.configEdit.editComponent), mergeProps(
{
key: 0,
ref: (el) => handleRef(el),
placeholder: __props.configEdit.placeholder || getPlaceholder(__props.configEdit)
},
typeof __props.configEdit.bind == "function" ? __props.configEdit.bind(__props.scope) : { clearable: true, filterable: true, ...__props.configEdit.bind },
{
style: { width: __props.configEdit.width || "100%" }
},
toHandlers(cEvent.value(__props.configEdit, "t-select-table"))
), null, 16, ["placeholder", "style"])) : (openBlock(), createBlock(resolveDynamicComponent(__props.configEdit.editComponent), mergeProps(
{
key: 1,
modelValue: unref(model),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : model = $event),
type: __props.configEdit.type,
placeholder: __props.configEdit.placeholder || getPlaceholder(__props.configEdit),
ref_key: "parentCom",
ref: parentCom
},
typeof __props.configEdit.bind == "function" ? __props.configEdit.bind(__props.scope) : { clearable: true, filterable: true, ...__props.configEdit.bind },
{
onChange: _cache[1] || (_cache[1] = ($event) => handleEvent(__props.configEdit.event, unref(model), __props.configEdit.type)),
style: { width: __props.configEdit.width || "100%" }
},
toHandlers(cEvent.value(__props.configEdit))
), null, 16, ["modelValue", "type", "placeholder", "style"]))
],
64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true),
!__props.configEdit.editSlotName && !__props.configEdit.isSelfCom ? (openBlock(), createBlock(resolveDynamicComponent(__props.configEdit.editComponent || "el-input"), mergeProps(
{
key: 2,
modelValue: unref(model),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(model) ? model.value = $event : model = $event),
type: __props.configEdit.type,
placeholder: __props.configEdit.placeholder || getPlaceholder(__props.configEdit),
class: __props.prop,
ref_key: "parentCom",
ref: parentCom,
onChange: _cache[3] || (_cache[3] = ($event) => handleEvent(__props.configEdit.event, unref(model), __props.configEdit.type)),
onKeyup: withKeys(onInputExit, ["enter", "native"]),
onBlur: onInputExit
},
typeof __props.configEdit.bind == "function" ? __props.configEdit.bind(__props.scope) : { clearable: true, filterable: true, ...__props.configEdit.bind },
{
style: { width: __props.configEdit.width || "100%" }
},
toHandlers(cEvent.value(__props.configEdit))
), createSlots({
default: withCtx(() => [
renderSlot(_ctx.$slots, "editChild"),
!_ctx.$slots.editChild ? (openBlock(), createElementBlock("div", _hoisted_6, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(__props.listTypeInfo[__props.configEdit.list], (value, key, index) => {
return openBlock(), createBlock(resolveDynamicComponent(compChildName.value(__props.configEdit)), {
key: index,
disabled: value.disabled,
label: compChildLabel.value(__props.configEdit, value),
value: compChildValue.value(__props.configEdit, value, key)
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(compChildShowLabel.value(__props.configEdit, value)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["disabled", "label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
])) : createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, [
renderList(unref(slots), (_index, name) => {
return {
name,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(data)))
])
};
}),
__props.configEdit.prepend ? {
name: "prepend",
fn: withCtx(() => [
createTextVNode(
toDisplayString(__props.configEdit.prepend),
1
/* TEXT */
)
]),
key: "0"
} : void 0,
__props.configEdit.append ? {
name: "append",
fn: withCtx(() => [
createTextVNode(
toDisplayString(__props.configEdit.append),
1
/* TEXT */
)
]),
key: "1"
} : void 0
]), 1040, ["modelValue", "type", "placeholder", "class", "style"])) : createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true)
]);
};
}
});
export { _sfc_main as default };