sooka_bi_vue/src/view/portal/PortalIndexCustomiz.vue

<template>
  <div class="customizLayout">
      <el-menu @select="handleSelect" class="el-menu-demo" background-color="#f6f8f8" text-color="#777" mode="horizontal">
        <el-menu-item index="back"><i class="fa fa-arrow-left"></i> 返回</el-menu-item>
        <el-menu-item index="save"><i class="glyphicon glyphicon-save"></i> 保存</el-menu-item>
        <el-menu-item index="layout"><i class="glyphicon glyphicon-th-large"></i> 布局</el-menu-item>
        <el-submenu index="data">
          <template slot="title"><i class="fa fa-database"></i> 数据</template>
          <el-menu-item index="data-1">选择立方体</el-menu-item>
          <el-menu-item index="data-2">选择数据表</el-menu-item>
        </el-submenu>
      </el-menu>
      <layout-left :pageInfo="pageInfo" ref="layoutleftForm"></layout-left>
      <div class="layout-center">
        <layout-param ref="paramForm" :pageInfo="pageInfo"></layout-param>
        <layout-optarea ref="optarea" :pageInfo="pageInfo"></layout-optarea>
      </div>
      <portal-layout :pageInfo="pageInfo" ref="layout"></portal-layout>
      <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"
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",
  components: {layoutLeft, PortalLayout, selectCube, SelectDset, layoutParam, LayoutOptarea, LayoutParamAdd},
  props: {

  },
  data() {
    return {
        pageInfo:{"layout":1,"body":{tr1:[{colspan:1, rowspan:1, width:100, height:100, id:1}]}},
        isupdate:false,
        saveShow:false,
        saveInfo:{
          name:null
        },
        rules:{
          name:[
						{ required: true, message: '必填', trigger: 'blur' }
          ]
        },
        isbindTdEvent:false  //是否给布局器table的 td 绑定拖拽事件
    }
  },
  methods: {
    //回写报表
    init(pageId){
      ajax({
        url:"portal/get.action",
        data:{pageId:pageId},
        type:"GET",
        success:(resp)=>{
          this.pageInfo = JSON.parse(resp.rows);
          this.isbindTdEvent = true; //需要重新绑定事件
        }

      }, this);
    },
    handleSelect(key, keyPath){
      if(key === 'back'){
        this.$parent.showIndex = true;
        this.$parent.$refs['indexForm'].loadDatas();
      }
      if(key ==='layout'){
        this.$refs['layout'].setLayout();
      }
      if(key === 'data-1'){
        this.$refs['selectCubeForm'].select();
      }
      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: {

  },
  filters: {

  },
  mounted() {

  }
}
</script>
<style lang="less" scoped>
  .customizLayout {
    height: 100%;
    width: 100%;
  }
  .layout-center {
        position: inherit;
        margin: 0 0 0 223px;
        height: calc(100% - 35px);
    }
</style>