commit

2025-07-02 20:30:46 +08:00
parent 8dc7a62efe
commit ab4c69c34a
13 changed files with 572 additions and 430 deletions
@@ -1,115 +1,121 @@
 <template>
-    <el-select v-model="selectValue" filterable remote :remote-method="selectUser" @change="onChange" v-bind="$attrs">
-        <el-option
-            v-for="item in options"
-            v-if="!item.disabled"
-            :key="item[option_value]"
-            :label="option_label_func ? option_label_func(item) : item[option_label]"
-            :value="item[option_value]"
-        ></el-option>
-    </el-select>
+  <el-select v-model="selectValue" :clearable="clearable" filterable remote :remote-method="selectUser"
+             @change="onChange" v-bind="$attrs">
+    <el-option
+        v-for="item in options"
+        v-if="!item.disabled"
+        :key="item[option_value]"
+        :label="option_label_func ? option_label_func(item) : item[option_label]"
+        :value="item[option_value]"
+    ></el-option>
+  </el-select>
 </template>

 <script>
 module.exports = {
-    model: {
-        prop: "value",
-        event: "change"
-    },
-    props: {
-        value: { type: [String, Array] },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {type: [String, Array]},

-        api: {
-            type: String,
-            required: false,
-            default: "/open/common/userOptions"
-        },
-
-        api_params: {
-            type: Object,
-            required: false,
-            default: () => {
-                return {}
-            }
-        },
-
-        api_input_key_name: {
-            type: String,
-            required: false,
-            default: "keyWord"
-        },
-
-        option_list: {
-            type: Array,
-            default: () => {
-                return []
-            }
-        },
-
-        option_value: {
-            type: String,
-            default: "id"
-        },
-
-        option_label: {
-            type: String,
-            default: "username"
-        },
-
-        option_label_func: {
-            type: Function,
-            required: false
-        }
+    api: {
+      type: String,
+      required: false,
+      default: "/open/common/userOptions"
    },

-    data() {
-        return {
-            options: [],
-            selectValue: null
-        }
+    api_params: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
    },

-    watch: {
-        value: {
-            handler: function (val) {
-                if (this.$attrs.multiple) {
-                    this.selectValue = [...val]
-                } else {
-                    this.selectValue = val ? val.toString() : ""
-                }
-            },
-            immediate: true,
-            deep: true
-        },
-        option_list: {
-            handler: function (val) {
-                if (val) {
-                    this.options = val
-                }
-            },
-            immediate: true
-        }
+    clearable: {
+      type: Boolean,
+      default: true
    },

-    methods: {
-        selectUser(query) {
-            if (query !== "") {
-                $.get(this.api, { [this.api_input_key_name]: query, ...this.api_params }).then((res) => {
-                    this.options = res.data
-                })
-            }
-        },
-        onChange(val) {
-            this.$emit("change", val)
-        },
-
-        clearOptions() {
-            this.options = []
-        }
+    api_input_key_name: {
+      type: String,
+      required: false,
+      default: "keyWord"
    },
-    created() {
-        this.clearOptions()
+
+    option_list: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+
+    option_value: {
+      type: String,
+      default: "id"
+    },
+
+    option_label: {
+      type: String,
+      default: "username"
+    },
+
+    option_label_func: {
+      type: Function,
+      required: false
    }
+  },
+
+  data() {
+    return {
+      options: [],
+      selectValue: null
+    }
+  },
+
+  watch: {
+    value: {
+      handler: function (val) {
+        if (this.$attrs.multiple) {
+          this.selectValue = [...val]
+        } else {
+          this.selectValue = val ? val.toString() : ""
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    option_list: {
+      handler: function (val) {
+        if (val) {
+          this.options = val
+        }
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    selectUser(query) {
+      if (query !== "") {
+        $.get(this.api, {[this.api_input_key_name]: query, ...this.api_params}).then((res) => {
+          this.options = res.data
+        })
+      }
+    },
+    onChange(val) {
+      this.$emit("change", val)
+    },
+
+    clearOptions() {
+      this.options = []
+    }
+  },
+  created() {
+    this.clearOptions()
+  }
 }
 </script>