@fecp/mobile
Version:
189 lines (188 loc) • 7.85 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
;/* empty css */
const vue = require("vue");
const index = require("../field/index.js");
const index_esm = require("../../../../../../node_modules/.pnpm/@vant_area-data@2.0.0/node_modules/@vant/area-data/dist/index.esm.js");
const index$1 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/popup/index.js");
const index$2 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/cascader/index.js");
const index$3 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.js");
const _sfc_main = {
__name: "FieldArea",
props: {
treeOptionsFieldNames: {
type: Object,
default: {
text: "text",
value: "value",
children: "children"
}
},
modelValue: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
"is-link": false,
areaType: {
//1-省市区，2-省市，3-省
type: String,
default: "1"
}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const finalOptions = vue.ref([]);
if (props.areaType == "1") {
finalOptions.value = index_esm.useCascaderAreaData();
} else if (props.areaType == "2") {
finalOptions.value = parseOptionsByLevel(index_esm.useCascaderAreaData(), 1);
} else if (props.areaType == "3") {
finalOptions.value = parseOptionsByLevel(index_esm.useCascaderAreaData(), 0);
}
function parseOptionsByLevel(data, level) {
if (level === 0) {
return data.map((item) => ({
text: item.text,
value: item.value
}));
}
function processNode(node, currentLevel) {
const newNode = {
text: node.text,
value: node.value
};
if (currentLevel < level && node.children) {
newNode.children = node.children.map(
(child) => processNode(child, currentLevel + 1)
);
}
return newNode;
}
return data.map((node) => processNode(node, 0));
}
const fieldTextValue = vue.ref("");
const showPicker = vue.ref(false);
const emit = __emit;
const pickerValue = vue.computed(() => {
const value = props.modelValue.split("/");
return value[value.length - 1];
});
function getDisplayValue(options, fieldNames, modelValue) {
const { text, value, children } = fieldNames;
const values = modelValue.split("/");
const displayValues = [];
function findValueInOptions(currentOptions, targetValue) {
for (const option of currentOptions) {
if (option[value] === targetValue) {
return option[text];
}
if (option[children] && option[children].length > 0) {
const result = findValueInOptions(option[children], targetValue);
if (result) {
return result;
}
}
}
return null;
}
for (const val of values) {
const displayValue = findValueInOptions(options, val);
if (displayValue) {
displayValues.push(displayValue);
}
}
return displayValues.join("/");
}
vue.watch(
[() => props.modelValue, finalOptions],
([value, options]) => {
if (!value) {
fieldTextValue.value = "";
return;
}
fieldTextValue.value = getDisplayValue(
options,
props.treeOptionsFieldNames,
value
);
},
{ immediate: true }
);
const onFinish = ({ selectedOptions }) => {
const value = selectedOptions.map((option) => option[props.treeOptionsFieldNames.value]).join("/");
emit("update:modelValue", value);
showPicker.value = false;
};
return (_ctx, _cache) => {
const _component_van_icon = index$3.Icon;
const _component_van_cascader = index$2.Cascader;
const _component_van_popup = index$1.Popup;
return vue.openBlock(), vue.createBlock(vue.unref(index.MobileField), vue.mergeProps(_ctx.$attrs, {
modelValue: vue.unref(fieldTextValue),
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
isLink: __props.readonly ? false : true,
readonly: "",
disabled: __props.disabled,
onOpenPicker: _cache[5] || (_cache[5] = () => {
if (!__props.readonly) {
showPicker.value = true;
}
})
}), vue.createSlots({
default: vue.withCtx(() => [
vue.createVNode(_component_van_popup, {
show: vue.unref(showPicker),
"onUpdate:show": _cache[3] || (_cache[3] = ($event) => vue.isRef(showPicker) ? showPicker.value = $event : null),
"destroy-on-close": "",
position: "bottom"
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_van_cascader, vue.mergeProps(_ctx.$attrs, {
modelValue: vue.unref(pickerValue),
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(pickerValue) ? pickerValue.value = $event : null),
options: vue.unref(finalOptions),
placeholder: "请选择",
onFinish,
onClose: _cache[2] || (_cache[2] = ($event) => showPicker.value = false)
}), null, 16, ["modelValue", "options"])
]),
_: 1
}, 8, ["show"])
]),
_: 2
}, [
!__props.readonly && !__props.disabled && vue.unref(fieldTextValue) ? {
name: "right-icon",
fn: vue.withCtx(() => [
vue.createVNode(_component_van_icon, {
name: "clear",
class: "custom-close-icon",
onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => pickerValue.value = null, ["stop"]))
})
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "isLink", "disabled"]);
};
}
};
exports.default = _sfc_main;