asp-smart-ui-plus-test
Version:
A Component Library for Vue 3
237 lines (232 loc) • 11.9 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../../../utils/index.js');
var pluginVue_exportHelper = require('../../../../../_virtual/plugin-vue_export-helper.js');
var _typeof = require('../../../../../utils/typeof.js');
var common = require('../../../../../utils/common.js');
const _hoisted_1 = { class: "tab" };
const _sfc_main = vue.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 = vue.ref(null);
const selectRef = vue.ref(null);
const selectTreeRef = vue.ref(null);
const radioGroupSelectRef = vue.ref(null);
const datePickerRef = vue.ref(null);
const radioGroupRef = vue.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 = vue.ref("");
const disabledDate = (time) => {
if (props.item.disabledDate && _typeof.aspIsFunction(props.item.disabledDate)) {
return props.item.disabledDate(time);
}
if (props.item.disabledDate && _typeof.aspIsArray(props.item.disabledDate)) {
const [range1, range2, range3, range4] = props.item.disabledDate;
const timeStamp = time.getTime();
return (range1 || range1 === 0) && timeStamp < common.aspTimestampChange(range1) || (range2 || range2 === 0) && timeStamp > common.aspTimestampChange(range2) || (range3 || range3 === 0) && selectDate.value && timeStamp < common.aspTimestampChange(range3, selectDate.value) || (range4 || range4 === 0) && selectDate.value && timeStamp > common.aspTimestampChange(range4, selectDate.value);
}
};
const onPick = (dates) => {
if (props.item.calendarChange && _typeof.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 = vue.resolveComponent("asp-input");
const _component_asp_option = vue.resolveComponent("asp-option");
const _component_asp_select = vue.resolveComponent("asp-select");
const _component_asp_radio_group_select = vue.resolveComponent("asp-radio-group-select");
const _component_asp_date_picker = vue.resolveComponent("asp-date-picker");
const _component_asp_tree_select = vue.resolveComponent("asp-tree-select");
const _component_asp_radio_button = vue.resolveComponent("asp-radio-button");
const _component_asp_radio_group = vue.resolveComponent("asp-radio-group");
const _component_asp_form_item = vue.resolveComponent("asp-form-item");
return vue.openBlock(), vue.createBlock(_component_asp_form_item, vue.mergeProps({
class: "asp-form-item",
label: __props.item.label,
prop: __props.item.columnName
}, __props.item.formAttributes, {
rules: __props.item.rules || []
}), {
default: vue.withCtx(() => [
vue.createCommentVNode(" input \u6587\u672C "),
isInputType(__props.item) ? (vue.openBlock(), vue.createBlock(_component_asp_input, vue.mergeProps({ key: 0 }, _ctx.$attrs, {
ref: inputRef.value,
style: { width: __props.item.width || null },
"model-value": __props.modelValue,
disabled: isDisabled(__props.item)
}, vue.toHandlers(_ctx.$attrs), {
onInput: bindChange,
onClear: cusclearable
}), vue.createSlots({ _: 2 }, [
!!__props.item.icon ? {
name: doIcon(__props.item),
fn: vue.withCtx(() => [
vue.createElementVNode("i", {
class: vue.normalizeClass(["el-input__icon", iconClass(__props.item)])
}, null, 2)
]),
key: "0"
} : void 0,
!!__props.item.complex ? {
name: doComplex(__props.item),
fn: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(complexValue(__props.item)), 1)
]),
key: "1"
} : void 0
]), 1040, ["style", "model-value", "disabled"])) : __props.item.type === "select" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createCommentVNode(" select \u4E0B\u62C9\u6846 "),
vue.createVNode(_component_asp_select, vue.mergeProps({ ref: selectRef.value }, _ctx.$attrs, {
style: { width: __props.item.width || null },
disabled: isDisabled(__props.item),
"model-value": __props.modelValue
}, vue.toHandlers(_ctx.$attrs), {
onClear: cusclearable,
onVisibleChange: changeVisible,
onChange: bindChange
}), {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(doSelectOptions(), (cell, index) => {
return vue.openBlock(), vue.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" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
vue.createCommentVNode(" \u5E26\u5355\u9009\u6309\u94AE\u7684\u4E0B\u62C9\u6846 "),
vue.createVNode(_component_asp_radio_group_select, vue.mergeProps({
ref_key: "radioGroupSelectRef",
ref: radioGroupSelectRef
}, _ctx.$attrs, vue.toHandlers(_ctx.$attrs), {
onCusclearable: cusclearable,
onRadioChange: radioChange,
onVisibleChange: changeVisible
}), null, 16)
], 2112)) : __props.item.type === "datePicker" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
vue.createCommentVNode(" \u65E5\u671F\u9009\u62E9\u5668 "),
vue.createVNode(_component_asp_date_picker, vue.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
}, vue.toHandlers(_ctx.$attrs)), null, 16, ["model-value", "value-format", "range-separator", "start-placeholder", "end-placeholder", "placeholder", "disabled-date"])
], 2112)) : __props.item.type === "selectTree" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 4 }, [
vue.createCommentVNode(" tree-select \u4E0B\u62C9\u6811 "),
vue.createVNode(_component_asp_tree_select, vue.mergeProps({
ref: selectTreeRef.value,
"model-value": __props.modelValue
}, _ctx.$attrs, vue.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" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 5 }, [
vue.createCommentVNode(" tab\u680F "),
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(_component_asp_radio_group, vue.mergeProps({
ref: radioGroupRef.value,
"model-value": __props.modelValue
}, _ctx.$attrs, vue.toHandlers(_ctx.$attrs), { onChange: bindChange }), {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.item.options, (radioItem, index) => {
return vue.openBlock(), vue.createBlock(_component_asp_radio_button, {
key: index,
label: radioItem.value
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(radioItem.label), 1)
]),
_: 2
}, 1032, ["label"]);
}), 128))
]),
_: 1
}, 16, ["model-value"])
])
], 2112)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 16, ["label", "prop", "rules"]);
};
}
});
var formItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "E:\\code\\SmartUIPlus\\asp-packages\\components\\pc\\advanced\\query-form\\src\\form-item.vue"]]);
exports["default"] = formItem;