BUG 27986

src/components/AiSelect/AiSelect.vue

@@ -1,12 +1,14 @@
 <template>
   <section class="AiSelect">
-    <div class="display" v-if="$slots.default" @tap="handleShowOptions">
-      <slot/>
-    </div>
-    <div v-else class="display" @tap="handleShowOptions">
-      <u-icon :label="selectedLabel||placeholder" label-pos="left" name="arrow-right" color="#ddd"/>
-    </div>
-    <u-select v-model="show" :list="options" :mode="mode" @confirm="handleConfirm"/>
+    <picker :range="options" range-key="label" @change="handleConfirm" :disabled="disabled" :mode="mode">
+      <div class="display" v-if="$slots.default">
+        <slot/>
+      </div>
+      <div v-else class="display">
+        <u-icon v-if="selectedLabel" :label="selectedLabel" label-pos="left" name="arrow-right" color="#ddd"/>
+        <u-icon v-else :label="placeholder" label-pos="left" name="arrow-right" color="#ddd" label-color="#999"/>
+      </div>
+    </picker>
   </section>
 </template>
 
@@ -21,14 +23,14 @@ export default {
     value: String,
     placeholder: {default: "请选择"},
     list: {default: () => []},
-    mode: {default: "single-column"},
+    mode: {default: "selector"},
     dict: {default: ""},
     disabled: Boolean
   },
   computed: {
     selectedLabel() {
       let label = this.options.find(e => e.value == this.value)?.label
-      return this.selected?.map(e => e.label)?.join(",") || label
+      return this.selected?.label || label
     },
     options() {
       return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
@@ -39,26 +41,23 @@ export default {
   },
   data() {
     return {
-      show: false,
       dictKey: '',
-      selected: []
+      selected: {}
     }
   },
-
-  mounted() {
+  created() {
     this.dict && this.$dict.load(this.dict).then(() => {
       this.dictKey = this.dict
     })
   },
   methods: {
     handleConfirm(v) {
-      this.selected = v
-      this.$emit("data", this.selected)
-      this.$emit("input", v[0].value)
-      this.$forceUpdate()
-    },
-    handleShowOptions() {
-      if (!this.disabled) this.show = true
+      if (this.mode == "selector") {
+        this.selected = this.options?.[v.detail?.value] || {}
+        this.$emit("data", this.selected)
+        this.$emit("input", this.selected.value)
+      }
+
     }
   }
 }