From b6452840fdfac567da7ae839085c0dbf3bc17b9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Sun, 24 Jul 2022 01:35:28 +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/components/DateField/index.vue            |  51 +++++---
 src/components/DateRangeField/index.vue       |   2 +-
 src/components/UserField/index.vue            | 121 ++++++++++++------
 .../xm/core/components/XmUserField/index.vue  | 119 +++++++++++------
 4 files changed, 191 insertions(+), 102 deletions(-)

diff --git a/src/components/DateField/index.vue b/src/components/DateField/index.vue
index 0ff4c642..a29a6ace 100644
--- a/src/components/DateField/index.vue
+++ b/src/components/DateField/index.vue
@@ -1,7 +1,7 @@
 <template>    
     
 						<div class="field-box">  
-							<el-avatar class="avater" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
+							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
 							
               <div class="field-info">
                 <slot name="field-info" :value="dateRange">
@@ -163,53 +163,64 @@
 <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 {  
-            font-size: 16px;  
+            height: 20px;
+            line-height: 20px;
+            font-size: 0.75rem; 
         } 
         .field-label{   
-          height: 40px;
-          font-size: 14px;
+          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;  
-	}
-	.btn{
-		margin-top: 0px;
-		visibility:hidden; 
+    max-width: 250px;
+    display: none;
 	} 
 	 
 }
- .field-box:hover .btn{
-		visibility: visible !important;
+ .field-box:hover .field-label{
+  display: none;
 }
  .field-box:hover .my-select{
-  
-    height: 40px;
-    margin-left: 5px;
+    height: 20px;
+    margin-left: 5px; 
     display: inline;
-} 
- .field-box:hover .field-label{ 
-    display: none;
-} 
+}
+.dashed-circle{ 
+	width:40px;
+	height:40px;
+	border:2px dashed #000000;
+	border-radius:40px/40px;
+}
+.field-box:hover .dashed-circle{
+  
+	border:2px dashed #409EFF;
+}
 </style>
   
\ No newline at end of file
diff --git a/src/components/DateRangeField/index.vue b/src/components/DateRangeField/index.vue
index 99ac1926..fe572a24 100644
--- a/src/components/DateRangeField/index.vue
+++ b/src/components/DateRangeField/index.vue
@@ -1,6 +1,6 @@
 <template>   
 <div class="field-box">  
-							<el-avatar class="avater" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
+							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
 							
               <div class="field-info">
                 <slot name="field-info" :value="dateRange">
diff --git a/src/components/UserField/index.vue b/src/components/UserField/index.vue
index 6959a856..61913d8f 100644
--- a/src/components/UserField/index.vue
+++ b/src/components/UserField/index.vue
@@ -1,11 +1,12 @@
 <template>    
     <el-row>
 						<div class="field-box">  
-							<el-avatar class="avater" :icon="getMyIcon(myVal)" :style="{backgroundColor:getMyColor(myVal)}">{{getMyAvaterInfo(myVal)}}</el-avatar> 
+							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
 							
               <div class="field-info">
                 <slot name="field-info" :value="myVal">
-								<span class="field-value">{{showMyValue( myVal )}} </span>
+								<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
+								<span class="field-value" v-else><span class="label-font-color">无</span></span> 
                 <slot name="label">
 								  <span class="field-label">{{label}}</span> 
                   <div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
@@ -43,6 +44,33 @@
     name: 'user-field',
     components: { UsersSelect,  },
     computed: { 
+      
+      avaterCpd(){  
+        var isEmpty=this.isEmpty(this.myVal)
+        var username=isEmpty?"":this.myVal.username?this.myVal.username:this.myVal.userid
+        var obj={isNull:isEmpty,icon:'el-icon-user',color:'#E4E7ED',innerText:username} 
+          if(this.getColor||this.color){
+            if(this.getColor){
+               obj.color= this.getColor(this.myVal)
+            }else{
+              obj.color=this.color
+            }
+           
+          }else{
+            if(!isEmpty){ 
+                 obj.color= util.getColor(this.myVal.userid) 
+            } 
+          } 
+          if(this.getIcon||this.icon){
+            if(this.getIcon){
+              obj.icon= this.getIcon(this.myVal)
+            }else if(this.icon){
+             obj.icon=this.icon
+            }
+          } 
+          
+        return obj;
+      }
     },
     data(){
         return {
@@ -116,37 +144,31 @@
     }, 
      
     },
-    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 ""
-            }
+    methods: {     
+      
+        isEmpty(v) { 
+          switch (typeof v) {
+          case 'undefined':
+              return true;
+          case 'string':
+              if(v.length == 0) return true;
+              break; 
+          case 'object':
+              if (null === v || v.length === 0) return true;
+              for (var i in v) {
+                  return false;
+              }
+              return true;
           }
-        }
-      },
-        getMyAvaterInfo(item){
-          return this.showMyValue(item)
-        },
+          return false;
+        }, 
         getMyColor(item){
            if(this.value instanceof String){ 
             if(item){
             
               if(this.getColor){
                   return this.getColor(item)
-              } 
+          }
               return util.getColor(item)
               
             }else{
@@ -191,7 +213,7 @@
               return "el-icon-user"
             }
           }
