ui库和web端产品库合并版本(还需修复细节)

ui/packages/basic/AiSelect.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="ai-select">
+    <el-select
+        style="width: 100%;"
+        clearable
+        :value="value"
+        :size="$attrs.size || 'small'"
+        :filterable="isAction"
+        v-bind="$attrs"
+        v-on="$listeners">
+      <template v-if="isAction">
+        <el-option v-for="op in actionOps" :key="op.id"
+                   :label="op[actionProp.label]" :value="op[actionProp.value]"/>
+      </template>
+      <template v-else>
+        <el-option
+            v-for="(item, index) in selectList"
+            :key="index"
+            :label="item.dictName"
+            :value="item.dictValue"/>
+      </template>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiSelect',
+
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  watch: {
+    instance: {
+      deep: true,
+      handler(v) {
+        v && this.isAction && !this.options.toString() && this.getOptions()
+      }
+    }
+  },
+  props: {
+    value: {default: null},
+    selectList: {
+      type: Array
+    },
+
+    width: {
+      type: String,
+      default: '216'
+    },
+    instance: Function,
+    action: {default: ""},
+    prop: {
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      options: [],
+      filter: ""
+    }
+  },
+  computed: {
+    selectWidth() {
+      if (this.width.indexOf('px') > -1) {
+        return this.width
+      }
+      return `${this.width}px`
+    },
+    isAction() {
+      return !!this.action
+    },
+    actionOps() {
+      return this.options.filter(e => !this.filter || e[this.actionProp.label].indexOf(this.filter) > -1)
+    },
+    actionProp() {
+      return {
+        label: 'label',
+        value: 'id',
+        ...this.prop
+      }
+    }
+  },
+  methods: {
+    getOptions() {
+      this.instance?.post(this.action, null, {
+        params: {size: 999}
+      }).then(res => {
+        if (res?.data) {
+          this.options = res.data.records || res.data
+        }
+      })
+    }
+  },
+  created() {
+    this.getOptions()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ai-select .el-select {
+  width: 100%;
+}
+</style>