modified: index.html modified: src/components/view/carrierManagement....

Fixiaobai

2023-10-12 66506f2a1b836e955264f3efbfdcd3e27008b6a6

 src/view/index.vue

@@ -1,224 +1,224 @@
<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: 140px;
}

   .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 {
      height: calc(100vh - 58px - 40px);
      background-color: #004ea2;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 20px 0;
      transition: .3s;
      overflow-y: auto;
   }
.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: 8px 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 8px;
   }
.left .box {
   color: #fff;
   width: 71px;
   height: 75px;
   margin: 8px 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   border-radius: 8px;
}

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

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

   .left .box i {
      font-size: 32px;
      margin-bottom: 8px;
   }
.left .box i {
   font-size: 32px;
   margin-bottom: 8px;
}

   .left .box div {
      font-size: 14px;
   }
.left .box div {
   font-size: 14px;
}

   .small_menu {
      color: #666;
   }
.small_menu {
   color: #666;
}

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

   .small_menu p {
      padding: 12px 15px;
      cursor: pointer;
   }
.small_menu p {
   padding: 12px 15px;
   cursor: pointer;
}

   .small_menu p:hover {
      background-color: rgba(0, 0, 0, 0.05);
   }
.small_menu p:hover {
   background-color: rgba(0, 0, 0, 0.05);
}

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

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

   .right {
      height: calc(100vh - 58px);
      transition: .3s;
   }
.right {
   height: calc(100vh - 58px);
   transition: 0.3s;
}

   .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;
   }
	
   .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;
   }
.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% - 68px);
      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: 0.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%;
   }
.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);
}

.com_index {
   width: 100%;
   height: 100%;
}
</style>
<style></style>
<template>
   <div class="all">
      <div class="title">
         <div class="logo">
            <img src="../../static/img/logo 1.png" />
            <img src="../../static/img/lg.png" />
         </div>
         <div class="label">鹓雏技术框架系统</div>
         <div class="label" id="label">瑞翔新材TMS系统</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="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>
@@ -230,21 +230,21 @@
               <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>
                  <span :id="menu+`${b.k}`" >{{ 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)">
                  {{ 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>
@@ -259,117 +259,259 @@
</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",
            leftOpen: true,
            menu: [{
                  k: 0,
                  v: "首页",
                  i: "font icon-shouye",
                  self: true,
                  c: [{
                     k: 0,
                     v: "首页",
                     i: "font icon-shouye",
                     u: "index-index"
                  }]
               },
               {
                  k: 1,
                  v: "技术管理",
                  i: "font icon-shouye",
                  c: [{
                        k: 1,
                        v: "标准BOM",
                        i: "font icon-shouye",
                        u: ""
                     },
                     {
                        k: 2,
                        v: "订单BOM",
                        i: "font icon-shouye",
                        u: ""
                     }
                  ]
               }
            ],
            activeBox: 0,
            activeP: 0,
            tabActive: 0,
            tabs: [{
import { ref,onMounted } from 'vue'
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",
            self: true,
            c: [{
               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;
            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;
               }
            });
            if (num == -1) {
               this.tabs.push(ob);
            }
         },
         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
                  }
               })
            }
         {
            k: 24,
            v: "承运商管理",
            i: "font icon-kuguanfahuo",
            c: [{
               k: 3,
               v: "承运商管理",
               i: "font icon-bodanguanli",
               u: "carrierManagement"
            }, {
               k: 4,
               v: "承运商合同管理",
               i: "font icon-icon-contract",
               u: "carrierContract"
            }]
         },
         out() {
            sessionStorage.clear();
            localStorage.removeItem("autoenter");
            this.$router.push("/enter");
         {
            k: 25,
            v: "运输管理",
            i: "font icon-yunyingguanli_tieziguanli",
            c: [{
               k: 5,
               v: "发货申请",
               i: "font icon-bodanguanli",
               u: "shipmentRequest"
            },
            {
               k: 6,
               v: "发货操作",
               i: "font icon-bodanguanli",
               u: "shipmentOperate"
            },
            {
               k: 7,
               v: "发货列表",
               i: "font icon-bodanguanli",
               u: "shipmentTabulation"
            },

            {
               k: 8,
               v: "发货跟踪",
               i: "font icon-bodanguanli",
               u: "shipmentTrack"
            }, {
               k: 9,
               v: "到票核销",
               i: "font icon-bodanguanli",
               u: "invoiceVerification"
            },

            {
               k: 10,
               v: "运费结算",
               i: "font icon-bodanguanli",
               u: "freightSettlement"
            },
            {
               k: 11,
               v: "往来核对",
               i: "font icon-bodanguanli",
               u: "reconciliationTransactions"
            },
            {
               k: 12,
               v: "回单核销",
               i: "font icon-bodanguanli",
               u: "receiptVerification"
            },

            {
               k: 13,
               v: "回单及时率统计",
               i: "font icon-bodanguanli",
               u: "receiptStatistics"
            }, {
               k: 14,
               v: "整车率统计",
               i: "font icon-bodanguanli",
               u: "vehicleStatistics"
            },
            {
               k: 15,
               v: "定位卡管理",
               i: "font icon-bodanguanli",
               u: "locationCardManagement"
            },
            {
               k: 16,
               v: "货车预约",
               i: "font icon-bodanguanli",
               u: "trackAppointment"
            },
            ]
         },
         {
            k: 26,
            v: "承运商考核",
            i: "font icon-wodekaohe",
            c: [{
               k: 17,
               v: "承运商指标查询",
               i: "font icon-bodanguanli",
               u: "carrierMetrics"
            },
            {
               k: 18,
               v: "回单周期维护",
               i: "font icon-bodanguanli",
               u: "receiptPeriod"
            }
            ]
         },
         {
            k: 27,
            v: "系统配置",
            i: "el-icon-s-tools",
            c: [{
               k: 19,
               v: "定位卡领用管理",
               i: "font icon-bodanguanli",
               u: ""
            },
            {
               k: 20,
               v: "定位卡回收管理",
               i: "font icon-bodanguanli",
               u: ""
            },
            {
               k: 21,
               v: "车长单价维护",
               i: "font icon-bodanguanli",
               u: ""
            },
            {
               k: 22,
               v: "配载单价维护",
               i: "font icon-bodanguanli",
               u: ""
            },
            {
               k: 23,
               v: "专车价维护",
               i: "font icon-bodanguanli",
               u: ""
            }
            ]
         }
         ],
         activeBox: 0,
         activeP: 0,
         tabActive: 0,
         menuIsClick: false,
         tabs: [{
            k: 0,
            v: "首页",
            i: "font icon-shouye",
            u: "index-index"
         }],
         upIndex: 0
      };
   },
   created() { },
   mounted() {
      // this.userName = JSON.parse(localStorage.getItem("user")).name;
   },
   watch:{
      menuIsClick(){
         $("#label").click()
      }
   },
   methods: {
      menuClick() {
         this.menuIsClick=!this.menuIsClick
   },
   addTab(ob) {
      this.menuClick()
      if (ob.k == 0) this.activeBox = 0;
      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;
         }
      });
      if (num == -1) {
         this.tabs.push(ob);
      }
   },
   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");
   }
}
   };
</script>