oms/src/components/warehouse/warehouse.vue

<template>
  <el-select 
    v-model="value"
    :placeholder="attrs.placeholder?attrs.placeholder:'请选择'"
    :disabled="attrs.disabled"
    :size="attrs.size"
    :clearable="attrs.clearable"
    @clear="onChange"
    @change="onChange"
    filterable
  >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
  </el-select>
</template>

<script lang="ts">
/*
  配置说明
  config:{
    attrs:{
      retConfig:{
        retLabel:'name'  //返回的值(示例)
        retValue:'id'  //返回的值(示例)
      }
      disabled：true/false  //是否禁用
      size：medium/small/mini //尺寸
      clearable：true/false  //是否清空
      placeholder：''  //占位符
    },
    request:{}
  }
*/
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class Warehouse extends VueViews {
  value:any='';
  options:Array<any>=[]

  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }


  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.propValue){
      this.setValue(this.propValue)
    }
  }

  mounted(){
    this.request();
  }

  setValue(data:any){
    if(data){
      this.value = (this as any).$lodash.cloneDeep(data);
    }else{
      this.value = '';
    }
  }

  getValue(){
    return (this as any).$lodash.cloneDeep(this.value);
  }

  setOptions(data:Array<any>){
    this.options = data;
    if(!this.value && this.attrs.defaultIndex >= 0 && this.options[this.attrs.defaultIndex]){
      this.value = this.options[this.attrs.defaultIndex].id;
      this.onChange();
    }
  }

  onChange(){
    let currentItem:any=null;
    for(const item of this.options){
      if(item.id == this.value){
        currentItem = item
      }
    }
    if(this.attrs.retConfig){
      let obj:any={};
      if(currentItem){
        for(const key in this.attrs.retConfig){
          obj[key] = currentItem[this.attrs.retConfig[key]]
        }
      }
      this.$emit('onChange',obj);
    }else{
      this.$emit('onChange',this.value);
    }
    
    (this.$root as any).eventHub.$emit('warehouseChange',currentItem)
  }

  // 清空数据
  clearValue(){
    this.value = ''
  }

  //请求url
  request(){
    let parame:any = {
      url:'/maindata/maindataStorehouse/page',
      method: 'GET',
		  params: {
        pageNo:1,
        pageSize:1000
      }
    };
    parame.success = (res:any) => {
      if(res.data && res.data.records){
        this.setOptions(res.data.records);
      }
    }
    parame.fail = (err:any) => {}
    this.requestHandle(parame);
  }
}
</script>

<style lang="scss" scoped>

</style>