index.vue

<template>
  <el-container
    style="background-color: #e8e8e8;height: 100%;
    position: relative; margin: 0; padding-bottom: 8px"
  >
    <el-header style="padding: 0">
      <headerCom></headerCom>
    </el-header>
    <!-- <div style="height: 8px"></div> -->
    <vue-draggable-resizable
      v-if="dragShow"
      :w="size.w"
      :h="size.h"
      :x="250"
      :y="100"
      class="m-draggable"
      :parent="true"
      :disable-user-select="false"
      :draggable="true"
      :drag-cancel="'.'+ dragStyle"
    >
      <div
        :class="{'m-enable-draggable-header': true,'m-enable-draggable-header-min': dragStatus == 0}"
      >
        <div class="m-draggable-header">
          <span class="m-tool-title">{{toolTitle}}</span>
          <i class="el-icon-minus" v-show="dragStatus !== 0" @click="changeSize(0)"></i>
          <i class="el-icon-copy-document" v-show="dragStatus !== 1" @click="changeSize(1)"></i>
          <i class="el-icon-full-screen" v-show="dragStatus !== 2" @click="changeSize(2)"></i>
          <i class="el-icon-close" @click="closeDraggable"></i>
        </div>
      </div>
      <div
        style="margin:-15px -10px -15px -10px;  border: 1px solid #f7fbfd; height: 15px;  
            width: 1000; background-color:#f7fbfd; z-index: -1 !important;"
        v-show="dragStatus !== 0"
      ></div>
      <div :draggable="false" :class="dragStyle" v-show="dragStatus !== 0">
        <m-undisabled style="height: 100%;">
          <div v-if="currentTool === 'tool-caculate'">
            <calculator ref="calculator" />
          </div>
          <div v-if="currentTool === 'tool-account'">
            <account ref="account" />
          </div>
          <div v-if="currentTool === 'tool-swiftcode'">
            <swiftcode ref="swiftcode" />
          </div>
          <div v-if="currentTool === 'tool-finishedtask'">
            <finishedtask ref="finishedtask" />
          </div>
          <div v-if="currentTool === 'tool-feetype'">
            <feetype ref="feetype" />
          </div>
          <div v-if="currentTool === 'tool-sendMessageQuery'">
            <sendMessageQuery ref="sendMessageQuery" />
          </div>
          <div v-if="currentTool === 'tool-receiveMessageQuery'">
            <receiveMessageQuery ref="receiveMessageQuery" />
          </div>

          <div v-if="currentTool === 'tool-search'">
            <highvalue ref="highvalue" />
          </div>
          <div v-if="currentTool === 'tool-telexCode'">
            <telexCode ref="telexCode" />
          </div>
          <div v-if="currentTool === 'tool-exchangerate'">
            <exchangerate ref="exchangerate" />
          </div>
          <div v-if="currentTool === 'tool-forwardexchangerate'">
            <forwardexchangerate ref="forwardexchangerate" />
          </div>
          <div v-if="currentTool === 'tool-holiday'">
            <holiday ref="holiday" />
          </div>
          <div v-if="currentTool === 'tool-interestrate'">
            <interestrate ref="interestrate" />
          </div>
          <div v-if="currentTool === 'tool-businessoffer'">
            <businessoffer ref="businessoffer" />
          </div>
          <div v-if="currentTool === 'tool-vatinvoic'">
            <vatinvoic ref="vatinvoic" />
          </div>
          <div v-if="currentTool === 'tool-accttradedetails'">
            <accttradedetails ref="accttradedetails" />
          </div>
          <div v-if="currentTool === 'tool-innerAccountBal'">
            <innerAccountBal ref="innerAccountBal" />
          </div>
          <!-- <div v-if="currentTool === 'tool-txSerialNo'">
              <txSerialNo ref="txSerialNo"/>
          </div>-->
          <div v-if="currentTool === 'cms'" style="height: 100%;">
            <cms></cms>
          </div>
        </m-undisabled>
      </div>
      <div
        class="m-enable-draggable-header"
        style="height:11px; padding:0px; margin-top:0px; margin-bottom=0px;"
        v-show="dragStatus !== 0"
      ></div>
    </vue-draggable-resizable>
    <el-container style="height: 100%;
    position: relative;">
      <el-aside width="240px" style="background-color: white">
        <sideMenu></sideMenu>
      </el-aside>
      <div style="width: 0.5px;background-color: #B31C2A;opacity: 0.2;"></div>
      <el-main class="m-app-main">
        <tagViews></tagViews>
        <div style="height: 0.5px;background-color: #B31C2A;opacity: 0.2;"></div>
        <business></business>
        <toolbars @openTool="handleChooseTool"></toolbars>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import headerCom from "./Header";
