@fecp/designer 5.5.120 → 5.6.1

package/es/packages/mobile/src/components/form/field/Field.vue.mjs

@@ -1,13 +1,23 @@
 /* empty css                                                     */
 /* empty css                                                      */
 /* empty css                                                     */
+/* empty css                                                        */
+/* empty css                                                      */
 /* empty css                                                     */
 /* empty css                                                      */
-import { getCurrentInstance, computed, ref, watch, createElementBlock, openBlock, Fragment, createVNode, withDirectives, renderSlot, mergeProps, unref, isRef, createSlots, renderList, withCtx, createElementVNode, toDisplayString, createTextVNode, vModelText } from "vue";
-import { getUnit, textFormatter, textFormatter4Input, reverseTextFormatter } from "../../../utils/formatterUtil.mjs";
-import { useCursor } from "../../../utils/use-cursor.mjs";
+/* empty css                                                              */
+import { inject, getCurrentInstance, computed, ref, watch, createElementBlock, openBlock, Fragment, createVNode, withDirectives, renderSlot, mergeProps, unref, isRef, createSlots, withCtx, withModifiers, createTextVNode, toDisplayString, renderList, createElementVNode, vModelText, nextTick } from "vue";
+import { getUnit, textFormatter, reverseTextFormatter } from "../../../utils/formatterUtil.mjs";
+import XEUtils from "xe-utils";
 /* empty css            */
 import { Field } from "../../../../../../node_modules/vant/es/field/index.mjs";
