program_xm_vue/src/components/DictField/index.vue

<template>    
    
						<div class="field-box" @click="showSelect">  
							<el-avatar class="avater" :icon="getMyIcon(currentItem)" :style="{backgroundColor:getMyColor(currentItem)}">{{getMyAvaterInfo(currentItem)}}</el-avatar> 
							
              <div class="field-info" > 
								<span class="field-value" v-if="showVal">{{showVal}} </span> 
								<span class="field-value" v-else>无</span> 
								  <span class="field-label" >{{label}}</span>  
                  <dict-select  :dict="dict" ref="selectRef" v-model="myVal" @change="onChange" :get-icon="getIcon" :get-color="getColor"></dict-select> 
							</div>    
						</div> 
  </template>
  
  <script>  
  export default {
    name: 'dict-field',
    components: {   },
    computed: {
       currentItem(){
        if(this.dict){
           return this.dict.find(k=>k.id==this.myVal) 
        }else{
            return null;
        }
       },
       showVal(){
          if(this.dict){
            var item= this.dict.find(k=>k.id==this.myVal) 
            if(item){
              return item.name
            }else{
              return this.myVal
            }
          }else{
              return this.myVal
          }
       }
    },
    data(){
        return {
            myVal:'', 
        }
    },
    watch:{ 
        value:{ 
          deep:true,
          handler(){
             this.initData();
          }
           
        },  
        
      myVal(){
        this.$emit('input',this.myVal)
      }
    },
    props: {
      
        disabled:{
            type:Boolean,
            default:false,
        },
       label:{
        type:String,
        default:''
       },
        clearable:{
            type:Boolean,
            default:false,
        },
      dict:{
        type:Array,
        default:function(){return []}
      },
      value: {
        
      },   
      
      getIcon:{
         type:Function 
      },
      getColor:{
        type:Function 
      } ,
    },
    methods: { 
      showSelect(){
        this.$refs["selectRef"].$refs["selectRef"].toggleMenu();
      },
        getMyAvaterInfo(item){
          if(!item){
            return ""
          }else{
            return item.icon?"":item.name
          }
        },
        getMyColor(item){
          if(item){
           
            if(this.getColor){
                return this.getColor(item.id)
            }
            if(item.color){
                return item.color
            }
            return ""
            
          }else{
            if(this.getColor){
                return this.getColor(this.myVal)
            }else{
              return ""
            }
          }
        },
        getMyIcon(item){
          if(item){ 
            if(this.getIcon){
                return this.getIcon(item.id)
            }
            if(item.icon){
                return item.icon
            }
            return "";
          }else{
            if(this.getIcon){
                return this.getIcon(this.myVal)
            }else{
              return ""
            }
          }
        },
        initData(){
             this.myVal=this.value
            
        }, 
        
        onChange(data){  
          this.$emit('change',data)
        }
    },
    mounted(){
        this.initData();
    }
  }
  </script>
  

<style lang="scss" scoped>
 


.field-box {  
    display: flex;
    margin-right:5px;
    align-items: center;
	  cursor: pointer;
    height: 40px;
    line-height: 40px;
    .avater { 
		  background-color:#FF9F73;
    }

    .field-info {
      
        height: 40px;
        line-height: 40px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .field-value {  
            height: 20px;
            line-height: 20px;
            font-size: 0.75rem; 
        } 
        .field-label{   
          height: 20px;
          line-height: 20px;
            font-size: 0.75rem; 
          color: #C0C4CC;
        }
        
    }
	.my-select{
    height: 20px;
    line-height: 20px;
    margin-left: 5px;
    margin-right:5px;
    max-width: 120px;
    display: none;
	} 
	 
}
 .field-box:hover .field-label{
  display: none;
}
 .field-box:hover .my-select{
    height: 20px;
    margin-left: 5px; 
    display: inline;
} 
</style>