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

package/src/components/CusSelect/index.vue

@@ -0,0 +1,336 @@
+<template>
+  <!-- 单个展示模式 -->
+  <div
+    v-if="!multiple"
+    class="fc-cus-select fc-cus-select-single"
+    :class="{
+      'fc-cus-select-disabled': disabled
+    }"
+    :style="style"
+    :tabindex="disabled ? -1 : 0"
+  >
+    <div class="fc-cus-select-selector">
+      <span
+        v-if="displayValue"
+        class="fc-cus-select-selection-item"
+        :title="displayLabel"
+      >
+        {{ displayLabel }}
+      </span>
+      <span v-else class="fc-cus-select-selection-placeholder">
+        {{ placeholder || '请选择' }}
+      </span>
+      <span v-if="showClear" class="fc-cus-select-clear" @click="clearValue">
+        <span
+          role="img"
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+        >
+          <svg
+            focusable="false"
+            data-icon="close-circle"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            aria-hidden="true"
+            fill-rule="evenodd"
+            viewBox="64 64 896 896"
+          >
+            <path
+              d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            ></path>
+          </svg>
+        </span>
+      </span>
+      <span v-else class="fc-cus-select-arrow">
+        <span role="img" aria-label="down" class="anticon anticon-down">
+          <svg
+            focusable="false"
+            data-icon="down"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            aria-hidden="true"
+            viewBox="64 64 896 896"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            ></path>
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+
+  <!-- 多个展示模式 -->
+  <div
+    v-else
+    class="fc-cus-select fc-cus-select-multiple"
+    :class="{
+      'fc-cus-select-disabled': disabled
+    }"
+    :style="style"
+    :tabindex="disabled ? -1 : 0"
+  >
+    <div class="fc-cus-select-selector">
+      <div class="fc-cus-select-selection-overflow">
+        <!-- 显示的 tags -->
+        <div
+          v-for="(item, index) in displayItems"
+          :key="index"
+          class="fc-cus-select-selection-overflow-item"
+          style="opacity: 1"
+        >
+          <span class="fc-cus-select-selection-item" :title="item.label">
+            <span class="fc-cus-select-selection-item-content">{{
+              item.label
+            }}</span>
+            <span
+              class="fc-cus-select-selection-item-remove"
+              @click="removeItem(item.value, $event)"
+            >
+              <span role="img" aria-label="close" class="anticon anticon-close">
+                <svg
+                  focusable="false"
+                  data-icon="close"
+                  width="1em"
+                  height="1em"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  fill-rule="evenodd"
+                  viewBox="64 64 896 896"
+                >
+                  <path
+                    d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                  ></path>
+                </svg>
+              </span>
+            </span>
+          </span>
+        </div>
+
+        <!-- 折叠提示 -->
+        <div
+          v-if="remainingCount > 0"
+          class="fc-cus-select-selection-overflow-item"
+          style="opacity: 1"
+        >
+          <span class="fc-cus-select-selection-item">
+            <span class="fc-cus-select-selection-item-content">
+              +{{ remainingCount }}
+            </span>
+          </span>
+        </div>
+
+        <!-- 空值占位符 -->
+        <span v-if="!hasValue" class="fc-cus-select-selection-placeholder">
+          {{ placeholder || '请选择' }}
+        </span>
+      </div>
+      <span v-if="showClear" class="fc-cus-select-clear" @click="clearValue">
+        <span
+          role="img"
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+        >
+          <svg
+            focusable="false"
+            data-icon="close-circle"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            aria-hidden="true"
+            fill-rule="evenodd"
+            viewBox="64 64 896 896"
+          >
+            <path
+              d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            ></path>
+          </svg>
+        </span>
+      </span>
+      <span v-else class="fc-cus-select-arrow">
+        <span role="img" aria-label="down" class="anticon anticon-down">
+          <svg
+            focusable="false"
+            data-icon="down"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            aria-hidden="true"
+            viewBox="64 64 896 896"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            ></path>
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: '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'],
+  computed: {
+    // 统一处理值（支持 v-model）
+    currentValue: {
+      get() {
+        return this.modelValue
+      },
+      set(val) {
+        // 触发 update:modelValue 事件以支持 v-model
+        this.$emit('update:modelValue', val)
+        this.$emit('change', val)
+      }
+    },
+    // 是否有值
+    hasValue() {
+      const val = this.currentValue
+      if (this.multiple) {
+        return Array.isArray(val) && val.length > 0
+      } else {
+        return val !== null && val !== undefined && val !== ''
+      }
+    },
+    // 单个模式：显示的值
+    displayValue() {
+      if (!this.hasValue) return null
+      return this.currentValue
+    },
+    // 单个模式：显示的标签
+    displayLabel() {
+      if (!this.displayValue) return ''
+      return this.getLabel(this.displayValue)
+    },
+    // 多个模式：所有选中的项（包含 label 的对象数组）
+    allSelectedItems() {
+      const val = this.currentValue
+      if (!this.multiple || !Array.isArray(val) || val.length === 0) {
+        return []
+      }
+      return val.map((v) => ({
+        value: v,
+        label: this.getLabel(v)
+      }))
+    },
+    // 多个模式：显示的项（根据 maxTagCount 限制）
+    displayItems() {
+      const items = this.allSelectedItems
+      if (this.maxTagCount === undefined || this.maxTagCount === null) {
+        return items
+      }
+      return items.slice(0, this.maxTagCount)
+    },
+    // 多个模式：剩余未显示的项数量
+    remainingCount() {
+      if (this.maxTagCount === undefined || this.maxTagCount === null) {
+        return 0
+      }
+      const total = this.allSelectedItems.length
+      return Math.max(0, total - this.maxTagCount)
+    },
+    // 是否显示清除图标
+    showClear() {
+      return this.allowClear && this.hasValue && !this.disabled
+    }
+  },
+  methods: {
+    // 根据 value 查找对应的 option
+    findOptionByValue(val) {
+      if (!this.options || this.options.length === 0) {
+        return null
+      }
+      return this.options.find((opt) => {
+        const optValue = typeof opt === 'object' ? opt[this.valueKey] : opt
+        return optValue === val || String(optValue) === String(val)
+      })
+    },
+    // 获取显示的 label
+    getLabel(val) {
+      const option = this.findOptionByValue(val)
+      if (option) {
+        return typeof option === 'object' ? option[this.labelKey] : option
+      }
+      // 如果找不到对应的 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)
+        this.currentValue = newValue
+      }
+    },
+    // 清除所有值
+    clearValue(event) {
+      if (this.disabled) return
+      event.stopPropagation()
+      if (this.multiple) {
+        this.currentValue = []
+      } else {
+        this.currentValue = null
+      }
+    }
+  }
+})
+</script>

