王震
2023-09-25 c0bc2331e9abb2ae003c8dc0ab4524d6101493a1
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>
@@ -264,244 +284,232 @@
            userName: "value",
            leftOpen: true,
            menu: [{
                  k: 0,
                  v: "首页",
                  i: "font icon-shouye",
                  c: [{
                     k: 0,
                     v: "首页",
                     i: "font icon-shouye",
                     u: "index-index"
                  }]
               },
               {
                  k: 3,
                  v: "销售管理",
                  i: "font icon-jine",
                  c: [{
                     k: 11,
                     v: "销售管理",
                     i: "font icon-jine",
                     u: "sale"
                  }]
               },
               {
                  k: 1,
                  v: "技术管理",
                  i: "font icon-shouye",
                  c: [{
                        k: 1,
                        v: "标准BOM",
                        i: "font icon-shouye",
                        u: "standard"
                     },
                     {
                        k: 2,
                        v: "订单BOM",
                        i: "font icon-shouye",
                        u: "technical"
                     }
                  ]
               },
               {
                  k: 4,
                  v: "生产管理",
                  i: "font icon-shouye",
                  c: [{
                        k: 12,
                        v: "生产订单",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 13,
                        v: "生产计划",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 14,
                        v: "生产报工",
                        i: "font icon-shouye",
                        u: ""
                     }
                  ]
               },
               {
                  k: 5,
                  v: "WMS管理",
                  i: "font icon-shouye",
                  c: [{
                        k: 15,
                        v: "原材料库存",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 16,
                        v: "回单管理",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 17,
                        v: "半成品库存",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 18,
                        v: "成品库存",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 19,
                        v: "成品发货",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 20,
                        v: "成品入库",
                        i: "font icon-shouye",
                        u: ""
                     }
                  ]
               },
               {
                  k: 2,
                  v: "QMS管理",
                  i: "font icon-shouye",
                  c: [{
                        k: 3,
                        v: "原材料检验",
                        i: "font icon-shouye",
                        u: "rawInsBox"
                     },
                     {
                        k: 4,
                        v: "原材料不合格品",
                        i: "font icon-shouye",
                        u: "rawUnqualifiedBox"
                     },
                     {
                        k: 5,
                        v: "过程检验",
                        i: "font icon-shouye",
                        u: "processInspection"
                     },
                     {
                        k: 6,
                        v: "成品检验",
                        i: "font icon-shouye",
                        u: "finishedProductInspection"
                     },
                     {
                        k: 7,
                        v: "不合格品管理",
                        i: "font icon-shouye",
                        u: "unqualifiedManagement"
                     },
                     {
                        k: 9,
                        v: "质量统计",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 10,
                        v: "计量管理",
                        i: "font icon-shouye",
                        u: "measurementManagement"
                     },
                     {
                        k: 10.1,
                        v: "巡检",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 10.2,
                        v: "不合格品处置",
                        i: "font icon-shouye",
                        u: "Processingproducts"
                     }
                  ]
               },
               {
                  k: 6,
                  v: "核算管理",
                  i: "font icon-shouye",
                  c: [{
                        k: 21,
                        v: "产量工资",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 22,
                        v: "员工出勤",
                        i: "font icon-shouye",
                        u: ""
                     }
                  ]
               },
               {
                  k: 7,
                  v: "基础数据",
                  i: "font icon-shouye",
                  c: [{
                        k: 23,
                        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: "Technicalindex"
                     },
                     {
                        k: 26,
                        v: "工艺路线维护",
                        i: "font icon-shouye",
                        u: "technology"
                     },
                     {
                        k: 27,
                        v: "设备维护",
                        i: "font icon-shouye",
                        u: "laboratoryManagement"
                     },
                     {
                        k: 28,
                        v: "物料清单维护",
                        i: "font icon-shouye",
                        u: "mbom"
                     },
                     {
                        k: 29,
                        v: "巡检项目维护",
                        i: "font icon-shouye",
                        u: "list-1"
                     },
                     {
                        k: 30,
                        v: "设备指标维护",
                        i: "font icon-shouye",
                        u: "list-2"
                     }
                  ]
               }
            ],
                        k: 0,
                        v: "首页",
                        i: "font icon-shouye",
                        c: [{
                            k: 0,
                            v: "首页",
                            i: "font icon-shouye",
                            u: "index-index"
                        }]
                    },
                    {
                        k: 3,
                        v: "销售管理",
                        i: "font icon-jine",
                        c: [{
                            k: 11,
                            v: "销售管理",
                            i: "font icon-jine",
                            u: "sale"
                        }]
                    },
                    {
                        k: 1,
                        v: "技术管理",
                        i: "font icon-ic_form_set24px",
                        c: [{
                                k: 1,
                                v: "标准BOM",
                                i: "font icon-shouye",
                                u: "standard"
                            },
                            {
                                k: 2,
                                v: "订单BOM",
                                i: "font icon-shouye",
                                u: "technical"
                            }
                        ]
                    },
                    {
                        k: 4,
                        v: "生产管理",
                        i: "font icon-shengchanguanli",
                        c: [{
                                k: 12,
                                v: "生产订单",
                                i: "font icon-shouye",
                                u: ""
                            },
                            {
                                k: 13,
                                v: "生产计划",
                                i: "font icon-shouye",
                                u: ""
                            },
                            {
                                k: 14,
                                v: "生产报工",
                                i: "font icon-shouye",
                                u: ""
                            }
                        ]
                    },
                    {
                        k: 5,
                        v: "WMS管理",
                        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",
                                u: ""
                            },
                            {
                                k: 18,
                                v: "成品库存",
                                i: "font icon-shouye",
                                u: ""
                            },
                            {
                                k: 19,
                                v: "成品发货",
                                i: "font icon-shouye",
                                u: ""
                            },
                            {
                                k: 20,
                                v: "成品入库",
                                i: "font icon-shouye",
                                u: ""
                            }
                        ]
                    },
                    {
                        k: 2,
                        v: "QMS管理",
                        i: "font icon-xunhuan",
                        c: [{
                                k: 3,
                                v: "原材料检验",
                                i: "font icon-shouye",
                                u: "rawInsBox"
                            },
                            {
                                k: 4,
                                v: "原材料不合格品",
                                i: "font icon-shouye",
                                u: "rawUnqualifiedBox"
                            },
                            {
                                k: 5,
                                v: "过程检验",
                                i: "font icon-shouye",
                                u: "processInspection"
                            },
                            {
                                k: 6,
                                v: "成品检验",
                                i: "font icon-shouye",
                                u: "finishedProductInspection"
                            },
                            {
                                k: 7,
                                v: "不合格品管理",
                                i: "font icon-shouye",
                                u: "unqualifiedManagement"
                            },
                            {
                                k: 9,
                                v: "质量统计",
                                i: "font icon-shouye",
                                u: ""
                            },
                            {
                                k: 10,
                                v: "计量管理",
                                i: "font icon-shouye",
                                u: "measurementManagement"
                            },
                            {
                                k: 10.1,
                                v: "不合格品处置",
                                i: "font icon-shouye",
                                u: "Processingproducts"
                            }
                        ]
                    },
                    {
                        k: 6,
                        v: "核算管理",
                        i: "font icon-caiwuhesuanxitong",
                        c: [{
                                k: 21,
                                v: "产量工资",
                                i: "font icon-shouye",
                                u: ""
                            },
                            {
                                k: 22,
                                v: "员工出勤",
                                i: "font icon-shouye",
                                u: ""
                            }
                        ]
                    },
                    {
                        k: 7,
                        v: "基础数据",
                        i: "font icon-a-ziyuan20",
                        c: [{
                                k: 23,
                                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: "Technicalindex"
                            },
                            {
                                k: 26,
                                v: "工艺路线维护",
                                i: "font icon-shouye",
                                u: "technology"
                            },
                            {
                                k: 27,
                                v: "设备维护",
                                i: "font icon-shouye",
                                u: "laboratoryManagement"
                            },
                            {
                                k: 28,
                                v: "物料清单维护",
                                i: "font icon-shouye",
                                u: "mbom"
                            },
                            {
                                k: 30,
                                v: "生产工艺维护",
                                i: "font icon-shouye",
                                u: "equipmentmaintain"
                            }
                        ]
                    }
                ],
            activeBox: 0,
            activeP: 0,
            tabActive: 0,
@@ -536,40 +544,43 @@
            }
         },
         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('数据变动较大,页面自动更新!')
         }
      }
   };
</script>
</script>