优化

src/common/js/util.js

@@ -17,12 +17,12 @@ export default {
    * 通过字典值获取其名称
    * 界面上可以
    * {{formatDicts(dicts,'xxx',scope.row.xxx)}}
-   * @param {*} dicts 
-   * @param {*} itemCode 
-   * @param {*} cellValue 
-   * @returns 
+   * @param {*} dicts
+   * @param {*} itemCode
+   * @param {*} cellValue
+   * @returns
    */
-  formatDicts: function(dicts,itemCode,cellValue){ 
+  formatDicts: function(dicts,itemCode,cellValue){
     let key=itemCode;
     if( dicts[key]==undefined ||  dicts[key]==null ||  dicts[key].length==0   ){
       return cellValue;
@@ -32,22 +32,22 @@ export default {
       return dict.name
     }else{
       return cellValue
-    } 
-  }, 
+    }
+  },
 
   /**
    * 通过字典值获取其名称，返回根值相同的字典,并自动计算其对应显示样式
    * 界面上可以类似使用
    * 显示：
       <el-tag v-for="(item,index) in formatDictsWithClass(dicts,'xxxx',scope.row.xxxx)" :key="index" :type="item.className">{{item.name}}</el-tag>
-   
+
    * 下拉框：
       <el-select v-model="editForm.xxxx" @change="editSomeFields(editForm,'xxxx',$event)">
         <el-option style="margin-top:5px;" v-for="(item,index) in dicts['xxxx']" :key="index" :value="item.id" :label="item.name">
-           <span :style="{backgroundColor:item.color}"> 
+           <span :style="{backgroundColor:item.color}">
               <i  v-if="item.icon" :class="item.icon"></i>
               {{item.name}}
-           </span> 
+           </span>
         </el-option>
       </el-select>
 
@@ -61,15 +61,15 @@ export default {
       7|xx|#ff8c00
       8|xx|#c7158577
       9|xx|#ffd700
-   * 
-   * @param {*} dicts 
-   * @param {*} itemCode 
-   * @param {*} cellValue 
+   *
+   * @param {*} dicts
+   * @param {*} itemCode
+   * @param {*} cellValue
    * @returns [{id:'',name:'',className:'',color:'',icon:''}]
-   */ 
-  formatDictsWithClass: function(dicts,itemCode,cellValue){ 
-    
-    var classNames=['info','primary','success','warning','danger']; 
+   */
+  formatDictsWithClass: function(dicts,itemCode,cellValue){
+
+    var classNames=['info','primary','success','warning','danger'];
     var colors=['#909399','#409EFF','#67C23A','#E6A23C','#F56C6C','#00ced1','#c71585','#ff8c00','#c7158577','#ffd700'];
 
     let key=itemCode;
@@ -89,30 +89,30 @@ export default {
         typeIndex=1
       }
     if(dicts[key]==undefined || dicts[key]==null || dicts[key].length==0   ){
-      
+
       return [{id:cellValue,name:cellValue,className:classNames[typeIndex],color:colors[colorIndex]}];
     }
-    let data=dicts[key].find(i=>i.id===cellValue) 
-    if(data){ 
+    let data=dicts[key].find(i=>i.id===cellValue)
+    if(data){
       data['className']=classNames[typeIndex]
       if(!data.color){
         data.color=colors[colorIndex]
-      } 
+      }
       return [data];
     }else{
       return [{id:cellValue,name:cellValue,className:classNames[typeIndex],color:colors[colorIndex]}]
     }
 
-  },  
+  },
 
-  getColor(cellValue){ 
+  getColor(cellValue){
     var colors=['#909399','#409EFF','#67C23A','#E6A23C','#F56C6C','#00ced1','#c71585','#ff8c00','#c7158577','#ffd700'];
     if(!cellValue){
       return colors[0]
-    } 
+    }
     var cellValueInt=parseInt(cellValue)
       if( isNaN(cellValueInt) ){
-        
+
         if(cellValue instanceof String && cellValue.length>0){
           cellValueInt=cellValue.charCodeAt(cellValue.length-1)
         }else if(cellValue instanceof Object){
@@ -121,11 +121,11 @@ export default {
           }else{
             cellValueInt=0;
           }
-          
+
         }else{
           cellValueInt=0;
         }
-       
+
       }
       var colorIndex=cellValueInt % 10
       if(cellValueInt > 0 && colorIndex==0){
@@ -134,8 +134,8 @@ export default {
       return  colors[colorIndex]
   },
 
-  getType(cellValue){ 
-    var classNames=['info','primary','success','warning','danger']; 
+  getType(cellValue){
+    var classNames=['info','primary','success','warning','danger'];
 
     if(!cellValue){
       return classNames[0]
@@ -143,30 +143,44 @@ export default {
     var cellValueInt=parseInt(cellValue)
       if( isNaN(cellValueInt) ){
         cellValueInt=cellValue.charCodeAt(cellValue.length-1)
-      } 
+      }
       var typeIndex=cellValueInt % 5
       if(cellValueInt > 0 && typeIndex==0){
         typeIndex=1
       }
       return classNames[typeIndex]
   },
-  calcTableMaxHeight(cssSelector) {     
+  
+  calcMaxHeight(cssSelector) {     
+    debugger;
     var table=cssSelector;
     if(typeof cssSelector == 'string'){
       table=document.querySelector(cssSelector);
+    }  
+    var innerHeight=window.innerHeight   
+    var top=150; 
+
+    
+    if(table!=null){  
+      var rect=table.getBoundingClientRect()     
+
+      if(rect && rect.top){ 
+        top=rect.top;
+      }  
     } 
+    var maxTableHeight =innerHeight-top;  
+    return maxTableHeight;
+  }, 
+  calcTableMaxHeight(cssSelector) {     
+    var table=cssSelector;
+    if(typeof cssSelector == 'string'){
+      table=document.querySelector(cssSelector);
+    }  
     var innerHeight=window.innerHeight  
-    var defaultInnerHeight=616;  
-    var pageHeight=32/defaultInnerHeight*innerHeight 
-    var top=150/defaultInnerHeight*innerHeight;
-    var bottomHeight=36/defaultInnerHeight*innerHeight
-    if(innerHeight>=916){
-      bottomHeight=20/defaultInnerHeight*innerHeight
-    }else if(innerHeight>=800){
-      bottomHeight=26/defaultInnerHeight*innerHeight
-    }else if(innerHeight>=700){
-      bottomHeight=32/defaultInnerHeight*innerHeight
-    }
+    var pageHeight=32 
+    var top=150;
+    var bottomHeight=24
+
     
     if(table!=null){  
       var rect=table.getBoundingClientRect()    
@@ -177,13 +191,13 @@ export default {
     var maxTableHeight =innerHeight-top-pageHeight-bottomHeight;  
     return maxTableHeight;
   }, 
-  getPositionTop(node) { 
+  getPositionTop(node) {
 
       if(!node){
         return 0;
-      } 
-      var rect=node.getBoundingClientRect() 
-      var top=rect.top; 
+      }
+      var rect=node.getBoundingClientRect()
+      var top=rect.top;
       if(top==0){
         return 0;
       }
@@ -300,7 +314,7 @@ export default {
    */
   toLine(name) {
     return name.replace(/([A-Z])/g, "_$1").toLowerCase();
-  }, 
+  },
   formatDate: function(date, pattern) {
       pattern = pattern || DEFAULT_PATTERN
       return pattern.replace(SIGN_REGEXP, function($0) {
@@ -356,7 +370,7 @@ export default {
         return _date
       }
       return null
-    }, 
+    },
 
   //type date/daterange
   getPickerOptions: function(type) {

src/components/mdp-ui/js/util.js

@@ -398,5 +398,46 @@ export default {
     // 防止反复添加
     if(!document.getElementById(id)) document.body.appendChild(a);
     a.click();
-  }
+  },
+
+  calcMaxHeight:function(cssSelector) {
+    debugger;
+    var table=cssSelector;
+    if(typeof cssSelector == 'string'){
+      table=document.querySelector(cssSelector);
+    }
+    var innerHeight=window.innerHeight
+    var top=150;
+
+
+    if(table!=null){
+      var rect=table.getBoundingClientRect()
+
+      if(rect && rect.top){
+        top=rect.top;
+      }
+    }
+    var maxTableHeight =innerHeight-top;
+    return maxTableHeight;
+  },
+  calcTableMaxHeight:function(cssSelector) {
+    var table=cssSelector;
+    if(typeof cssSelector == 'string'){
+      table=document.querySelector(cssSelector);
+    }
+    var innerHeight=window.innerHeight
+    var pageHeight=32
+    var top=150;
+    var bottomHeight=24
+
+
+    if(table!=null){
+      var rect=table.getBoundingClientRect()
+      if(rect && rect.top!=0){
+        top=rect.top;
+      }
+    }
+    var maxTableHeight =innerHeight-top-pageHeight-bottomHeight;
+    return maxTableHeight;
+  }, 
 }

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

@@ -1,90 +1,90 @@
-<template>    
+<template>
     <el-row>
-						<div :class="{'field-box':true,'small':size=='small','medium':size=='medium'}">  
+						<div :class="{'field-box':true,'small':size=='small','medium':size=='medium'}">
               <div class="avatar-container">
                 <div class="avatar-wrapper">
-                  <img v-if="avaterCpd.userid" class="user-avatar" :class="{'dashed-circle':avaterCpd.isNull}"   :style="{backgroundColor:avaterCpd.color}" :src="getHeadimgurl(avaterCpd.userid,avaterCpd.headimgurl)" @error="onImgError(avaterCpd.userid,$event)"></img>  
-                  <el-avatar v-else class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
-							
+                  <img v-if="avaterCpd.userid" class="user-avatar" :class="{'dashed-circle':avaterCpd.isNull}"   :style="{backgroundColor:avaterCpd.color}" :src="getHeadimgurl(avaterCpd.userid,avaterCpd.headimgurl)" @error="onImgError(avaterCpd.userid,$event)"></img>
+                  <el-avatar v-else class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
+
                 </div>
               </div>
 
               <div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
                 <slot name="field-info" :value="myVal"  >
                   <span :class="{'field-value':label,'field-value-center':!label}" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
-                  <span :class="{'field-value':label,'field-value-center':!label}" v-else><span class="label-font-color">无</span></span> 
+                  <span :class="{'field-value':label,'field-value-center':!label}" v-else><span class="label-font-color">无</span></span>
                   <slot name="label">
-                    <span class="field-label" v-if="label">{{label}}</span> 
-                  </slot> 
+                    <span class="field-label" v-if="label">{{label}}</span>
+                  </slot>
                 </slot>
-							</div>  
+							</div>
               <div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
                 <slot name="oper">
-                    <el-select :size="size" v-model="myVal" @change="onSelectChange" :clearable="clearable" filterable value-key="userid" @visible-change="$emit('visible-change',$event)" @focus="$emit('focus',$event)" @blur="$emit('blur',$event)" @clear="$emit('blur',$event)" @click="$emit('click',$event)">  
-                        
+                    <el-select :size="size" v-model="myVal" @change="onSelectChange" :clearable="clearable" filterable value-key="userid" @visible-change="$emit('visible-change',$event)" @focus="$emit('focus',$event)" @blur="$emit('blur',$event)" @clear="$emit('blur',$event)" @click="$emit('click',$event)">
+
                         <el-option :value="myVal" disabled v-if="users && users.length>10">
                             <el-row ><el-button v-if="users && users.length>0" :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-button v-if="projectId||productId" :type="productVisible?'primary':''"  @click.stop="productVisible=true">产品组</el-button> 
+                              <el-button v-if="projectId||productId" :type="projectVisible?'primary':''"  @click.stop="projectVisible=true">项目组</el-button>
+                              <el-button v-if="projectId||productId" :type="productVisible?'primary':''"  @click.stop="productVisible=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">  
-                        
+                        <el-option class="avatar-container" v-for="(item,index) in users" :key="index" :value="item" :label="item.username">
+
                           <div class="avatar-wrapper">
-                                <img class="user-avatar"  :style="{backgroundColor:getMyColor(item)}" :src="getHeadimgurl(item.userid,item.headimgurl)" @error="onImgError(item.userid,$event)"></img>  
+                                <img class="user-avatar"  :style="{backgroundColor:getMyColor(item)}" :src="getHeadimgurl(item.userid,item.headimgurl)" @error="onImgError(item.userid,$event)"></img>
                                 <span class="username">{{item.username}}</span>
-                                <i v-if="myVal && myVal.userid==item.userid" class="el-icon-check"></i> 
-                                <i v-else>&nbsp;&nbsp;</i>  
+                                <i v-if="myVal && myVal.userid==item.userid" class="el-icon-check"></i>
+                                <i v-else>&nbsp;&nbsp;</i>
                           </div>
-                        </el-option> 
+                        </el-option>
                         <el-option :value="myVal" disabled>
                             <el-row>
-                              <el-button v-if="users && users.length>0" :type="deptUserVisible?'':'primary'" @click.stop="deptUserVisible=false">常用用户</el-button> 
+                              <el-button v-if="users && users.length>0" :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-button v-if="projectId||productId" :type="productVisible?'primary':''"  @click.stop="productVisible=true">产品组</el-button> 
+                              <el-button v-if="projectId||productId" :type="productVisible?'primary':''"  @click.stop="productVisible=true">产品组</el-button>
 
                             </el-row>
                         </el-option>
                         <slot name="extOper">
 
                         </slot>
-                    </el-select> 
+                    </el-select>
 
                   </slot>
               </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="onTeamUsersConfirm"></users-select>
             </el-dialog>
-            
+
             <el-dialog v-if="disabled!==true" :visible.sync="projectVisible" append-to-body top="20px" width="60%">
                <xm-group-select-for-project :visible="projectVisible" :sel-project="projectId?{id:projectId}:null" :xm-product="productId?{id:productId}:null" :isSelectSingleUser="true" @user-confirm="onTeamUsersConfirm"></xm-group-select-for-project>
-            </el-dialog> 
+            </el-dialog>
             <el-dialog v-if="disabled!==true" :visible.sync="productVisible" append-to-body top="20px" width="60%">
                <xm-group-select-for-product :visible="productVisible" :sel-project="projectId?{id:projectId}:null" :xm-product="productId?{id:productId}:null" :isSelectSingleUser="true" @user-confirm="onTeamUsersConfirm"></xm-group-select-for-product>
-            </el-dialog> 
+            </el-dialog>
     </el-row>
   </template>
-  
-  <script>  
-  
+
+  <script>
+
   import util  from '@/common/js/util';//全局公共库
   import UsersSelect from '@/views/mdp/sys/user/UsersSelectOnly.vue'
   import XmGroupSelectForProject from '@/views/xm/core/xmGroup/XmGroupSelectForProject.vue'
   import XmGroupSelectForProduct from '@/views/xm/core/xmGroup/XmGroupSelectForProduct.vue'
-  var us=localStorage.getItem("mdp-his-users") 
+  var us=localStorage.getItem("mdp-his-users")
   import imtUtil  from '@/api/imgUtil';//全局公共库
-  var users=us?JSON.parse(us):[] 
+  var users=us?JSON.parse(us):[]
   export default {
     name: 'mdp-select-user-xm',
     components: { UsersSelect, XmGroupSelectForProject,XmGroupSelectForProduct },
-    computed: { 
-      avaterCpd(){  
-        
+    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,userid:'',headimgurl:''} 
+        var obj={isNull:isEmpty,icon:'el-icon-user',color:'#E4E7ED',innerText:username,userid:'',headimgurl:''}
         if(!isEmpty){
             obj.headimgurl=this.myVal.headimgurl
             obj.userid=this.myVal.userid
@@ -95,12 +95,12 @@
             }else{
               obj.color=this.color
             }
-           
+
           }else{
-            if(!isEmpty){ 
-                 obj.color= util.getColor(this.myVal.userid) 
-            } 
-          } 
+            if(!isEmpty){
+                 obj.color= util.getColor(this.myVal.userid)
+            }
+          }
 
 
           if(this.getIcon||this.icon){
@@ -109,63 +109,63 @@
             }else if(this.icon){
              obj.icon=this.icon
             }
-          } 
+          }
+
+
 
-          
-          
         return obj;
       }
     },
     data(){
         return {
-            myVal:{userid:'',username:'',headimgurl:''}, 
+            myVal:{userid:'',username:'',headimgurl:''},
             users:[],
             deptUserVisible:false,
             projectVisible:false,
             productVisible:false,
         }
     },
-    watch:{ 
-        value:{  
-          handler(){ 
+    watch:{
+        value:{
+          handler(){
              this.initData();
           },
           deep:true,
           immediate:true,
-           
-        },  
-        
-      myVal(){  
+
+        },
+
+      myVal(){
             if(!this.myVal||!this.myVal.userid){
               if(this.value && this.value[this.useridKey]){
                 this.value[this.useridKey]=""
                 this.value[this.usernameKey]=""
                 this.$emit('input',this.value)
               }
-             
+
             }else{
               if(this.value){
-                 if(this.value[this.useridKey]!=this.myVal.userid){ 
+                 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) 
+                  this.value[this.usernameKey]=this.myVal.username
+                  this.$emit('input',this.value)
                 }
               }
-             
-            } 
-        
+
+            }
+
       }
     },
     props: {
       size:{
           type:String,
-          default:'small',// medium/small/mini	 
+          default:'small',// medium/small/mini
       },
         projectId:{
           type:String,
           default:''
         },
-      
+
         productId:{
           type:String,
           default:''
@@ -181,31 +181,31 @@
         clearable:{
             type:Boolean,
             default:false,
-        }, 
+        },
       value: {
-        
-      },     
+
+      },
     useridKey: {
       type: String,
       default: 'userid'
-    },  
-    
+    },
+
     usernameKey: {
       type: String,
       default: 'username'
-    }, 
-     
     },
-    methods: {    
+
+    },
+    methods: {
         ...imtUtil,
-      
-        isEmpty(v) {  
+
+        isEmpty(v) {
           switch (typeof v) {
           case 'undefined':
               return true;
           case 'string':
               if(v.length == 0) return true;
-              break; 
+              break;
           case 'object':
               if (null === v || v.length === 0) return true;
                if(v.userid){
@@ -214,53 +214,53 @@
               return true;
           }
           return false;
-        }, 
-       
-        getMyColor(item){ 
+        },
+
+        getMyColor(item){
 
             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)
               }
-            } 
-          
-        }, 
+            }
 
-         initData(){    
+        },
+
+         initData(){
 
             var myVal={userid:'',username:'',headimgurl:''}
             if(this.value){
-          
+
               myVal.userid=this.value[this.useridKey]
-              myVal.username=this.value[this.usernameKey]  
+              myVal.username=this.value[this.usernameKey]
               myVal.headimgurl=this.value.headimgurl
               this.myVal={...myVal}
             }else{
               this.myVal={...myVal}
             }
-           
-          
-      }, 
+
+
+      },
         onSelectChange(item){
           this.onChange([item])
         },
-        onChange(data){   
+        onChange(data){
           this.$emit('change',data)
         },
         onTeamUsersConfirm(users){
           this.onChange(users)
           this.myVal=users[0]
           this.projectVisible=false;
-          this.productVisible=false; 
+          this.productVisible=false;
           this.deptUserVisible=false;
           var notHad=false;
            users.forEach(u=>{
@@ -273,23 +273,22 @@
 						 this.users.unshift(u)
 					 }
 				 })
-				 if(notHad){ 
+				 if(notHad){
 					 var us=JSON.stringify(this.users)
 				 	localStorage.setItem("mdp-his-users",us)
 				 }
         },
-         
+
     },
-    mounted(){  
+    mounted(){
 			this.users=users
       //this.initData();
 
     }
   }
   </script>
-  
-<style lang="scss" scoped>  
+
+<style lang="scss" scoped>
   @import '@/components/Mdp/index.scss';
 </style>
- 
-  
+

src/views/xm/rpt/index/CompsSet.vue

@@ -247,6 +247,7 @@ export default {
         //this.comps.forEach(k=>k.id=k.id?k.id:k.compId) 
        
         this.$nextTick(()=>{
+            debugger
             this.maxTableHeight = util.calcMaxHeight(this.$refs.table.$el)
             if(this.category){
                 this.filters.category=this.category