program_xm_vue/src/components/UserField/index.vue

<template>    
    <el-row>
						<div class="field-box">  
							<el-avatar class="avater" :icon="getMyIcon(myVal)" :style="{backgroundColor:getMyColor(myVal)}">{{getMyAvaterInfo(myVal)}}</el-avatar> 
							
              <div class="field-info">
                <slot name="field-info" :value="myVal">
								<span class="field-value">{{showMyValue( myVal )}} </span>
                <slot name="label">
								  <span class="field-label">{{label}}</span>
                </slot>
                </slot>
							</div>   
							<div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
                 <el-select v-model="myVal" @change="onSelectChange" :clearable="clearable">  
                      <el-option disabled value="" style="margin-bottom:5px;">
                          <el-row><el-button :type="deptUserVisible?'':'primary'" @click.stop="deptUserVisible=false">常用用户</el-button> <el-button :type="deptUserVisible?'primary':''"  @click.stop="deptUserVisible=true">部门用户</el-button><el-button v-if="projectId" :type="projectVisible?'primary':''"  @click.stop="projectVisible=true">项目组</el-button> </el-row>
                      </el-option>
                      <el-option class="avatar-container" v-for="(item,index) in users" :key="index" :value="item" :label="item.username">  
                      
                        <div class="avatar-wrapper">
                              <el-avatar class="user-avatar"  :style="{backgroundColor:getMyColor(item)}">{{item.username}}</el-avatar> 
                              <span class="username">{{item.username}}</span>
                               <i v-if="myVal.userid==item.userid" class="el-icon-check"></i> 
                              <i v-else>&nbsp;&nbsp;</i>  
                        </div>
                      </el-option> 
                  </el-select> 
              </div>
						</div> 
            <el-dialog :visible.sync="deptUserVisible" append-to-body top="20px" width="60%">
               <users-select :visible="deptUserVisible" :isSingleUser="true"  :isSelectByDept="true" @confirm="onConfirmUsers"></users-select>
            </el-dialog>
           
    </el-row>
  </template>
  
  <script>  
  
  import util  from '@/common/js/util';//全局公共库
  import UsersSelect from '@/views/mdp/sys/user/UsersSelectOnly.vue'
  export default {
    name: 'user-field',
    components: { UsersSelect,  },
    computed: { 
    },
    data(){
        return {
            myVal:null, 
            users:[],
            deptUserVisible:false,
            projectVisible:false,
        }
    },
    watch:{ 
        value:{  
          handler(){
             this.initData();
          },
          deep:true,
           
        },  
        
      myVal(){
        if(this.value instanceof String){
               this.$emit('input',this.myVal)
          }else if(this.value instanceof Object){
            if(!this.myVal||!this.myVal.userid){
              if(this.value[this.useridKey]){
                this.value[this.useridKey]=""
                this.value[this.usernameKey]=""
                this.$emit('input',this.value)
              }
             
            }else{
              if(this.value[this.useridKey]!=this.myVal.userid){ 
                this.value[this.useridKey]=this.myVal.userid
                this.value[this.usernameKey]=this.myVal.username 
                this.$emit('input',this.value) 
              }
            }
            
          }
        
      }
    },
    props: {
        projectId:{
          type:String,
          default:''
        },
      
        disabled:{
            type:Boolean,
            default:false,
        },
       label:{
        type:String,
        default:''
       },
        clearable:{
            type:Boolean,
            default:false,
        }, 
      value: {
        
      },     
    useridKey: {
      type: String,
      default: 'userid'
    },  
    
    usernameKey: {
      type: String,
      default: 'username'
    }, 
     
    },
    methods: {    
      showMyValue(myVal){
        if(!myVal){
          return ""
        }else{
         if(this.value instanceof String){
               return myVal
          }else if(this.value instanceof Object){
            if(!myVal||!myVal.userid){
              return ""
            }
            if(myVal.username){
              return myVal.username
            }else if(myVal.userid){
              return myVal.userid
            }else{
              return ""
            }
          }
        }
      },
        getMyAvaterInfo(item){
          return this.showMyValue(item)
        },
        getMyColor(item){
           if(this.value instanceof String){ 
            if(item){
            
              if(this.getColor){
                  return this.getColor(item)
              } 
              return util.getColor(item)
              
            }else{
              if(this.getColor){
                  return this.getColor("0")
              }else{
                return util.getColor(0)
              }
            }


          }else if(this.value instanceof Object){

            if(item&&item.userid){
            
              if(this.getColor){
                  return this.getColor(item.userid)
              } 
              return util.getColor(item.userid)
              
            }else{
              if(this.getColor){
                  return this.getColor("0")
              }else{
                return util.getColor(0)
              }
            }

          }
          
        },
        getMyIcon(item){
          if(item){ 
            if(this.getIcon){
                return this.getIcon(item)
            } 
            return "el-icon-user";
          }else{
            if(this.getIcon){
                return this.getIcon(this.myVal)
            }else{
              return "el-icon-user"
            }
          }
        }, 

         initData(){  
           if(this.value instanceof String){
              this.myVal=this.value
          }else if(this.value instanceof Object){
            this.myVal={}
            this.myVal.userid=this.value[this.useridKey]
            this.myVal.username=this.value[this.usernameKey] 
          }
          
      }, 
        onSelectChange(item){
          this.onChange([item])
        },
        onChange(data){   
          this.$emit('change',data)
        },
        onConfirmUsers(users){ 
          this.onChange(users)
          this.myVal=users[0]
          this.deptUserVisible=false;
          var notHad=false;
           users.forEach(u=>{
					 if(!this.users.some(k=>k.userid==u.userid)){
						 notHad=true;
						 this.users.unshift(u)
					 }
				 })
				 if(notHad){ 
					 var us=JSON.stringify(this.users)
				 	localStorage.setItem("mdp-his-users",us)
				 }
        }
    },
    mounted(){
      var us=localStorage.getItem("mdp-his-users")
			this.users=us?JSON.parse(us):[]
			 
      this.initData();

    }
  }
  </script>
  

<style lang="scss" scoped>
 


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

    .field-info {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .field-value {  
            font-size: 16px;  
        } 
        .field-label{   
          font-size: 14px;
          color: #C0C4CC;
        }
        
    }
	.my-select{
    margin-left: 5px;
    margin-right:5px;
    max-width: 120px;
		display: none;  
	}
	.btn{
		margin-top: 0px;
		visibility:hidden; 
	} 
	 
}
 .field-box:hover .btn{
		visibility: visible !important;
}
 .field-box:hover .my-select{
  
    margin-left: 5px;
    display: inline;
} 



.avatar-container {
    height: 50px;
    display: flex;
    align-items: center;
    .avatar-wrapper {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        .user-avatar {
            height: 34px;
            width: 34px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .username{
            color: #7D7D7D;
            font-size: 14px; 
        }
        .el-icon-caret-bottom {
            font-size: 22px;
        }
    }
}
</style>