@longhongguo/form-create-ant-design-vue 3.3.28 → 3.3.31

package/src/components/CusStoreSelect/index.vue

@@ -1,402 +1,407 @@
-<template>
-  <div @click="handleClick">
-    <CusSelect
-      :model-value="modelValue"
-      :options="mergedOptions"
-      v-model:source-items="sourceItems"
-      :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
-    },
-    // 额外查询参数
-    extraQuery: {
-      type: Object,
-      default: () => ({})
-    },
-    extraQueryFn: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  emits: ['update:modelValue', 'change'],
-  data() {
-    return {
-      // 消息ID计数器，用于标识每次请求
-      messageId: 0,
-      // 存储待处理的回调函数
-      pendingCallbacks: {},
-      // 内部维护的选项列表（合并父窗口返回的源对象）
-      internalOptions: [],
-      sourceItems: []
-    }
-  },
-  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) {
-        valueToSend = currentArrayValue
-      }
-      const serializedCurrentValue =
-        valueToSend === null || valueToSend === undefined
-          ? null
-          : this.serializeForPostMessage(valueToSend)
-
-      // 发送消息给父窗口，请求打开门店选择弹窗
-      const extraQuery = {
-        ...this.extraQuery
-      }
-      if (this.extraQueryFn) {
-        Object.assign(extraQuery, this.extraQueryFn())
-      }
-      const message = {
-        type: 'OPEN_STORE_SELECT',
-        field: this.field || '',
-        multiple: this.multiple,
-        currentValue: serializedCurrentValue,
-        valueKey: this.valueKey,
-        labelKey: this.labelKey,
-        extraQuery,
-        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.sourceItems = 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.sourceItems && this.sourceItems.length > 0
-          ? this.multiple
-            ? this.sourceItems
-            : this.sourceItems[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>
+<template>
+  <div @click="handleClick">
+    <CusSelect
+      :model-value="modelValue"
+      :options="mergedOptions"
+      v-model:source-items="sourceItems"
+      :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
+    },
+    // 额外查询参数
+    extraQuery: {
+      type: Object,
+      default: () => ({})
+    },
+    extraQueryFn: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  data() {
+    return {
+      // 消息ID计数器，用于标识每次请求
+      messageId: 0,
+      // 存储待处理的回调函数
+      pendingCallbacks: {},
+      // 内部维护的选项列表（合并父窗口返回的源对象）
+      internalOptions: [],
+      sourceItems: []
+    }
+  },
+  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
+      }
+
+      // 如果处于预览/只读模式，不处理点击事件
+      if (this.formCreateInject && this.formCreateInject.preview) {
+        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) {
+        valueToSend = currentArrayValue
+      }
+      const serializedCurrentValue =
+        valueToSend === null || valueToSend === undefined
+          ? null
+          : this.serializeForPostMessage(valueToSend)
+
+      // 发送消息给父窗口，请求打开门店选择弹窗
+      const extraQuery = {
+        ...this.extraQuery
+      }
+      if (this.extraQueryFn) {
+        Object.assign(extraQuery, this.extraQueryFn())
+      }
+      const message = {
+        type: 'OPEN_STORE_SELECT',
+        field: this.field || '',
+        multiple: this.multiple,
+        currentValue: serializedCurrentValue,
+        valueKey: this.valueKey,
+        labelKey: this.labelKey,
+        extraQuery,
+        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.sourceItems = 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.sourceItems && this.sourceItems.length > 0
+          ? this.multiple
+            ? this.sourceItems
+            : this.sourceItems[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>