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

package/src/components/CusSelect/index.vue

@@ -0,0 +1,439 @@
+<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"
+      :class="{
+        'fc-cus-select-selector-borderless': !bordered
+      }"
+    >
+      <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"
+      :class="{
+        'fc-cus-select-selector-borderless': !bordered
+      }"
+    >
+      <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）
+    // 单选时：[{value: '1001', label: '门店1'}] 或 []
+    // 多选时：[{value: '1001', label: '门店1'}, {value: '1002', label: '门店2'}] 或 []
+    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
+    },
+    // 是否有边框
+    bordered: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  computed: {
+    // 统一处理值（支持 v-model），确保始终是对象数组格式
+    currentValue: {
+      get() {
+        // 确保返回对象数组格式
+        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', arrayValue)
+        this.$emit('change', arrayValue)
+      }
+    },
+    // 是否有值（统一判断数组长度）
+    hasValue() {
+      const val = this.currentValue
+      return Array.isArray(val) && val.length > 0
+    },
+    // 单个模式：显示的值对象（从数组中取第一个）
+    displayValue() {
+      if (!this.hasValue) return null
+      return this.currentValue[0]
+    },
+    // 单个模式：显示的标签
+    displayLabel() {
+      if (!this.displayValue) return ''
+      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)
+    },
+    // 多个模式：所有选中的项（直接使用对象数组）
+    allSelectedItems() {
+      const val = this.currentValue
+      if (!Array.isArray(val) || val.length === 0) {
+        return []
+      }
+      // 直接返回对象数组，确保格式统一
+      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() {
+      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 (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
+      }
+    },
+    // 清除所有值
+    clearValue(event) {
+      if (this.disabled) return
+      event.stopPropagation()
+      // 统一设置为空数组
+      this.currentValue = []
+    }
+  }
+})
+</script>