王震
2023-09-09 c37e4efb8a78a0f1bf85cf29a9286cc312469dbe
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 {
@@ -121,7 +126,7 @@
   .right {
      height: calc(100vh - 58px);
      transition: .3s;
  transition: 0.3s;
   }
   .tag {
@@ -136,7 +141,8 @@
      font-size: 14px;
   }
   .tag > .el-icon-s-unfold,.el-icon-s-fold {
.tag > .el-icon-s-unfold,
.el-icon-s-fold {
      font-size: 18px;
      cursor: pointer;
      margin: 0 8px;
@@ -182,6 +188,7 @@
      width: calc(100% - 48px);
      padding: 11px 24px;
      background: rgb(245, 247, 251);
  overflow-y: auto;
   }
   .com_index {
@@ -204,42 +211,82 @@
         </div>
      </div>
      <div class="left" :style="`width: ${leftOpen?'92':'0'}px;`">
         <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>
            </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)">
          <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>
         </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>
@@ -263,33 +310,39 @@
         return {
            userName: "value",
            leftOpen: true,
            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-ic_form_set24px",
                  c: [{
          c: [
            {
                        k: 1,
                        v: "标准BOM",
                        i: "font icon-shouye",
@@ -307,7 +360,8 @@
                  k: 4,
                  v: "生产管理",
                  i: "font icon-shengchanguanli",
                  c: [{
          c: [
            {
                        k: 12,
                        v: "生产订单",
                        i: "font icon-shouye",
@@ -331,7 +385,8 @@
                  k: 5,
                  v: "WMS管理",
                  i: "font icon-a-Inventorydumprequest",
                  c: [{
          c: [
            {
                        k: 15,
                        v: "原材料库存",
                        i: "font icon-shouye",
@@ -373,7 +428,8 @@
                  k: 2,
                  v: "QMS管理",
                  i: "font icon-xunhuan",
                  c: [{
          c: [
            {
                        k: 3,
                        v: "原材料检验",
                        i: "font icon-shouye",
@@ -427,7 +483,8 @@
                  k: 6,
                  v: "核算管理",
                  i: "font icon-caiwuhesuanxitong",
                  c: [{
          c: [
            {
                        k: 21,
                        v: "产量工资",
                        i: "font icon-shouye",
@@ -445,7 +502,8 @@
                  k: 7,
                  v: "基础数据",
                  i: "font icon-a-ziyuan20",
                  c: [{
          c: [
            {
                        k: 23,
                        v: "生产记录维护",
                        i: "font icon-shouye",
@@ -499,12 +557,14 @@
            activeBox: 0,
            activeP: 0,
            tabActive: 0,
            tabs: [{
      tabs: [
        {
               k: 0,
               v: "首页",
               i: "font icon-shouye",
               u: "index-index"
            }],
        }
      ],
            upIndex: 0
         };
      },
@@ -552,11 +612,11 @@
            } else if (num > 11 && num <= 14) {
               this.activeBox = 4;
            } else if (num > 14 && num <= 20) {
               this.activeBox = 5
        this.activeBox = 5;
            } else if (num > 20 && num <= 22) {
               this.activeBox = 6
        this.activeBox = 6;
            } else if (num > 22 && num <= 30) {
               this.activeBox = 7
        this.activeBox = 7;
            }
         },
         out() {