@longhongguo/form-create-ant-design-vue 3.2.45 → 3.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.45",
+  "version": "3.2.46",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/components/CusSelect/index.vue

@@ -9,7 +9,12 @@
     :style="style"
     :tabindex="disabled ? -1 : 0"
   >
-    <div class="fc-cus-select-selector">
+    <div
+      class="fc-cus-select-selector"
+      :class="{
+        'fc-cus-select-selector-borderless': !bordered
+      }"
+    >
       <span
         v-if="displayValue"
         class="fc-cus-select-selection-item"
@@ -72,7 +77,12 @@
     :style="style"
     :tabindex="disabled ? -1 : 0"
   >
-    <div class="fc-cus-select-selector">
+    <div
+      class="fc-cus-select-selector"
+      :class="{
+        'fc-cus-select-selector-borderless': !bordered
+      }"
+    >
       <div class="fc-cus-select-selection-overflow">
         <!-- 显示的 tags -->
         <div
@@ -176,10 +186,12 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CusSelect',
   props: {
-    // 当前值：单个时为字符串/数字，多个时为数组（支持 v-model）
+    // 当前值：统一使用对象数组格式（支持 v-model）
+    // 单选时：[{value: '1001', label: '门店1'}] 或 []
+    // 多选时：[{value: '1001', label: '门店1'}, {value: '1002', label: '门店2'}] 或 []
     modelValue: {
-      type: [String, Number, Array],
-      default: null
+      type: Array,
+      default: () => []
     },
     // 选项列表
     options: {
@@ -225,50 +237,137 @@ export default defineComponent({
     allowClear: {
       type: Boolean,
       default: false
+    },
+    // 是否有边框
+    bordered: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue', 'change'],
   computed: {
-    // 统一处理值（支持 v-model）
+    // 统一处理值（支持 v-model），确保始终是对象数组格式
     currentValue: {
       get() {
-        return this.modelValue
+        // 确保返回对象数组格式
+        if (!Array.isArray(this.modelValue)) {
+          // 如果是 null、undefined 或空字符串，返回空数组
+          if (
+            this.modelValue === null ||
+            this.modelValue === undefined ||
+            this.modelValue === ''
+          ) {
+            return []
+          }
+          // 如果是单个对象，转换为数组
+          if (typeof this.modelValue === 'object') {
+            return [this.modelValue]
+          }
+          // 如果是单个值，转换为对象数组格式
+          return [
+            { value: this.modelValue, label: this.getLabel(this.modelValue) }
+          ]
+        }
+        // 确保数组中的每个元素都是对象格式
+        return this.modelValue.map((item) => {
+          if (
+            typeof item === 'object' &&
+            item !== null &&
+            (item.value !== undefined || item[this.valueKey] !== undefined)
+          ) {
+            // 已经是对象格式
+            return item
+          }
+          // 如果是单个值，转换为对象格式
+          return {
+            [this.valueKey]: item,
+            [this.labelKey]: this.getLabel(item)
+          }
+        })
       },
       set(val) {
+        // 确保设置的值是对象数组格式
+        let arrayValue = []
+        if (val !== null && val !== undefined) {
+          if (Array.isArray(val)) {
+            // 确保数组中的每个元素都是对象格式
+            arrayValue = val.map((item) => {
+              if (
+                typeof item === 'object' &&
+                item !== null &&
+                (item.value !== undefined || item[this.valueKey] !== undefined)
+              ) {
+                return item
+              }
+              // 单个值转换为对象格式
+              return {
+                [this.valueKey]: item,
+                [this.labelKey]: this.getLabel(item)
+              }
+            })
+          } else if (typeof val === 'object' && val !== null) {
+            // 单个对象转换为数组
+            arrayValue = [val]
+          } else {
+            // 单个值转换为对象数组格式
+            arrayValue = [
+              { [this.valueKey]: val, [this.labelKey]: this.getLabel(val) }
+            ]
+          }
+        }
         // 触发 update:modelValue 事件以支持 v-model
-        this.$emit('update:modelValue', val)
-        this.$emit('change', val)
+        this.$emit('update:modelValue', arrayValue)
+        this.$emit('change', arrayValue)
       }
     },
-    // 是否有值
+    // 是否有值（统一判断数组长度）
     hasValue() {
       const val = this.currentValue
-      if (this.multiple) {
-        return Array.isArray(val) && val.length > 0
-      } else {
-        return val !== null && val !== undefined && val !== ''
-      }
+      return Array.isArray(val) && val.length > 0
     },
-    // 单个模式：显示的值
+    // 单个模式：显示的值对象（从数组中取第一个）
     displayValue() {
       if (!this.hasValue) return null
-      return this.currentValue
+      return this.currentValue[0]
     },
     // 单个模式：显示的标签
     displayLabel() {
       if (!this.displayValue) return ''
-      return this.getLabel(this.displayValue)
+      const item = this.displayValue
+      // 如果是对象格式，直接取 label
+      if (typeof item === 'object' && item !== null) {
+        return (
+          item[this.labelKey] ||
+          item.label ||
+          String(item[this.valueKey] || item.value || '')
+        )
+      }
+      // 如果不是对象，使用 getLabel 方法查找
+      return this.getLabel(item)
     },
-    // 多个模式：所有选中的项（包含 label 的对象数组）
+    // 多个模式：所有选中的项（直接使用对象数组）
     allSelectedItems() {
       const val = this.currentValue
-      if (!this.multiple || !Array.isArray(val) || val.length === 0) {
+      if (!Array.isArray(val) || val.length === 0) {
         return []
       }
-      return val.map((v) => ({
-        value: v,
-        label: this.getLabel(v)
-      }))
+      // 直接返回对象数组，确保格式统一
+      return val.map((item) => {
+        if (typeof item === 'object' && item !== null) {
+          return {
+            value: item[this.valueKey] || item.value,
+            label:
+              item[this.labelKey] ||
+              item.label ||
+              String(item[this.valueKey] || item.value || '')
+          }
+        }
+        // 如果不是对象，转换为对象格式
+        return {
+          value: item,
+          label: this.getLabel(item)
+        }
+      })
     },
     // 多个模式：显示的项（根据 maxTagCount 限制）
     displayItems() {
@@ -311,13 +410,20 @@ export default defineComponent({
       // 如果找不到对应的 option，直接显示 value
       return String(val)
     },
-    // 删除单个项（多选模式）
+    // 删除单个项
     removeItem(itemValue, event) {
       if (this.disabled) return
       event.stopPropagation()
       const val = this.currentValue
-      if (this.multiple && Array.isArray(val)) {
-        const newValue = val.filter((v) => v !== itemValue)
+      if (Array.isArray(val)) {
+        // 根据 value 来过滤，支持对象数组格式
+        const newValue = val.filter((item) => {
+          if (typeof item === 'object' && item !== null) {
+            const currentItemValue = item[this.valueKey] || item.value
+            return currentItemValue !== itemValue
+          }
+          return item !== itemValue
+        })
         this.currentValue = newValue
       }
     },
@@ -325,11 +431,8 @@ export default defineComponent({
     clearValue(event) {
       if (this.disabled) return
       event.stopPropagation()
-      if (this.multiple) {
-        this.currentValue = []
-      } else {
-        this.currentValue = null
-      }
+      // 统一设置为空数组
+      this.currentValue = []
     }
   }
 })