From ca9ca9d6dc85b62cb58fa238fc8a40657d209c9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Fri, 22 Jul 2022 09:31:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/js/util.js                         |  17 +-
 src/components/UserField/index.vue            |   6 +-
 .../xm/core/components/XmUserField/index.vue  | 337 ++++++++++++++++++
 .../xm/core/xmQuestion/XmQuestionEdit.vue     |   5 +-
 4 files changed, 360 insertions(+), 5 deletions(-)
 create mode 100644 src/views/xm/core/components/XmUserField/index.vue

diff --git a/src/common/js/util.js b/src/common/js/util.js
index 6a0ab48a..3dfa7c6e 100644
--- a/src/common/js/util.js
+++ b/src/common/js/util.js
@@ -109,10 +109,23 @@ export default {
     var colors=['#909399','#409EFF','#67C23A','#E6A23C','#F56C6C','#00ced1','#c71585','#ff8c00','#c7158577','#ffd700'];
     if(!cellValue){
       return colors[0]
-    }
+    } 
     var cellValueInt=parseInt(cellValue)
       if( isNaN(cellValueInt) ){
-        cellValueInt=cellValue.chartCodeAt(cellValue.length-1)
+        
+        if(cellValue instanceof String && cellValue.length>0){
+          cellValueInt=cellValue.chartCodeAt(cellValue.length-1)
+        }else if(cellValue instanceof Object){
+          if(cellValue['userid']){
+            cellValueInt=cellValue.chartCodeAt(cellValue['userid'].length-1)
+          }else{
+            cellValueInt=0;
+          }
+          
+        }else{
+          cellValueInt=0;
+        }
+       
       }
       var colorIndex=cellValueInt % 10
       if(cellValueInt > 0 && colorIndex==0){
diff --git a/src/components/UserField/index.vue b/src/components/UserField/index.vue
index d55cbb61..037ad37f 100644
--- a/src/components/UserField/index.vue
+++ b/src/components/UserField/index.vue
@@ -14,7 +14,7 @@
 							<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 :type="deptUserVisible?'primary':''"  @click.stop="projectVisible=true">项目组</el-button> </el-row>
+                          <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">  
                       
@@ -84,6 +84,10 @@
       }
     },
     props: {
+        projectId:{
+          type:String,
+          default:''
+        },
       
         disabled:{
             type:Boolean,
diff --git a/src/views/xm/core/components/XmUserField/index.vue b/src/views/xm/core/components/XmUserField/index.vue
new file mode 100644
index 00000000..661253ae
--- /dev/null
+++ b/src/views/xm/core/components/XmUserField/index.vue
@@ -0,0 +1,337 @@
+<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" filterable>  
+                      
+                      <el-option value="" disabled v-if="users && users.length>10">
+                          <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-option value="" >
+                          <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-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-dialog :visible.sync="projectVisible" append-to-body top="20px" width="60%">
+               <xm-group-select :sel-project="{id:projectId}" :isSelectSingleUser="true" @user-confirm="onProjectUsersConfirm"></xm-group-select>
+            </el-dialog>
+    </el-row>
+  </template>
+  
+  <script>  
+  
+  import util  from '@/common/js/util';//全局公共库
+  import UsersSelect from '@/views/mdp/sys/user/UsersSelectOnly.vue'
+  import XmGroupSelect from '@/views/xm/core/xmGroup/XmGroupSelect.vue'
+  export default {
+    name: 'user-field',
+    components: { UsersSelect, XmGroupSelect },
+    computed: { 
+    },
+    data(){
+        return {
+            myVal:null, 
+            users:[],
+            deptUserVisible:false,
+            projectVisible:false,
+        }
+    },
+    watch:{ 
+        value:{  
+          handler(){
+             this.initData();
+          }
+           
+        },  
+        
+      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.userid 
+                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)
+        },
+        onProjectUsersConfirm(users){
+          this.onChange(users)
+          this.myVal=users[0]
+          this.projectVisible=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)
+				 }
+        },
+        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>
+  
\ No newline at end of file
diff --git a/src/views/xm/core/xmQuestion/XmQuestionEdit.vue b/src/views/xm/core/xmQuestion/XmQuestionEdit.vue
index e87addd8..7276c2de 100644
--- a/src/views/xm/core/xmQuestion/XmQuestionEdit.vue
+++ b/src/views/xm/core/xmQuestion/XmQuestionEdit.vue
@@ -18,7 +18,7 @@
 						</el-form-item> 
 								<el-row> 
 									<el-col :span="6"> 
-											<user-field label="责任人" v-model="editForm" userid-key="handlerUserid" username-key="handlerUsername" @change="editXmQuestionSomeFields(editForm,'handlerUserid',$event)"></user-field>
+											<xm-user-field :project-id="editForm.projectId" label="责任人" v-model="editForm" userid-key="handlerUserid" username-key="handlerUsername" @change="editXmQuestionSomeFields(editForm,'handlerUserid',$event)"></xm-user-field>
 											<el-popover
 												placement="top-start"
 												title="重新指派给"
@@ -209,6 +209,7 @@
 	import XmMyDoFocus from '@/views/myWork/my/components/DoFocus';
 
 	import XmFuncSelect from '../xmFunc/XmFuncSelect'
+	import XmUserField from '@/views/xm/core/components/XmUserField/index'
 	export default {
 		computed: {
 			...mapGetters([
@@ -570,7 +571,7 @@
 		components: {
 				//在下面添加其它组件 'xm-question-edit':XmQuestionEdit
 				'upload': AttachmentUpload,XmGroupMng,VueEditor,XmTaskList,xmMenuSelect,XmQuestionHandleMng,TagMng,XmProjectSelect,
-			XmMyDoFocus,XmFuncSelect,
+			XmMyDoFocus,XmFuncSelect,XmUserField,
 		},
 		mounted() {
 			console.log("question_add");