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

package/src/components/CusStoreSelect/index.vue

@@ -1,91 +1,399 @@
-<template>
-  <div>
-    <CusSelect
-      :model-value="modelValue"
-      :options="options"
-      :multiple="multiple"
-      :max-tag-count="maxTagCount"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :style="style"
-      :valueKey="valueKey"
-      :labelKey="labelKey"
-      :allowClear="allowClear"
-      @update:model-value="handleUpdate"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import CusSelect from '../CusSelect/index.vue'
-
-export default defineComponent({
-  name: 'CusStoreSelect',
-  components: {
-    CusSelect
-  },
-  props: {
-    // 当前值：单个时为字符串/数字，多个时为数组（支持 v-model）
-    modelValue: {
-      type: [String, Number, Array],
-      default: null
-    },
-    // 选项列表
-    options: {
-      type: Array,
-      default: () => []
-    },
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    // 最多显示的 tag 数量（多选模式下有效）
-    maxTagCount: {
-      type: Number,
-      default: undefined // 不限制时显示所有
-    },
-    // 占位符
-    placeholder: {
-      type: String,
-      default: '请选择'
-    },
-    // 是否禁用样式
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    // 自定义样式
-    style: {
-      type: [String, Object],
-      default: () => ({ width: '100%' })
-    },
-    // 选项的 value 字段名
-    valueKey: {
-      type: String,
-      default: 'value'
-    },
-    // 选项的 label 字段名
-    labelKey: {
-      type: String,
-      default: 'label'
-    },
-    // 是否允许清除
-    allowClear: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'change'],
-  methods: {
-    handleUpdate(value) {
-      this.$emit('update:modelValue', value)
-    },
-    handleChange(value) {
-      this.$emit('change', value)
-    }
-  }
-})
-</script>
+<template>
+  <div @click="handleClick">
+    <CusSelect
+      :model-value="modelValue"
+      :options="mergedOptions"
+      :multiple="multiple"
+      :max-tag-count="maxTagCount"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :style="style"
+      :valueKey="valueKey"
+      :labelKey="labelKey"
+      :allowClear="allowClear"
+      :bordered="bordered"
+      @update:model-value="handleUpdate"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import CusSelect from '../CusSelect/index.vue'
+
+export default defineComponent({
+  name: 'CusStoreSelect',
+  components: {
+    CusSelect
+  },
+  props: {
+    // form-create 注入的对象，包含 API 等
+    formCreateInject: {
+      type: Object,
+      default: null
+    },
+    // 当前值：统一使用数组格式（支持 v-model）
+    // 单选时：[value] 或 []
+    // 多选时：[value1, value2, ...] 或 []
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    // 选项列表
+    options: {
+      type: Array,
+      default: () => []
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 最多显示的 tag 数量（多选模式下有效）
+    maxTagCount: {
+      type: Number,
+      default: undefined // 不限制时显示所有
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 是否禁用样式
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 自定义样式
+    style: {
+      type: [String, Object],
+      default: () => ({ width: '100%' })
+    },
+    // 选项的 value 字段名
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    // 选项的 label 字段名
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    // 是否允许清除
+    allowClear: {
+      type: Boolean,
+      default: false
+    },
+    // 字段名，用于跨窗口通信时标识字段
+    field: {
+      type: String,
+      default: ''
+    },
+    // 是否有边框
+    bordered: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  data() {
+    return {
+      // 消息ID计数器，用于标识每次请求
+      messageId: 0,
+      // 存储待处理的回调函数
+      pendingCallbacks: {},
+      // 内部维护的选项列表（合并父窗口返回的源对象）
+      internalOptions: []
+    }
+  },
+  computed: {
+    // 合并内部选项和外部传入的选项
+    mergedOptions() {
+      // 如果内部有选项，优先使用内部选项
+      if (this.internalOptions.length > 0) {
+        // 合并去重：根据 valueKey 去重，保留内部选项（后添加的优先）
+        const optionMap = new Map()
+        // 先添加外部选项
+        this.options.forEach((opt) => {
+          const value = typeof opt === 'object' ? opt[this.valueKey] : opt
+          optionMap.set(value, opt)
+        })
+        // 再添加内部选项（会覆盖相同 value 的选项）
+        this.internalOptions.forEach((opt) => {
+          const value = typeof opt === 'object' ? opt[this.valueKey] : opt
+          optionMap.set(value, opt)
+        })
+        return Array.from(optionMap.values())
+      }
+      return this.options
+    }
+  },
+  watch: {
+    // 监听外部 options 变化，初始化内部选项列表
+    options: {
+      immediate: true,
+      handler(newOptions) {
+        // 如果内部选项为空，且外部有选项，初始化内部选项
+        if (
+          this.internalOptions.length === 0 &&
+          Array.isArray(newOptions) &&
+          newOptions.length > 0
+        ) {
+          this.internalOptions = [...newOptions]
+        }
+      }
+    }
+  },
+  mounted() {
+    // 监听父窗口返回的消息
+    window.addEventListener('message', this.handleMessage)
+  },
+  beforeUnmount() {
+    // 组件销毁时移除事件监听
+    window.removeEventListener('message', this.handleMessage)
+  },
+  methods: {
+    // 序列化数据，确保可以被 postMessage 发送
+    // postMessage 使用结构化克隆算法，无法克隆 Vue 响应式代理对象
+    serializeForPostMessage(data) {
+      // 处理 null 和 undefined
+      if (data === null || data === undefined) {
+        return data
+      }
+
+      try {
+        // 使用 JSON 序列化和反序列化来创建可克隆的副本
+        // 这会移除 Vue 响应式代理、函数、Symbol 等不可序列化的内容
+        return JSON.parse(JSON.stringify(data))
+      } catch (error) {
+        console.warn('CusStoreSelect: 数据序列化失败，尝试递归处理', error)
+
+        // 如果 JSON 序列化失败（可能是循环引用），尝试递归处理
+        if (Array.isArray(data)) {
+          // 空数组直接返回
+          if (data.length === 0) {
+            return []
+          }
+          // 递归处理数组中的每个元素
+          return data.map((item) => this.serializeForPostMessage(item))
+        }
+
+        if (typeof data === 'object') {
+          const result = {}
+          for (const key in data) {
+            if (Object.prototype.hasOwnProperty.call(data, key)) {
+              try {
+                result[key] = this.serializeForPostMessage(data[key])
+              } catch (e) {
+                // 忽略无法序列化的属性，避免整个序列化失败
+                console.warn(`CusStoreSelect: 跳过无法序列化的属性: ${key}`, e)
+              }
+            }
+          }
+          return result
+        }
+
+        // 基本类型（string, number, boolean）直接返回
+        return data
+      }
+    },
+    handleClick() {
+      // 如果禁用，不处理
+      if (this.disabled) {
+        return
+      }
+
+      // 生成唯一消息ID
+      const msgId = `store-select-${
+        this.field || 'default'
+      }-${Date.now()}-${++this.messageId}`
+
+      // 序列化所有需要传递的数据，确保可以被 postMessage 发送
+      // postMessage 无法发送 Vue 响应式代理对象，必须序列化
+      // 获取当前值，确保是对象数组格式
+      const currentArrayValue = Array.isArray(this.modelValue)
+        ? this.modelValue
+        : []
+      // 从对象数组中提取 value 值，用于发送给父窗口
+      // 单选时发送第一个对象的 value，多选时发送所有对象的 value 数组
+      let valueToSend = null
+      if (currentArrayValue.length > 0) {
+        if (this.multiple) {
+          // 多选：发送 value 数组
+          valueToSend = currentArrayValue.map((item) => {
+            if (typeof item === 'object' && item !== null) {
+              return item[this.valueKey] || item.value
+            }
+            return item
+          })
+        } else {
+          // 单选：发送第一个对象的 value
+          const firstItem = currentArrayValue[0]
+          if (typeof firstItem === 'object' && firstItem !== null) {
+            valueToSend = firstItem[this.valueKey] || firstItem.value
+          } else {
+            valueToSend = firstItem
+          }
+        }
+      }
+      const serializedCurrentValue =
+        valueToSend === null || valueToSend === undefined
+          ? null
+          : this.serializeForPostMessage(valueToSend)
+
+      // 发送消息给父窗口，请求打开门店选择弹窗
+      const message = {
+        type: 'OPEN_STORE_SELECT',
+        field: this.field || '',
+        multiple: this.multiple,
+        currentValue: serializedCurrentValue,
+        valueKey: this.valueKey,
+        labelKey: this.labelKey,
+        messageId: msgId
+      }
+
+      // 发送到父窗口（支持 iframe 场景）
+      if (window.parent && window.parent !== window) {
+        try {
+          window.parent.postMessage(message, '*')
+        } catch (error) {
+          console.error('CusStoreSelect: 发送消息失败', error)
+        }
+      } else {
+        // 如果不在 iframe 中，也可以发送到当前窗口（用于测试）
+        console.warn(
+          'CusStoreSelect: 当前不在 iframe 环境中，无法向父窗口发送消息'
+        )
+      }
+
+      // 存储回调，等待父窗口返回结果
+      this.pendingCallbacks[msgId] = (value, sourceItems) => {
+        // 优先使用 sourceItems（源对象数组），如果没有则根据 value 和 options 构建
+        if (
+          sourceItems &&
+          Array.isArray(sourceItems) &&
+          sourceItems.length > 0
+        ) {
+          // 合并到内部选项列表
+          this.mergeOptions(sourceItems)
+        }
+
+        this.handleUpdate(value)
+        this.handleChange(value)
+      }
+    },
+    handleMessage(event) {
+      // 验证消息来源（可选，根据实际需求调整）
+      // if (event.origin !== 'expected-origin') return
+
+      const data = event.data
+
+      // 检查是否是门店选择返回的消息
+      if (data && data.type === 'STORE_SELECT_RESULT') {
+        const { field, value, sourceItems, messageId } = data
+
+        // 验证字段名是否匹配
+        if (field !== this.field) {
+          return
+        }
+
+        // 查找对应的回调函数
+        const callback = this.pendingCallbacks[messageId]
+        if (callback) {
+          // 执行回调，更新值并传递源对象
+          // sourceItems: 源对象数组，包含完整的选项信息
+          // 单选时：[{ value: '1001', label: '门店1', ... }]
+          // 多选时：[{ value: '1001', label: '门店1', ... }, { value: '1002', label: '门店2', ... }]
+          callback(value, sourceItems)
+          // 清理已处理的回调
+          delete this.pendingCallbacks[messageId]
+        }
+      }
+    },
+    // 合并选项到内部选项列表
+    mergeOptions(newItems) {
+      if (!Array.isArray(newItems) || newItems.length === 0) {
+        return
+      }
+
+      // 创建选项映射，用于去重
+      const optionMap = new Map()
+
+      // 先将现有内部选项添加到映射
+      this.internalOptions.forEach((opt) => {
+        const value = typeof opt === 'object' ? opt[this.valueKey] : opt
+        optionMap.set(value, opt)
+      })
+
+      // 再添加新选项（会覆盖相同 value 的选项）
+      newItems.forEach((opt) => {
+        const value = typeof opt === 'object' ? opt[this.valueKey] : opt
+        optionMap.set(value, opt)
+      })
+
+      // 更新内部选项列表
+      this.internalOptions = Array.from(optionMap.values())
+    },
+    handleUpdate(value) {
+      this.$emit('update:modelValue', value)
+      // 值更新后触发校验
+      this.triggerValidate()
+    },
+    handleChange(value) {
+      this.$emit(
+        'change',
+        value,
+        this.internalOptions && this.internalOptions.length > 0
+          ? this.multiple
+            ? this.internalOptions
+            : this.internalOptions[0]
+          : this.multiple
+          ? []
+          : null
+      )
+    },
+    // 触发字段校验
+    triggerValidate() {
+      // 使用 nextTick 确保值已经更新完成
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          try {
+            // 方式1：通过 formCreateInject 中的 API 触发校验
+            if (
+              this.formCreateInject &&
+              this.formCreateInject.api &&
+              this.field
+            ) {
+              this.formCreateInject.api.validateField(this.field).catch(() => {
+                // 校验失败时静默处理，错误会通过 form-item 显示
+              })
+              return
+            }
+
+            // 方式2：通过组件实例查找父组件中的 form-create API
+            let parent = this.$parent
+            while (parent) {
+              if (
+                parent.$options &&
+                parent.$options.name === 'FormCreate' &&
+                parent.fapi
+              ) {
+                if (this.field && parent.fapi.validateField) {
+                  parent.fapi.validateField(this.field).catch(() => {
+                    // 校验失败时静默处理
+                  })
+                }
+                break
+              }
+              parent = parent.$parent
+            }
+          } catch (error) {
+            console.warn('CusStoreSelect: 触发校验失败', error)
+          }
+        })
+      })
+    }
+  }
+})
+</script>