+import { Icon } from "../../../../../../node_modules/vant/es/icon/index.mjs";
+import { TextEllipsis } from "../../../../../../node_modules/vant/es/text-ellipsis/index.mjs";
+import { Popup } from "../../../../../../node_modules/vant/es/popup/index.mjs";
+const _hoisted_1 = { key: 1 };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = { style: { padding: "16px" } };
 const _sfc_main = {
   __name: "Field",
   props: {
@@ -34,19 +44,28 @@ const _sfc_main = {
       type: String,
       default: ""
     },
-    showUnit: {
-      type: Boolean,
-      default: true
-    },
     maxlength: {
       type: Number,
       default: 0
     },
-    formData: Object
+    suffix: {
+      type: String,
+      default: ""
+    },
+    formData: Object,
+    rules: {
+      type: Array,
+      default: []
+    },
+    compId: {
+      type: String,
+      default: ""
+    }
   },
   emits: ["openPicker", "update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const refreshGridLayoutItemHeight = inject("refreshGridLayoutItemHeight");
     const instance = getCurrentInstance();
     const ctx = instance.proxy;
     const realMaxLength = computed(() => {
@@ -54,11 +73,14 @@ const _sfc_main = {
     });
     const unit = ref("");
     const fieldInputRef = ref();
-    const [recordCursor, setCursor] = useCursor();
     const emit = __emit;
+    const showTooltipPopup = ref(false);
     const textValue = ref("");
     const compValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        console.log("🚀 ~ props.modelValue:", props.modelValue);
+        return props.modelValue;
+      },
       set: (val) => {
         emit("update:modelValue", val);
       }
@@ -68,13 +90,37 @@ const _sfc_main = {
       (newVal) => {
         unit.value = getUnit(props.dataFormatter);
         if (!props.fieldType || props.fieldType === "text") {
-          textValue.value = textFormatter(newVal, props.dataFormatter);
+          textValue.value = props.disabled ? textFormatter(newVal, props.dataFormatter) : realToText(newVal, props.dataFormatter);
+          console.log("🚀 ~ textValue.value:", textValue.value);
         } else {
           textValue.value = newVal;
         }
       },
       { immediate: true, flush: "post" }
     );
+    function realToText(value, dataFormatter) {
+      switch (dataFormatter) {
+        case "money(yuan)":
+          value = XEUtils.toNumber(value);
+          break;
+        case "money(wanyuan)":
+          value = XEUtils.divide(XEUtils.toNumber(value), 1e4);
+          break;
+        case "money(yi)":
+          value = XEUtils.divide(XEUtils.toNumber(value), 1e8);
+          break;
+        case "percent":
+          value = XEUtils.multiply(XEUtils.toNumber(value), 100);
+          break;
+        case "thousand":
+          value = XEUtils.multiply(XEUtils.toNumber(value), 1e3);
+          break;
+        case "tenThousand":
+          value = XEUtils.multiply(XEUtils.toNumber(value), 1e4);
+          break;
+      }
+      return value;
+    }
     const compClickable = computed(() => {
       if (props.disabled || props.readonly) {
         return false;
@@ -85,18 +131,44 @@ const _sfc_main = {
     const handleInput = (e) => {
       if (isComposing) return;
       const inputElement = e.target;
-      recordCursor(inputElement);
-      inputElement.value = textFormatter4Input(
-        inputElement.value,
-        props.dataFormatter
-      );
-      setCursor(inputElement);
+      switch (props.dataFormatter) {
+        case "money(yuan)":
+        case "money(wanyuan)":
+        case "money(yi)":
+          inputElement.value = filterNumberDecimal(inputElement.value, 2);
+          break;
+        case "percent":
+        case "thousand":
+        case "tenThousand":
+          inputElement.value = filterNumberDecimal(inputElement.value, 6);
+          break;
+      }
+      console.log("🚀 ~ handleInput ~ inputElement.value:", inputElement.value);
+      textValue.value = inputElement.value;
       const unformattedValue = reverseTextFormatter(
         inputElement.value,
         props.dataFormatter
       );
       compValue.value = unformattedValue;
     };
+    function filterNumberDecimal(value, decimalCount) {
+      if (!value) {
+        return value;
+      }
+      let str = String(value).replace(/[^\d.]/g, "");
+      const dotIndex = str.indexOf(".");
+      if (dotIndex > -1) {
+        const left = str.slice(0, dotIndex + 1);
+        const right = str.slice(dotIndex + 1).replace(/\./g, "");
+        str = left + right;
+      }
+      const arr = str.split(".");
+      arr[0] = arr[0].replace(/\D/g, "");
+      if (arr.length > 1 && decimalCount !== void 0) {
+        arr[1] = arr[1].slice(0, decimalCount);
+      }
+      return arr.join(".");
+    }
     const handleCompositionStart = () => {
       isComposing = true;
     };
@@ -106,39 +178,78 @@ const _sfc_main = {
     };
     const doSomethingFunction = (e) => {
       const inputElement = e.target;
-      recordCursor(inputElement);
-      inputElement.value = textFormatter4Input(
-        inputElement.value,
-        props.dataFormatter
-      );
-      setCursor(inputElement);
+      switch (props.dataFormatter) {
+        case "money(yuan)":
+        case "money(wanyuan)":
+        case "money(yi)":
+          inputElement.value = filterNumberDecimal(inputElement.value, 2);
+          break;
+        case "percent":
+        case "thousand":
+        case "tenThousand":
+          inputElement.value = filterNumberDecimal(inputElement.value, 6);
+          break;
+      }
+      textValue.value = inputElement.value;
       const unformattedValue = reverseTextFormatter(
         inputElement.value,
         props.dataFormatter
       );
       compValue.value = unformattedValue;
     };
+    function clickEllipsis() {
+      nextTick(() => {
+        const dom = document.getElementById(props.compId);
+        const labelDom = dom == null ? void 0 : dom.querySelector(".fec-field-ellipsis");
+        if (labelDom) {
+          let height = labelDom.offsetHeight + 20;
+          refreshGridLayoutItemHeight(props.compId, height);
+        }
+      });
+    }
     return (_ctx, _cache) => {
+      const _component_van_icon = Icon;
+      const _component_van_text_ellipsis = TextEllipsis;
       const _component_van_field = Field;
+      const _component_van_popup = Popup;
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(_component_van_field, mergeProps(_ctx.$attrs, {
           type: _ctx.$attrs.type == "number" ? "text" : _ctx.$attrs.type,
+          placeholder: _ctx.$attrs.realPlaceholder,
           modelValue: unref(textValue),
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(textValue) ? textValue.value = $event : null),
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(textValue) ? textValue.value = $event : null),
           maxlength: unref(realMaxLength),
           disabled: __props.disabled,
           readonly: __props.readonly,
           clearable: "",
           clickable: unref(compClickable),
           "clear-trigger": "focus",
-          onClick: _cache[1] || (_cache[1] = ($event) => !__props.disabled && emit("openPicker")),
+          onClick: _cache[2] || (_cache[2] = ($event) => !__props.disabled && emit("openPicker")),
           ref_key: "fieldInputRef",
           ref: fieldInputRef,
           onInput: handleInput,
           onCompositionstart: handleCompositionStart,
           onCompositionend: handleCompositionEnd,
-          "input-align": "right"
-        }), createSlots({ _: 2 }, [
+          "input-align": "right",
+          rules: __props.rules
+        }), createSlots({
+          label: withCtx(() => {
+            var _a;
+            return [
+              ((_a = _ctx.$attrs.tooltip) == null ? void 0 : _a.trim()) ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => showTooltipPopup.value = true, ["stop"]))
+              }, [
+                createTextVNode(toDisplayString(_ctx.$attrs.label) + " ", 1),
+                createVNode(_component_van_icon, {
+                  name: "question-o",
+                  class: "tooltip-icon"
+                })
+              ])) : (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.$attrs.label), 1))
+            ];
+          }),
+          _: 2
+        }, [
           renderList(_ctx.$slots, (item, key) => {
             return {
               name: key,
@@ -150,21 +261,45 @@ const _sfc_main = {
           __props.disabled ? {
             name: "input",
             fn: withCtx(() => [
-              createElementVNode("div", null, toDisplayString(unref(textValue)), 1)
+              _ctx.$attrs.type == "textarea" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                createVNode(_component_van_text_ellipsis, {
+                  class: "fec-field-ellipsis",
+                  rows: "4",
+                  content: unref(textValue),
+                  "expand-text": "展开",
+                  "collapse-text": "收起",
+                  onClickAction: clickEllipsis
+                }, null, 8, ["content"])
+              ])) : (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(textValue)), 1))
             ]),
             key: "0"
           } : void 0,
