Merge branch 'master' of http://114.132.189.42:9002/r/mom-before

Fixiaobai

2023-09-24 92f198bd79e26fe1c31541432cf927403ce0e694

 src/view/index.vue

@@ -1,409 +1,568 @@
<style scoped>
  .all {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;
  }
   .all {
      width: 100vw;
      height: 100vh;
      background-size: 100% 100%;
      display: flex;
      flex-wrap: wrap;
   }

  .title {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 30px;
  }
   .title {
      width: 100%;
      height: 58px;
      display: flex;
      align-items: center;
      padding: 0 30px;
   }

  .logo {
    width: 130px;
  }
   .logo {
      width: 130px;
   }

  .logo img {
    width: 100%;
    height: 100%;
  }
   .logo img {
      width: 100%;
      height: 100%;
   }

  .title .label {
    font-size: 18px;
    text-align: center;
    width: calc(100% - 130px - 200px);
  }
   .title .label {
      font-size: 18px;
      text-align: center;
      width: calc(100% - 130px - 200px);
   }

  .user {
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    color: #000;
  }
   .user {
      width: 200px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: right;
      color: #000;
   }

  .user * {
    margin: 0 5px;
  }
   .user * {
      margin: 0 5px;
   }

  .user img {
    margin-left: 20px;
    cursor: pointer;
    width: 14px;
  }
   .user img {
      margin-left: 20px;
      cursor: pointer;
      width: 14px;
   }

  .user span {
    font-size: 14px;
  }
   .user span {
      font-size: 14px;
   }

  .left {
    width: 92px;
    height: calc(100vh - 58px - 40px);
    background-color: #004EA2;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 0;
  }
   .left {
      height: calc(100vh - 58px - 40px);
      background-color: #004ea2;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 20px 0;
      transition: 0.3s;
      overflow-y: auto;
   }

  .left .box {
    color: #fff;
    width: 68px;
    height: 68px;
    margin: 20px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
  }
   .left::-webkit-scrollbar {
      width: 0;
   }

  .left .box:active {
    opacity: .8;
  }
   .left .box {
      color: #fff;
      width: 68px;
      height: 68px;
      margin: 8px 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 8px;
   }

  .left .active_box {
    background-color: #fff;
    color: #004EA2;
  }
   .left .box:active {
      opacity: 0.8;
   }

  .left .box i {
    font-size: 32px;
    margin-bottom: 8px;
  }
   .left .active_box {
      background-color: #fff;
      color: #004ea2;
   }

  .left .box div {
    font-size: 14px;
  }
   .left .box i {
      font-size: 24px;
      margin-bottom: 8px;
   }

  .small_menu {
    color: #666;
  }
   .left .box div {
      font-size: 14px;
   }

  .small_menu .active_p {
    color: #004EA2;
  }
   .small_menu {
      color: #666;
   }

  .small_menu p {
    padding: 12px 15px;
    cursor: pointer;
  }
   .small_menu .active_p {
      color: #004ea2;
   }

  .small_menu p:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
   .small_menu p {
      padding: 12px 15px;
      cursor: pointer;
   }

  .small_menu i {
    font-size: 16px;
  }
   .small_menu p:hover {
      background-color: rgba(0, 0, 0, 0.05);
   }

  .small_menu span {
    font-size: 14px;
  }
   .small_menu i {
      font-size: 16px;
   }

  .right {
    width: calc(100% - 92px);
    height: calc(100vh - 58px);
  }
   .small_menu span {
      font-size: 14px;
   }

  .tag {
    width: 100%;
    height: 36px;
    background: rgb(255, 255, 255);
    opacity: 0.8;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    color: #999;
    font-size: 14px;
  }
   .right {
      height: calc(100vh - 58px);
      transition: 0.3s;
   }

  .tag .el-icon-s-unfold {
    font-size: 18px;
    cursor: pointer;
    margin: 0 8px;
  }
   .tag {
      width: 100%;
      height: 36px;
      background: rgb(255, 255, 255);
      opacity: 0.8;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      color: #999;
      font-size: 14px;
   }

  .tabs {
    min-width: calc(100% - 34px);
    height: 100%;
    align-items: center;
    display: flex;
    overflow-x: auto;
  }
   .tag .el-icon-delete {
      display: none;
   }

  .tab {
    cursor: pointer;
    font-size: 14px;
    margin: 0 8px;
    line-height: 32px;
    transition: .3s;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    user-select: none;
    flex-shrink: 0;
  }
   .tag .el-icon-delete:hover {
      color: #F56C6C;
   }

  .tab i {
    font-size: 12px;
    display: none;
  }
   .tag:hover .el-icon-delete {
      display: block;
   }

  .active_tab {
    border-bottom: 2px solid #004EA2;
    color: #004EA2;
  }
   .tag>.el-icon-s-unfold,
   .el-icon-s-fold,
   .el-icon-delete {
      font-size: 18px;
      cursor: pointer;
      margin: 0 8px;
   }

  .active_tab i {
    display: inline;
    color: #004EA2;
  }
   .tabs {
      min-width: calc(100% - 68px);
      height: 100%;
      align-items: center;
      display: flex;
      overflow-x: auto;
   }

  .component_view {
    height: calc(100vh - 94px - 22px);
    width: calc(100% - 48px);
    padding: 11px 24px;
    background: rgb(245, 247, 251);
  }
   .tab {
      cursor: pointer;
      font-size: 14px;
      margin: 0 8px;
      line-height: 32px;
      transition: 0.3s;
      border-top: 2px solid transparent;
      border-bottom: 2px solid transparent;
      user-select: none;
      flex-shrink: 0;
   }

  .com_index {
    width: 100%;
    height: 100%;
  }
