@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
335 lines (330 loc) • 12.5 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "SingleEditCell"
},
__name: "singleEditCell",
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"
},
// 是否走表单验证（表头合并不校验）
isShowRules: {
type: Boolean,
default: true
},
modelValue: {
type: [String, Number, Array, Boolean, Date, Object]
},
// 列for index
indexColumns: [String, Number]
},
emits: ["handleEvent", "update:modelValue", "keyupHandle", "getRefs"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
let childValue = vue.computed({
get() {
return props == null ? void 0 : props.modelValue;
},
set(val) {
emits("update:modelValue", val);
}
});
vue.watch(
() => props.modelValue,
(data) => {
childValue.value = data;
}
);
const handleEvent = (type) => {
setTimeout(() => {
emits("handleEvent", { type, val: childValue.value });
}, 0);
};
const keyUpHandle = ($event) => {
emits("keyupHandle", $event, props.scope.$index, props.prop);
};
const cEvent = vue.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 selectListType = vue.computed(() => {
return (item) => {
if (props.listTypeInfo) {
return props.listTypeInfo[item.list];
} else {
return [];
}
};
});
const compChildName = vue.computed(() => {
return (configEdit) => {
switch (configEdit.type) {
case "checkbox":
return "el-checkbox";
case "radio":
return "el-radio";
case "select-arr":
case "select-obj":
return "el-option";
}
};
});
const compChildLabel = vue.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 = vue.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 = vue.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 getRefs = (el, item) => {
emits("getRefs", el, item);
};
const tselecttableref = vue.ref({});
const handleRef = (el, item) => {
emits("getRefs", el, item);
if (el) {
tselecttableref.value[`tselecttableref-${props.indexColumns}`] = el;
}
};
const resetTselectTableFields = () => {
const refList = Object.keys(tselecttableref.value).filter(
(item) => item.includes("tselecttableref")
);
if (refList.length > 0 && tselecttableref.value) {
refList.map((val) => {
tselecttableref.value[val].clear();
});
}
};
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;
};
__expose({ resetTselectTableFields });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.isShowRules ? "el-form-item" : "div"), vue.mergeProps({
prop: __props.prop,
rules: __props.configEdit.rules,
class: [
__props.configEdit.className,
{ single_edit_cell_rules: __props.configEdit.rules },
"single_edit_cell"
]
}, _ctx.$attrs), {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u7F16\u8F91\u7EC4\u4EF6\u81EA\u5B9A\u4E49\u63D2\u69FD "),
__props.configEdit.editSlotName ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([__props.prop, "slot_edit_name"]),
onKeyup: keyUpHandle
},
[
vue.renderSlot(_ctx.$slots, __props.configEdit.editSlotName, { scope: __props.scope })
],
34
/* CLASS, NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
__props.configEdit.isSelfCom ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
__props.configEdit.editComponent === "t-select-table" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.configEdit.editComponent), vue.mergeProps(
{
key: 0,
ref: (el) => handleRef(el, __props.configEdit),
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%" }
},
vue.toHandlers(cEvent.value(__props.configEdit, "t-select-table"))
), null, 16, ["placeholder", "style"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.configEdit.editComponent), vue.mergeProps(
{
key: 1,
modelValue: vue.unref(childValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(childValue) ? childValue.value = $event : childValue = $event),
placeholder: __props.configEdit.placeholder || getPlaceholder(__props.configEdit),
ref: (el) => getRefs(el, __props.configEdit)
},
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)),
style: { width: __props.configEdit.width || "100%" }
},
vue.toHandlers(cEvent.value(__props.configEdit))
), null, 16, ["modelValue", "placeholder", "style"]))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
!__props.configEdit.editSlotName && !__props.configEdit.isSelfCom ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.configEdit.editComponent || "el-input"), vue.mergeProps(
{
key: 2,
modelValue: vue.unref(childValue),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(childValue) ? childValue.value = $event : childValue = $event),
type: __props.configEdit.type,
placeholder: __props.configEdit.placeholder || getPlaceholder(__props.configEdit),
ref: (el) => getRefs(el, __props.configEdit),
class: __props.prop,
onChange: _cache[3] || (_cache[3] = ($event) => handleEvent(__props.configEdit.event)),
onKeyup: keyUpHandle,
style: { width: __props.configEdit.width || "100%" }
},
vue.toHandlers(cEvent.value(__props.configEdit)),
typeof __props.configEdit.bind == "function" ? __props.configEdit.bind(__props.scope) : { clearable: true, filterable: true, ...__props.configEdit.bind }
), vue.createSlots({
default: vue.withCtx(() => [
!__props.configEdit.editComponent.includes("date") ? (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
vue.renderList(selectListType.value(__props.configEdit), (value, key) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(compChildName.value(__props.configEdit)), {
key,
disabled: value.disabled,
label: compChildLabel.value(__props.configEdit, value),
value: compChildValue.value(__props.configEdit, value, key)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(compChildShowLabel.value(__props.configEdit, value)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["disabled", "label", "value"]);
}),
128
/* KEYED_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, [
__props.configEdit.prepend ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(__props.configEdit.prepend),
1
/* TEXT */
)
]),
key: "0"
} : void 0,
__props.configEdit.append ? {
name: "append",
fn: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(__props.configEdit.append),
1
/* TEXT */
)
]),
key: "1"
} : void 0
]), 1040, ["modelValue", "type", "placeholder", "class", "style"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["prop", "rules", "class"]);
};
}
});
exports.default = _sfc_main;