fj-dc-ui/.svn/pristine/0b/0bac8409408f4e5fa0740d2979bb74ac6a05c32d.svn-base

<template>
	<el-select 
		v-model="value" 
		collapse-tags
		multiple placeholder="请选择" 
		style="width:100%;height:100%;" 
		filterable 
		remote
		:remote-method="remoteMethod"
		:disabled="disableMuti"
		>
    	<el-option
			v-for="item in options"
			:key="item.value"
			:label="item.label"
			:value="item.value">
			<span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px" v-if="subLabelName&&subLabelName!=''">{{ item[subLabelName] }}</span>
    	</el-option>
  	</el-select>
</template>
<script>

export default {
  name: 'multipleSelect',
  props:['initalValue','selectData','valueName','labelName','otherSearchParams','tagRemoveMethod','tagAddMethod','valueType','subLabelName','disableMuti'],
  watch: {
		// disableMuti(oldValue,newValue){
		// 	this.disableMuti = newValue;
		// },
    initalValue:function(){
      console.log('initalValue变化');this.init();
    },
    value:function(newValue,oldValue){
		let changeMark = false;
		let changeType = '';
		let changeElement = '';
		let changeIndex = '';
		newValue.forEach((e,index)=>{
			if(this.cacheSimpleValue.indexOf(e)<0){
				changeMark = true;
				changeType="add";
				changeIndex = index;
			}
		});
		if(!changeMark){
			if(newValue.length != this.cacheSimpleValue.length){
				changeMark = true;
				this.cacheSimpleValue.forEach((e,index)=>{
					if(newValue.indexOf(e)<0){
						changeMark = true;
						changeType="delete";
						changeIndex = index;
					}
				});
			}
		}
		let emitValue = [];
		let _self = this;

		if(this.intalValuetype=='Object'){
			for(var newValueIndex = 0;newValueIndex<newValue.length;newValueIndex++){
				for(var cacheRemoteOptionIndex = 0;cacheRemoteOptionIndex<_self.cacheRemoteOption.length;cacheRemoteOptionIndex++){
					if(_self.cacheRemoteOption[cacheRemoteOptionIndex][_self.valueName]==newValue[newValueIndex]){
						emitValue.push(_self.cacheRemoteOption[cacheRemoteOptionIndex]);
						break;
					}
				}
			}
			if(changeType=='delete'){
				for(let cacheRemoteOptionIndex = 0;cacheRemoteOptionIndex<_self.cacheRemoteOption.length;cacheRemoteOptionIndex++){
					if(_self.cacheRemoteOption[cacheRemoteOptionIndex][_self.valueName]==this.cacheSimpleValue[changeIndex]){
						changeElement = _self.cacheRemoteOption[cacheRemoteOptionIndex];
						break;
					}
				}
					// let rules = _self.cacheRemoteOption;
					// let rest = rules.filter(e => {
					// 	return e.valueName === this.cacheSimpleValue[changeIndex];
					// });
					// changeElement = rest[0];
			}else if(changeType=='add'){
				changeElement = emitValue[emitValue.length -1];
			}
		}else{
			emitValue = newValue;
			changeElement = this.cacheSimpleValue[changeIndex];
		}


		if(!this.initProgress&&changeMark){
			// this.cacheRemoteOption = [];
			this.$emit('multiInputData',this.value);
			this.$emit('valueChange',{'newValue':emitValue,'changeType':changeType,'changeElement':changeElement});
		}

	}
		},
  data () {
    return {
	  initProgress:true,
	  cacheRemoteOption:[],
	  cacheSimpleValue:[],
      options: [],
        value: [],
		remoteMethods:null,
		intalValuetype:'',//对象或者字面量
    }
  },
  created () {
      this.init();
  },
  methods: {
    init:function(){
	  this.intalValuetype = 'simple';
	  this.initProgress = true;
      let _self =this;
     
      if(!this.valueName || this.valueName == ''){
          this.valueName = 'value';
      }
      if(!this.labelName || this.labelName == ''){
          this.labelName = 'label';
      }
      this.value = [];
      if(!this.initalValue || this.initalValue == null){
          this.value = [];
      }else{
          this.value = this.initalValue;
          
      }
		  this.intalValuetype = this.valueType?this.valueType:null;
      this.options = [];
      if(this.selectData instanceof Function){
          // console.log('可选项是方法(远端)');
          this.remoteMethods = this.selectData;
      }else if(this.selectData instanceof  Array){
         this.options = [].concat(this.selectData);
        //  console.log('可选项是数组(本端)')
      }

      this.cacheSimpleValue = [];
      this.value.forEach(element => {
        if(element instanceof Object){
		  this.intalValuetype = 'Object';
          this.cacheSimpleValue.push(element[this.valueName]);
		  this.options.push(element);
		  this.cacheRemoteOption.push(element);
        }
        // console.log('输入是对象.simple是'+this.cacheSimpleValue);
        this.value = this.cacheSimpleValue;
      });
      this.options.forEach((item,index)=>{
          item['value'] = item[_self.valueName];
          item['label'] = item[_self.labelName];
      });
		 this.initProgress = false;
    },
     remoteMethod(query){
       let _self = this;
	   console.log('调用远端搜索方法');
	   
       this.remoteMethods(query,this.otherSearchParams).then(s=>{
         this.options = s.result;
         this.options.forEach((item,index)=>{
          item['value'] = item[_self.valueName];
		  item['label'] = item[_self.labelName];
		  this.cacheRemoteOption.push(item);
		});
       },e=>{});
	 },
	 removeTagMethod:function(removeTag){
		 console.log('removeTagMethodHandler'+removeTag);
		 if(this.tagRemoveMethod && this.tagRemoveMethod instanceof Function){
			 this.tagRemoveMethod(removeTag,this.otherSearchParams);
		 }
	 }
  },
}
</script>

<style>

</style>