-          __props.showUnit && unref(unit) ? {
+          __props.suffix || unref(unit) ? {
             name: "button",
             fn: withCtx(() => [
-              createTextVNode(toDisplayString(unref(unit)), 1)
+              createTextVNode(toDisplayString(__props.suffix || unref(unit)), 1)
             ]),
             key: "1"
           } : void 0
-        ]), 1040, ["type", "modelValue", "maxlength", "disabled", "readonly", "clickable"]),
+        ]), 1040, ["type", "placeholder", "modelValue", "maxlength", "disabled", "readonly", "clickable", "rules"]),
+        createVNode(_component_van_popup, {
+          show: unref(showTooltipPopup),
+          "onUpdate:show": _cache[3] || (_cache[3] = ($event) => isRef(showTooltipPopup) ? showTooltipPopup.value = $event : null),
+          position: "bottom",
+          round: "",
+          style: { minHeight: "100px" }
+        }, {
+          default: withCtx(() => {
+            var _a;
+            return [
+              createElementVNode("div", _hoisted_4, toDisplayString((_a = _ctx.$attrs.tooltip) == null ? void 0 : _a.trim()), 1)
+            ];
+          }),
+          _: 1
+        }, 8, ["show"]),
         withDirectives(createElementVNode("input", {
           type: "hidden",
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(compValue) ? compValue.value = $event : null)
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(compValue) ? compValue.value = $event : null)
         }, null, 512), [
           [vModelText, unref(compValue)]
         ]),

package/es/packages/mobile/src/components/form/fieldArea/FieldArea.vue.mjs

