132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<template>
|
|
<div class="split-container">
|
|
<div class="split-sidebar">
|
|
<el-menu :default-active="activeMenu" class="sidebar-menu" @select="handleMenuSelect">
|
|
<!-- 纵剪分条集成页按需求只保留五个核心业务板块 -->
|
|
<el-menu-item index="inventory">
|
|
<i class="el-icon-box"></i>
|
|
<span slot="title">库存</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="processing">
|
|
<i class="el-icon-s-operation"></i>
|
|
<span slot="title">WIP</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="report">
|
|
<i class="el-icon-document"></i>
|
|
<span slot="title">报表</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="shipping">
|
|
<i class="el-icon-truck"></i>
|
|
<span slot="title">发货</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="quality">
|
|
<i class="el-icon-warning-outline"></i>
|
|
<span slot="title">品质</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<div class="split-content">
|
|
<component :is="currentComponent" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Inventory from './components/Inventory.vue'
|
|
import Processing from './components/Processing.vue'
|
|
import Report from './components/Report.vue'
|
|
import Shipping from './components/Shipping.vue'
|
|
import Quality from './components/Quality.vue'
|
|
|
|
export default {
|
|
name: 'SplitSystem',
|
|
components: {
|
|
Inventory,
|
|
Processing,
|
|
Report,
|
|
Shipping,
|
|
Quality,
|
|
},
|
|
data() {
|
|
return {
|
|
// 默认先展示库存板块，与其他集成入口保持一致。
|
|
activeMenu: 'inventory',
|
|
}
|
|
},
|
|
computed: {
|
|
currentComponent() {
|
|
const componentMap = {
|
|
inventory: 'Inventory',
|
|
processing: 'Processing',
|
|
report: 'Report',
|
|
shipping: 'Shipping',
|
|
quality: 'Quality',
|
|
}
|
|
return componentMap[this.activeMenu]
|
|
},
|
|
},
|
|
methods: {
|
|
handleMenuSelect(index) {
|
|
this.activeMenu = index
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-container {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.split-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: calc(100vh - 84px);
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.split-sidebar {
|
|
width: 100px;
|
|
background-color: #fff;
|
|
border-right: 1px solid #e4e7ed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
|
|
|
|
.sidebar-menu {
|
|
border: none;
|
|
background-color: transparent;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
border-right: none;
|
|
|
|
::v-deep .el-menu-item {
|
|
color: #606266;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
background-color: #ecf5ff;
|
|
color: #409eff;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: #ecf5ff;
|
|
color: #409eff;
|
|
border-right: 3px solid #409eff;
|
|
}
|
|
|
|
i {
|
|
font-size: 18px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.split-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|