重构

src/view/portal/Index.vue

@@ -1,7 +1,7 @@
 <template>
   	<div class="wrapper-content-nomargin">
-      <PortalIndex v-if="showIndex" @customizationAction="customizationAction"></PortalIndex>
-      <PortalIndexCustomiz v-if="!showIndex"></PortalIndexCustomiz>
+      <PortalIndex v-show="showIndex" ref="indexForm"></PortalIndex>
+      <PortalIndexCustomiz v-if="!showIndex" ref="customizForm"></PortalIndexCustomiz>
   	</div>
 </template>
 
@@ -23,18 +23,8 @@ export default {
   computed: {
   },
   methods: {
-    customizationAction(){
-      this.showIndex = false;
-    }
-  },
-  watch: {
-  },
-  beforeMount(){
-   
-  },
-  beforeDestroy(){
-    
-  },
+
+  }
 }
 </script>
 

src/view/portal/LayoutOptarea.vue

@@ -26,6 +26,7 @@ export default {
           h("td", {
             attrs: {
               class: "laytd",
+              id:"layout_" + td.id,
               height: td.height + "%",
               width: td.width + "%",
               colspan: td.colspan,
@@ -47,14 +48,164 @@ export default {
       trs.push(h('tr', {}, tds));
     }
     let table = h('table', {attrs:{border:"0", cellspacing:"0", cellpadding:"0", class:"r_layout", id:"layout_table"}}, [h('tbody', trs)]);
-    return h("div", {attrs:{id:"optarea", class:"layout-center-body", align:"center"}}, [table]);
+    return h("div", {attrs:{id:"optarea", class:"layout-center-body", align:"center"}}, [table, h('div', {class:"indicator"}, '==>')]);
   },
   data() {
-    return {};
+    return {
+      curTmpInfo:{}  //临时对象
+    };
+  },
+  mounted() {
+    this.bindTdEvent();
   },
-  mounted() {},
   computed: {},
-  methods: {},
+  methods: {
+    setUpdate(){
+      this.$parent.isupdate = true;
+    },
+    //table 布局器拖拽事件
+    bindTdEvent(){
+      let ts = this;
+      let curTmpInfo = ts.curTmpInfo;
+      //注册每个TD的接收组件拖放事件
+      $("#layout_table td.laytd").droppable({
+		    accept:"div.ibox, #comptree .jstree-node",
+        over:function(e, ui){
+			    var source = ui.draggable[0];
+          var obj = $(this);
+          if(obj.children().length == 0){
+            $(".indicator").css({
+              display:'block',
+              left:obj.offset().left,
+              top:obj.offset().top - 3
+            });
+          }else{
+            var last = obj.children().last();
+            if(last.attr("id") ==  $(source).attr("id")){
+              last = last.prev();
+            }
+            if(last.length == 0){
+              $(".indicator").css({
+                display:'block',
+                left:obj.offset().left,
+                top:obj.offset().top - 10
+              });
+            }else{
+              curTmpInfo.id = last.attr("id");
+              curTmpInfo.tp = "after";
+              $(".indicator").css({
+                display:'block',
+                left:last.offset().left,
+                top:last.offset().top + last.height()
+              });	
+            }
+          }
+          $(ui.helper[0]).find("span").removeClass("glyphicon-remove").addClass("glyphicon-ok");
+        },
+        out:function(e, ui){
+          $(ui.helper[0]).find("span").removeClass("glyphicon-ok").addClass("glyphicon-remove");
+          $(".indicator").hide();
+          delete curTmpInfo.id;
+          delete curTmpInfo.tp;
+        },
+       drop:function(e, ui){
+          $(".indicator").hide();
+          var source = ui.draggable[0];
+          if($(source).hasClass("ibox")){
+            //组件间的拖拽
+            if(!curTmpInfo.mouseOnDiv){
+              $(this).append(source);
+            }else{
+              if(curTmpInfo.tp == "before"){
+                $("#"+curTmpInfo.id).before(source);
+              }else{
+                $("#"+curTmpInfo.id).after(source);
+              }
+            }
+            /**
+            window.setTimeout(function(){
+              var id = $(source).attr("id").replace("c_", "");
+              var comp = findCompById(id);
+              if(comp.type == "chart"){  //拖拽后重新调整图形大小
+                var chart = echarts.getInstanceByDom(document.getElementById('C'+comp.id));
+                chart.resize($("#C"+comp.id).width(), $("#C"+comp.id).height());
+              }
+            }, 200);
+             */
+          }else{
+            //获取TREE
+				    var ref = $("#comptree").jstree(true);
+				    var node = ref.get_node(ui.draggable[0]);
+            //从组件树拖拽， 创建组件
+            var layoutId = $(this).attr("id").split("_")[1];
+            var tp = node.id;
+            if(tp == "text"){
+              insertText("insert", layoutId, '', curTmpInfo.id, curTmpInfo.tp);
+            }else if(tp == "table"){
+              var comp = {"id":newGuid(), "name":"交叉表", "type":"table"};
+              var str = addComp(comp, layoutId, true);
+              if(!curTmpInfo.id){
+                $("#layout_"+layoutId).append(str);
+              }else{
+                if(curTmpInfo.tp == "before"){
+                  $("#"+curTmpInfo.id).before(str);
+                }else{
+                  $("#"+curTmpInfo.id).after(str);
+                }
+              }
+              //注册拖放事件
+              bindCompEvent(comp);
+              bindResizeEvent(comp.id, 'table');
+              //滚动位置
+              window.setTimeout(function(){
+                $("#optarea").scrollTop($("#c_"+comp.id).offset().top);
+              }, 500);
+            }else if(tp == "chart"){
+              setcharttype(true, layoutId, curTmpInfo.id, curTmpInfo.tp)					
+            }else if(tp == "grid"){
+              var comp = {"id":newGuid(), "name":"表格", "type":"grid"};
+              var str = addComp(comp, layoutId, true);
+              if(!curTmpInfo.id){
+                $("#layout_"+layoutId).append(str);
+              }else{
+                if(curTmpInfo.tp == "before"){
+                  $("#"+curTmpInfo.id).before(str);
+                }else{
+                  $("#"+curTmpInfo.id).after(str);
+                }
+              }
+              //注册拖放事件
+              bindCompEvent(comp);
+              bindResizeEvent(comp.id, 'grid');
+              //滚动位置
+              window.setTimeout(function(){
+                $("#optarea").scrollTop($("#c_"+comp.id).offset().top);
+              }, 500);
+            }else if(tp == "box"){
+              var comp = {"id":newGuid(), "name":"数据块", "type":"box"};
+              var str = addComp(comp, layoutId, true);
+              if(!curTmpInfo.id){
+                $("#layout_"+layoutId).append(str);
+              }else{
+                if(curTmpInfo.tp == "before"){
+                  $("#"+curTmpInfo.id).before(str);
+                }else{
+                  $("#"+curTmpInfo.id).after(str);
+                }
+              }
+              //注册拖放事件
+              bindCompEvent(comp);
+              //resize事件
+              bindResizeEvent(comp.id, 'box');
+            }
+            
+          }
+          ts.setUpdate();
+        }
+
+      });
+    }
+  },
   watch: {},
   beforeMount() {},
   beforeDestroy() {},
@@ -81,4 +232,12 @@ table.r_layout {
 	height: calc(100% - 44px);
 	overflow: auto;
 }
+.indicator{
+	position:absolute;
+	font-size:14px;
+	width:50px;
+	height:10px;
+	display:none;
+	color:red;
+}
 </style>

src/view/portal/LayoutParam.vue

@@ -41,6 +41,9 @@ export default {
      
   },
   methods: {
+    setUpdate(){
+      this.$parent.isupdate = true;
+    },
      editParam(pid){
         let p = tools.findParamById(this.pageInfo, pid);
         this.$parent.$refs['prarmAddForm'].newparam(p.type, p.id);
@@ -52,7 +55,54 @@ export default {
        let idx = tools.findParamById(this.pageInfo, pid, true);
        this.pageInfo.params.splice(idx, 1);
        this.$forceUpdate();
-     }
+       this.setUpdate();
+     },
+     optParam(id){
+       let ts = this;
+       //let p = tools.findParamById(this.pageInfo, id);
+        $.contextMenu( 'destroy');
+        $.contextMenu({
+              selector: '#optparam button.btn-success', 
+              className: "m_optparam",
+              trigger: 'left',
+              delay: 500,
+              autoHide:true,
+              items: {
+                "edit":{name:"编辑", icon:"fa-edit",callback:function(){
+                  ts.editParam(id);
+                }},
+                "left":{name: "左移", icon:"fa-arrow-left", callback:function(){
+                  ts.moveparam(id, 'left');
+                      }},
+                "right":{name: "右移", icon:"fa-arrow-right", callback:function(){
+                  ts.moveparam(id, 'right');
+                }}
+           }
+        });
+     },
+     moveparam(pid, pos){
+       let pageInfo = this.pageInfo;
+        var idx = tools.findParamById(pageInfo, pid, true);
+        if(idx == 0 && pos == "left"){
+          tools.msginfo("参数已在最左边，无法移动。");
+          return;
+        }else if(idx == pageInfo.params.length - 1 && pos == "right"){
+          tools.msginfo("参数已在最右边，无法移动。");
+          return;
+        }
+        var pms = pageInfo.params;
+        if(pos == "left"){
+          var tp = pms[idx - 1];
+          pms[idx - 1] = pms[idx];
+          pms[idx] = tp;
+        }else if(pos == "right"){
+          var tp = pms[idx + 1];
+          pms[idx + 1] = pms[idx];
+          pms[idx] = tp;
+        }
+        this.$forceUpdate();
+        this.setUpdate();
+      }
   },
   watch: {
     

src/view/portal/LayoutParamAdd.vue

@@ -184,6 +184,9 @@ export default {
      
   },
   methods: {
+     setUpdate(){
+      this.$parent.isupdate = true;
+    },
      newparam(ptype, paramId){
        this.title = "创建参数 - " + tools.getParamTypeDesc(ptype);
        this.show = true;
@@ -296,6 +299,7 @@ export default {
                 ts.pageInfo.params.push(obj);
              }
              ts.$parent.$refs['paramForm'].$forceUpdate();
+             ts.setUpdate();
              this.show = false;
            }
         });

src/view/portal/PortalIndex.vue

@@ -4,19 +4,62 @@
       <div class="col-sm-3">
         <div class="ibox">
           <div class="ibox-content">
-            <button @click="customizationAction" class="btn btn-block btn-sm btn-primary">新建报表</button>
+            <button @click="newReport" class="btn btn-block btn-sm btn-primary">新建报表</button>
             <p class="text-warning">定制个性化的数据可视化界面</p>
           </div>
         </div>
       </div>
       <div class="col-sm-9">
-
-
+        <div class="ibox">
+          <div class="ibox-content">
+            <div class="mail-box-header">
+              <h2>报表列表</h2>
+            </div>
+            <div class="btn-group optbtncls" role="group">
+            <button type="button" class="btn btn-outline btn-default" title="查看" @click="addUser(false)">
+              <i class="glyphicon glyphicon-file" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="btn btn-outline btn-default" title="定制" @click="customization()">
+              <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="btn btn-outline btn-default" title="删除" @click="deleteReport()">
+              <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
+            </button>
+          </div>
+          <el-table :data="tableData" @row-click="selectme" border style="width: 100%" header-row-class-name="tableHeadbg">
+					<!--
+					<el-table-column type="selection" width="45"></el-table-column>
+					-->
+					<el-table-column label="" width="45">
+						<template slot-scope="scope">
+							<el-radio v-model="checked" name="myselect" :label="scope.row.pageId">&nbsp;</el-radio>
+						</template>
+					</el-table-column>
+					<el-table-column align="center" prop="pageId" label="标识"></el-table-column>
+					<el-table-column align="center" prop="pageName" label="报表名称"></el-table-column>
+					<el-table-column align="center" prop="userName" label="创建人"></el-table-column>
+					<el-table-column align="center" prop="crtDate" label="创建时间"></el-table-column>
+					
+				</el-table>
+				<el-pagination
+					background
+					@size-change="handleSizeChange"
+					@current-change="handleCurrentChange"
+					:page-sizes="[10, 20, 50, 100]"
+					:current-page="page"
+					:page-size="rows"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="total">
+				</el-pagination>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import {baseUrl, ajax} from '@/common/biConfig'
+
 export default {
   name: "portalMain",
   components: {},
@@ -25,27 +68,93 @@ export default {
   },
   data() {
     return {
-
+        total:0,
+				page:1,
+        rows:10,
+        checked:null,
+        tableData:[]
     }
   },
 
   methods: {
-    initPage(){
-     
+    handleSizeChange(v){
+        this.rows = v;
+				this.loadDatas();
+    },
+    handleCurrentChange(v){
+        this.page = v;
+				this.loadDatas();
+    },
+    selectme:function(a, b){
+				this.checked = a.pageId;
+		},
+    loadDatas(){
+      let ts = this;
+      ajax({
+          type:"GET",
+					data:{page:ts.page, rows:ts.rows},
+					url:"portal/list.action", 
+					success:function(resp){
+						ts.tableData = resp.rows;
+            ts.total = resp.total;
+            ts.checked = null;
+					}
+      }, this);
+    },
+    customization(){
+      let ts = this;
+        if(!ts.checked){
+          ts.$notify.error({
+                  title: '未勾选数据',
+                  offset: 50
+                });
+          return false;
+        }
+        ts.customizationAction();
+    },
+    deleteReport(){
+      let ts = this;
+      if(!ts.checked){
+          ts.$notify.error({
+                  title: '未勾选数据',
+                  offset: 50
+                });
+          return false;
+        }
+        if(confirm('是否确认？')){
+          ajax({
+            url:"portal/delete.action",
+            type:"GET",
+            data:{pageId: ts.checked},
+            success:()=>{
+              ts.$notify.success({
+                    title: '删除成功',
+                    offset: 50
+              });
+              ts.loadDatas();
+            }
+          });
+        }
+    },
+    newReport(){
+         this.$parent.showIndex = false;
     },
     customizationAction(){
       this.$parent.showIndex = false;
+      this.$nextTick(()=>{
+        this.$parent.$refs['customizForm'].init(this.checked);
+      });
     }
   },
+  mounted(){
+    this.loadDatas();
+  },
   watch: {
 
   },
   filters: {
 
-  },
-  mounted() {
-   
-  },
+  }
 }
 </script>
 <style lang="less" scoped>

src/view/portal/PortalIndexCustomiz.vue

@@ -19,9 +19,23 @@
       <selectCube ref="selectCubeForm" :callback="selectCubeCallback"></selectCube>
       <select-dset ref="selectDsetForm"></select-dset>
        <layout-param-add ref="prarmAddForm" :pageInfo="pageInfo"></layout-param-add>
+
+      <!-- 保存框 -->
+       <el-dialog title="报表保存" :visible.sync="saveShow" :close-on-click-modal="false" custom-class="nopadding">
+         <el-form :model="saveInfo" ref="saveForm" :rules="rules" label-position="left">
+             <el-form-item label="报表名称" label-width="100px" prop="name">
+              <el-input v-model="saveInfo.name"></el-input>
+            </el-form-item>
+         </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePage()">确 定</el-button>
+          <el-button @click="saveShow = false">取 消</el-button>
+        </div>
+      </el-dialog>
   </div> 
 </template>
 <script>
+import {baseUrl, ajax} from '@/common/biConfig'
 import layoutLeft from "./LayoutLeft.vue"
 import PortalLayout from "./PortalLayoutDailog.vue"
 import selectCube from "@/view/bireport/SelectCube"
@@ -29,6 +43,8 @@ import SelectDset from "./SelectDset"
 import layoutParam from "./LayoutParam.vue"
 import LayoutOptarea from './LayoutOptarea.vue'
 import LayoutParamAdd from './LayoutParamAdd.vue'
+import "jquery-contextmenu";
+import "jquery-contextmenu/dist/jquery.contextMenu.min.css";
 
 export default {
   name: "customizer",
@@ -39,13 +55,35 @@ export default {
   data() {
     return {
         pageInfo:{"layout":1,"body":{tr1:[{colspan:1, rowspan:1, width:100, height:100, id:1}]}},
-        isupdate:false
+        isupdate:false,
+        saveShow:false,
+        saveInfo:{
+          name:null
+        },
+        rules:{
+          name:[
+						{ required: true, message: '必填', trigger: 'blur' }
+          ]
+         }
     }
   },
   methods: {
+    //回写报表
+    init(pageId){
+      ajax({
+        url:"portal/get.action",
+        data:{pageId:pageId},
+        type:"GET",
+        success:(resp)=>{
+          this.pageInfo = JSON.parse(resp.rows);
+        }
+
+      }, this);
+    },
     handleSelect(key, keyPath){
       if(key === 'back'){
         this.$parent.showIndex = true;
+        this.$parent.$refs['indexForm'].loadDatas();
       }
       if(key ==='layout'){
         this.$refs['layout'].setLayout();
@@ -56,12 +94,64 @@ export default {
       if(key === 'data-2'){
         this.$refs['selectDsetForm'].select();
       }
+      if(key === 'save'){
+        if(!this.pageInfo.id){
+          this.saveShow = true;
+        }else{
+           ajax({
+            url:"portal/save.action",
+            type:"POST",
+            data:{"pageInfo": JSON.stringify(this.pageInfo), pageId:this.pageInfo.id},
+            success:(resp)=>{
+              this.$notify.success({
+                title: '更新成功!',
+                offset: 50
+              });
+            }
+          }, this);
+        }
+      }
     },
     selectCubeCallback(cubeId){
       this.pageInfo.selectDs = cubeId;
       var o = this.$refs['layoutleftForm'];
       o.tabActive = 'data-tab-2';
       o.initcubes();
+    },
+    savePage(){
+      let ts = this;
+      var pageId = this.pageInfo.id;
+      if(!pageId){
+        this.$refs['saveForm'].validate((valid) => {
+           if(valid){
+             ajax({
+               url:"portal/save.action",
+               type:"POST",
+               data:{"pageInfo": JSON.stringify(ts.pageInfo), pageName:ts.saveInfo.name},
+               success:(resp)=>{
+                 ts.$notify.success({
+                    title: '保存成功!',
+                    offset: 50
+                  });
+                  ts.saveShow = false;
+                  ts.pageInfo.id = resp.rows;
+               }
+             }, ts);
+           }
+        });
+      }else{
+        ajax({
+          url:"portal/save.action",
+          type:"POST",
+          data:{"pageInfo": JSON.stringify(ts.pageInfo), pageId:pageId},
+          success:(resp)=>{
+            ts.$notify.success({
+              title: '更新成功!',
+              offset: 50
+            });
+          }
+        }, ts);
+      }
     }
   },
   watch: {
@@ -71,7 +161,7 @@ export default {
 
   },
   mounted() {
-    //this.initPageInfo();
+
   }
 }
 </script>

src/view/portal/PortalText.vue

@@ -0,0 +1,33 @@
+<template>
+  	<div>
+      Text
+  	</div>
+</template>
+
+<script>
+import {baseUrl} from '@/common/biConfig'
+import PortalIndex from "./PortalIndex.vue"
+
+export default {
+  components:{
+
+  },
+  data(){
+    return {
+      
+    }
+  },
+  mounted(){
+
+  },
+  computed: {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less">
+  @import "../../style/common";
+</style>