highwaysaas/ruoyi-ui/src/components/setLayout/upDownStr.vue

<template>
  <div style="height: 100%;width: 100%">
    <div ref="con" class="con">
      <div class="separate" draggable="true" :style="`top: ${tree.separate}%;display:${viewFlag?'none':'block'}`"
           ref="separate"></div>
      <div class="area" ref="area1" :style="`height:${tree.separate}%`">
        <component v-if="typeof tree.top === 'string' " :is="tree.top" :tree="tree.topChildren" :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.top||{}).type" :is="componentsEnum[tree.top.type]" :styleData="styleData"
                   :defaultData="tree.top.data"></component>
      </div>
      <div class="area" ref="area2" :style="`height:${100-tree.separate}%;top:${tree.separate}%`">
        <component v-if="typeof tree.down === 'string' " :is="tree.down" :tree="tree.downChildren"
                   :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.down||{}).type" :is="componentsEnum[tree.down.type]" :styleData="styleData"
                   :defaultData="tree.down.data"></component>
      </div>
    </div>
    <el-dialog
        title="分割方式"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="30%">
      <el-button type="primary" @click="leftRight">左右</el-button>
      <el-button type="primary" @click="upDown">上下</el-button>
      <el-button type="primary" @click="clearCut">取消</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="选择组件"
        :visible.sync="componentsDialogVisible"
        :append-to-body="true"
        width="60%">
      <ComponentsDialogContent @SelectComponentsCB="SelectComponentsCB"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearCom">清 除</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="componentsDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="图表配置"
        :append-to-body="true"
        :visible.sync="componentsDialog"
        width="96%"
        class="dialog1"
        :fullscreen="true"
        :before-close="closeComponentsDialog">
      <ChartModelLineInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='lineChart' &&componentsDialogData.serveType === 'line'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartModelBarInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='barChart' &&componentsDialogData.serveType === 'bar'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartModelBarInfo1
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='barChart1' &&componentsDialogData.serveType === 'bar'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartModelPieInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='pieChart' &&componentsDialogData.serveType === 'pie'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ScrollTableModelInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='scrollTable'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartInfo
          v-if="!(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='chart'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <TableInfo v-if="(componentsDialogData && componentsDialogData.type)==='table'"
                 :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
                 :isDialog="true"
                 :key="'chartDialog' + dialogKey"/>
      <TextInfo v-if="(componentsDialogData && componentsDialogData.type)==='text'"
                :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
                :isDialog="true"
                :key="'chartDialog' + dialogKey"/>
    </el-dialog>

  </div>
</template>

<script>

import {
  ComplexTable,
  ComplexChart,
  ComplexForm,
  ComplexMap,
  ComplexScrollTable,
  ComplexText
} from "@/components/complex";

import ChartInfo from '@/views/createChart/index'
import TableInfo from '@/views/createTable/index'
import TextInfo from '@/views/basicCom/createText/index'

import ChartModelLineInfo from '@/components/modelComponents/line/line'
import ChartModelBarInfo from '@/components/modelComponents/bar/bar'
import ChartModelPieInfo from '@/components/modelComponents/pie/pie'
import ScrollTableModelInfo from '@/components/modelComponents/srcollTable/srcollTable'

import ScrollView from '@/components/view/scrollTable'
import lineView from '@/components/view/line'
import barView from '@/components/view/bar'
import pieView from '@/components/view/pie'