-        }, 
+        },
 
          initData(){  
            if(this.value instanceof String){
@@ -246,33 +268,39 @@
     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 {  
-            font-size: 16px;  
+            height: 20px;
+            line-height: 20px;
+            font-size: 0.75rem; 
         } 
         .field-label{   
-          height: 40px;
-          font-size: 14px;
+          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;  
-	}
-	.btn{
-		margin-top: 0px;
-		visibility:hidden; 
+    max-width: 250px;
+    display: none;
 	} 
 	 
 }
@@ -280,15 +308,24 @@
   display: none;
 }
  .field-box:hover .my-select{
-    height: 40px;
-    margin-left: 5px;
+    height: 20px;
+    margin-left: 5px; 
     display: inline;
-} 
-
+}
+.dashed-circle{ 
+	width:40px;
+	height:40px;
+	border:2px dashed #000000;
+	border-radius:40px/40px;
+}
+.field-box:hover .dashed-circle{
+  
+	border:2px dashed #409EFF;
+}
 
 
 .avatar-container {
-    height: 50px;
+    height: 40px;
     display: flex;
     align-items: center;
     .avatar-wrapper {
@@ -304,7 +341,7 @@
         }
         .username{
             color: #7D7D7D;
-            font-size: 14px; 
+            font-size: 0.75rem; 
         }
         .el-icon-caret-bottom {
             font-size: 22px;
diff --git a/src/views/xm/core/components/XmUserField/index.vue b/src/views/xm/core/components/XmUserField/index.vue
index 21e932f0..57719d24 100644
--- a/src/views/xm/core/components/XmUserField/index.vue
+++ b/src/views/xm/core/components/XmUserField/index.vue
@@ -1,12 +1,13 @@
 <template>    
     <el-row>
 						<div class="field-box">  
-							<el-avatar class="avater" :icon="getMyIcon(myVal)" :style="{backgroundColor:getMyColor(myVal)}">{{getMyAvaterInfo(myVal)}}</el-avatar> 
+							<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</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-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
+								<span class="field-value" v-else><span class="label-font-color">无</span></span> 
+                <slot name="label">
 								  <span class="field-label">{{label}}</span> 
                 </slot>
                   <div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
@@ -52,6 +53,32 @@
     name: 'user-field',
     components: { UsersSelect, XmGroupSelect },
     computed: { 
+      avaterCpd(){  
+        var isEmpty=this.isEmpty(this.myVal)
+        var username=isEmpty?"":this.myVal.username?this.myVal.username:this.myVal.userid
+        var obj={isNull:isEmpty,icon:'el-icon-user',color:'#E4E7ED',innerText:username} 
+          if(this.getColor||this.color){
+            if(this.getColor){
+               obj.color= this.getColor(this.myVal)
+            }else{
+              obj.color=this.color
+            }
+           
+          }else{
+            if(!isEmpty){ 
+                 obj.color= util.getColor(this.myVal.userid) 
+            } 
+          } 
+          if(this.getIcon||this.icon){
+            if(this.getIcon){
+              obj.icon= this.getIcon(this.myVal)
+            }else if(this.icon){
+             obj.icon=this.icon
+            }
+          } 
+          
+        return obj;
+      }
     },
     data(){
         return {
@@ -125,25 +152,25 @@
      
     },
     methods: {    
-      showMyValue(myVal){ 
-        if(!myVal){
-          return ""
-        }else{ 
-            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)
-        },
+        
+      
+        isEmpty(v) { 
+          switch (typeof v) {
+          case 'undefined':
+              return true;
+          case 'string':
+              if(v.length == 0) return true;
+              break; 
+          case 'object':
+              if (null === v || v.length === 0) return true;
+              for (var i in v) {
+                  return false;
+              }
+              return true;
+          }
+          return false;
+        }, 
+       
         getMyColor(item){ 
 
             if(item&&item.userid){
@@ -237,55 +264,69 @@
 <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 {  
-            font-size: 16px;  
+            height: 20px;
+            line-height: 20px;
+            font-size: 0.75rem; 
         } 
         .field-label{   
-          height: 40px;
-          font-size: 14px;
+          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;  
-	}
-	.btn{
-		margin-top: 0px;
-		visibility:hidden; 
+    max-width: 250px;
+    display: none;
 	} 
 	 
 }
  .field-box:hover .field-label{
-		display: none;
+  display: none;
 }
  .field-box:hover .my-select{
-    height: 40px;
-    margin-left: 5px;
+    height: 20px;
+    margin-left: 5px; 
     display: inline;
-} 
-
+}
+.dashed-circle{ 
+	width:40px;
+	height:40px;
+	border:2px dashed #000000;
+	border-radius:40px/40px;
+}
+.field-box:hover .dashed-circle{
+  
+	border:2px dashed #409EFF;
+}
 
 
 .avatar-container {
-    height: 50px;
+    height: 40px;
     display: flex;
     align-items: center;
     .avatar-wrapper {
@@ -301,7 +342,7 @@
         }
         .username{
             color: #7D7D7D;
-            font-size: 14px; 
+            font-size: 0.75rem; 
         }
         .el-icon-caret-bottom {
             font-size: 22px;