<style scoped>
|
.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;
|
}
|
|
.logo {
|
width: 140px;
|
}
|
|
.logo img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.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 * {
|
margin: 0 5px;
|
}
|
|
.user img {
|
margin-left: 20px;
|
cursor: pointer;
|
width: 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: 0.3s;
|
overflow-y: auto;
|
}
|
|
.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 .active_box {
|
background-color: #fff;
|
color: #004ea2;
|
}
|
|
.left .box i {
|
font-size: 32px;
|
margin-bottom: 8px;
|
}
|
|
.left .box div {
|
font-size: 14px;
|
}
|
|
.small_menu {
|
color: #666;
|
}
|
|
.small_menu .active_p {
|
color: #004ea2;
|
}
|
|
.small_menu p {
|
padding: 12px 15px;
|
cursor: pointer;
|
}
|
|
.small_menu p:hover {
|
background-color: rgba(0, 0, 0, 0.05);
|
}
|
|
.small_menu i {
|
font-size: 16px;
|
}
|
|
.small_menu span {
|
font-size: 14px;
|
}
|
|
.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;
|
}
|
|
.tabs {
|
min-width: calc(100% - 68px);
|
height: 100%;
|
align-items: center;
|
display: flex;
|
overflow-x: auto;
|
}
|
|
.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;
|
}
|
|
.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/lg.png" />
|
</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="`box ${activeBox == 0 ? 'active_box' : ''}`" @click="addTab(menu[0].c[0])">
|
<i class="font icon-shouye"></i>
|
<div>首页</div>
|
</div>
|
<el-popover placement="right-start" width="90" trigger="click" v-for="(a, ai) in menu" :key="ai"
|
v-if="a.self != true">
|
<div :class="`box ${activeBox == a.k ? 'active_box' : ''}`" :id="'box'+`${a.k}`" @click="firstMenu(a.k,a.v)" slot="reference">
|
<i :class="a.i"></i>
|
<div>{{ a.v }}</div>
|
</div>
|
<div class="small_menu" v-if="a.v != '运输管理'">
|
<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 :id="menu + `${b.k}`">{{ b.v }}</span>
|
</p>
|
</div>
|
<div class="small_menu" v-if="a.v == '运输管理'" style="width: 100%;">
|
<el-row>
|
<el-col style="margin-left: 20px;margin-top: 10px;color: #EA5D26;">发货申请</el-col>
|
<el-col style="display: flex;">
|
<el-col>
|
<p :class="activeP == (a.c)[0].k ? 'active_p' : ''"
|
@click="addTab((a.c)[0])">
|
<i :class="(a.c)[0].i"></i>
|
<span :id="menu + `${(a.c)[0].k}`">{{ (a.c)[0].v }}</span>
|
</p>
|
</el-col>
|
<el-col>
|
<p :class="activeP == (a.c)[11].k ? 'active_p' : ''"
|
@click="addTab((a.c)[11])">
|
<i :class="(a.c)[11].i"></i>
|
<span :id="menu + `${(a.c)[0].k}`">{{ (a.c)[11].v }}</span>
|
</p>
|
</el-col>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="margin-left: 10px;color: #EA5D26;">运输管理</el-col>
|
<el-col style="display: flex;">
|
<el-col>
|
<p :class="activeP == (a.c)[1].k ? 'active_p' : ''"
|
@click="addTab((a.c)[1])">
|
<i :class="(a.c)[1].i"></i>
|
<span :id="menu + `${(a.c)[1].k}`">{{ (a.c)[1].v }}</span>
|
</p>
|
</el-col>
|
<el-col>
|
<p :class="activeP == (a.c)[2].k ? 'active_p' : ''"
|
@click="addTab((a.c)[2])">
|
<i :class="(a.c)[2].i"></i>
|
<span :id="menu + `${(a.c)[2].k}`">{{ (a.c)[2].v }}</span>
|
</p>
|
</el-col>
|
</el-col>
|
<el-col style="display: flex;">
|
<el-col>
|
<p :class="activeP == (a.c)[3].k ? 'active_p' : ''"
|
@click="addTab((a.c)[3])">
|
<i :class="(a.c)[3].i"></i>
|
<span :id="menu + `${(a.c)[3].k}`">{{ (a.c)[3].v }}</span>
|
</p>
|
</el-col>
|
<el-col>
|
<p :class="activeP == (a.c)[10].k ? 'active_p' : ''"
|
@click="addTab((a.c)[10])">
|
<i :class="(a.c)[10].i"></i>
|
<span :id="menu + `${(a.c)[10].k}`">{{ (a.c)[10].v }}</span>
|
</p>
|
</el-col>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="margin-left: 10px;color: #EA5D26;">回单管理</el-col>
|
<el-col style="display: flex;">
|
<el-col>
|
<p :class="activeP == (a.c)[7].k ? 'active_p' : ''"
|
@click="addTab((a.c)[7])">
|
<i :class="(a.c)[7].i"></i>
|
<span :id="menu + `${(a.c)[7].k}`">{{ (a.c)[7].v }}</span>
|
</p>
|
</el-col>
|
<el-col>
|
<p :class="activeP == (a.c)[8].k ? 'active_p' : ''"
|
@click="addTab((a.c)[8])">
|
<i :class="(a.c)[8].i"></i>
|
<span :id="menu + `${(a.c)[8].k}`">{{ (a.c)[8].v }}</span>
|
</p>
|
</el-col>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="margin-left: 10px;color: #EA5D26;">运输管理</el-col>
|
<el-col style="display: flex;">
|
<el-col>
|
<p :class="activeP == (a.c)[5].k ? 'active_p' : ''"
|
@click="addTab((a.c)[5])">
|
<i :class="(a.c)[5].i"></i>
|
<span :id="menu + `${(a.c)[5].k}`">{{ (a.c)[5].v }}</span>
|
</p>
|
</el-col>
|
<el-col>
|
<p :class="activeP == (a.c)[6].k ? 'active_p' : ''"
|
@click="addTab((a.c)[6])">
|
<i :class="(a.c)[6].i"></i>
|
<span :id="menu + `${(a.c)[6].k}`">{{ (a.c)[6].v }}</span>
|
</p>
|
</el-col>
|
</el-col>
|
<el-col style="display: flex;">
|
<el-col :span="12">
|
<p :class="activeP == (a.c)[7].k ? 'active_p' : ''"
|
@click="addTab((a.c)[7])">
|
<i :class="(a.c)[7].i"></i>
|
<span :id="menu + `${(a.c)[7].k}`">{{ (a.c)[7].v }}</span>
|
</p>
|
</el-col>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="margin-left: 10px;color: #EA5D26;">数据统计</el-col>
|
<el-col style="display: flex;">
|
<el-col :span="12">
|
<p :class="activeP == (a.c)[10].k ? 'active_p' : ''"
|
@click="addTab((a.c)[10])">
|
<i :class="(a.c)[10].i"></i>
|
<span :id="menu + `${(a.c)[10].k}`">{{ (a.c)[10].v }}</span>
|
</p>
|
</el-col>
|
</el-col>
|
</el-row>
|
</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">
|
</component>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
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"
|
}]
|
},
|
{
|
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"
|
}]
|
},
|
{
|
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: {
|
firstMenu(k,v){
|
this.activeBox = k
|
if(v=='运输管理'){
|
let idName=$('#box'+k).attr('aria-describedby');
|
//265
|
let css={
|
"width": "300px",
|
|
}
|
$('#'+idName).css(css)
|
|
let pCss={
|
"color": "white"
|
}
|
$('#'+idName+'> p').css(pCss)
|
}
|
},
|
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>
|
