From e9c5b60aa089b17c1e277c0a3576097eb4f2fb01 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 03:32:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E4=BA=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DateField/index.vue            | 198 +++++++++++
 src/components/UserField/index.vue            | 309 ++++++++++++++++++
 src/main.js                                   |   4 +
 .../xm/core/xmQuestion/XmQuestionEdit.vue     |  67 ++--
 4 files changed, 536 insertions(+), 42 deletions(-)
 create mode 100644 src/components/DateField/index.vue
 create mode 100644 src/components/UserField/index.vue

diff --git a/src/components/DateField/index.vue b/src/components/DateField/index.vue
new file mode 100644
index 00000000..086e7742
--- /dev/null
+++ b/src/components/DateField/index.vue
@@ -0,0 +1,198 @@
+<template>    
+    
+						<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">{{myVal?formatDate( new Date(myVal),format):'' }} </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-date-picker    v-model="myVal" :value-format="valueFormat" :format="format"   
+                @change="onChange"
+                :picker-options="pickerOptions"></el-date-picker>
+              </div>
+						</div> 
+  </template>
+  
+  <script>  
+  
+  import util  from '@/common/js/util';//全局公共库
+  export default {
+    name: 'date-field',
+    components: {   },
+    computed: { 
+    },
+    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,
+        }, 
+      value: {
+        
+      },   
+      
+      getIcon:{
+         type:Function 
+      },
+      getColor:{
+        type:Function 
+      },
+       
+    styleObj:{
+        type:Object,
+        default:function(){return { maxWidth:'100%' }}
+    }, 
+    
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd HH:mm:ss'
+    }, 
+    
+    format: {
+      type: String,
+      default: 'yyyy-MM-dd'
+    },    
+    pickerOptions:{
+        type:Object,
+        default:function(){return util.getPickerOptions('date')}
+    },
+    },
+    methods: {   
+      formatDate:util.formatDate,
+      getPickerOptions:util.getPickerOptions,
+        getMyAvaterInfo(item){
+          if(!item){
+            return ""
+          }else{
+            return item.icon?"":item.name
+          }
+        },
+        getMyColor(item){
+          if(item){
+           
+            if(this.getColor){
+                return this.getColor(item)
+            } 
+            return util.getColor(item)
+            
+          }else{
+            if(this.getColor){
+                return this.getColor(this.myVal)
+            }else{
+              return util.getColor(this.myVal)
+            }
+          }
+        },
+        getMyIcon(item){
+          if(item){ 
+            if(this.getIcon){
+                return this.getIcon(item)
+            } 
+            return "el-icon-date";
+          }else{
+            if(this.getIcon){
+                return this.getIcon(this.myVal)
+            }else{
+              return "el-icon-date"
+            }
+          }
+        },
+        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;
+    .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;
+} 
+ .field-box:hover .field-info{ 
+    display: none;
+} 
+</style>
+  
\ No newline at end of file
diff --git a/src/components/UserField/index.vue b/src/components/UserField/index.vue
new file mode 100644
index 00000000..d55cbb61
--- /dev/null
+++ b/src/components/UserField/index.vue
@@ -0,0 +1,309 @@
+<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 :type="deptUserVisible?'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();
+          }
+           
+        },  
+        
+      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: {
+      
+        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>
+  
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 62d976b0..81391818 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,8 @@ import DictSelect from '@/components/DictSelect/index'
 import DictTag from '@/components/DictTag/index'
 import DictField from '@/components/DictField/index'
 import MyInput from '@/components/MDinput/index'
+import DateField from '@/components/DateField/index'
+import UserField from '@/components/UserField/index'
 
 Vue.prototype.$echarts = echarts
 Vue.use(Print); //注册
@@ -36,6 +38,8 @@ Vue.component('dict-select',DictSelect)
 Vue.component('dict-tag',DictTag)
 Vue.component('dict-field',DictField)
 Vue.component('my-input',MyInput)
+Vue.component('date-field',DateField)
+Vue.component('user-field',UserField)
 Vue.use(Element, {
   size: 'small', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
diff --git a/src/views/xm/core/xmQuestion/XmQuestionEdit.vue b/src/views/xm/core/xmQuestion/XmQuestionEdit.vue
index 51a55fc0..e87addd8 100644
--- a/src/views/xm/core/xmQuestion/XmQuestionEdit.vue
+++ b/src/views/xm/core/xmQuestion/XmQuestionEdit.vue
@@ -1,9 +1,9 @@
 <template>
 	<section>  
-		<el-row class="page-main ">
-			<el-form :model="editForm" label-width="120px" label-position="left" :rules="editFormRules" ref="editForm"> 
+		<el-row>
+			<el-form :model="editForm" label-width="120px"  :rules="editFormRules" ref="editForm" label-position="top"> 
 				<el-row>
-					<el-col :span="18"> 
+					<el-col :span="18" class="border padding"> 
 						<el-form-item label="" prop="name" label-width="0px">
 														<el-row>
 							<span><span v-if="opType=='edit'" class="label-font-color">用例编号:</span>&nbsp;&nbsp;{{editForm.caseId}} &nbsp;&nbsp;</span><span class="label-font-color"><i class="el-icon-s-operation"></i>模块：</span><span>{{editForm.funcName}} <el-button type="text" @click="funcVisible=true">选择模块</el-button></span>
@@ -17,9 +17,8 @@
 								<el-button type="text" icon="el-icon-copy" @click="copyLink">拷贝链接(快速分享)</el-button>
 						</el-form-item> 
 								<el-row> 
-									<el-col :span="8">
-										<el-form-item label="负责人" prop="handlerUsername">
-											{{editForm.handlerUsername}}    
+									<el-col :span="6"> 
+											<user-field label="责任人" v-model="editForm" userid-key="handlerUserid" username-key="handlerUsername" @change="editXmQuestionSomeFields(editForm,'handlerUserid',$event)"></user-field>
 											<el-popover
 												placement="top-start"
 												title="重新指派给"
@@ -31,30 +30,20 @@
 														<el-button type="text"  @click="showGroupUsers('handlerUserid')">其它人</el-button><br>
 													</el-row>
 												<el-button slot="reference" type="text">指派给</el-button>
-											</el-popover>
-										</el-form-item>
+											</el-popover> 
 									</el-col>
 									
-									<el-col :span="8">
-										<el-form-item label="状态" prop="bugStatus">
-										<el-select v-model="editForm.bugStatus" placeholder="状态" @change="editXmQuestionSomeFields(editForm,'bugStatus',$event)">
-											<el-option v-for="(i,index) in dicts['bugStatus']" :label="i.name" :value="i.id" :key="index">{{i.name}}</el-option>
-										</el-select> 
-										</el-form-item>
+									<el-col :span="6">
+										<dict-field label="状态" :dict="dicts['bugStatus']" v-model="editForm.bugStatus" @change="editXmQuestionSomeFields(editForm,'bugStatus',$event)"></dict-field> 
 									</el-col> 
-									<el-col :span="8">
-										<el-form-item label="优先级别" prop="priority">
-											<el-select v-model="editForm.priority" placeholder="请选择优先级" @change="editXmQuestionSomeFields(editForm,'priority',$event)">
-												<el-option v-for="(i,index) in dicts['priority']" :label="i.name" :value="i.id" :key="index">{{i.name}}</el-option>
-											</el-select> 
-										</el-form-item> 
+
+									<el-col :span="6">
+										<dict-field label="优先级" :dict="dicts['priority']" v-model="editForm.priority" @change="editXmQuestionSomeFields(editForm,'priority',$event)"></dict-field> 
 									</el-col>
 									
-									<el-col :span="8">
-										<el-form-item label="结束时间" prop="endTime">
-												<el-date-picker style="max-width:100%;" value-format="yyyy-MM-dd HH:mm:ss" v-model="editForm.endTime" @change="editXmQuestionSomeFields(editForm,'endTime',$event)"></el-date-picker>
-										</el-form-item>
-									</el-col>
+									<el-col :span="6"> 
+												<date-field label="结束时间" style="max-width:100%;" value-format="yyyy-MM-dd HH:mm:ss" v-model="editForm.endTime" @change="editXmQuestionSomeFields(editForm,'endTime',$event)"></date-field>
+ 									</el-col>
 								</el-row>
 								<el-row>
 								</el-row>
@@ -68,10 +57,8 @@
 													</el-form-item> 
 												</el-col>
 												<el-col :span="8">
-													<el-form-item label="复现频率" prop="repRate">
-														<el-select v-model="editForm.repRate" placeholder="请选择复现频率" @change="editXmQuestionSomeFields(editForm,'repRate',$event)">
-															<el-option v-for="(i,index) in dicts['bugRepRate']" :label="i.name" :value="i.id" :key="index">{{i.name}}</el-option>
-														</el-select> 
+													<el-form-item label="复现频率" prop="repRate"> 
+														<dict-tag  :dict="dicts['bugRepRate']" v-model="editForm.repRate" @change="editXmQuestionSomeFields(editForm,'repRate',$event)"></dict-tag>
 													</el-form-item>
 													
 												</el-col> 
@@ -86,31 +73,27 @@
 										
 										<el-col :span="8">
 											<el-form-item label="严重程度" prop="bugSeverity">
-											<el-select v-model="editForm.bugSeverity" placeholder="请选择严重程度" @change="editXmQuestionSomeFields(editForm,'bugSeverity',$event)">
-												<el-option v-for="(i,index) in dicts['bugSeverity']" :label="i.name" :value="i.id" :key="index">{{i.name}}</el-option>
-											</el-select> 
+												<dict-tag  :dict="dicts['bugSeverity']" v-model="editForm.bugSeverity" @change="editXmQuestionSomeFields(editForm,'bugSeverity',$event)"></dict-tag>
+											 
 											</el-form-item>
 										</el-col> 	
 										<el-col :span="8">
 											<el-form-item label="原因分析" prop="bugReason">
-												<el-select v-model="editForm.bugReason" placeholder="请选择原因" @change="editXmQuestionSomeFields(editForm,'bugReason',$event)">
-													<el-option v-for="(i,index) in dicts['bugReason']" :label="i.name" :value="i.id" :key="index">{{i.name}}</el-option>
-												</el-select> 
+												<dict-tag  :dict="dicts['bugReason']" v-model="editForm.bugReason" @change="editXmQuestionSomeFields(editForm,'bugReason',$event)"></dict-tag>
+												 
 											</el-form-item>
 										</el-col>
 										
 										<el-col :span="8">
 											<el-form-item label="解决方案" prop="solution">
-												<el-select v-model="editForm.solution" placeholder="请选择解决方案" @change="editXmQuestionSomeFields(editForm,'solution',$event)">
-													<el-option v-for="(i,index) in dicts['bugSolution']" :label="i.name" :value="i.id" :key="index">{{i.name}}</el-option>
-												</el-select> 
+												<dict-tag  :dict="dicts['bugSolution']" v-model="editForm.solution" @change="editXmQuestionSomeFields(editForm,'solution',$event)"></dict-tag>
+ 
 											</el-form-item>
 										</el-col> 
 										<el-col :span="8">
 													<el-form-item label="缺陷类别" prop="bugType">
-														<el-select v-model="editForm.bugType" placeholder="请选择缺陷类别" @change="editXmQuestionSomeFields(editForm,'bugType',$event)">
-															<el-option v-for="(i,index) in dicts['bugType']" :label="i.name" :value="i.id" :key="index">{{i.name}}</el-option>
-														</el-select> 
+														<dict-tag  :dict="dicts['bugType']" v-model="editForm.bugType" @change="editXmQuestionSomeFields(editForm,'bugType',$event)"></dict-tag>
+ 
 													</el-form-item>
 													
 												</el-col> 
@@ -248,7 +231,7 @@
 				 
 			}
 		},
-		props:['xmQuestion','visible',"selProject"],
+		props:['xmQuestion','visible',"selProject",'opType'],
 		watch: {
 	      'xmQuestion':function( xmQuestion ) {
 	        this.editForm = {...xmQuestion};