|
|
<template>
|
|
|
<div>
|
|
|
<el-row :gutter="0" v-if="isLinkDisabled" style="margin-top: 15px">
|
|
|
<el-col :span="2" align="left">
|
|
|
<img v-if="logo" :src="logo" class="sidebar-logo"/>
|
|
|
</el-col>
|
|
|
<el-col :span="22" align="right" style="margin-top: 10px">
|
|
|
<div class="inv-hos-title">
|
|
|
<span
|
|
|
style="margin: 10px;color: #2d8cf0;font-size: 14px;"
|
|
|
>部门 : {{ this.userInfo.deptName }}</span>
|
|
|
|
|
|
<!--<span style="font-weight: 500;color:rgb(51 48 48); font-size: 14px;">用户 : -->
|
|
|
<!-- {{-->
|
|
|
<!-- this.userInfo.companyName-->
|
|
|
<!-- }}-->
|
|
|
<!--</span>-->
|
|
|
<span
|
|
|
style="font-weight: 500;color:rgb(51 48 48); font-size: 14px; margin-right: 20px"
|
|
|
>    (用户 : {{
|
|
|
this.userInfo.userName
|
|
|
}})</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="tac">
|
|
|
<el-col :span="2">
|
|
|
<!-- <h5>默认颜色</h5>-->
|
|
|
<el-menu
|
|
|
:default-active="menuActive"
|
|
|
class="el-menu-vertical-demo"
|
|
|
@open="handleOpen">
|
|
|
<el-menu-item :index=0 @click="clickMenuItem(0)">
|
|
|
<i class="el-icon-edit-outline"></i>
|
|
|
<span slot="title">处理单据</span>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item :index=1 @click="clickMenuItem(1)">
|
|
|
<i class="el-icon-s-unfold"></i>
|
|
|
<span slot="title">工位上货</span>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item :index=2 @click="clickMenuItem(2)">
|
|
|
<i class="el-icon-s-fold"></i>
|
|
|
<span slot="title">工位退货</span>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item :index=3 @click="clickMenuItem(3)">
|
|
|
<i class="el-icon-s-platform"></i>
|
|
|
<span slot="title">工位存量</span>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item :index=4 @click="clickMenuItem(4)">
|
|
|
<i class="el-icon-s-order"></i>
|
|
|
<span slot="title">待处理单</span>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item :index=5 @click="clickMenuItem(5)">
|
|
|
<i class="el-icon-s-claim"></i>
|
|
|
<span slot="title">已完成单</span>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item :index=6 @click="clickMenuItem(6)">
|
|
|
<i class="el-icon-s-claim"></i>
|
|
|
<span slot="title">单据上传</span>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item :index=7 @click="clickMenuItem(7)">
|
|
|
<i class="el-icon-s-claim"></i>
|
|
|
<span slot="title">损耗出库</span>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="22">
|
|
|
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
|
|
|
@tab-click="upodateMenuActive" >
|
|
|
<el-tab-pane
|
|
|
v-for="(item, index) in editableTabs"
|
|
|
:key="item.name"
|
|
|
:label="item.title"
|
|
|
:name="item.name"
|
|
|
|
|
|
>
|
|
|
<component v-if="showChild" :is="item.component" v-bind="item.componentProps" :reset-key="resetKeys[item.name]" @parent-method="parentMethod"/>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import logoImg from '@/assets/logo/logo_dm.png'
|
|
|
import DealOrder from '@/views/collect/DealOrder.vue'
|
|
|
import CollectOrderAllot from '@/views/collect/CollectOrderAllot.vue'
|
|
|
import CollectOrderEnd from '@/views/collect/CollectOrderEnd.vue'
|
|
|
import IoCreateOrderReturn from '@/views/collect/IoCreateOrder.vue'
|
|
|
import IoCreateOrderOut from '@/views/collect/IoCreateOrder.vue'
|
|
|
import ioSplitFifoCode from '@/views/collect/ioSplitFifoCode.vue'
|
|
|
import CollectOrderUpload from '@/views/collect/CollectOrderUpload.vue'
|
|
|
import IoDestroyOrder from '@/views/collect/IoDestroyOrder.vue'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
DealOrder,
|
|
|
IoCreateOrderReturn,
|
|
|
IoCreateOrderOut,
|
|
|
ioSplitFifoCode,
|
|
|
CollectOrderAllot,
|
|
|
CollectOrderEnd,
|
|
|
CollectOrderUpload,
|
|
|
IoDestroyOrder
|
|
|
},
|
|
|
name: 'CollectOrderTabs',
|
|
|
data() {
|
|
|
return {
|
|
|
logo: logoImg,
|
|
|
isLinkDisabled: false,
|
|
|
showChild: true,
|
|
|
userInfo: {
|
|
|
inv: this.$store.getters.locInvName,
|
|
|
deptName: this.$store.getters.locDeptName,
|
|
|
userName: this.$store.getters.user.employeeName,
|
|
|
companyName: this.$store.getters.companyName
|
|
|
},
|
|
|
tabPosition: 'left',
|
|
|
editableTabsValue: 'DealOrder',
|
|
|
componentTables: [
|
|
|
{
|
|
|
number: 0,
|
|
|
title: '处理单据',
|
|
|
name: 'DealOrder',
|
|
|
component: DealOrder,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {
|
|
|
title: '这是单据的标题',
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
number: 1,
|
|
|
title: '工位上货',
|
|
|
name: 'IoCreateOrderOut',
|
|
|
component: IoCreateOrderOut,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {
|
|
|
fromSplitType: 'out'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
number: 2,
|
|
|
title: '工位退货',
|
|
|
name: 'IoCreateOrderReturn',
|
|
|
component: IoCreateOrderReturn,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {
|
|
|
fromSplitType: 'return'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
number: 3,
|
|
|
title: '工位存量',
|
|
|
name: 'ioSplitFifoCode',
|
|
|
component: ioSplitFifoCode,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {}
|
|
|
},
|
|
|
{
|
|
|
number: 4,
|
|
|
title: '待处理单',
|
|
|
name: 'CollectOrderAllot',
|
|
|
component: CollectOrderAllot,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {}
|
|
|
},
|
|
|
{
|
|
|
number: 5,
|
|
|
title: '已完成单',
|
|
|
name: 'CollectOrderEnd',
|
|
|
component: CollectOrderEnd,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {}
|
|
|
},
|
|
|
{
|
|
|
number: 6,
|
|
|
title: '单据上传',
|
|
|
name: 'CollectOrderUpload',
|
|
|
component: CollectOrderUpload,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {}
|
|
|
},
|
|
|
{
|
|
|
number: 7,
|
|
|
title: '损耗出库',
|
|
|
name: 'IoDestroyOrder',
|
|
|
component: IoDestroyOrder,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {}
|
|
|
}],
|
|
|
editableTabs: [{
|
|
|
number: 0,
|
|
|
title: '处理单据',
|
|
|
name: 'DealOrder',
|
|
|
component: DealOrder,
|
|
|
// 假设你需要传递的参数
|
|
|
componentProps: {
|
|
|
title: '这是单据的标题'
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
tabIndex: 0,
|
|
|
menuActive: 0,
|
|
|
resetKeys:{}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
parentMethod(data) {
|
|
|
const foundTab = this.findAllTabByName(data)
|
|
|
this.clickMenuItem(foundTab.number)
|
|
|
this.showChild = false;
|
|
|
this.$nextTick(() => {
|
|
|
this.showChild = true;
|
|
|
});
|
|
|
},
|
|
|
upodateMenuActive(tab, event) {
|
|
|
const foundTab = this.findTabByName(tab.name)
|
|
|
if (foundTab) {
|
|
|
// 如果找到了，执行一些操作
|
|
|
this.menuActive = foundTab.number
|
|
|
this.$set(this.resetKeys, foundTab.name, Date.now());
|
|
|
}
|
|
|
},
|
|
|
clickMenuItem(val) {
|
|
|
//分两种 一种已存在 一种未存在
|
|
|
let item = this.componentTables[(val)]
|
|
|
const foundTab = this.findTabByName(item.name)
|
|
|
if (foundTab) {
|
|
|
// 如果找到了，执行一些操作
|
|
|
this.editableTabsValue = foundTab.name
|
|
|
this.$set(this.resetKeys, foundTab.name, Date.now());
|
|
|
this.menuActive = foundTab.number
|
|
|
} else {
|
|
|
// 如果没有找到，执行其他操作
|
|
|
this.addTab(item)
|
|
|
}
|
|
|
|
|
|
},
|
|
|
findTabByName(name) {
|
|
|
// 使用find方法找到ID等于tabId的对象
|
|
|
const tab = this.editableTabs.find(tab => tab.name === name)
|
|
|
// 如果找到了，返回该对象；否则返回undefined
|
|
|
return tab
|
|
|
},
|
|
|
findAllTabByName(name) {
|
|
|
// 使用find方法找到ID等于tabId的对象
|
|
|
const tab = this.componentTables.find(tab => tab.name === name)
|
|
|
// 如果找到了，返回该对象；否则返回undefined
|
|
|
return tab
|
|
|
},
|
|
|
addTab(item) {
|
|
|
++this.tabIndex
|
|
|
this.editableTabs.push(item)
|
|
|
this.editableTabsValue = item.name
|
|
|
this.menuActive = item.number
|
|
|
},
|
|
|
removeTab(targetName) {
|
|
|
let tabs = this.editableTabs
|
|
|
let activeName = this.editableTabsValue
|
|
|
|
|
|
if (activeName === targetName) {
|
|
|
tabs.forEach((tab, index) => {
|
|
|
if (tab.name === targetName) {
|
|
|
let nextTab = tabs[index + 1] || tabs[index - 1]
|
|
|
if (nextTab) {
|
|
|
activeName = nextTab.name
|
|
|
this.menuActive = nextTab.number
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
this.editableTabsValue = activeName
|
|
|
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
if (this.$route.query.workplaceId != null) {
|
|
|
this.isLinkDisabled = true
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.sidebar-logo {
|
|
|
width: 80px;
|
|
|
height: 60px;
|
|
|
vertical-align: middle;
|
|
|
margin-left: 25px;
|
|
|
}
|
|
|
</style>
|
