Fixiaobai
2023-09-13 9ddf303ca99059fac2d6b83829f2d39c04d1cf5f
src/view/index.vue
@@ -91,7 +91,7 @@
}
.left .box i {
  font-size: 32px;
      font-size: 24px;
  margin-bottom: 8px;
}
@@ -141,15 +141,28 @@
  font-size: 14px;
}
   .tag .el-icon-delete {
      display: none;
   }
   .tag .el-icon-delete:hover {
      color: #F56C6C;
   }
   .tag:hover .el-icon-delete {
      display: block;
   }
.tag > .el-icon-s-unfold,
.el-icon-s-fold {
   .el-icon-s-fold,
   .el-icon-delete {
  font-size: 18px;
  cursor: pointer;
  margin: 0 8px;
}
.tabs {
  min-width: calc(100% - 34px);
      min-width: calc(100% - 68px);
  height: 100%;
  align-items: center;
  display: flex;
@@ -196,7 +209,6 @@
  height: 100%;
}
</style>
<style></style>
<template>
  <div class="all">
    <div class="title">
@@ -211,82 +223,43 @@
      </div>
    </div>
    <div class="left" :style="`width: ${leftOpen ? '92' : '0'}px;`">
      <div
        :class="`box ${activeBox == 0 ? 'active_box' : ''}`"
        @click="addTab(menu[0].c[0])"
      >
         <div :class="`box ${activeBox == 0 ? 'active_box' : ''}`" @click="addTab(menu[0].c[0])">
        <i class="font icon-shouye"></i>
        <div>首页</div>
      </div>
      <div
        :class="`box ${activeBox == 3 ? 'active_box' : ''}`"
        @click="addTab(menu[1].c[0])"
      >
         <div :class="`box ${activeBox == 3 ? 'active_box' : ''}`" @click="addTab(menu[1].c[0])">
        <i class="font icon-jine"></i>
        <div>销售管理</div>
      </div>
      <el-popover
        placement="right-start"
        width="90"
        trigger="click"
        v-for="(a, ai) in menu"
        :key="ai"
        v-if="a.k != '0' && a.k != '3'"
      >
        <div
          :class="`box ${activeBox == a.k ? 'active_box' : ''}`"
          @click="activeBox = a.k"
          slot="reference"
        >
         <el-popover placement="right-start" width="90" trigger="click" v-for="(a, ai) in menu" :key="ai"
            v-if="a.k != '0' && a.k != '3'">
            <div :class="`box ${activeBox == a.k ? 'active_box' : ''}`" @click="activeBox = a.k" slot="reference">
          <i :class="a.i"></i>
          <div>{{ a.v }}</div>
        </div>
        <div class="small_menu">
          <p
            v-for="(b, bi) in a.c"
            :key="bi"
            :class="activeP == b.k ? 'active_p' : ''"
            @click="addTab(b)"
          >
               <p v-for="(b, bi) in a.c" :key="bi" :class="activeP == b.k ? 'active_p' : ''" @click="addTab(b)">
            <i :class="b.i"></i>
            <span>{{ b.v }}</span>
          </p>
        </div>
      </el-popover>
    </div>
    <div
      class="right"
      :style="`width: calc(100% - ${leftOpen ? '92' : '0'}px);`"
    >
      <div class="right" :style="`width: calc(100% - ${leftOpen ? '92' : '0'}px);`">
      <div class="tag">
        <i
          :class="`${leftOpen ? 'el-icon-s-unfold' : 'el-icon-s-fold'}`"
          @click="leftOpen = !leftOpen"
        ></i>
            <i :class="`${leftOpen ? 'el-icon-s-unfold' : 'el-icon-s-fold'}`" @click="leftOpen = !leftOpen"></i>
        <div class="tabs">
          <div
            :class="`tab ${tabActive == a.k ? 'active_tab' : ''}`"
            v-for="(a, ai) in tabs"
            :key="ai"
            @click="upTabActive(a.k)"
          >
               <div :class="`tab ${tabActive == a.k ? 'active_tab' : ''}`" v-for="(a, ai) in tabs" :key="ai"
                  @click="upTabActive(a.k)">
            {{ a.v }}
            <i
              class="el-icon-close"
              @click="removeTab(ai)"
              v-if="tabActive != 0"
            ></i>
                  <i class="el-icon-close" @click="removeTab(ai)" v-if="tabActive != 0"></i>
          </div>
        </div>
            <i class="el-icon-delete" @click="allDel" title="删除所有标签页"></i>
      </div>
      <div class="component_view">
        <component
          class="com_index"
          v-for="(com, index) in tabs"
          :is="com.u"
          :key="upIndex + '|' + index"
          v-show="com.k == tabActive"
        >
            <component class="com_index" v-for="(com, index) in tabs" :is="com.u" :key="upIndex + '|' + index"
               v-show="com.k == tabActive" @removeAllTab="removeAllTab">
        </component>
      </div>
    </div>
@@ -310,39 +283,33 @@
    return {
      userName: "value",
      leftOpen: true,
      menu: [
        {
            menu: [{
          k: 0,
          v: "首页",
          i: "font icon-shouye",
          c: [
            {
                  c: [{
              k: 0,
              v: "首页",
              i: "font icon-shouye",
              u: "index-index"
            }
          ]
                  }]
        },
        {
          k: 3,
          v: "销售管理",
          i: "font icon-jine",
          c: [
            {
                  c: [{
              k: 11,
              v: "销售管理",
              i: "font icon-jine",
              u: "sale"
            }
          ]
                  }]
        },
        {
          k: 1,
          v: "技术管理",
          i: "font icon-ic_form_set24px",
          c: [
            {
                  c: [{
              k: 1,
              v: "标准BOM",
              i: "font icon-shouye",
@@ -360,8 +327,7 @@
          k: 4,
          v: "生产管理",
          i: "font icon-shengchanguanli",
          c: [
            {
                  c: [{
              k: 12,
              v: "生产订单",
              i: "font icon-shouye",
@@ -385,8 +351,7 @@
          k: 5,
          v: "WMS管理",
          i: "font icon-a-Inventorydumprequest",
          c: [
            {
                  c: [{
              k: 15,
              v: "原材料库存",
              i: "font icon-shouye",
@@ -428,8 +393,7 @@
          k: 2,
          v: "QMS管理",
          i: "font icon-xunhuan",
          c: [
            {
                  c: [{
              k: 3,
              v: "原材料检验",
              i: "font icon-shouye",
@@ -483,8 +447,7 @@
          k: 6,
          v: "核算管理",
          i: "font icon-caiwuhesuanxitong",
          c: [
            {
                  c: [{
              k: 21,
              v: "产量工资",
              i: "font icon-shouye",
@@ -502,8 +465,7 @@
          k: 7,
          v: "基础数据",
          i: "font icon-a-ziyuan20",
          c: [
            {
                  c: [{
              k: 23,
              v: "生产记录维护",
              i: "font icon-shouye",
@@ -539,12 +501,6 @@
              i: "font icon-shouye",
              u: "mbom"
            },
            // {
            //    k: 29,
            //    v: "巡检项目维护",
            //    i: "font icon-shouye",
            //    u: "routinginspection"
            // },
            {
              k: 30,
              v: "生产工艺维护",
@@ -557,14 +513,12 @@
      activeBox: 0,
      activeP: 0,
      tabActive: 0,
      tabs: [
        {
            tabs: [{
          k: 0,
          v: "首页",
          i: "font icon-shouye",
          u: "index-index"
        }
      ],
            }],
      upIndex: 0
    };
  },
@@ -590,39 +544,41 @@
      }
    },
    removeTab(index) {
      if (this.tabs.length > 1) {
        this.tabs.splice(index, 1);
        this.activeP = this.tabs[this.tabs.length - 1].k;
        this.tabActive = this.tabs[this.tabs.length - 1].k;
      } else {
        this.$message.warning("不能关闭最后的标签");
      }
    },
         allDel() {
            this.activeBox = 0
            this.activeP = 0
            this.tabActive = 0
            this.tabs = [{
               k: 0,
               v: " 首页",
               i: "font icon-shouye",
               u: "index-index"
            }]
         },
    upTabActive(num) {
      this.tabActive = num;
      this.activeP = num;
      if (num == 0) {
        this.activeBox = 0;
      } else if (num > 0 && num <= 2) {
        this.activeBox = 1;
      } else if (num > 2 && num < 11) {
        this.activeBox = 2;
      } else if (num == 11) {
        this.activeBox = 3;
      } else if (num > 11 && num <= 14) {
        this.activeBox = 4;
      } else if (num > 14 && num <= 20) {
        this.activeBox = 5;
      } else if (num > 20 && num <= 22) {
        this.activeBox = 6;
      } else if (num > 22 && num <= 30) {
        this.activeBox = 7;
            for (var i = 0; i < this.menu.length; i++) {
               this.menu[i].c.forEach(b => {
                  if (b.k == num) {
                     this.activeBox = this.menu[i].k;
                     return
                  }
               })
      }
    },
    out() {
      sessionStorage.clear();
      localStorage.removeItem("autoenter");
      this.$router.push("/enter");
         },
         removeAllTab(){
            this.upIndex++
    }
  }
};