重构

src/view/portal/LayoutOptarea.vue

@@ -8,6 +8,7 @@ import * as utils from './Utils'
 import BoxView from "./view/Box.vue"
 import ChartView from "./view/Chart.vue"
 import GridView from "./view/Grid.vue"
+import TableView from "./view/Table.vue"
 
 export default {
   components: {
@@ -15,6 +16,7 @@ export default {
     BoxView,
     ChartView,
     GridView,
+    TableView,
     ChartDailog
   },
   props: {
@@ -117,6 +119,8 @@ export default {
         compctx.push(h('chart-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}));
       }else if(comp.type === 'grid'){
         compctx.push(h('grid-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}));
+      }else if(comp.type === 'table'){
+        compctx.push(h('table-view',{ref:'mv_'+comp.id, attrs:{comp:comp}}));
       }
       let style = {padding:"3px"};
       let bgcolor = comp.bgcolor;

src/view/portal/LayoutRight.vue

@@ -12,6 +12,7 @@
             <ptext v-if="showText" ref="textForm" :comp="comp"></ptext>
             <pchart v-if="showChart" ref="chartForm" :comp="comp"></pchart>
             <pgrid v-if="showGrid" ref="gridForm" :comp="comp"></pgrid>
+            <ptable v-if="showTable" ref="tableForm" :comp="comp"></ptable>
           </div>
         </div>
       </div>
@@ -25,11 +26,11 @@ import pbox from './prop/Box'
 import ptext from './prop/Text'
 import pchart from './prop/Chart'
 import pgrid from './prop/Grid'
-
+import ptable from './prop/Table'
 
 export default {
   components:{
-    pbox,ptext,pchart,pgrid
+    pbox,ptext,pchart,pgrid,ptable
   },
   props:{
       pageInfo:{
@@ -80,6 +81,7 @@ export default {
         this.$nextTick(()=>this.$refs['gridForm'].init());
       }else if(comp.type === 'table'){
         this.showTable = true;
+        this.$nextTick(()=>this.$refs['tableForm'].init());
       }else if(comp.type === 'text'){
         this.showText = true;
         this.$nextTick(()=>this.$refs['textForm'].init());

src/view/portal/prop/Table.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-form :model="prop" ref="propForm" label-position="left" size="mini">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="交叉表属性" name="1">
+            <el-form-item label="标题" label-width="70px">
+              <el-input v-model="prop.title" @blur="changevalue('title')"></el-input>
+            </el-form-item>
+            <el-form-item label="是否显示标题" label-width="170px">
+              <el-switch v-model="prop.showtitle" @change="changevalue('showtitle')"></el-switch>
+            </el-form-item>
+            <el-form-item label="交叉表下钻" label-width="170px">
+              <el-switch v-model="prop.usedrill" @change="changevalue('usedrill')"></el-switch>
+            </el-form-item>
+            <template v-if="prop.usedrill == true">
+            <el-form-item label="钻取维" label-width="70px">
+              <el-select v-model="prop.drillDim" placeholder="请选择" style="width:100%">
+                <el-option
+                v-for="item in cols"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            </template>
+      </el-collapse-item>
+      
+    </el-collapse>
+  </el-form>
+</template>
+
+<script>
+import {baseUrl, ajax} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+
+export default {
+  components:{
+    
+  },
+  props:{
+      comp:{
+        type:Object,
+        required:true
+      }
+  },
+  data(){
+    return {
+      activeName:"1",
+      prop:{
+        title:null,
+        showtitle:true,
+        usedrill:false,
+        drillDim:""
+      },
+      cols:[]
+    }
+  },
+  mounted(){
+    
+  },
+  computed: {
+  },
+  methods: {
+    loadCols(){
+      ajax({
+        type:"post",
+        url:"bireport/queryDims.action",
+        data: {cubeId: this.comp.cubeId},
+        success:(resp)=>{
+          this.cols = resp.rows.map(m=>{
+            return {lable:m.dim_desc, value:m.alias}
+          });
+        }
+      });
+    },
+    init(){
+      let p = this.prop;
+      let c = this.comp;
+      p.title = c.name;
+      p.showtitle = c.showtitle;
+      p.usedrill = c.usedrill;
+      this.loadCols();
+    },
+   
+    tableView(){
+      this.$parent.$parent.$refs['optarea'].$refs['mv_'+this.comp.id].gridView();
+    },
+    compRender(){
+      this.$parent.$parent.$refs['optarea'].$forceUpdate();
+    },
+    changevalue(prop){
+      let c = this.comp;
+      let v = this.prop[prop];
+      if(prop === 'title' || prop === 'showtitle' || prop === 'usedrill'){
+        c[prop] = v;
+      }
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>

src/view/portal/view/Table.vue

@@ -0,0 +1,88 @@
+<script>
+import {baseUrl, ajax} from '@/common/biConfig'
+import $ from 'jquery'
+import * as utils from '@/view/portal/Utils'
+import { Loading } from 'element-ui'
+
+export default {
+  components:{    
+  },
+  data(){
+    return {
+      data:null
+    }
+  },
+  props:{
+      comp:{
+        type:Object,
+        required:true,
+        default:{}
+      }
+  },
+  render(h){
+    let ts = this;
+    let comp = this.comp;
+    if(this.data){
+      let trs = [];
+			$(this.data.header).each((a, b)=>{
+				let ths = [];
+				$(b).each((c, d)=>{
+          ths.push(h('th', {class:"grid3-td", attrs:{colspan:d.colSpan, rowspan:d.rowSpan,align:"center"}}, [h('div', {class:"dg-cell"}, d.desc)]));
+				});
+				trs.push(h('tr', ths));
+      });
+      
+      let table1 = h('table', {class:"lockgrid"}, [h('thead', trs)]);
+
+
+			let tbodytrs = [];
+			$(this.data.datas).each((a, b)=>{
+				let tds = [];
+				$(b).each((c, d)=>{
+          tds.push(h('td', {attrs:{class:"lockgrid-td",colspan:d.colSpan, rowspan:d.rowSpan, align:d.isRow==true?"left":"right"}}, [h('div', {class:"dg-cell"}, d.value)]));
+				});
+				tbodytrs.push(h('tr', tds));
+      });
+      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);
+
+    }else{
+      return h('div', {attrs:{align:"center", class:"tipinfo"}, domProps:{innerHTML:"(点击<i class=\"fa fa-wrench\"></i>按钮配置"+utils.getCompTypeDesc(comp.type)+")"}});
+    }
+  },
+  mounted(){
+    this.tableView();
+  },
+  computed: {
+  },
+  methods: {
+    tableView(){
+      let ts = this;
+      let comp = this.comp;
+      if(comp.kpiJson && comp.kpiJson.length > 0){
+          let json = JSON.parse(JSON.stringify(comp));
+          let loadingInstance = Loading.service({fullscreen:false, target:document.querySelector('#c_'+comp.id+" div.ccctx")});
+          ajax({
+            url:"portal/TableView.action",
+            type:"POST",
+            data:JSON.stringify(json),
+            postJSON:true,
+            success:(resp)=>{
+              ts.data = resp.rows;
+              loadingInstance.close();
+            }
+          }, this);
+      }
+    }
+  },
+  watch: {
+    
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>