李林
2023-08-19 6b20b52fab18c0fe541aae79561012fb08e0faea
src/view/index.vue
@@ -54,13 +54,13 @@
}
.left {
  width: 92px;
  height: calc(100vh - 58px - 40px);
  background-color: #004ea2;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
      transition: .3s;
}
.left .box {
@@ -120,8 +120,8 @@
}
.right {
  width: calc(100% - 92px);
  height: calc(100vh - 58px);
      transition: .3s;
}
.tag {
@@ -136,7 +136,7 @@
  font-size: 14px;
}
.tag .el-icon-s-unfold {
   .tag > .el-icon-s-unfold,.el-icon-s-fold {
  font-size: 18px;
  cursor: pointer;
  margin: 0 8px;
@@ -196,80 +196,50 @@
      <div class="logo">
        <img src="../../static/img/logo 1.png" />
      </div>
      <div class="label">电缆附件新一代mom系统</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])"
      >
      <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])"
      >
         <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">
      <div class="right" :style="`width: calc(100% - ${leftOpen?'92':'0'}px);`">
      <div class="tag">
        <i class="el-icon-s-unfold"></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)"></i>
                  <i class="el-icon-close" @click="removeTab(ai)" v-if="tabActive!=0"></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>
@@ -292,39 +262,34 @@
  data() {
    return {
      userName: "value",
      menu: [
        {
            leftOpen: true,
            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",
@@ -342,8 +307,7 @@
              k: 4,
              v: "生产管理",
              i: "font icon-shouye",
              c: [
                {
                  c: [{
                  k: 12,
                  v: "生产订单",
                  i: "font icon-shouye",
@@ -367,8 +331,7 @@
              k: 5,
              v: "WMS管理",
              i: "font icon-shouye",
              c: [
                {
                  c: [{
                  k: 15,
                  v: "原材料库存",
                  i: "font icon-shouye",
@@ -410,8 +373,7 @@
          k: 2,
          v: "QMS管理",
          i: "font icon-shouye",
          c: [
            {
                  c: [{
              k: 3,
              v: "原材料检验",
              i: "font icon-shouye",
@@ -440,12 +402,6 @@
              v: "不合格品管理",
              i: "font icon-shouye",
              u: "unqualifiedManagement"
            },
            {
              k: 8,
              v: "实验室管理",
              i: "font icon-shouye",
              u: "laboratoryManagement"
            },
            {
              k: 9,
@@ -477,8 +433,7 @@
          k: 6,
          v: "核算管理",
          i: "font icon-shouye",
          c: [
            {
                  c: [{
              k: 21,
              v: "产量工资",
              i: "font icon-shouye",
@@ -496,8 +451,7 @@
              k: 7,
              v: "基础数据",
              i: "font icon-shouye",
              c: [
                {
                  c: [{
                  k: 23,
                  v: "记录内容维护",
                  i: "font icon-shouye",
@@ -532,11 +486,16 @@
                  v: "物料清单维护",
                  i: "font icon-shouye",
                  u: "mbom"
                  u: ""
                },
                {
                  k: 29,
                  v: "巡检项目维护",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 30,
                        v: "设备指标维护",
                  i: "font icon-shouye",
                  u: ""
                }
@@ -546,14 +505,12 @@
      activeBox: 0,
      activeP: 0,
      tabActive: 0,
      tabs: [
        {
            tabs: [{
          k: 0,
          v: "首页",
          i: "font icon-shouye",
          u: "index-index"
        }
      ],
            }],
      upIndex: 0
    };
  },
@@ -604,7 +561,7 @@
            this.activeBox = 5
         } else if (num>20 && num<=22){
            this.activeBox = 6
         } else if (num>22 && num<=28){
            } else if (num > 22 && num <= 30) {
            this.activeBox = 7
         }
    },