WhiteListManageSysView/src/views/dev/index.vue

<template>
  <el-row class="tac" style="height: 97%;width:100%">
    <el-col :span="3" style="width:100%;height: 100%;display: block;">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
          :style="menuStyle"

      >
<!--       <el-sub-menu>

       </el-sub-menu>
       <el-menu-item v-for="item in menuList" :index="item.MENUPATH" @click="addTab(item)">
          <span>{{ item.name }}</span>
        </el-menu-item>-->
       <el-menu-item index="1" name="白名单批量导入" @select="addTab('/WhiteListManageSys/uploadFile__白名单批量导入')" @click="addTab('/WhiteListManageSys/uploadFile__白名单批量导入')">
          <span>白名单批量导入</span>
        </el-menu-item>
        <el-menu-item index="2" name="白名单管理" @click="addTab('/WhiteListManageSys/whiteListManage__白名单管理')">
          <span>白名单管理</span>
        </el-menu-item>
        <el-menu-item index="3" name="白名单日志管理" @click="addTab('/WhiteListManageSys/whiteCarnoLogManage__白名单日志管理')">
          <span>白名单日志管理</span>
        </el-menu-item>
        <el-menu-item index="4" name="自定义白名单" @click="addTab('/WhiteListManageSys/whiteCarNoDic__自定义白名单')">
          <span>自定义白名单</span>
        </el-menu-item>
      </el-menu>
    </el-col>

    <el-col :span="21" style="width:100%;height: 100%;display: block;">
      <!--          editable-->
      <el-tabs
          v-model="editableTabsValue"
          type="border-card"
          class="demo-tabs"
          closable
          @tab-remove="removeTab"
          @tab-click="clickTab"
          style="height: 100%;width:100%"
      >
        <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            style="height: 100%;width:100%"
        >
<!--         <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" :key="$route.path"/>
            </keep-alive>
          </router-view>-->
          <iframe :src="item.content" scrolling="no" style="height:100%;width:100%;border:0;overflow-x:hidden;overflow-y: clip"></iframe>
        </el-tab-pane>

      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import {Reading, ZoomIn} from "@element-plus/icons-vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//import {getMenu, getSystemInfo, getUrlKey} from "../../util/api/api.js";

export default {
  name: "index",
  data() {
    return {
      upMenuId: '',
      menuList: [],
      menuStyle: '100%',
      editableTabsValue: "",
      editableTabs: [],
      myHeight: '100%',
      tabIndex: 0,
      iframeUrl:'',
      sysUrl:""
    }
  },
  computed: {
    key() {
      return this.$route.name !== undefined
          ? this.$route.name + new Date()
          : this.$route + new Date();
    },

  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
    /*selectMenu() {
      // 79db567e-cd66-4a39-8da6-95e08b1ceba3
      const sid = getUrlKey(window.location.search, "sid");
      getMenu({
        sid: sid
      }).then((res) => {
        this.menuList = res;
        this.addTab(res[0])
      })
    },*/
    addTab(path) {
      //获取已经打开的tab

      const tabs = this.editableTabs;
      //是否可以新打开
      let isAdd = true;
      let _index=path.split("__");
      let _name=_index[1];
      let _path=_index[0];
      tabs.forEach((tab, index) => {
        if (tab.title == _name) {
          //如果打开了则为选中
          this.editableTabsValue = _name;
          //this.$router.push({path: item.MENUPATH});
          isAdd = false;
         // this.iframeUrl=item.MENUPATH;
          return;
        }
      })
      if (isAdd) {
        const newTabName = _name
        //this.$router.push({path: item.MENUPATH});
        //this.iframeUrl=item.MENUPATH;
        this.editableTabs.push({
          title: _name,
          name: newTabName,
          content:'http://' + window.location.host+_path
         // content:_path
        })
        this.editableTabsValue = newTabName
      }
    },
    clickTab(tab) {
      this.editableTabsValue = tab.paneName;
      //this.$router.push({path: tab.props.id});
      //this.iframeUrl=tab.content;
    },
    removeTab(targetName) {
      const tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              //this.$router.push({path: nextTab.content});
              //this.iframeUrl=tab.content;
              activeName = nextTab.name
            }
          }
        })
      }
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)

    }
  },
  mounted() {
   // this.selectMenu();
/*    getSystemInfo().then(res => {
      localStorage.setItem("UserType", res.UserType);
      localStorage.setItem("SystemType", res.SystemType);
    })*/
    this.menuStyle = 'height:100%';
    this.$nextTick(()=>{
       this.addTab('/WhiteListManageSys/uploadFile__白名单批量导入');
/*      var port = window.location.port;
      var url='http://' + window.location.host;
      if(port ==="9980"){
        url='http://' + window.location.hostname+':9003'
      }
      this.sysUrl=url;*/
    })
    //this.myHeight = (document.documentElement.clientHeight) * 0.92 + 'px';
  }
}
</script>

<style>
 .el-tabs__content{
   height: 96% !important;
 }
</style>