import sideMenu from "./SideMenu";
import tagViews from "./components/TagsView";
import business from "../Business";
import toolbars from "~/components/Toolbars";
import VueDraggableResizable from 'vue-draggable-resizable'

import cms from "~/components/Cms"
import calculator from "~/widget/Calculator"
import account from "~/widget/Account"
import swiftcode from "~/widget/SwiftCode"
import finishedtask from "~/widget/Business"
import feetype from "~/widget/Fee"
import sendMessageQuery from "~/widget/MsgSent"
import receiveMessageQuery from "~/widget/MsgReceived"

export default {
  name: "Layout",
  components: { 
    headerCom, 
    sideMenu, 
    tagViews, 
    business,
    toolbars, 
    calculator,
    cms,
    account,
    swiftcode,
    finishedtask,
    feetype,
    sendMessageQuery,
    receiveMessageQuery,
    'vue-draggable-resizable': VueDraggableResizable,
  },
  data(){
    return {
      isShow: false,
      currentTool: '',
      toolTitle: '',
      size: {
        w: 800,
        h: 477,
      },
      dragStyle: 'm-draggable-content',
      dragShow: false,
      dragStatus: 1 // 0 最小化 1 中等 2 最大化
    }
  },
  methods:{
    getIsShow(data) {
      this.isShow = data
      console.log(this.isShow)
    },
    handleChooseTool(e) {
      this.dragShow = true
      this.currentTool = e.target.id
      this.changeSize(1)
      // 显示工具栏标题
      if (this.currentTool === 'tool-caculate') {
        this.toolTitle = "计算器";
      } else if (this.currentTool === 'tool-search') {
        this.toolTitle = "大额支付行号查询";
      } else if (this.currentTool === 'tool-telexCode') {
        this.toolTitle = "电报码查询";
      } else if (this.currentTool === 'tool-account') {
        this.toolTitle = "账户查询";
      } else if (this.currentTool === 'tool-swiftcode') {
        this.toolTitle = "SwiftCode查询";
      } else if (this.currentTool === 'tool-finishedtask') {
        this.toolTitle = "业务查询";
      } else if (this.currentTool === 'tool-exchangerate') {
        this.toolTitle = "即期牌价查询";
      } else if (this.currentTool === 'tool-holiday') {
        this.toolTitle = "节假日查询";
      } else if (this.currentTool === 'tool-interestrate') {
        this.toolTitle = "利率查询";
      } else if (this.currentTool === 'tool-vatinvoic') {
        this.toolTitle = "增值税发票查询";
      } else if (this.currentTool === 'tool-accttradedetails') {
        this.toolTitle = "账户交易明细查询";
      } else if (this.currentTool === 'tool-forwardexchangerate') {
        this.toolTitle = "远期牌价查询";
      } else if (this.currentTool === 'tool-feetype') {
        this.toolTitle = "费用查询";
      } else if (this.currentTool === 'tool-txSerialNo') {
        this.toolTitle = "交易流水号查询";
      } else if (this.currentTool === 'tool-sendMessageQuery') {
        this.toolTitle="发报查询";
        this.sendMessageQuery = "发报查询";
      } else if (this.currentTool === 'tool-receiveMessageQuery') {
        this.toolTitle="收报查询";
        this.receiveMessageQuery = "收报查询";
      } else if (this.currentTool === 'tool-innerAccountBal') {
        this.toolTitle = "内部户可用余额查询";
      }

    },
    closeDraggable() {
      this.dragShow = false
      this.currentTool = ''
    },
    changeSize(tag) {
      this.dragStatus = tag

      if (this.dragStatus == 0) {
        this.size = {
          w: 250,
          h: 20,
        }
      }
      if (this.dragStatus == 2) {
        this.size = {
          w: 1200,
          h: 777,
        }
        this.dragStyle = 'm-draggable-content-large'
      }
      if (this.dragStatus == 1) {
        this.size = {
          w: 800,
          h: 477,
        }
        this.dragStyle = 'm-draggable-content'
      }
    },
  }
};
</script>

