1

1

src/components/remote-search/index.vue

@@ -2,7 +2,7 @@
   <div>
     <!--    @focus="onFocus" -->
     <el-select
-      v-bind="{...$attrs}"
+      v-bind="{ ...$attrs }"
       :value="value"
       filterable
       remote
@@ -12,14 +12,14 @@
       :multiple="multiple"
       :placeholder="placeholder"
       :remote-method="remoteMethod"
-      ref='select'
+      ref="select"
       :loading="loading"
       @focus="onFocus"
       @change="changeValue"
       :style="{ width: this.selectWidt + 'px!important' }"
     >
       <el-option
-        v-for="(item) in options"
+        v-for="item in options"
         :key="item.userId"
         :label="item.userName"
         :value="item.userId"
@@ -53,26 +53,24 @@ export default {
   async mounted() {
     // this.getList();
     // console.log(this.value)
-    this.getOptions(this.value|| '' )
-
-
+    this.getOptions(this.value || "");
   },
   methods: {
     async getList() {
       await this.$store.dispatch(this.commit);
       this.list = this.selects[this.enumer[this.commit]];
-      const data = {}
+      const data = {};
       for (const item of this.list) {
-        data[item.userId] = item
+        data[item.userId] = item;
       }
-      this.listById = data
+      this.listById = data;
 
       this.options =
         this.list.length <= this.constant
           ? this.list
           : slice(this.list, 0, this.constant);
-     this.options = uniqBy(this.options, 'userId')
-            //  console.log(this.options)
+      this.options = uniqBy(this.options, "userId");
+      //  console.log(this.options)
     },
     remoteMethod(query) {
       // throttle
@@ -80,33 +78,37 @@ export default {
       throttle(this.getOptions, 800)(query);
     },
     async getOptions(query) {
-      if (query&&query.length>0) {
+      if (query && query.length > 0) {
         let flag;
-        this.options = uniqBy(this.list.filter((item) => {
-          flag =
-            item.userName.toLowerCase().indexOf(query.toString().toLowerCase()) > -1 ||
-            item.userId == query;
-          if (this.multiple) {
-            return flag || this.value.includes(item.userId);
-          } else {
-            // console.log(query,this.value)
-            return flag || item.userId == this.value;
-          }
-        }), 'userId')
+        this.options = uniqBy(
+          this.list.filter((item) => {
+            flag =
+              item.userName
+                .toLowerCase()
+                .indexOf(query.toString().toLowerCase()) > -1 ||
+              item.userId == query;
+            if (this.multiple) {
+              return flag || this.value.includes(item.userId);
+            } else {
+              // console.log(query,this.value)
+              return flag || item.userId == this.value;
+            }
+          }),
+          "userId"
+        );
       } else {
-          try{
-             await this.getList()
-          const optionids = this.options.map(item => item.userId)
+        try {
+          await this.getList();
+          const optionids = this.options.map((item) => item.userId);
 
-          const valueItem = this.listById[this.value]
+          const valueItem = this.listById[this.value];
           if (!optionids.includes(this.value) && valueItem) {
-            this.options.push(valueItem)
-            this.options = uniqBy(this.options, 'userId')
+            this.options.push(valueItem);
+            this.options = uniqBy(this.options, "userId");
           }
-          }catch(e){
-            // console.log(e)
-          }
-
+        } catch (e) {
+          // console.log(e)
+        }
       }
     },
     changeValue(val) {
@@ -114,16 +116,15 @@ export default {
       this.$emit("input", val);
       this.$emit("change", val);
       // console.log('来了',this.$refs.select.query)
-      this.$nextTick(res=>{
-         this.getOptions(this.$refs.select.query)
-      })
-
-
+      this.$nextTick((res) => {
+        this.getOptions(this.$refs.select.query);
+      });
+    },
+    onFocus() {
+      this.$nextTick((res) => {
+        this.getOptions(this.$refs.select.query);
+      });
     },
-    onFocus(){
-
-    }
-
   },
   computed: {
     enumer() {
@@ -139,15 +140,15 @@ export default {
       deep: true,
       handler(val) {
         // && this.isFirst
-        if (this.multiple&& this.isFirst) {
-          if (val?.length > 0 ) {
-           this.getOptions()
+        if (this.multiple && this.isFirst) {
+          if (val?.length > 0) {
+            this.getOptions();
           }
         } else {
           if (val && this.isFirst) {
-            this.getOptions()
-          }else{
-             this.getOptions(val)
+            this.getOptions();
+          } else {
+            this.getOptions(val);
           }
         }
       },