重构表格

src/view/Welcome.vue

@@ -13,9 +13,7 @@
 
 <p>3.数据报表</p>
 
-<p>4.移动BI</p>
-
-<p>5.权限管理</p>
+<p>4.权限管理</p>
 
 <br/>
 <p class="text-warning">如果您需要更多功能，可以<button class="btn btn-primary btn-sm" onclick="window.open('https://www.ruisitech.com/product.html')">购买企业版</button></p>

src/view/frame/Menu.vue

@@ -24,7 +24,7 @@
 				     	<el-input v-model="menu.menuUrl" placeholder="如果创建目录则不用填写URL"></el-input>
 				    </el-form-item>
 					<el-form-item label="排序" label-width="100px">
-						<el-input-number v-model="menu.menuOrder" :min="0" :max="100"></el-input-number>
+						<el-input-number v-model="menu.menuOrder" :min="0" :max="100" size="small"></el-input-number>
 					</el-form-item>
 					<el-form-item label="备注" label-width="100px">
 				     	<el-input v-model="menu.menuDesc" ></el-input>

src/view/portal/LayoutOptarea.vue

@@ -88,9 +88,10 @@ export default {
   },
   mounted() {
     this.bindTdEvent();
-    this.$nextTick(()=>{
-      $(window).resize(()=>this.resizeChart());
-    });
+    $(window).resize(()=>this.resizeChart());
+  },
+  beforeDestroy(){
+    $(window).unbind("resize");
   },
   computed: {},
   methods: {
@@ -401,7 +402,10 @@ export default {
 
       });
     },