</style>
<style>
   .tab i {
      font-size: 12px;
      display: none;
   }

   .active_tab {
      border-bottom: 2px solid #004ea2;
      color: #004ea2;
   }

   .active_tab i {
      display: inline;
      color: #004ea2;
   }

   .component_view {
      height: calc(100vh - 94px - 22px);
      width: calc(100% - 48px);
      padding: 11px 24px;
      background: rgb(245, 247, 251);
      overflow-y: auto;
   }

   .com_index {
      width: 100%;
      height: 100%;
   }
</style>
<template>
  <div class="all">
    <div class="title">
      <div class="logo">
        <img src="../../static/img/logo 1.png">
      </div>
      <div class="label">电缆附件新一代mom系统</div>
      <div class="user">
        <el-avatar :size="24">{{userName.substring(0,1)}}</el-avatar>
        <span>{{userName}}</span>
        <img src="../../static/img/退出.png" @click="out">
      </div>
    </div>
    <div class="left">
      <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])">
           <i class="font icon-jine"></i>
           <div>销售管理</div>
   <div class="all">
      <div class="title">
         <div class="logo">
            <img src="../../static/img/logo 1.png" />
         </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">
          <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)">
            <i :class="b.i"></i>
            <span>{{b.v}}</span>
          </p>
        </div>
      </el-popover>
    </div>
    <div class="right">
      <div class="tag">
        <i class="el-icon-s-unfold"></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)"></i>
          </div>
        </div>
      </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>
      </div>
    </div>
  </div>
         <div class="label">中天海洋新一代mom系统</div>
         <div class="user">
            <el-avatar :size="24">{{ userName.substring(0, 1) }}</el-avatar>
            <span>{{ userName }}</span>
            <img src="../../static/img/退出.png" @click="out" />
         </div>
      </div>
      <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>
         </div>
         <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">
               <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)">
                  <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="tag">
            <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>
               </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" @removeAllTab="removeAllTab">
            </component>
         </div>
      </div>
   </div>
</template>

<script>
  const requireComponent = require.context('../components/view', false, /\.vue/)
  var comObj = {};
  requireComponent.keys().forEach(fileName => {
    var names = fileName
      .split("/")
      .pop()
      .replace(".vue", "")
    const componentConfig = requireComponent(fileName);
    comObj[names] = componentConfig.default || componentConfig;
  });
  export default {
    components: comObj,
    data() {
      return {
        userName: "value",
        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: "技术文件",
            i: "font icon-shouye",
            u: "technical"
          }]
        }, {
          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: 8,
            v: "实验室管理",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 9,
            v: "质量统计",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 10,
            v: "计量管理",
            i: "font icon-shouye",
            u: ""
          }]
        }],
        activeBox: 0,
        activeP: 0,
        tabActive: 0,
        tabs: [{
          k: 0,
          v: "首页",
          i: "font icon-shouye",
          u: "index-index"
        }],
        upIndex: 0
      };
    },
    created() {},
    mounted() {
      this.userName = JSON.parse(localStorage.getItem("user")).name
    },
    methods: {
      addTab(ob) {
        if (ob.k == 0) this.activeBox = 0
            if (ob.k == 11) this.activeBox = 3
        this.activeP = ob.k  //0
        this.tabActive = ob.k  //0
        let num = -1;
        this.tabs.forEach((a, ai) => {
          if (ob.k == a.k) {
            num = a.k
          }
        })
        // 如果没有遍历到tabs里没有该ob对应的table，往tabs里面加入该ob
        if (num == -1) {
          this.tabs.push(ob)
        }
      },
      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("不能关闭最后的标签")
        }
      },
      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 <= 10) {
          this.activeBox = 2
        } else if(num == 11){
               this.activeBox = 3
   const requireComponent = require.context("../components/view", false, /\.vue/);
   var comObj = {};
   requireComponent.keys().forEach(fileName => {
      var names = fileName
         .split("/")
         .pop()
         .replace(".vue", "");
      const componentConfig = requireComponent(fileName);
      comObj[names] = componentConfig.default || componentConfig;
   });
   export default {
      components: comObj,
      data() {
         return {
            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-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: 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: 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: "self-inspection"
                     },
                  ]
               }
            ],
            activeBox: 0,
            activeP: 0,
            tabActive: 0,
            tabs: [{
               k: 0,
               v: "首页",
               i: "font icon-shouye",
               u: "index-index"
            }],
            upIndex: 0
         };
      },
      created() {},
      mounted() {
         this.userName = JSON.parse(localStorage.getItem("user")).name;
      },
      methods: {
         addTab(ob) {
            if (ob.k == 0) this.activeBox = 0;
            if (ob.k == 11) this.activeBox = 3;
            this.activeP = ob.k; //0
            this.tabActive = ob.k; //0
            let num = -1;
            this.tabs.forEach((a, ai) => {
               if (ob.k == a.k) {
                  num = a.k;
               }
            });
            // 如果没有遍历到tabs里没有该ob对应的table，往tabs里面加入该ob
            if (num == -1) {
               this.tabs.push(ob);
            }
      },
      out() {
        sessionStorage.clear()
        localStorage.removeItem('autoenter')
        this.$router.push("/enter")
      }
    }
  }
</script>
         },
         removeTab(index) {
            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;
            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>