8-14-计量模块

XiaoRuby

2023-08-14 28243550e53fcdf0d8dc4d0dd20f8b35acb4f6ba

 src/view/index.vue

@@ -56,7 +56,7 @@
  .left {
    width: 92px;
    height: calc(100vh - 58px - 40px);
    background-color: #004EA2;
  background-color: #004ea2;
    display: flex;
    align-items: center;
    flex-direction: column;
@@ -77,12 +77,12 @@
  }

  .left .box:active {
    opacity: .8;
  opacity: 0.8;
  }

  .left .active_box {
    background-color: #fff;
    color: #004EA2;
  color: #004ea2;
  }

  .left .box i {
@@ -99,7 +99,7 @@
  }

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

  .small_menu p {
@@ -155,7 +155,7 @@
    font-size: 14px;
    margin: 0 8px;
    line-height: 32px;
    transition: .3s;
  transition: 0.3s;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    user-select: none;
@@ -168,13 +168,13 @@
  }

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

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

  .component_view {
@@ -189,38 +189,58 @@
    height: 100%;
  }
</style>
<style>

</style>
<style></style>
<template>
  <div class="all">
    <div class="title">
      <div class="logo">
        <img src="../../static/img/logo 1.png">
        <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">
        <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])">
      <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>
@@ -231,16 +251,25 @@
      <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)">
          <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
          class="com_index"
          v-for="(com, index) in tabs"
          :is="com.u"
          :key="upIndex + '|' + index"
          v-show="com.k == tabActive"
        >
        </component>
      </div>
    </div>
@@ -248,13 +277,13 @@
</template>

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