|
|
@@ -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>
|
