Merge branch 'Nov16thResetMusic' of http://git.dayaedu.com/molingzhide/dy-admin-manager into Nov16thResetMusic

src/components/remote-search/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div>
     <el-select
-    :value="value"
+      :value="value"
       filterable
       remote
       reserve-keyword
       clearable
-      :multiple='multiple'
+      :multiple="multiple"
       :placeholder="placeholder"
       :remote-method="remoteMethod"
       :loading="loading"
       @change="changeValue"
-      :style="{width:this.selectWidt+'px!important'}"
+      :style="{ width: this.selectWidt + 'px!important' }"
     >
       <el-option
         v-for="(item, index) in options"
@@ -31,55 +31,60 @@ const placeholder = {
 import { throttle, slice } from "lodash";
 import selects from "@/store/modules/selects";
 export default {
-  name:'remote-search',
-  props: ["commit", "number","value",'width','multiple'],
+  name: "remote-search",
+  props: ["commit", "number", "value", "width", "multiple"],
   data() {
     return {
       options: [],
       list: [],
       loading: false,
       constant: this.number || 50,
-      placeholder:placeholder[this.commit],
-      selectWidt:this.width || 180,
-      isFirst:true
+      placeholder: placeholder[this.commit],
+      selectWidt: this.width || 180,
+      isFirst: true,
     };
   },
   async mounted() {
-    await this.$store.dispatch(this.commit);
-
-    this.list = this.selects[this.enumer[this.commit]];
-
-    this.options =
-      this.list.length <= this.constant
-        ? this.list
-        : slice(this.list, 0, this.constant);
-
-    throttle(this.getOptions,800)('')
+    // this.getList();
 
   },
   methods: {
+    async getList() {
+      await this.$store.dispatch(this.commit);
+      this.list = this.selects[this.enumer[this.commit]];
+
+      this.options =
+        this.list.length <= this.constant
+          ? this.list
+          : slice(this.list, 0, this.constant);
+      // this.getOptions();
+    },
     remoteMethod(query) {
       // throttle
-      throttle(this.getOptions,800)(query)
-
+      throttle(this.getOptions, 800)(query);
     },
     getOptions(query) {
-      this.options = this.list.filter(item=>{
-         let flag = (query&&item.userName.toLowerCase().indexOf(query.toLowerCase())>-1) || item.userId == query
-        if(this.multiple){
-
-          return flag || this.value.includes(item.userId)
-        }else{
-           return flag || item.userId == this.value
-        }
-
-      })
+      if (query) {
+        let flag;
+        this.options = this.list.filter((item) => {
+          flag =
+            item.userName.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
+            item.userId == query;
+          if (this.multiple) {
+            return flag || this.value.includes(item.userId);
+          } else {
+            return flag || item.userId == this.value;
+          }
+        });
+      } else {
+          this.getList();
+      }
+    },
+    changeValue(val) {
+      this.isFirst = false;
+      this.$emit("input", val);
+      this.$emit("change", val);
     },
-    changeValue(val){
-      this.isFirst = false
-       this.$emit("input", val);
-       this.$emit("change",val)
-    }
   },
   computed: {
     enumer() {
@@ -89,18 +94,23 @@ export default {
       };
     },
   },
-  watch:{
-    value:{
-      immediate:true,
-      deep:true,
-      handler(val){
-      if(val&&this.isFirst){
-        throttle(this.getOptions,800)('')
-      }
-      }
-
-    }
-  }
+  watch: {
+    value: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (this.multiple) {
+          if (val?.length > 0 && this.isFirst) {
+            this.getOptions();
+          }
+        } else {
+          if (val && this.isFirst) {
+            this.getOptions();
+          }
+        }
+      },
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>