重构

src/style/common.less

@@ -155,4 +155,25 @@ html,body{
  .el-dialog-div{
     height: 50vh;
     overflow: auto;
- }
+ }
+ .icon_kpi {
+    color: #e07900;
+ }
+ .icon_dim {
+	color:#006ae1;
+}
+/**jqueryui 拖拽CSS*/
+.vakata-dnd {
+	border:solid 1px #ddd;
+	background-color:#f5f5f5;
+	border-radius:3px;
+	z-index:9999;
+	padding:3px;
+	box-shadow:0 2px 3px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.12);
+	.miconcancel {
+		display:inline-block;
+		width:16px;
+		height:16px;
+		color:#3f36c3;
+	}
+}

src/view/Welcome.vue

@@ -20,7 +20,7 @@
 <br/>
 <p class="text-warning">如果您需要更多功能，可以<button class="btn btn-primary btn-sm" onclick="window.open('https://www.ruisitech.com/product.html')">购买企业版</button></p>
 
-<p class="text-info">技术支持QQ群：648548832</p> 
+<p class="text-info">技术交流QQ群：648548832</p> 
 			  </div>
 		  </div>
   	</div>

src/view/bireport/ReportDesign.vue

@@ -50,7 +50,7 @@
 				</div>
 			</div>
 		</div>
-		<selectCube ref="selectCubeForm"></selectCube>
+		<selectCube ref="selectCubeForm" :callback="selectCubeCallback"></selectCube>
 		<paramFilter :pageInfo="pageInfo" ref="paramFilterForm"></paramFilter>
 		<kpi-desc ref="kpiDescForm"></kpi-desc>
 		<report-save ref="reportSaveForm"></report-save>
@@ -104,6 +104,10 @@
 			selectCube(){
 				this.$refs['selectCubeForm'].select();
 			},
+			selectCubeCallback(cubeId){
+				this.pageInfo.selectDs = cubeId;
+				this.initdataset();
+			},
 			initdataset(){
 				let ref = $("#datasettree").jstree(true);
 				if(ref){
@@ -276,26 +280,6 @@
 
 <style lang="less">
 @import "../../style/common";
-.icon_kpi {
-	color:#e07900;
-}
-.icon_dim {
-	color:#006ae1;
-}
-.vakata-dnd {
-	border:solid 1px #ddd;
-	background-color:#f5f5f5;
-	border-radius:3px;
-	z-index:9999;
-	padding:3px;
-	box-shadow:0 2px 3px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.12);
-	.miconcancel {
-		display:inline-block;
-		width:16px;
-		height:16px;
-		color:#3f36c3;
-	}
-}
 .el-tabs--border-card {
 	box-shadow:none;
 }

src/view/bireport/SelectCube.vue

@@ -43,6 +43,12 @@
 				rows:10,
 			}
 		},
+		props:{
+			callback:{
+				type:Function,   //点击选择立方体后的回调函数
+				required:true
+			}
+		},
 		mounted(){
 		},
 		computed: {
@@ -59,9 +65,8 @@
 					this.$notify.error({title: '未勾选数据',offset: 50});
 					return;
 				}
-				var p = this.$parent;
-				p.pageInfo.selectDs = chk;
-				p.initdataset();
+				
+				this.callback(chk);
 
 				this.show = false;
 			},

src/view/portal/LayoutLeft.vue

@@ -13,19 +13,19 @@
             
             <div class="tab-content tab-content2">
                 <div id="data-tab-1" class="tab-pane" :class="isActive('data-tab-1')">
-                    <div class="panel-body" style="padding:0px;">
+                    <div class="panel-body" style="padding:0px;overflow:auto;">
                         <div id="paramtree">a</div>
                         <div id="comptree"></div>
                     </div>
                 </div>
                 <div id="data-tab-2" class="tab-pane" :class="isActive('data-tab-2')">
-                    <div class="panel-body" style="padding:0px;">
-                        <div id="datasettree">b</div>
+                    <div class="panel-body" style="padding:0px;overflow:auto;">
+                        <div id="datasettree"></div>
                     </div>
                 </div>
                 <div id="data-tab-3" class="tab-pane" :class="isActive('data-tab-3')">
-                    <div class="panel-body" style="padding:0px;">
-                        <div id="tabletree">c</div>
+                    <div class="panel-body" style="padding:0px;overflow:auto;">
+                        <div id="tabletree"></div>
                     </div>
                 </div>
             </div>
@@ -33,8 +33,10 @@
 </template>
 
 <script>
-import {baseUrl} from '@/common/biConfig'
+import {baseUrl, ajax} from '@/common/biConfig'
 import $ from 'jquery'
