asp-smart-ui-plus-test
Version:
A Component Library for Vue 3
233 lines (230 loc) • 11.7 kB
JavaScript
import { defineComponent, ref, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createCommentVNode, toHandlers, createSlots, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createElementBlock, Fragment, createVNode, renderList } from 'vue';
import '../../../../../utils/index.mjs';
import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.mjs';
import { aspIsFunction, aspIsArray } from '../../../../../utils/typeof.mjs';
import { aspTimestampChange } from '../../../../../utils/common.mjs';
const _hoisted_1 = { class: "tab" };
const _sfc_main = defineComponent({
__name: "form-item",
props: {
modelValue: { type: [String, Number, Array, Object], required: true },
item: { type: Object, required: true },
model: { type: Object, required: false }
},
emits: ["update:modelValue"],
setup(__props, { expose, emit }) {
const props = __props;
const inputRef = ref(null);
const selectRef = ref(null);
const selectTreeRef = ref(null);
const radioGroupSelectRef = ref(null);
const datePickerRef = ref(null);
const radioGroupRef = ref(null);
const isInputType = (item) => item.type === void 0 || item.type === "input";
const iconClass = (item) => typeof item.icon === "object" ? item.icon.class : item.icon;
const complexValue = (item) => typeof item.complex === "object" ? item.complex.val : item.complex;
const selectDate = ref("");
const disabledDate = (time) => {
if (props.item.disabledDate && aspIsFunction(props.item.disabledDate)) {
return props.item.disabledDate(time);
}
if (props.item.disabledDate && aspIsArray(props.item.disabledDate)) {
const [range1, range2, range3, range4] = props.item.disabledDate;
const timeStamp = time.getTime();
return (range1 || range1 === 0) && timeStamp < aspTimestampChange(range1) || (range2 || range2 === 0) && timeStamp > aspTimestampChange(range2) || (range3 || range3 === 0) && selectDate.value && timeStamp < aspTimestampChange(range3, selectDate.value) || (range4 || range4 === 0) && selectDate.value && timeStamp > aspTimestampChange(range4, selectDate.value);
}
};
const onPick = (dates) => {
if (props.item.calendarChange && aspIsFunction(props.item.calendarChange)) {
props.item.calendarChange(dates);
return;
}
selectDate.value = dates[0].toLocaleDateString();
};
const handleSingleTreeSelectChange = (data) => {
var _a, _b;
const key = ((_b = (_a = props.item) == null ? void 0 : _a.attributes) == null ? void 0 : _b.props.value) || "value";
bindChange(data[key]);
};
const bindChange = (e) => {
if (e === null && props.item.type === "datePicker") {
cusclearable();
}
selectDate.value = e === null ? "" : selectDate.value;
emit("update:modelValue", e);
if (typeof props.item.func === "function") {
props.item.func(e);
}
};
const cusclearable = () => {
if (typeof props.item.clearableFunc === "function") {
props.item.clearableFunc();
}
};
const datePickerChange = (val) => {
bindChange(val);
};
const isDisabled = (item) => {
if (item.disabledFunc && typeof item.disabledFunc === "function") {
const obj = { key: item.columnName, model: props.model };
return item.disabledFunc(obj);
}
return item.attributes && item.attributes.disabled;
};
const doIcon = (item) => typeof item.icon === "object" ? item.icon.slot : "suffix";
const doComplex = (item) => typeof item.complex === "object" ? item.complex.slot : "append";
const doSelectOptions = () => props.item.options;
const radioChange = (value) => {
if (props.item.func) {
props.item.func({ item: props.item, value });
}
};
const changeVisible = (e) => {
if (props.item.visibleFun) {
props.item.visibleFun(props.item, e);
}
};
expose({
inputRef,
selectRef,
selectTreeRef,
radioGroupSelectRef,
datePickerRef,
radioGroupRef
});
return (_ctx, _cache) => {
const _component_asp_input = resolveComponent("asp-input");
const _component_asp_option = resolveComponent("asp-option");
const _component_asp_select = resolveComponent("asp-select");
const _component_asp_radio_group_select = resolveComponent("asp-radio-group-select");
const _component_asp_date_picker = resolveComponent("asp-date-picker");
const _component_asp_tree_select = resolveComponent("asp-tree-select");
const _component_asp_radio_button = resolveComponent("asp-radio-button");
const _component_asp_radio_group = resolveComponent("asp-radio-group");
const _component_asp_form_item = resolveComponent("asp-form-item");
return openBlock(), createBlock(_component_asp_form_item, mergeProps({
class: "asp-form-item",
label: __props.item.label,
prop: __props.item.columnName
}, __props.item.formAttributes, {
rules: __props.item.rules || []
}), {
default: withCtx(() => [
createCommentVNode(" input \u6587\u672C "),
isInputType(__props.item) ? (openBlock(), createBlock(_component_asp_input, mergeProps({ key: 0 }, _ctx.$attrs, {
ref: inputRef.value,
style: { width: __props.item.width || null },
"model-value": __props.modelValue,
disabled: isDisabled(__props.item)
}, toHandlers(_ctx.$attrs), {
onInput: bindChange,
onClear: cusclearable
}), createSlots({ _: 2 }, [
!!__props.item.icon ? {
name: doIcon(__props.item),
fn: withCtx(() => [
createElementVNode("i", {
class: normalizeClass(["el-input__icon", iconClass(__props.item)])
}, null, 2)
]),
key: "0"
} : void 0,
!!__props.item.complex ? {
name: doComplex(__props.item),
fn: withCtx(() => [
createTextVNode(toDisplayString(complexValue(__props.item)), 1)
]),
key: "1"
} : void 0
]), 1040, ["style", "model-value", "disabled"])) : __props.item.type === "select" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createCommentVNode(" select \u4E0B\u62C9\u6846 "),
createVNode(_component_asp_select, mergeProps({ ref: selectRef.value }, _ctx.$attrs, {
style: { width: __props.item.width || null },
disabled: isDisabled(__props.item),
"model-value": __props.modelValue
}, toHandlers(_ctx.$attrs), {
onClear: cusclearable,
onVisibleChange: changeVisible,
onChange: bindChange
}), {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(doSelectOptions(), (cell, index) => {
return openBlock(), createBlock(_component_asp_option, {
key: index,
label: cell[__props.item.optionsLabel || "label"],
value: cell[__props.item.optionsValue || "value"],
disabled: cell.disabled
}, null, 8, ["label", "value", "disabled"]);
}), 128))
]),
_: 1
}, 16, ["style", "disabled", "model-value"])
], 2112)) : __props.item.type === "radioGroupSelect" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
createCommentVNode(" \u5E26\u5355\u9009\u6309\u94AE\u7684\u4E0B\u62C9\u6846 "),
createVNode(_component_asp_radio_group_select, mergeProps({
ref_key: "radioGroupSelectRef",
ref: radioGroupSelectRef
}, _ctx.$attrs, toHandlers(_ctx.$attrs), {
onCusclearable: cusclearable,
onRadioChange: radioChange,
onVisibleChange: changeVisible
}), null, 16)
], 2112)) : __props.item.type === "datePicker" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
createCommentVNode(" \u65E5\u671F\u9009\u62E9\u5668 "),
createVNode(_component_asp_date_picker, mergeProps({
ref_key: "datePickerRef",
ref: datePickerRef,
"model-value": __props.modelValue
}, _ctx.$attrs, {
"value-format": __props.item.attributes && __props.item.attributes.valueFormat || "YYYY/MM/DD",
"range-separator": __props.item.attributes && __props.item.attributes.rangeSeparator || "\u81F3",
"start-placeholder": __props.item.attributes && __props.item.attributes.startPlaceholder || "\u5F00\u59CB\u65E5\u671F",
"end-placeholder": __props.item.attributes && __props.item.attributes.endPlaceholder || "\u7ED3\u675F\u65E5\u671F",
placeholder: __props.item.attributes && __props.item.attributes.placeholder || "\u8BF7\u9009\u62E9\u65E5\u671F",
"disabled-date": __props.item.attributes && __props.item.attributes.disabledDate || disabledDate,
onCalendarChange: onPick,
"onUpdate:modelValue": datePickerChange
}, toHandlers(_ctx.$attrs)), null, 16, ["model-value", "value-format", "range-separator", "start-placeholder", "end-placeholder", "placeholder", "disabled-date"])
], 2112)) : __props.item.type === "selectTree" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
createCommentVNode(" tree-select \u4E0B\u62C9\u6811 "),
createVNode(_component_asp_tree_select, mergeProps({
ref: selectTreeRef.value,
"model-value": __props.modelValue
}, _ctx.$attrs, toHandlers(_ctx.$attrs), {
onCusclearable: cusclearable,
onVisibleChange: changeVisible,
onCurrentChange: handleSingleTreeSelectChange,
onCheck: _cache[0] || (_cache[0] = (e, checkNodes) => bindChange(checkNodes.checkedKeys))
}), null, 16, ["model-value"])
], 2112)) : __props.item.type === "radioGroup" ? (openBlock(), createElementBlock(Fragment, { key: 5 }, [
createCommentVNode(" tab\u680F "),
createElementVNode("div", _hoisted_1, [
createVNode(_component_asp_radio_group, mergeProps({
ref: radioGroupRef.value,
"model-value": __props.modelValue
}, _ctx.$attrs, toHandlers(_ctx.$attrs), { onChange: bindChange }), {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.options, (radioItem, index) => {
return openBlock(), createBlock(_component_asp_radio_button, {
key: index,
label: radioItem.value
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(radioItem.label), 1)
]),
_: 2
}, 1032, ["label"]);
}), 128))
]),
_: 1
}, 16, ["model-value"])
])
], 2112)) : createCommentVNode("v-if", true)
]),
_: 1
}, 16, ["label", "prop", "rules"]);
};
}
});
var formItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\code\\SmartUIPlus\\asp-packages\\components\\pc\\advanced\\query-form\\src\\form-item.vue"]]);
export { formItem as default };