<style>
.m-app-main {
  background-color: var(--bgcolor);
  padding: 0;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  margin-right: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.el-aside {
  height: 100%;
  transition: width 300ms;
  /* overflow: hidden; */
  overflow: unset;
  /* padding-bottom: 68px; */
  box-sizing: border-box;
}




@media screen and (min-width: 2561px) {
    
   .el-aside {
     width: 240px!important;
    }
}

@media screen and (min-width: 1921px) and (max-width: 2560px) {
   
    .el-aside {
     width: 220px!important;
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
   
    .el-aside {
     width: 200px!important;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1440px) {
   
    .el-aside {
      width: 190px!important;
    }
}

@media screen and (max-width: 1199px) {
   
    .el-aside {
      width: 170px!important;
    }
}

.m-draggable {
  border-radius: 2px;
  border: 1px solid #ccc;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  z-index: 10000 !important;
  position: absolute;
  top: 0;
  /* left: 200px; */
  padding: 10px;
  background-color: #f7fbfd;
}

.m-draggable-header {
  height: 26px;
  width: 100%;
  text-align: right;
}
.m-enable-draggable-header {
  margin: -10px;
  height: 35px;
  width: 1000;
  padding: 10px 20px 10px 20px;
  z-index: 10000 !important;
  background-color: #B31C2A;
  /* border:0px; */
  border: 1px solid #B31C2A;
}
.m-draggable-content {
  height: 420px;
  overflow-y: auto;
}
.m-draggable-content-large {
  height: 720px;
  overflow-y: auto;
}
.m-draggable-header .el-icon-minus {
  cursor: pointer;
  color: #fff;
}
.m-enable-draggable-header-min {
  padding: 10px 20px 0 20px;
}
.m-enable-draggable-header .el-icon-close {
  cursor: pointer;
  color: #fff;
}
.m-enable-draggable-header .el-icon-full-screen {
  cursor: pointer;
  color: #fff;
}
.m-enable-draggable-header .el-icon-copy-document {
  cursor: pointer;
  color: #fff;
}
.m-toolbar {
  position: fixed;
  top: 200px;
  right: 0;
  z-index: 10000;
}

.m-toolbar-core {
  background: var(--themecolor);
  border-radius: 4px;
  width: 12px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.m-toolbar-detail {
  padding: 0px;
  font-size: 12px;
  position: absolute;
  top: -20px;
  right: 32px;
  width: 150px;
  z-index: 10000;
}

.m-toolbar-detail ul {
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
  padding: 5px 0;
  border-radius: 2px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  cursor: pointer;
}

.m-toolbar-detail li {
  list-style: none;
  padding: 8px 15px;
}

.m-toolbar-detail li:hover {
  background: var(--themecolor);
  color: #fff;
}

.m-toolbar .m-toolbar-detail {
  display: none;
}
.m-tool-title {
  color: #fff;
  text-align: left;
  float: left;
}
.m-toolbar:hover .m-toolbar-detail {
  display: block;
}
</style>