package/src/components/CusStoreSelect/index.vue

@@ -0,0 +1,91 @@
+<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>

package/src/components/FcEditorWrapper.vue

@@ -0,0 +1,178 @@
+<template>
+  <FcEditor
+    :model-value="modelValue"
+    :disabled="disabled"
+    :config="editorConfig"
+    :init="initEditor"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import FcEditor from '@form-create/component-wangeditor/src'
+import { parseFn } from '@form-create/utils/lib/json'
+
+export default defineComponent({
+  name: 'FcEditorWrapper',
+  components: {
+    FcEditor
+  },
+  props: {
+    modelValue: String,
+    disabled: Boolean,
+    // 图片上传相关配置
+    uploadImgServer: String,
+    uploadImgFieldName: {
+      type: String,
+      default: 'file'
+    },
+    uploadImgMaxSize: Number,
+    accept: String,
+    uploadImgHeaders: Object,
+    uploadImgParams: Object,
+    uploadImgCustomInsert: [String, Function],
+    withCredentials: Boolean,
+    // form-create 注入的 API
+    formCreateInject: Object
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    editorConfig() {
+      const config = {}
+
+      // 如果设置了 uploadImgServer，配置图片上传
+      if (this.uploadImgServer) {
+        // wangeditor 4.x 使用这些配置项
+        config.uploadImgServer = this.uploadImgServer
+        config.uploadFileName = this.uploadImgFieldName || 'file'
+        config.uploadImgMaxSize = this.uploadImgMaxSize || 5 * 1024 * 1024 // 默认5MB
+
+        // 处理 accept 格式
+        if (this.accept) {
+          if (this.accept === 'image/*') {
+            config.uploadImgAccept = [
+              'jpg',
+              'jpeg',
+              'png',
+              'gif',
+              'bmp',
+              'webp'
+            ]
+          } else {
+            // 处理类似 "image/png,image/jpeg" 的格式
+            const types = this.accept
+              .split(',')
+              .map((t) => {
+                const match = t.trim().match(/image\/(\w+)/)
+                return match ? match[1] : null
+              })
+              .filter(Boolean)
+            if (types.length > 0) {
+              config.uploadImgAccept = types
+            }
+          }
+        }
+
+        // 上传参数
+        if (this.uploadImgParams) {
+          config.uploadImgParams = this.uploadImgParams
+        }
+
+        // 请求头（wangeditor 4.x 可能不支持，但可以通过 customUploadImg 实现）
+        // withCredentials
+        if (this.withCredentials !== undefined) {
+          config.uploadImgParamsWithUrl = false // 参数放在 body 中
+        }
+
+        // 自定义上传函数 - 使用封装好的 api.request 方法
+        config.customUploadImg = (files, insertImgFn) => {
+          // files 是文件列表，insertImgFn 是插入函数
+          const file = files[0]
+
+          // 获取 form-create 注入的 API
+          const api = this.formCreateInject?.api
+          if (!api || !api.request) {
+            console.error('未找到 form-create API，无法使用封装的上传接口')
+            return
+          }
+
+          // 准备上传数据对象
+          const uploadData = {
+            // 文件字段
+            [this.uploadImgFieldName || 'file']: file
+          }
+
+          // 添加额外参数
+          if (this.uploadImgParams) {
+            Object.keys(this.uploadImgParams).forEach((key) => {
+              uploadData[key] = this.uploadImgParams[key]
+            })
+          }
+
+          // 使用封装好的 api.request 方法上传
+          // fetch.js 会自动将 data 转换为 FormData（当 dataType 不是 'json' 时）
+          api
+            .request({
+              action: this.uploadImgServer,
+              method: 'post',
+              data: uploadData,
+              dataType: 'form', // 使用表单格式，会自动创建 FormData
+              headers: this.uploadImgHeaders || {},
+              withCredentials: this.withCredentials || false
+            })
+            .then((res) => {
+              // 如果有自定义插入函数，使用它
+              if (this.uploadImgCustomInsert) {
+                const customInsert =
+                  typeof this.uploadImgCustomInsert === 'function'
+                    ? this.uploadImgCustomInsert
+                    : parseFn(this.uploadImgCustomInsert)
+
+                if (customInsert) {
+                  // 调用自定义插入函数处理响应
+                  // customInsert 接收 (res, insertFn) 参数
+                  // insertFn 接收 (url, alt, href) 参数
+                  customInsert(res, (url, alt, href) => {
+                    insertImgFn(url, alt || '', href || '')
+                  })
+                } else {
+                  // 如果解析失败，使用默认格式
+                  // this.handleDefaultResponse(res, insertImgFn)
+                }
+              } else {
+                // 使用默认响应格式处理
+                // this.handleDefaultResponse(res, insertImgFn)
+              }
+            })
+            .catch((error) => {
+              console.error('上传失败', error)
+            })
+        }
+      }
+
+      return config
+    }
+  },
+  methods: {
+    initEditor(editor) {
+      // 可以在这里添加额外的编辑器初始化逻辑
+    },
+    handleDefaultResponse(res, insertImgFn) {
+      // 处理标准响应格式: {errno: 0, data: {url: "...", alt: "...", href: "..."}}
+      if (res.code === 200 && res.data) {
+        insertImgFn(
+          res.data.realURL,
+          res.data.alt || '图片',
+          res.data.realURL || ''
+        )
+      } else if (res.url) {
+        // 兼容简单格式: {url: "..."}
+        insertImgFn(res.url, res.alt || '', res.href || '')
+      } else {
+        console.error('上传失败，响应格式不正确', res)
+      }
+    }
+  }
+})
+</script>