package/src/parsers/cusStoreSelect.js

@@ -1,17 +1,127 @@
 import { hasProperty } from '@form-create/utils/lib/type'
+import { nextTick } from 'vue'
 
 export default {
   name: 'cusStoreSelect',
   modelField: 'modelValue',
+  // 将 form-create 内部的值转换为对象数组格式
+  toFormValue(value, ctx) {
+    // 组件内部统一使用对象数组格式 [{value, label, ...}]
+    if (value === null || value === undefined || value === '') {
+      return []
+    }
+    if (Array.isArray(value)) {
+      // 确保数组中的每个元素都是对象格式
+      return value.map((item) => {
+        if (
+          typeof item === 'object' &&
+          item !== null &&
+          (item.value !== undefined || item.label !== undefined)
+        ) {
+          // 已经是对象格式
+          return item
+        }
+        // 如果是单个值，需要转换为对象格式（但此时没有 label，会在组件内部处理）
+        return item
+      })
+    }
+    // 单个值转换为数组（组件内部会处理对象转换）
+    return [value]
+  },
+  // 将组件返回的数组格式转换为 form-create 内部格式（可选，保持原值）
+  toValue(formValue, ctx) {
+    // 保持数组格式，不转换
+    return formValue
+  },
   mergeProp(ctx) {
     const props = ctx.prop.props
     // 确保 options 存在
     if (!hasProperty(props, 'options')) {
       props.options = ctx.prop.options || []
     }
+    // 传递字段名到组件，用于跨窗口通信时标识字段
+    if (!hasProperty(props, 'field')) {
+      props.field = ctx.rule.field || ''
+    }
+    // 确保初始值转换为数组格式
+    if (ctx.rule.value !== undefined) {
+      const currentValue = ctx.rule.value
+      if (
+        currentValue === null ||
+        currentValue === undefined ||
+        currentValue === ''
+      ) {
+        ctx.rule.value = []
+      } else if (!Array.isArray(currentValue)) {
+        ctx.rule.value = [currentValue]
+      }
+    }
   },
   render(children, ctx) {
     // 使用默认渲染
-    return ctx.$render.defaultRender(ctx, children)
+    const vnode = ctx.$render.defaultRender(ctx, children)
+
+    // 添加校验触发逻辑：在值变化时触发校验
+    if (vnode && vnode.props && vnode.props.on) {
+      // 保存原始的 update:modelValue 事件处理器（form-create 自动添加的）
+      const originalUpdateModelValue = vnode.props.on['update:modelValue']
+
+      // 创建校验触发函数
+      const triggerValidate = () => {
+        // 延迟触发校验，确保值已经更新完成
+        // 使用多个 nextTick 确保 form-create 内部的值更新流程完成
+        nextTick(() => {
+          nextTick(() => {
+            try {
+              // 方式1：通过 field 名称触发校验（推荐）
+              const fieldName = ctx.rule.field
+              if (fieldName) {
+                ctx.$handle.api.validateField(fieldName).catch(() => {
+                  // 校验失败时静默处理，错误会通过 form-item 显示
+                })
+                return
+              }
+
+              // 方式2：通过字段上下文ID触发校验（备用）
+              const fieldCtx = ctx.$handle.getFieldCtx(ctx.rule.field)
+              if (fieldCtx && fieldCtx.id) {
+                ctx.$handle.$manager.validateField(fieldCtx.id).catch(() => {
+                  // 校验失败时静默处理，错误会通过 form-item 显示
+                })
+              }
+            } catch (error) {
+              // 静默处理错误，避免影响正常流程
+              console.warn('CusStoreSelect: 触发校验失败', error)
+            }
+          })
+        })
+      }
+
+      // 包装 update:modelValue 事件，在值更新后触发校验
+      vnode.props.on['update:modelValue'] = (...args) => {
+        // 先调用原始的事件处理器（form-create 的 onInput，会更新值和触发其他逻辑）
+        if (originalUpdateModelValue) {
+          originalUpdateModelValue(...args)
+        }
+        // 触发校验
+        triggerValidate()
+      }
+
+      // 同时监听 change 事件，确保所有情况下都能触发校验
+      const originalChange = vnode.props.on['change']
+      if (originalChange) {
+        vnode.props.on['change'] = (...args) => {
+          // 先调用原始的 change 处理器
+          originalChange(...args)
+          // 触发校验
+          triggerValidate()
+        }
+      } else {
+        // 如果没有原始的 change 处理器，直接添加
+        vnode.props.on['change'] = triggerValidate
+      }
+    }
+
+    return vnode
   }
 }

package/src/style/index.css

@@ -67,6 +67,27 @@
   box-sizing: border-box;
 }
 
+/* 无边框模式 */
+.fc-cus-select-selector-borderless {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.fc-cus-select:not(.fc-cus-select-disabled):hover
+  .fc-cus-select-selector-borderless {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.fc-cus-select:focus:not(.fc-cus-select-disabled)
+  .fc-cus-select-selector-borderless,
+.fc-cus-select:focus-within:not(.fc-cus-select-disabled)
+  .fc-cus-select-selector-borderless {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
 .fc-cus-select-single .fc-cus-select-selector {
   height: 32px;
   padding: 0 11px;