数据模型完成

ui/packages/basic/AiSelect.vue

@@ -1,32 +1,30 @@
 <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">
+    <el-select clearable class="w100"
+               :value="value"
+               :size="$attrs.size || 'small'"
+               :filterable="isAction||filterable"
+               :disabled="disabled"
+               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]"/>
+        <el-option v-for="op in actionOps" :key="op.id" :label="op.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"/>
+        <el-option v-for="(item, index) in ops" :key="index"
+                   :label="item.dictName||item[actionProp.label]"
+                   :value="item.dictValue>-1?item.dictValue:item[actionProp.value]"
+                   :disabled="check(item[actionProp.value])"/>
       </template>
     </el-select>
   </div>
 </template>
 
 <script>
+import Dict from "../../lib/js/dict";
+
 export default {
   name: 'AiSelect',
-
   model: {
     prop: 'value',
     event: 'change'
@@ -38,9 +36,11 @@ export default {
         v && this.isAction && !this.options.toString() && this.getOptions()
       }
     },
+    action() {
+      this.isAction && this.getOptions()
+    },
     value(v) {
-      this.$emit("select", this.isAction ? this.options.find(e => e[this.actionProp.value] == v) :
-          this.selectList.find(e => e.dictValue == v))
+      this.handleSelect(v)
     }
   },
   props: {
@@ -48,35 +48,35 @@ export default {
     selectList: {
       type: Array
     },
-
     width: {
       type: String,
       default: '216'
     },
+    dict: String,
     instance: Function,
     action: {default: ""},
     prop: {
       default: () => ({})
-    }
+    },
+    filterable: Boolean,
+    disabled: Boolean
   },
   data() {
     return {
       options: [],
-      filter: ""
+      filter: "",
+      Dict
     }
   },
   computed: {
-    selectWidth() {
-      if (this.width.indexOf('px') > -1) {
-        return this.width
-      }
-      return `${this.width}px`
-    },
-    isAction() {
-      return !!this.action
-    },
+    isAction: v => !!v.action,
     actionOps() {
-      return this.options.filter(e => !this.filter || e[this.actionProp.label].indexOf(this.filter) > -1)
+      const {filter} = this
+      const LABEL = this.actionProp.label
+      return this.options.map(e => ({
+        ...e,
+        label: typeof LABEL == "function" ? LABEL?.(e) : e[LABEL]
+      })).filter(e => !filter || e.label.indexOf(filter) > -1)
     },
     actionProp() {
       return {
@@ -84,7 +84,8 @@ export default {
         value: 'id',
         ...this.prop
       }
-    }
+    },
+    ops: v => v.dict ? v.Dict.getDict(v.dict) : v.selectList
   },
   methods: {
     getOptions() {
@@ -94,7 +95,14 @@ export default {
         if (res?.data) {
           this.options = res.data.records || res.data
         }
-      })
+      }).then(() => this.handleSelect())
+    },
+    handleSelect(v = this.value) {
+      this.disabled || this.$emit("select", this.isAction ? this.options.find(e => e[this.actionProp.value] == v) :
+          this.ops.find(e => this.dict ? e.dictValue == v : e[this.actionProp.value] == v))
+    },
+    check(v) {
+      return this.actionProp.disabled && [this.actionProp.disabled].flat().includes(v)
     }
   },
   created() {
@@ -102,9 +110,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-:deep( .ai-select .el-select ) {
-  width: 100%;
-}
-</style>