@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
462 lines (459 loc) • 18.9 kB
JavaScript
import { defineComponent, computed, ref, getCurrentInstance, watch, onMounted, resolveComponent, createBlock, openBlock, mergeProps, withCtx, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, createSlots, renderSlot, toDisplayString, resolveDynamicComponent, toHandlers, createTextVNode } from 'vue';
import './renderComp.vue.mjs';
import './renderBtn.vue.mjs';
import '../../../hooks/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import _sfc_main$1 from './renderComp.vue2.mjs';
import _sfc_main$2 from './renderBtn.vue2.mjs';
const _hoisted_1 = {
key: 1,
class: "text_show"
};
const _hoisted_2 = { class: "footer_btn flex-box flex-ver t-margin-top-5" };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "TForm"
},
__name: "index",
props: {
className: { default: "" },
formOpts: { default: () => ({}) },
widthSize: { default: 2 },
labelPosition: { default: "right" },
isTrim: { type: Boolean, default: true }
},
emits: ["update:modelValue", "handleEvent", "getRefs"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const cEvent = computed(() => {
return (item, type = "") => {
let event = { ...item.eventHandle };
let changeEvent = {};
Object.keys(event).forEach((v) => {
changeEvent[v] = (e, ids) => {
if (type === "t-select-table") {
event[v] && event[v](e, ids);
} else {
event[v] && event[v](e, props.formOpts);
}
};
});
return { ...changeEvent };
};
});
const selectListType = computed(() => {
return (item) => {
if (props.formOpts.listTypeInfo) {
return props.formOpts.listTypeInfo[item.list];
} else {
return [];
}
};
});
const compChildName = computed(() => {
return (opt) => {
switch (opt.type) {
case "checkbox":
return "el-checkbox";
case "radio":
return "el-radio";
case "select-arr":
case "select-obj":
return "el-option";
}
};
});
const compChildLabel = computed(() => {
return (opt, value) => {
switch (opt.type) {
case "radio":
case "checkbox":
return value[opt.arrLabel || "label"];
case "el-select-multiple":
case "select-arr":
return value[opt.arrLabel || "label"];
case "select-obj":
return value;
}
};
});
const compChildValue = computed(() => {
return (opt, value, key) => {
switch (opt.type) {
case "radio":
case "checkbox":
return value[opt.arrKey || "key"];
case "el-select-multiple":
case "select-arr":
return value[opt.arrKey || "key"];
case "select-obj":
return key;
}
};
});
const compChildShowLabel = computed(() => {
return (opt, value) => {
switch (opt.type) {
case "radio":
case "checkbox":
return value[opt.arrLabel || "label"];
case "el-select-multiple":
case "select-arr":
return value[opt.arrLabel || "label"];
case "select-obj":
return value;
}
};
});
const colSize = ref(props.widthSize);
const tform = ref(null);
const { t } = useLocale();
const instance = getCurrentInstance();
const emits = __emit;
watch(
() => props.formOpts.formData,
() => {
emits("update:modelValue", tform.value);
},
{ deep: true }
);
watch(
() => props.widthSize,
(val) => {
if (val > 6) {
colSize.value = 6;
} else {
colSize.value = val;
}
},
{ deep: true }
);
onMounted(() => {
var _a;
const entries = Object.entries(tform.value.$.exposed);
for (const [key, value] of entries) {
instance.exposed[key] = value;
}
let event = null;
let item = null;
props.formOpts.formData && Object.keys((_a = props == null ? void 0 : props.formOpts) == null ? void 0 : _a.formData).forEach((key) => {
if (props.formOpts.formData[key]) {
props.formOpts.fieldList.map((val) => {
if (val.value == key) {
event = val.event;
item = val;
}
});
handleEvent(event, props.formOpts.formData[key], item, false);
}
});
emits("update:modelValue", tform.value);
});
const getChildWidth = (item) => {
if (props.formOpts.labelPosition === "top") {
return `flex: 0 1 calc((${100 / (item.widthSize || colSize.value)}% - 10px));margin-right:10px;`;
} else {
return `flex: 0 1 ${100 / (item.widthSize || colSize.value)}%;`;
}
};
const getPlaceholder = (row) => {
let placeholder;
if (row.comp && typeof row.comp == "string") {
if (row.comp.includes("input")) {
placeholder = t("plus.form.pleaseEnter") + row.label;
} else if (row.comp.includes("select") || row.comp.includes("date")) {
placeholder = t("plus.form.pleaseSelect") + row.label;
} else {
placeholder = row.label;
}
}
return placeholder;
};
const handleEvent = (type, val, item, flag = true) => {
var _a;
if (flag && props.isTrim && !item.isTrim && item.comp.includes("el-input") && ((_a = item == null ? void 0 : item.bind) == null ? void 0 : _a.type) !== "number" && item.type !== "password" && item.type !== "inputNumber") {
props.formOpts.formData[item.value] = props.formOpts.formData[item.value].trim();
}
emits("handleEvent", type, val);
};
const selfValidate = () => {
return new Promise((resolve, reject) => {
tform.value.validate((valid) => {
if (valid) {
resolve({
valid,
formData: props.formOpts.formData
});
} else {
reject({
valid,
formData: null
});
}
});
});
};
const getRefs = (el, item, index) => {
emits("getRefs", el, item, index);
};
const tselecttableref = ref({});
const handleRef = (el, item, key) => {
emits("getRefs", el, item, key);
if (el) {
tselecttableref.value[`tselecttableref-${key}`] = el;
}
};
const selfResetFields = () => {
resetTselectTable();
tform.value.resetFields();
};
const resetTselectTable = () => {
const refList = Object.keys(tselecttableref.value).filter(
(item) => item.includes("tselecttableref")
);
if (refList.length > 0 && tselecttableref.value) {
refList.map((val) => {
tselecttableref.value[val].clear();
});
}
};
__expose({ ...instance.exposed, selfValidate, selfResetFields, resetTselectTable });
return (_ctx, _cache) => {
const _component_el_form_item = resolveComponent("el-form-item");
const _component_el_button = resolveComponent("el-button");
const _component_el_form = resolveComponent("el-form");
return openBlock(), createBlock(_component_el_form, mergeProps({
class: ["t-form", _ctx.className],
ref_key: "tform",
ref: tform,
model: _ctx.formOpts.formData,
rules: _ctx.formOpts.rules,
"label-width": _ctx.formOpts.labelWidth || "120px",
"label-position": _ctx.formOpts.labelPosition || _ctx.labelPosition || "right"
}, _ctx.$attrs), {
default: withCtx(() => [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.formOpts.fieldList, (item, index) => {
return openBlock(), createElementBlock(
Fragment,
null,
[
(typeof item.isHideItem == "function" ? item.isHideItem(_ctx.formOpts.formData) : !item.isHideItem) ? (openBlock(), createBlock(_component_el_form_item, mergeProps({
key: index,
prop: item.value,
label: item.label,
class: [
item.className,
{ render_label: item.labelRender },
{ slot_label: item.slotName },
{ render_laber_position_left: _ctx.formOpts.labelPosition === "left" }
],
rules: item.rules,
"label-width": item.labelWidth,
style: getChildWidth(item)
}, _ctx.$attrs), createSlots({
default: withCtx(() => [
item.slotName ? renderSlot(_ctx.$slots, item.slotName, {
key: 0,
scope: _ctx.formOpts.formData
}) : createCommentVNode("v-if", true),
item.textShow ? (openBlock(), createElementBlock(
"span",
_hoisted_1,
toDisplayString(item.textValue || _ctx.formOpts.formData[item.value]),
1
/* TEXT */
)) : createCommentVNode("v-if", true),
item.isSelfCom ? (openBlock(), createElementBlock(
Fragment,
{ key: 2 },
[
item.comp === "t-select-table" ? (openBlock(), createBlock(resolveDynamicComponent(item.comp), mergeProps(
{
key: 0,
ref_for: true,
ref: (el) => handleRef(el, item, index),
placeholder: item.placeholder || getPlaceholder(item)
},
typeof item.bind == "function" ? item.bind(_ctx.formOpts.formData) : { clearable: true, filterable: true, ...item.bind },
{
style: { width: item.width || "100%" }
},
toHandlers(cEvent.value(item, "t-select-table"))
), null, 16, ["placeholder", "style"])) : (openBlock(), createBlock(resolveDynamicComponent(item.comp), mergeProps(
{
key: 1,
modelValue: _ctx.formOpts.formData[item.value],
"onUpdate:modelValue": ($event) => _ctx.formOpts.formData[item.value] = $event,
placeholder: item.placeholder || getPlaceholder(item),
ref_for: true,
ref: (el) => getRefs(el, item, index)
},
typeof item.bind == "function" ? item.bind(_ctx.formOpts.formData) : { clearable: true, filterable: true, ...item.bind },
{
style: { width: item.width || "100%" }
},
toHandlers(cEvent.value(item))
), null, 16, ["modelValue", "onUpdate:modelValue", "placeholder", "style"]))
],
64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true),
!item.slotName && !item.textShow && !item.isSelfCom ? (openBlock(), createBlock(resolveDynamicComponent(item.comp), mergeProps(
{
key: 3,
modelValue: _ctx.formOpts.formData[item.value],
"onUpdate:modelValue": ($event) => _ctx.formOpts.formData[item.value] = $event,
type: item.type,
placeholder: item.placeholder || getPlaceholder(item),
onChange: ($event) => handleEvent(item.event, _ctx.formOpts.formData[item.value], item),
ref_for: true,
ref: (el) => getRefs(el, item, index)
},
typeof item.bind == "function" ? item.bind(_ctx.formOpts.formData) : { clearable: true, filterable: true, ...item.bind },
{
style: { width: item.width || "100%" }
},
toHandlers(cEvent.value(item))
), createSlots({
default: withCtx(() => [
item.childSlotName ? renderSlot(_ctx.$slots, item.childSlotName, { key: 0 }) : createCommentVNode("v-if", true),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(selectListType.value(item), (value, key) => {
return openBlock(), createBlock(resolveDynamicComponent(compChildName.value(item)), {
key: index,
disabled: value.disabled,
label: compChildLabel.value(item, value),
value: compChildValue.value(item, value, key)
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(compChildShowLabel.value(item, value)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["disabled", "label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
}, [
item.prepend ? {
name: "prepend",
fn: withCtx(() => [
createTextVNode(
toDisplayString(item.prepend),
1
/* TEXT */
)
]),
key: "0"
} : void 0,
item.append ? {
name: "append",
fn: withCtx(() => [
createTextVNode(
toDisplayString(item.append),
1
/* TEXT */
)
]),
key: "1"
} : void 0
]), 1040, ["modelValue", "onUpdate:modelValue", "type", "placeholder", "onChange", "style"])) : createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, [
item.labelSlotName || item.labelRender ? {
name: "label",
fn: withCtx(() => [
item.labelRender ? (openBlock(), createBlock(_sfc_main$1, {
key: 0,
render: item.labelRender,
item
}, null, 8, ["render", "item"])) : createCommentVNode("v-if", true),
item.labelSlotName ? renderSlot(_ctx.$slots, item.labelSlotName, {
key: 1,
scope: item
}) : createCommentVNode("v-if", true)
]),
key: "0"
} : void 0
]), 1040, ["prop", "label", "class", "rules", "label-width", "style"])) : createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
}),
256
/* UNKEYED_FRAGMENT */
)),
createCommentVNode(" \u6309\u94AE "),
createElementVNode("div", _hoisted_2, [
_ctx.formOpts.btnSlotName ? renderSlot(_ctx.$slots, _ctx.formOpts.btnSlotName, { key: 0 }) : createCommentVNode("v-if", true),
!_ctx.formOpts.btnSlotName && _ctx.formOpts.operatorList && _ctx.formOpts.operatorList.length > 0 ? (openBlock(true), createElementBlock(
Fragment,
{ key: 1 },
renderList(_ctx.formOpts.operatorList, (val, index) => {
return openBlock(), createElementBlock(
Fragment,
null,
[
val.render ? (openBlock(), createBlock(_sfc_main$2, {
key: index,
item: val,
render: val.render
}, null, 8, ["item", "render"])) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
!val.isHideBtn ? (openBlock(), createBlock(_component_el_button, mergeProps({
key: index,
onClick: ($event) => val.fun(val)
}, {
type: "primary",
size: "small",
...val.bind
}), {
default: withCtx(() => [
createTextVNode(
toDisplayString(val.label),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1040, ["onClick"])) : createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
);
}),
256
/* UNKEYED_FRAGMENT */
)) : createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
}, 16, ["class", "model", "rules", "label-width", "label-position"]);
};
}
});
export { _sfc_main as default };