初始化产品库

src/components/AiSelect.vue

@@ -0,0 +1,83 @@
+<template>
+  <section class="AiSelect">
+    <div class="display" v-if="$slots.default" @tap="handleShowOptions">
+      <slot/>
+    </div>
+    <div v-else class="display" @tap="handleShowOptions">
+      <div class="selectedLabel" v-if="selectedLabel">{{ selectedLabel }}</div>
+      <i v-else>{{ placeholder }}</i>
+      <u-icon name="arrow-right" color="#ddd"/>
+    </div>
+    <u-select v-model="show" :list="options" :mode="mode" @confirm="handleConfirm"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiSelect",
+  props: {
+    value: String,
+    placeholder: {default: "请选择"},
+    list: {default: () => []},
+    mode: {default: "single-column"},
+    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
+    },
+    options() {
+      return this.dict ? this.$dict.getDict(this.dict).map(e => ({
+        value: e.dictValue,
+        label: e.dictName
+      })) : this.list
+    }
+  },
+  data() {
+    return {
+      show: false,
+      selected: []
+    }
+  },
+  methods: {
+    handleConfirm(v) {
+      this.selected = v
+      this.$emit("data", this.selected)
+      this.$forceUpdate()
+    },
+    handleShowOptions() {
+      if (!this.disabled) this.show = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiSelect {
+  max-width: 100%;
+
+  ::v-deep .u-icon {
+    margin-left: 8px;
+  }
+
+  .display {
+    display: flex;
+    align-items: center;
+
+    .selectedLabel {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  i {
+    font-style: normal;
+    color: $uni-text-color-grey;
+  }
+}
+</style>