-    resizeChart(){
+    /**
+     * 调整图形大小,comp存在表示子调整当前组件，不存在表示调整所有组件
+     */
+    resizeChart(comp){
       let comps = utils.findAllComps(this.pageInfo);
       comps.forEach(m=>{
         if(m.type === 'chart'){
@@ -409,10 +413,10 @@ export default {
           if(dom){
             var chart = echarts.getInstanceByDom(dom);
             if(chart){
-              chart.resize($(dom).width(), $(dom).height());
+              let height = m.height?m.height:$(dom).height();
+              chart.resize($(dom).width(), height);
             }
           }
-          
         }
       });
     },
@@ -486,15 +490,18 @@ export default {
       });
       //注册resize事件
       $("#c_" + obj.id+" .ibox-content").resizable({
-        autoHide: false ,
+        autoHide: true ,
         handles:"s",
         minHeight:50,
         grid: [ 10, 10 ],
-        stop:function(event, ui){
+        resize:( event, ui )=>{
           let id = $(ui.element).parent().attr("id");
           id = id.replace("c_", "");
           let comp = utils.findCompById(ts.pageInfo, id);
-          comp.height = ui.size.height;
+          comp.height = Math.round(ui.size.height);  //更新组件高度
+        },
+        stop:function(event, ui){
+          
         }
       });
     }
@@ -564,20 +571,18 @@ table.r_layout {
     margin-bottom: 10px !important;
 }
 .cctx {
-  overflow: auto;
+  overflow: hidden;
 }
 .tipinfo {
 	color:#999;
 	padding:10px;
 }
-.win-size-grip {
-	position: absolute;
-	width: 16px;
-	height: 16px;
-	padding: 4px;
-	bottom: 0;
-	right: 0;
-	cursor: nwse-resize;
-	background: url(../../assets/image/wingrip.png) no-repeat;
+</style>
+<style lang="less">
+.ui-resizable-s {
+  height:18px;
+  background-image: url(../../assets/image/wingrip.png);
+  background-position: right;
+  background-repeat: no-repeat;
 }
 </style>

src/view/portal/data/Table.vue

@@ -6,7 +6,7 @@
       <template v-if="!hasData()">
         <b>交叉表字段：</b>
         <template v-for="item in comp.rows">
-          <span class="dimcol" :key="item.id">
+          <span class="dimcol" :key="'p' + item.id">
             <span class="text">{{ item.dimdesc }}</span>
             <div class="ibox-tools">
               <button class="btn btn-outline btn-success btn-xs" type="button" @click="showmenu(item,'row')"><i class="fa fa-wrench"></i>
@@ -16,7 +16,7 @@
         </template>
         <template v-for="item in comp.cols">
           <b :key="item.id">列字段：</b>
-          <span class="dimcol" :key="item.id">
+          <span class="dimcol" :key="'c' + item.id">
             <span class="text">{{ item.dimdesc }}</span>
             <div class="ibox-tools">
               <button class="btn btn-outline btn-success btn-xs" type="button" @click="showmenu(item,'col')"><i class="fa fa-wrench"></i>

src/view/portal/view/Box.vue

@@ -34,6 +34,9 @@ export default {
       if(color){
         style.color = color;
       }
+      if(comp.height){
+        style['line-height'] = comp.height + "px";
+      }
       return h('div', {class:"boxcls", style:style}, this.data.value);
     }else{
       return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});

src/view/portal/view/Chart.vue

@@ -24,7 +24,8 @@ export default {
     let ts = this;
     let comp = this.comp;
     if(this.data){
-      return h('div', {attrs:{id:"ct_"+comp.id}, style:{width:'100%', height:"250px"}});
+      let height = comp && comp.height?comp.height:250;
+      return h('div', {attrs:{id:"ct_"+comp.id}, style:{width:'100%', height: height + "px"}});
     }else{
       return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
     }

src/view/portal/view/Grid.vue

@@ -81,11 +81,23 @@ export default {
       ];
 
       let pageinfo = h('div', {class:"pagesizeinfo"}, [h('div', {class:"pagesizeLeft"}, pg), h('div', {class:"pagesizeRight"}, '第'+(data.curPage + 1)+'页，共'+data.total+'条记录')]);
-      let cld = [h('div', {class:"lock-dg-header"}, [table1]), h('div', {class:"lock-dg-body"}, [table2])];
+      let bodysyl = {"overflow":"auto"};
+      if(comp.height){
+        let height = comp.height;
+        height = height - 28;  //组件高度减去 head 的高度
+        if(!(comp.isnotfy == true)){  //分页
+          height = height - 30; //减去分页高度
+        }
+        bodysyl.height = height + "px";
+      }else{
+        bodysyl.height = "220px";
+      }
+      
+      let cld = [h('div', {class:"lock-dg-header"}, [table1]), h('div', {class:"lock-dg-body", style:bodysyl}, [table2])];
       if(!(this.comp.isnotfy === true)){
         cld.push(pageinfo);
       }
-      return h('div', {class:"lock-dg"}, cld);
+      return h('div', {class:"lock-dg", attrs:{id:comp.id}}, cld);
       
     }
     return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
@@ -96,6 +108,14 @@ export default {
   computed: {
   },
   methods: {
+    bindScrollEvent(){
+      let comp = this.comp;
+      //注册table的scroll事件
+      $("#"+comp.id+" .lock-dg-body").unbind("scroll").bind("scroll", function(){
+        var left = $(this).scrollLeft();
+        $("#"+comp.id+" .lock-dg-header").css("margin-left", "-"+left+"px");
+      });
+    },
     gridView(){
       let ts = this;
       let comp = this.comp;
@@ -110,6 +130,7 @@ export default {
             success:(resp)=>{
               ts.data = resp.rows;
               loadingInstance.close();
+              ts.$nextTick(()=>ts.bindScrollEvent());
             }
           }, this);
       }

src/view/portal/view/Table.vue

@@ -45,8 +45,16 @@ export default {
       });
       let table2 = h('table', {class:"lockgrid"}, [h('thead', tbodytrs)]);
 
-      let cld = [h('div', {class:"lock-dg-header"}, [table1]), h('div', {class:"lock-dg-body"}, [table2])];
-      return h('div', {class:"lock-dg"}, cld);
+      let bodysyl = {"overflow":"auto"};
+      if(comp.height){
+        let height = comp.height;
+        height = height - this.data.colLevel * 28;  //组件高度减去 head 的高度
+        bodysyl.height = height + "px";
+      }else{
+        bodysyl.height = "220px";
+      }
+      let cld = [h('div', {class:"lock-dg-header"}, [table1]), h('div', {class:"lock-dg-body", style:bodysyl}, [table2])];
+      return h('div', {class:"lock-dg", attrs:{id:comp.id}}, cld);
 
     }else{
       return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
@@ -58,6 +66,14 @@ export default {
   computed: {
   },
   methods: {
+    bindScrollEvent(){
+      let comp = this.comp;
+      //注册table的scroll事件
+      $("#"+comp.id+" .lock-dg-body").unbind("scroll").bind("scroll", function(){
+        var left = $(this).scrollLeft();
+        $("#"+comp.id+" .lock-dg-header").css("margin-left", "-"+left+"px");
+      });
+    },
     tableView(){
       let ts = this;
       let comp = this.comp;
@@ -72,6 +88,7 @@ export default {
             success:(resp)=>{
               ts.data = resp.rows;
               loadingInstance.close();
+              ts.$nextTick(()=>ts.bindScrollEvent());
             }
           }, this);
       }