优化

src/components/DateField/index.vue

@@ -7,15 +7,15 @@
                 <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>
+								  <span class="field-label">{{label}}</span> 
+                  <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>
                 </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>
   
@@ -150,6 +150,7 @@
             font-size: 16px;  
         } 
         .field-label{   
+          height: 40px;
           font-size: 14px;
           color: #C0C4CC;
         }
@@ -172,10 +173,11 @@
 }
  .field-box:hover .my-select{
   
+    height: 40px;
     margin-left: 5px;
     display: inline;
 } 
- .field-box:hover .field-info{ 
+ .field-box:hover .field-label{ 
     display: none;
 } 
 </style>

src/components/DateRangeField/index.vue

@@ -7,21 +7,22 @@
 								<span class="field-value">{{formatDateRange(dateRange) }} </span>
                 <slot name="label">
 								  <span class="field-label">{{label}}</span>
+                  
+                  <div v-if="disabled!==true" class="my-select" name="select" :value="dateRange">
+                    
+                  <el-date-picker :type="type" :style="styleObj"  v-model="dateRange" :value-format="valueFormat" :format="format" 
+                      unlink-panels 
+                      :range-separator="rangeSepaSrator"
+                      :start-placeholder="startPlaceholder"
+                      :end-placeholder="endPlaceholder"
+                      :default-range="[-30,0]"
+                      @change="onDateRangeChange"
+                      :picker-options="pickerOptions"   
+                      ></el-date-picker>  
+                  </div>
                 </slot>
                 </slot>
 							</div>   
-							<div v-if="disabled!==true" class="my-select" name="select" :value="dateRange">
-                
-              <el-date-picker :type="type" :style="styleObj"  v-model="dateRange" :value-format="valueFormat" :format="format" 
-                  unlink-panels 
-                  :range-separator="rangeSepaSrator"
-                  :start-placeholder="startPlaceholder"
-                  :end-placeholder="endPlaceholder"
-                  :default-range="[-30,0]"
-                  @change="onDateRangeChange"
-                  :picker-options="pickerOptions"   
-                  ></el-date-picker>  
-              </div>
 						</div>  
 </template>
 
@@ -224,6 +225,7 @@ export default {
             font-size: 16px;  
         } 
         .field-label{   
+          height: 40px;
           font-size: 14px;
           color: #C0C4CC;
         }
@@ -244,11 +246,12 @@ export default {
 		visibility: visible !important;
 }
  .field-box:hover .my-select{
-  
+
     margin-left: 5px;
     display: inline;
+    height: 40px;
 } 
- .field-box:hover .field-info{ 
+ .field-box:hover .field-label{ 
     display: none;
 } 
 </style>

src/components/DictField/index.vue

@@ -7,13 +7,13 @@
                 <slot name="field-info" :dict="dict" :item="currentItem">
 								<span class="field-value">{{currentItem?currentItem.name:''}} </span>
                 <slot name="label" :dict="dict" :item="currentItem">
-								  <span class="field-label">{{label}}</span>
+								  <span class="field-label">{{label}}</span> 
+                <slot v-if="disabled!==true" class="my-select" name="select" :dict="dict" :value="myVal">
+                  <dict-select  :dict="dict" v-model="myVal" @change="onChange" :get-icon="getIcon" :get-color="getColor"></dict-select>
+                </slot>
                 </slot>
                 </slot>
 							</div>   
-							<slot v-if="disabled!==true" class="my-select" name="select" :dict="dict" :value="myVal">
-                <dict-select  :dict="dict" v-model="myVal" @change="onChange" :get-icon="getIcon" :get-color="getColor"></dict-select>
-              </slot>
 						</div> 
   </template>
   
@@ -158,6 +158,7 @@
             font-size: 16px; 
         } 
         .field-label{   
+          height: 40px;
           font-size: 14px;
           color: #C0C4CC;
         }
@@ -167,21 +168,17 @@
     margin-left: 5px;
     margin-right:5px;
     max-width: 120px;
-		visibility:hidden;  
-	}
-	.btn{
-		margin-top: 0px;
-		visibility:hidden; 
+    display: none;
 	} 
 	 
 }
- .field-box:hover .btn{
-		visibility: visible !important;
+ .field-box:hover .field-label{
+  display: none;
 }
  .field-box:hover .my-select{
-  
-    margin-left: 5px;
-		visibility: visible !important;
+    height: 40px;
+    margin-left: 5px; 
+    display: inline;
 } 
 </style>
   

src/components/UserField/index.vue

@@ -7,26 +7,26 @@
                 <slot name="field-info" :value="myVal">
 								<span class="field-value">{{showMyValue( myVal )}} </span>
                 <slot name="label">
-								  <span class="field-label">{{label}}</span>
+								  <span class="field-label">{{label}}</span> 
+                  <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>
                 </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>
@@ -258,6 +258,7 @@
             font-size: 16px;  
         } 
         .field-label{   
+          height: 40px;
           font-size: 14px;
           color: #C0C4CC;
         }
@@ -275,11 +276,11 @@
 	} 
 	 
 }
- .field-box:hover .btn{
-		visibility: visible !important;
+ .field-box:hover .field-label{
+  display: none;
 }
  .field-box:hover .my-select{
-  
+    height: 40px;
     margin-left: 5px;
     display: inline;
 } 

src/views/xm/core/components/XmUserField/index.vue

@@ -6,31 +6,32 @@
               <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 name="label" >
+								  <span class="field-label">{{label}}</span> 
                 </slot>
+                  <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="myVal" 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="myVal" disabled>
+                              <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||productId" :type="projectVisible?'primary':''"  @click.stop="projectVisible=true">项目组</el-button> </el-row>
+                          </el-option>
+                      </el-select> 
+                  </div>
+                
                 </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="myVal" 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="myVal" disabled>
-                          <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||productId" :type="projectVisible?'primary':''"  @click.stop="projectVisible=true">项目组</el-button> </el-row>
-                      </el-option>
-                  </el-select> 
-              </div>
+							</div>  
 						</div> 
             <el-dialog v-if="disabled!==true" :visible.sync="deptUserVisible" append-to-body top="20px" width="60%">
                <users-select :visible="deptUserVisible" :isSingleUser="true"  :isSelectByDept="true" @confirm="onConfirmUsers"></users-select>
@@ -254,6 +255,7 @@
             font-size: 16px;  
         } 
         .field-label{   
+          height: 40px;
           font-size: 14px;
           color: #C0C4CC;
         }
@@ -271,11 +273,11 @@
 	} 
 	 
 }
- .field-box:hover .btn{
-		visibility: visible !important;
+ .field-box:hover .field-label{
+		display: none;
 }
  .field-box:hover .my-select{
-  
+    height: 40px;
     margin-left: 5px;
     display: inline;
 }