package/src/components/index.js

@@ -3,5 +3,15 @@ import frame from '@form-create/component-antdv-frame/src/index'
 import group from '@form-create/component-antdv-group/src/index'
 import subForm from '@form-create/component-subform/src/index'
 import QuestionCircleOutlined from './icon/QuestionCircleOutlined.vue'
+import CusSelect from './CusSelect/index.vue'
+import CusStoreSelect from './CusStoreSelect/index.vue'
 
-export default [upload, frame, group, subForm, QuestionCircleOutlined]
+export default [
+  upload,
+  frame,
+  group,
+  subForm,
+  QuestionCircleOutlined,
+  CusSelect,
+  CusStoreSelect
+]

package/src/core/api.js

@@ -228,7 +228,6 @@ export default function extendApi(api, h) {
         }
         timer = setTimeout(() => {
           fn.call(context, ...args)
-          timer = null
         }, delay || 0)
       }
     }

package/src/core/maker.js

@@ -84,10 +84,16 @@ function useUpload(maker) {
   maker.uploadFile = maker.file
 }
 
+function useCusStoreSelect(maker) {
+  maker.cusStoreSelect = creatorFactory('cusStoreSelect')
+  maker.storeSelect = maker.cusStoreSelect
+}
+
 useAlias(maker)
 useSlider(maker)
 useFrame(maker)
 useUpload(maker)
 useSelect(maker)
+useCusStoreSelect(maker)
 
 export default maker