export default {
  name: 'UpDown',
  components: {
    LeftRight: () => import('./leftRightStr'),
    ComponentsDialogContent: () => import('./componentsDialog'),
    ComplexTable,
    ComplexChart,
    ComplexForm,
    ComplexMap,
    ComplexText,
    ComplexScrollTable,
    ChartInfo,
    TableInfo,
    TextInfo,
    ChartModelLineInfo,
    ChartModelBarInfo,
    ChartModelPieInfo,
    ScrollTableModelInfo,
    ScrollView,
    lineView,
    barView,
    pieView
  },
  props: ['tree', 'viewFlag', 'styleData'],
  data() {
    return {
      componentsEnum: {
        table: 'ComplexTable',
        chart: 'ComplexChart',
        form: 'ComplexForm',
        map: 'ComplexMap',
        text: 'ComplexText',
        lineChart: 'lineView',
        barChart: 'barView',
        barChart1: 'barView',
        pieChart: 'pieView',
        scrollTable: 'ScrollView',
      },
      height: 0,
      distance: 0,
      dialogVisible: false,
      componentsDialogVisible: false,
      type: '',
      componentsDialog: false,
      componentsDialogData: null,
      dialogKey: 0
    }
  },
  mounted() {
    let area1 = this.$refs.area1
    area1.addEventListener('contextmenu', (event) => {
      event.preventDefault()
      event.stopPropagation();
      if (!this.tree.top) {
        this.dialogVisible = true
        this.type = 'top'
      } else {
        this.dialogKey += 1
        this.componentsDialogData = this.tree.top
        this.componentsDialog = true
      }
    })
    area1.addEventListener('dblclick', (event) => {
      event.preventDefault()
      event.stopPropagation();
      // if (!this.tree.top) {
      this.componentsDialogVisible = true
      this.type = 'top'
      // }
    })

    let area2 = this.$refs.area2
    area2.addEventListener('contextmenu', (event) => {
      event.preventDefault()
      event.stopPropagation();
      if (!this.tree.down) {
        this.dialogVisible = true
        this.type = 'down'
      } else {
        this.dialogKey += 1
        this.componentsDialogData = this.tree.down
        this.componentsDialog = true
      }
    })
    area2.addEventListener('dblclick', (event) => {
      event.preventDefault()
      event.stopPropagation();
      // if (!this.tree.down) {
      this.componentsDialogVisible = true
      this.type = 'down'
      // }
    })

    let con = this.$refs.con
    this.height = con.offsetHeight
    this.distance = con.offsetHeight * (this.tree.separate / 100)

    const customMenu = (event) => {
      event.preventDefault()
    }
    con.addEventListener('contextmenu', customMenu)


    let separate = this.$refs.separate
    separate.ondrag = (e) => {
      e.preventDefault()
    }
    separate.ondragend = (e) => {
      let con = this.$refs.con
      this.height = con.offsetHeight
      this.tree.separate = ((this.distance + e.offsetY) / this.height) * 100
      if (this.tree.separate < 1) {
        this.tree.separate = 1
      }
      if (this.tree.separate > 99) {
        this.tree.separate = 99
      }
      this.distance = this.height * (this.tree.separate / 100)
    }

  },
  methods: {
    clearCut() {
      this.$set(this.$parent.tree, 'top', null)
      this.$set(this.$parent.tree, 'topChildren', null)
      this.$set(this.$parent.tree, 'down', null)
      this.$set(this.$parent.tree, 'downChildren', null)
      this.$set(this.$parent.tree, 'left', null)
      this.$set(this.$parent.tree, 'leftChildren', null)
      this.$set(this.$parent.tree, 'right', null)
      this.$set(this.$parent.tree, 'rightChildren', null)
      this.dialogVisible = false
    },
    leftRight() {
      if (this.type === 'top') {
        this.$set(this.tree, 'top', 'LeftRight')
        this.$set(this.tree, 'topChildren', this.tree.topChildren || {
          separate: 50
        })
      }
      if (this.type === 'down') {
        this.$set(this.tree, 'down', 'LeftRight')
        this.$set(this.tree, 'downChildren', this.tree.downChildren || {
          separate: 50
        })
      }
      this.dialogVisible = false
    },
    upDown() {
      if (this.type === 'top') {
        this.$set(this.tree, this.type, 'UpDown')
        this.$set(this.tree, 'topChildren', this.tree.topChildren || {
          separate: 50
        })
      }
      if (this.type === 'down') {
        this.$set(this.tree, this.type, 'UpDown')
        this.$set(this.tree, 'downChildren', this.tree.downChildren || {
          separate: 50
        })
      }
      this.dialogVisible = false
    },
    SelectComponentsCB(e) {
      this.$set(this.tree, this.type, e)
      this.componentsDialogVisible = false
    },
    clearCom() {
      this.$set(this.tree, this.type, '')
      this.componentsDialogVisible = false
    },
    closeComponentsDialog() {

      this.componentsDialog = false
    },
    modelOptionOk(e) {
      this.$set(this.tree[this.type], 'data', e)
    }
  }
}

</script>

<style lang="less" scoped>
.con {
  width: 100%;
  height: 100%;
  position: relative;
}

.separate {
  position: absolute;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  left: 0;
  background-color: #409EFF;
  cursor: row-resize;
  z-index: 2;

  &:hover {
    height: 6px;
  }
}

.area {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

.dialog1 /deep/ .el-dialog .el-dialog__body {
  padding: 0;
  height: calc(100% - 54px - 60px);
  overflow: hidden;
}
</style>