+import "jstree";
+import "jstree/dist/themes/default/style.min.css";
 
 export default {
   components:{
@@ -43,7 +45,8 @@ export default {
   props:{
       pageInfo:{
         type:Object,
-        required:true
+        required:true,
+        default:{}
      }
   },
   data(){
@@ -52,18 +55,146 @@ export default {
     }
   },
   mounted(){
-
+    this.initcubes();
+    this.initdset();
   },
   computed: {
      
   },
   methods: {
-      switchTabs(val){
-          this.tabActive = val;
-      },
-      isActive(p){
-          return this.tabActive === p ? "active" : ""
-      }
+    switchTabs(val){
+        this.tabActive = val;
+    },
+    isActive(p){
+        return this.tabActive === p ? "active" : ""
+    },
+    initdset(){
+        let ref = $("#tabletree").jstree(true);
+        if(ref){
+            ref.destroy();
+        }
+        if (!this.pageInfo.table) {
+            $('#tabletree').jstree({
+                core: {
+                    data: {
+                        id: 'nodata',
+                        text: '您还未选择数据集',
+                        icon: 'fa fa-warning icon_kpi'
+                    }
+                },
+                "plugins": ["wholerow"]
+            });
+            return;
+        } else {
+            const dragfunc = () => {
+                $("#tabletree .jstree-node").draggable({
+                    cursor: "point",
+                    appendTo: "body",
+                    revert: 'invalid',
+                    revertDuration: 250,
+                    cursorAt: { top: 0, left: -35 },
+                    helper:function(e){
+                        var id = $(this).find("a.jstree-anchor:first").text();
+                        return "<div class=\"vakata-dnd\"><span class=\"miconcancel glyphicon glyphicon-remove\"></span>"+id+"</div>";
+                    },
+                    start:function(e){
+                        var ref = $('#tabletree').jstree(true),node = ref.get_node(this);
+                        var attr = node.li_attr;
+                        delete attr.id;
+                        if($.isEmptyObject(attr)){
+                            return false;
+                        }
+                        return true;
+                    }
+                });
+            }
+            let table = this.pageInfo.table;
+            var dt = {id:table.dsetId, text:table.dsetName+"("+table.priTable+")", state:{opened:true},icon:'fa fa-table', children:[]};;
+            ajax({
+                url:"model/getDatasetCfg.action",
+                type:"GET",
+                data:{dsetId:table.dsetId},
+                success:(resp)=>{
+                    let ret  = resp.rows.cols;
+                    for(let i=0; i<ret.length; i++){
+                        dt.children.push({id:ret[i].name, text:ret[i].name, icon:'glyphicon glyphicon-menu-hamburger',li_attr:{id:ret[i].name,name:ret[i].name,dsetId:table.dsetId,dsid:table.dsid, tname:ret[i].tname,type:ret[i].type, expression: ret[i].expression}});
+                    }
+                    //添加动态字段
+                    let dyna = resp.dynamic;
+                    for(let i=0; dyna&&dyna!=null&&i<dyna.length; i++){
+                        var r = dyna[i];
+                        dt.children.push({id:r.name, text:r.name, icon:'glyphicon glyphicon-menu-hamburger',li_attr:{id:r.name,name:r.name,dsetId:table.dsetId,dsid:table.dsid, tname:r.tname,type:r.type, expression: r.expression}});
+                    }
+                    $('#tabletree').jstree({
+                        core: {
+                            data: [dt],
+                            check_callback: false
+                        },
+                        "plugins": ["wholerow"]
+                    }).bind("ready.jstree", function (a, b) {
+                        dragfunc();
+                    }).bind("after_open.jstree", function () {
+                        dragfunc();
+                    });
+                }
+            }, this);
+        }
+    },
+    initcubes(){
+        let ref = $("#datasettree").jstree(true);
+        if(ref){
+            ref.destroy();
+        }
+        if (!this.pageInfo.selectDs) {
+            $('#datasettree').jstree({
+                core: {
+                    data: {
+                        id: 'nodata',
+                        text: '您还未选择立方体',
+                        icon: 'fa fa-warning icon_kpi'
+                    }
+                },
+                "plugins": ["wholerow"]
+            });
+            return;
+        } else {
+            const dragfunc = () => {
+                $("#datasettree .jstree-node").draggable({
+                    cursor: "point",
+                    appendTo: "body",
+                    revert: 'invalid',
+                    revertDuration: 250,
+                    cursorAt: { top: 0, left: -35 },
+                    helper:function(e){
+                        var id = $(this).find("a.jstree-anchor:first").text();
+                        return "<div class=\"vakata-dnd\"><span class=\"miconcancel glyphicon glyphicon-remove\"></span>"+id+"</div>";
+                    },
+                    start:function(e){
+                        var ref = $('#datasettree').jstree(true),node = ref.get_node(this);
+                        var attr = node.li_attr;
+                        delete attr.id;
+                        if($.isEmptyObject(attr)){
+                            return false;
+                        }
+                        return true;
+                    }
+                });
+            }
+            $('#datasettree').jstree({
+                core: {
+                    data: {
+                        url: 'model/treeCube.action?cubeId=' + this.pageInfo.selectDs + '&t=' + Math.random()
+                    },
+                    check_callback: false
+                },
+                "plugins": ["wholerow"]
+            }).bind("ready.jstree", function (a, b) {
+                dragfunc();
+            }).bind("after_open.jstree", function () {
+                dragfunc();
+            });
+        }
+    }
   },
   watch: {
   },
@@ -99,4 +230,7 @@ export default {
         color: #555555;
         cursor: default;
     }
+    .icon_kpi {
+    color: #e07900;
+    }
 </style>

src/view/portal/PortalIndexCustomiz.vue

@@ -10,31 +10,32 @@
           <el-menu-item index="data-2">选择数据表</el-menu-item>
         </el-submenu>
       </el-menu>
-      <layout-left :pageInfo="pageInfo"></layout-left>
+      <layout-left :pageInfo="pageInfo" ref="layoutleftForm"></layout-left>
       <layout-center :pageInfo="pageInfo"></layout-center>
       <portal-layout :pageInfo="pageInfo" ref="layout"></portal-layout>
+      <selectCube ref="selectCubeForm" :callback="selectCubeCallback"></selectCube>
+      <select-dset ref="selectDsetForm"></select-dset>
   </div> 
 </template>
 <script>
 import layoutLeft from "./LayoutLeft.vue"
 import LayoutCenter from "./LayoutCenter.vue"
 import PortalLayout from "./PortalLayoutDailog.vue"
+import selectCube from "@/view/bireport/SelectCube"
+import SelectDset from "./SelectDset"
 
 export default {
   name: "customizer",
-  components: {layoutLeft, LayoutCenter, PortalLayout},
+  components: {layoutLeft, LayoutCenter, PortalLayout, selectCube, SelectDset},
   props: {
 
   },
   data() {
     return {
-        pageInfo:null
+        pageInfo:{"layout":1,"body":{tr1:[{colspan:1, rowspan:1, width:100, height:100, id:1}]}}
     }
   },
   methods: {
-    initPageInfo(){
-        this.pageInfo = {"layout":1,"body":{tr1:[{colspan:1, rowspan:1, width:100, height:100, id:1}]}}
-    },
     handleSelect(key, keyPath){
       if(key === 'back'){
         this.$parent.showIndex = true;
@@ -42,6 +43,19 @@ export default {
       if(key ==='layout'){
         this.$refs['layout'].setLayout();
       }
+      if(key === 'data-1'){
+        this.$refs['selectCubeForm'].select();
+      }
+      if(key === 'data-2'){
+        this.$refs['selectDsetForm'].select();
+      }
+    },
+    selectCubeCallback(cubeId){
+      this.pageInfo.selectDs = cubeId;
+      var o = this.$refs['layoutleftForm'];
+      o.tabActive = 'data-tab-2';
+      console.log(cubeId);
+      o.initcubes();
     }
   },
   watch: {
@@ -51,7 +65,7 @@ export default {
 
   },
   mounted() {
-    this.initPageInfo();
+    //this.initPageInfo();
   }
 }
 </script>

src/view/portal/SelectDset.vue

@@ -0,0 +1,81 @@
+<template>
+    <el-dialog title="选择数据集" :visible.sync="show" :close-on-click-modal="false" custom-class="nopadding">
+      <div class="el-dialog-div">
+        <el-table :data="tableData" @row-click="selectme" border style="width: 100%" header-row-class-name="tableHeadbg">
+          <el-table-column label="" width="45">
+            <template slot-scope="scope">
+              <el-radio v-model="checked" name="myselect2" :label="scope.row.dsetId">&nbsp;</el-radio>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="name" label="名称"></el-table-column>
+          <el-table-column align="center" prop="priTable" label="主表"></el-table-column>
+          <el-table-column align="center" prop="dsname" label="数据源"></el-table-column>
+        </el-table>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="save()">确 定</el-button>
+        <el-button @click="show = false">取 消</el-button>
+      </div>
+    </el-dialog>
+</template>
+
+<script>
+import {baseUrl, ajax} from '@/common/biConfig'
+import $ from 'jquery'
+
+export default {
+  components:{
+
+  },
+  data(){
+    return {
+        show:false,
+        tableData:[],
+        checked:null
+    }
+  },
+  mounted(){
+    
+  },
+  computed: {
+     
+  },
+  methods: {
+     select(){
+       this.show = true;
+       this.loadData();
+     },
+     selectme:function(a, b){
+				this.checked = a.dsetId;
+			},
+     save(){
+        this.show = false;
+        //回写 layoutLeft 组件
+        let dset = null;
+        $(this.tableData).each((a, b) => {
+          if(b.dsetId === this.checked){
+            dset = b;
+            return false;
+          }
+        });
+        this.$parent.pageInfo.table = {dsetId:dset.dsetId, dsid:dset.dsid,dsetName:dset.name,priTable:dset.priTable};
+        this.$parent.$refs['layoutleftForm'].tabActive = 'data-tab-3';
+        this.$parent.$refs['layoutleftForm'].initdset();
+     },
+     loadData(){
+				ajax({
+					url:"model/listDataset.action",
+					type:"GET",
+					data:{},
+					success:(resp)=>{
+						this.tableData = resp.rows;
+					}
+				}, this);
+			}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  
+</style>