Fixiaobai
2023-09-24 92f198bd79e26fe1c31541432cf927403ce0e694
src/view/index.vue
@@ -60,7 +60,12 @@
      align-items: center;
      flex-direction: column;
      padding: 20px 0;
      transition: .3s;
      transition: 0.3s;
      overflow-y: auto;
   }
   .left::-webkit-scrollbar {
      width: 0;
   }
   .left .box {
@@ -86,7 +91,7 @@
   }
   .left .box i {
      font-size: 32px;
      font-size: 24px;
      margin-bottom: 8px;
   }
@@ -121,7 +126,7 @@
   .right {
      height: calc(100vh - 58px);
      transition: .3s;
      transition: 0.3s;
   }
   .tag {
@@ -136,14 +141,28 @@
      font-size: 14px;
   }
   .tag > .el-icon-s-unfold,.el-icon-s-fold {
   .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-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;
@@ -182,6 +201,7 @@
      width: calc(100% - 48px);
      padding: 11px 24px;
      background: rgb(245, 247, 251);
      overflow-y: auto;
   }
   .com_index {
@@ -189,7 +209,6 @@
      height: 100%;
   }
</style>
<style></style>
<template>
   <div class="all">
      <div class="title">
@@ -203,7 +222,7 @@
            <img src="../../static/img/退出.png" @click="out" />
         </div>
      </div>
      <div class="left" :style="`width: ${leftOpen?'92':'0'}px;`">
      <div class="left" :style="`width: ${leftOpen ? '92' : '0'}px;`">
         <div :class="`box ${activeBox == 0 ? 'active_box' : ''}`" @click="addTab(menu[0].c[0])">
            <i class="font icon-shouye"></i>
            <div>首页</div>
@@ -226,20 +245,21 @@
            </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)">
                  {{ 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">
               v-show="com.k == tabActive" @removeAllTab="removeAllTab">
            </component>
         </div>
      </div>
@@ -288,7 +308,7 @@
               {
                  k: 1,
                  v: "技术管理",
                  i: "font icon-shouye",
                  i: "font icon-ic_form_set24px",
                  c: [{
                        k: 1,
                        v: "标准BOM",
@@ -306,7 +326,7 @@
               {
                  k: 4,
                  v: "生产管理",
                  i: "font icon-shouye",
                  i: "font icon-shengchanguanli",
                  c: [{
                        k: 12,
                        v: "生产订单",
@@ -330,20 +350,8 @@
               {
                  k: 5,
                  v: "WMS管理",
                  i: "font icon-shouye",
                  i: "font icon-a-Inventorydumprequest",
                  c: [{
                        k: 15,
                        v: "原材料库存",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 16,
                        v: "回单管理",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 17,
                        v: "半成品库存",
                        i: "font icon-shouye",
@@ -372,7 +380,7 @@
               {
                  k: 2,
                  v: "QMS管理",
                  i: "font icon-shouye",
                  i: "font icon-xunhuan",
                  c: [{
                        k: 3,
                        v: "原材料检验",
@@ -393,7 +401,7 @@
                     },
                     {
                        k: 6,
                        v: "成品检验",
                        v: "产品检验",
                        i: "font icon-shouye",
                        u: "finishedProductInspection"
                     },
@@ -417,12 +425,6 @@
                     },
                     {
                        k: 10.1,
                        v: "巡检",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 10.2,
                        v: "不合格品处置",
                        i: "font icon-shouye",
                        u: "Processingproducts"
@@ -432,7 +434,7 @@
               {
                  k: 6,
                  v: "核算管理",
                  i: "font icon-shouye",
                  i: "font icon-caiwuhesuanxitong",
                  c: [{
                        k: 21,
                        v: "产量工资",
@@ -450,24 +452,18 @@
               {
                  k: 7,
                  v: "基础数据",
                  i: "font icon-shouye",
                  i: "font icon-a-ziyuan20",
                  c: [{
                        k: 23,
                        v: "记录内容维护",
                        v: "生产记录维护",
                        i: "font icon-shouye",
                        u: "record-content"
                     },
                     {
                        k: 24,
                        v: "自检项目维护",
                        i: "font icon-shouye",
                        u: "self-inspection"
                     },
                     {
                        k: 25,
                        v: "技术指标维护",
                        i: "font icon-shouye",
                        u: ""
                        u: "Technicalindex"
                     },
                     {
                        k: 26,
@@ -489,16 +485,10 @@
                     },
                     {
                        k: 29,
                        v: "巡检项目维护",
                        v: "自检项目维护",
                        i: "font icon-shouye",
                        u: ""
                        u: "self-inspection"
                     },
                     {
                        k: 30,
                        v: "设备指标维护",
                        i: "font icon-shouye",
                        u: ""
                     }
                  ]
               }
            ],
@@ -536,39 +526,42 @@
            }
         },
         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("不能关闭最后的标签");
            }
            this.tabs.splice(index, 1);
            this.activeP = this.tabs[this.tabs.length - 1].k;
            this.tabActive = this.tabs[this.tabs.length - 1].k;
         },
         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++
            this.$message.warning('数据变动较大,页面自动更新!')
         }
      }
   };