@longhongguo/form-create-ant-design-vue 3.2.44 → 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/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/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

package/src/core/modelFields.js

@@ -1,11 +1,12 @@
 export default {
-    autoComplete: 'value',
-    cascader: 'value',
-    inputNumber: 'value',
-    inputPassword: 'value',
-    textarea: 'value',
-    rate: 'value',
-    slider: 'value',
-    treeSelect: 'value',
-    switch: 'checked',
+  autoComplete: 'value',
+  cascader: 'value',
+  inputNumber: 'value',
+  inputPassword: 'value',
+  textarea: 'value',
+  rate: 'value',
+  slider: 'value',
+  treeSelect: 'value',
+  switch: 'checked',
+  cusStoreSelect: 'modelValue'
 }

package/src/parsers/cusStoreSelect.js

@@ -0,0 +1,17 @@
+import { hasProperty } from '@form-create/utils/lib/type'
+
+export default {
+  name: 'cusStoreSelect',
+  modelField: 'modelValue',
+  mergeProp(ctx) {
+    const props = ctx.prop.props
+    // 确保 options 存在
+    if (!hasProperty(props, 'options')) {
+      props.options = ctx.prop.options || []
+    }
+  },
+  render(children, ctx) {
+    // 使用默认渲染
+    return ctx.$render.defaultRender(ctx, children)
+  }
+}

package/src/parsers/index.js

@@ -10,6 +10,7 @@ import tree from './tree'
 import row from './row'
 import rangePicker from './rangePicker'
 import timeRangePicker from './timeRangePicker'
+import cusStoreSelect from './cusStoreSelect'
 
 export default [
   checkbox,
@@ -23,5 +24,6 @@ export default [
   radio,
   select,
   cascader,
-  row
+  row,
+  cusStoreSelect
 ]