@@ -81,12 +81,13 @@ const _sfc_main = {
     const showPicker = ref(false);
     const emit = __emit;
     const pickerValue = computed(() => {
-      const value = props.modelValue.split("/");
+      var _a;
+      const value = ((_a = props.modelValue) == null ? void 0 : _a.split("/")) || [];
       return value[value.length - 1];
     });
     function getDisplayValue(options, fieldNames, modelValue) {
       const { text, value, children } = fieldNames;
-      const values = modelValue.split("/");
+      const values = (modelValue == null ? void 0 : modelValue.split("/")) || [];
       const displayValues = [];
       function findValueInOptions(currentOptions, targetValue) {
         for (const option of currentOptions) {

package/es/packages/mobile/src/components/form/fieldCalendarPicker/FieldCalendarPicker.vue.mjs

@@ -60,6 +60,7 @@ const _sfc_main = {
     const emit = __emit;
     const defaultDate = computed({
       get: () => {
+        var _a, _b;
         if (!props.modelValue) {
           return null;
         }
@@ -71,23 +72,22 @@ const _sfc_main = {
           }
         } else if (props.calendarType == "multiple") {
           try {
-            return props.modelValue.map(
-              (value) => hooks(value, props.valueFormat).toDate()
-            );
+            return (_a = props.modelValue) == null ? void 0 : _a.split(",").map((value) => hooks(value, props.valueFormat).toDate());
           } catch (error) {
             return [/* @__PURE__ */ new Date()];
           }
         } else if (props.calendarType == "range") {
           try {
-            return props.modelValue.map(
-              (value) => hooks(value, props.valueFormat).toDate()
-            );
+            return (_b = props.modelValue) == null ? void 0 : _b.split(",").map((value) => hooks(value, props.valueFormat).toDate());
           } catch (error) {
             return [];
           }
         }
       },
       set: (val) => {
+        if (Array.isArray(val)) {
+          val = val.join(",");
+        }
         emit("update:modelValue", val);
       }
     });
@@ -103,16 +103,14 @@ const _sfc_main = {
             props.textFormat
           );
         } else if (props.calendarType == "multiple") {
-          if (Array.isArray(value)) {
-            fieldTextValue.value = `选择了 ${value.length} 个日期`;
-          }
+          value = (value == null ? void 0 : value.split(",")) || [];
+          fieldTextValue.value = `选择了 ${value.length} 个日期`;
         } else if (props.calendarType == "range") {
-          if (Array.isArray(value)) {
-            const [start, end] = value;
-            fieldTextValue.value = `${hooks(start, props.valueFormat).format(
-              props.textFormat
-            )} 至 ${hooks(end, props.valueFormat).format(props.textFormat)}`;
-          }
+          value = (value == null ? void 0 : value.split(",")) || [];
+          const [start, end] = value;
+          fieldTextValue.value = `${hooks(start, props.valueFormat).format(
+            props.textFormat
+          )} 至 ${hooks(end, props.valueFormat).format(props.textFormat)}`;
         }
       },
       { immediate: true }

package/es/packages/mobile/src/components/form/fieldCascaderPicker/fieldCascaderPicker.vue.mjs

@@ -9,9 +9,9 @@
 /* empty css                                                     */
 /* empty css                                                    */
 /* empty css                                                         */
-import { useAttrs, ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
+import { useAttrs, computed, ref, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
 import { MobileField } from "../field/index.mjs";
-import { getTreeOptions } from "../../../utils/optionUtil.mjs";
+import "../../../utils/optionUtil.mjs";
 import { Cascader } from "../../../../../../node_modules/vant/es/cascader/index.mjs";
 import { Popup } from "../../../../../../node_modules/vant/es/popup/index.mjs";
 import { Icon } from "../../../../../../node_modules/vant/es/icon/index.mjs";
@@ -47,14 +47,14 @@ const _sfc_main = {
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const attrs = useAttrs();
-    const finalOptions = ref([]);
-    getTreeOptions({
-      ...attrs,
-      staticOptions: props.treeOptions,
-      optionsFieldNames: props.treeOptionsFieldNames
-    }).then((data) => {
-      finalOptions.value = clearEmptyChildren(data);
+    useAttrs();
+    const finalOptions = computed(() => {
+      if (!props.optionConfig) return [];
+      const optionList = props.optionConfig.options || [];
+      if (optionList.length > 0) {
+        return clearEmptyChildren(optionList);
+      }
+      return optionList;
     });
     function clearEmptyChildren(data) {
       if (typeof data === "object" && data !== null) {

package/es/packages/mobile/src/components/form/fieldCheckbox/FieldCheckbox.vue.mjs

@@ -1,8 +1,7 @@
-import { getCurrentInstance, useAttrs, ref, watch, computed, createBlock, openBlock, unref, mergeProps, isRef, withCtx, createElementBlock, toDisplayString } from "vue";
+import { getCurrentInstance, useAttrs, computed, createBlock, openBlock, unref, mergeProps, isRef, withCtx, createElementBlock, toDisplayString } from "vue";
 import { MobileField } from "../field/index.mjs";
-import { getOptions } from "../../../utils/optionUtil.mjs";
+import "../../../utils/optionUtil.mjs";
 import { MobileCheckboxGroup } from "../checkboxGroup/index.mjs";
-import { cloneDeep } from "../../../utils/common.mjs";
 const _hoisted_1 = { key: 1 };
 const _sfc_main = {
   __name: "FieldCheckbox",
@@ -36,28 +35,13 @@ const _sfc_main = {
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const currentInstance = getCurrentInstance();
-    const ctx = currentInstance.proxy;
+    currentInstance.proxy;
     const props = __props;
     useAttrs();
-    const finalOptions = ref([]);
-    watch(
-      () => cloneDeep(props.optionConfig),
-      (val) => {
-        getOptions({
-          ctx,
-          dataSources: props.dataSources,
-          formData: props.formData,
-          fields: props.fields,
-          ...props.optionConfig
-        }).then((data) => {
-          finalOptions.value = data;
-        });
-      },
-      {
-        deep: true,
-        immediate: true
-      }
-    );
+    const finalOptions = computed(() => {
+      if (!props.optionConfig) return [];
+      return props.optionConfig.options || [];
+    });
     const emit = __emit;
     const compValue = computed({
       get: () => {

package/es/packages/mobile/src/components/form/fieldDatePicker/FieldDatePicker.vue.mjs

@@ -11,7 +11,7 @@
 /* empty css                                                    */
 /* empty css                                                       */
 /* empty css                                                             */
-import { ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
+import { ref, computed, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
 import { MobileField } from "../field/index.mjs";
 import hooks from "../../../../../../node_modules/moment/dist/moment.mjs";
 import { parseDateFormatter } from "../../../utils/dateUtil.mjs";
@@ -25,14 +25,6 @@ const _sfc_main = {
       type: String,
       default: ""
     },
-    // textFormat: {
-    //   type: String,
-    //   default: "YYYY-MM-DD",
-    // },
-    // valueFormat: {
-    //   type: String,
-    //   default: "YYYYMMDD",
-    // },
     dateColumnsType: {
       type: String,
       default: "year,month,day"
@@ -55,19 +47,14 @@ const _sfc_main = {
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const fieldTextValue = ref("");
     const showPicker = ref(false);
     const emit = __emit;
-    let textFormat = parseDateFormatter(
-      props.dateTextFormat,
-      props.dateColumnsType
-    );
-    let valueFormat = parseDateFormatter("0", props.dateColumnsType);
     const pickerValue = computed(() => {
       let date;
       if (!props.modelValue) {
         date = hooks();
       } else {
+        let valueFormat = parseDateFormatter("0", props.dateColumnsType);
         date = hooks(props.modelValue, valueFormat);
       }
       const year = date.year();
@@ -97,18 +84,19 @@ const _sfc_main = {
       }
       return option;
     };
-    watch(
-      () => props.modelValue,
-      (value) => {
-        if (!value) {
-          fieldTextValue.value = "";
-          return;
-        }
-        fieldTextValue.value = hooks(value, valueFormat).format(textFormat);
-      },
-      { immediate: true }
-    );
+    const fieldTextValue = computed(() => {
+      if (!props.modelValue) {
+        return "";
+      }
+      let textFormat = parseDateFormatter(
+        props.dateTextFormat,
+        props.dateColumnsType
+      );
+      let valueFormat = parseDateFormatter("0", props.dateColumnsType);
+      return hooks(props.modelValue, valueFormat).format(textFormat);
+    });
     const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
+      let valueFormat = parseDateFormatter("0", props.dateColumnsType);
       const val = hooks(
         `${selectedValues[0]}${selectedValues[1]}${selectedValues[2]}`,
         "YYYYMMDD"

package/es/packages/mobile/src/components/form/fieldDateTimePicker/FieldDateTimePicker.vue.mjs

@@ -11,7 +11,7 @@
 /* empty css                                                       */
 /* empty css                                                             */
 /* empty css                                                        */
-import { ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
+import { ref, computed, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
 import { MobileField } from "../field/index.mjs";
 import hooks from "../../../../../../node_modules/moment/dist/moment.mjs";
 import { parseDateFormatter } from "../../../utils/dateUtil.mjs";
@@ -50,12 +50,10 @@ const _sfc_main = {
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const fieldTextValue = ref("");
     const showPicker = ref(false);
     const emit = __emit;
-    let textFormat = parseDateFormatter(props.dateTimeTextFormat, dateColumnsType);
-    let valueFormat = parseDateFormatter("0", dateColumnsType);
     const currentDateTime = computed(() => {
+      let valueFormat = parseDateFormatter("0", dateColumnsType);
       let date;
       if (!props.modelValue) {
         date = hooks();
@@ -92,18 +90,19 @@ const _sfc_main = {
       }
       return option;
     };
-    watch(
-      () => props.modelValue,
-      (value) => {
-        if (!value) {
-          fieldTextValue.value = "";
-          return;
-        }
-        fieldTextValue.value = hooks(value, valueFormat).format(textFormat);
-      },
-      { immediate: true }
-    );
+    const fieldTextValue = computed(() => {
+      if (!props.modelValue) {
+        return "";
+      }
+      let textFormat = parseDateFormatter(
+        props.dateTimeTextFormat,
+        dateColumnsType
+      );
+      let valueFormat = parseDateFormatter("0", dateColumnsType);
+      return hooks(props.modelValue, valueFormat).format(textFormat);
+    });
     const onConfirm = () => {
+      let valueFormat = parseDateFormatter("0", dateColumnsType);
       const date = currentDateTime.value.dateValue;
       const time = currentDateTime.value.timeValue;
       const val = hooks(

package/es/packages/mobile/src/components/form/fieldIndustry/FieldIndustry.vue.mjs

@@ -81,16 +81,13 @@ const _sfc_main = {
     const showPicker = ref(false);
     const emit = __emit;
     const pickerValue = computed(() => {
-      const value = props.modelValue;
-      let val = value[value.length - 1];
-      if (val.length > 1) {
-        return val.substring(1);
-      }
-      return val;
+      var _a;
+      const value = ((_a = props.modelValue) == null ? void 0 : _a.split(",")) || [];
+      return value[value.length - 1];
     });
     function getDisplayValue(options, fieldNames, modelValue) {
       const { text, value, children } = fieldNames;
-      const values = modelValue;
+      const values = modelValue || [];
       const displayValues = [];
       function findValueInOptions(currentOptions, targetValue) {
         for (const option of currentOptions) {
@@ -126,18 +123,8 @@ const _sfc_main = {
       );
     });
     const onFinish = ({ selectedOptions }) => {
-      const value = selectedOptions.map(
-        (option) => option[props.treeOptionsFieldNames.value]
-      );
-      const realValue = [];
-      for (let i = 0; i < value.length; i++) {
-        if (i > 0) {
-          realValue.push(value[0] + value[i]);
-        } else {
-          realValue.push(value[i]);
-        }
-      }
-      emit("update:modelValue", realValue);
+      const value = selectedOptions.map((option) => option[props.treeOptionsFieldNames.value]).join(",");
+      emit("update:modelValue", value);
       showPicker.value = false;
     };
     return (_ctx, _cache) => {