|
|
|
|
@ -0,0 +1,246 @@
|
|
|
|
|
<template>
|
|
|
|
|
<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-menu"></i>
|
|
|
|
|
<span slot="title">处理单据</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item :index=1 @click="clickMenuItem(1)">
|
|
|
|
|
<i class="el-icon-menu"></i>
|
|
|
|
|
<span slot="title">工位上货</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item :index=2 @click="clickMenuItem(2)">
|
|
|
|
|
<i class="el-icon-document"></i>
|
|
|
|
|
<span slot="title">工位退货</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item :index=3 @click="clickMenuItem(3)">
|
|
|
|
|
<i class="el-icon-setting"></i>
|
|
|
|
|
<span slot="title">工位存量</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item :index=4 @click="clickMenuItem(4)">
|
|
|
|
|
<i class="el-icon-setting"></i>
|
|
|
|
|
<span slot="title">待处理单</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item :index=5 @click="clickMenuItem(5)">
|
|
|
|
|
<i class="el-icon-setting"></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 :is="item.component" v-bind="item.componentProps" />
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <el-tabs :tab-position="tabPosition" style="height: 100%">-->
|
|
|
|
|
<!-- <el-tab-pane label="处理单据" style="height: 100%" @click="addTab('DealOrderBlank')">-->
|
|
|
|
|
<!-- <DealOrderBlank>-->
|
|
|
|
|
<!-- </DealOrderBlank>-->
|
|
|
|
|
<!-- </el-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
<!-- <el-tab-pane label="工位上货"style="height: 100%" @click="addTab('IoCreateOrderBlankReturn')">-->
|
|
|
|
|
<!-- <IoCreateOrderBlankReturn-->
|
|
|
|
|
<!-- :splitType="'return'"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- </IoCreateOrderBlankReturn>-->
|
|
|
|
|
<!-- </el-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
<!-- <el-tab-pane label="工位退货" style="height: 100%" @click="addTab('IoCreateOrderBlankOut')">-->
|
|
|
|
|
<!-- <IoCreateOrderBlankOut-->
|
|
|
|
|
<!-- :splitType="'out'"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- </IoCreateOrderBlankOut>-->
|
|
|
|
|
<!-- </el-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
<!-- <el-tab-pane label="工位存量" style="height: 100%" @click="addTab('ioSplitFifoCodeBlank')">-->
|
|
|
|
|
<!-- <ioSplitFifoCodeBlank>-->
|
|
|
|
|
<!-- </ioSplitFifoCodeBlank>-->
|
|
|
|
|
<!-- </el-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
<!-- <el-tab-pane label="待处理单" style="height: 100%" @click="addTab('CollectOrderAllotBlank')">-->
|
|
|
|
|
<!-- <CollectOrderAllotBlank>-->
|
|
|
|
|
<!-- </CollectOrderAllotBlank>-->
|
|
|
|
|
<!-- </el-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
<!-- <el-tab-pane label="已完成单" style="height: 100%" @click="addTab('CollectOrderEndBlank')">-->
|
|
|
|
|
<!-- <CollectOrderEndBlank>-->
|
|
|
|
|
<!-- </CollectOrderEndBlank>-->
|
|
|
|
|
<!-- </el-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
<!-- </el-tabs>-->
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import DealOrderBlank from "@/views/collect/DealOrderBlank.vue";
|
|
|
|
|
import CollectOrderAllotBlank from "@/views/collect/CollectOrderAllotBlank.vue";
|
|
|
|
|
import CollectOrderEndBlank from "@/views/collect/CollectOrderEndBlank.vue";
|
|
|
|
|
import IoCreateOrderBlankReturn from "@/views/collect/IoCreateOrderBlank.vue";
|
|
|
|
|
import IoCreateOrderBlankOut from "@/views/collect/IoCreateOrderBlank.vue";
|
|
|
|
|
import ioSplitFifoCodeBlank from "@/views/collect/ioSplitFifoCodeBlank.vue";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components:{
|
|
|
|
|
DealOrderBlank,IoCreateOrderBlankReturn,IoCreateOrderBlankOut,ioSplitFifoCodeBlank,CollectOrderAllotBlank,CollectOrderEndBlank
|
|
|
|
|
},
|
|
|
|
|
name: 'CollectOrderTabs',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
tabPosition: 'left',
|
|
|
|
|
editableTabsValue: 'DealOrderBlank',
|
|
|
|
|
componentTables: [
|
|
|
|
|
{
|
|
|
|
|
number: 0,
|
|
|
|
|
title: '处理单据',
|
|
|
|
|
name: 'DealOrderBlank',
|
|
|
|
|
component: DealOrderBlank,
|
|
|
|
|
// 假设你需要传递的参数
|
|
|
|
|
componentProps: {
|
|
|
|
|
title: '这是单据的标题'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
number: 1,
|
|
|
|
|
title: '工位上货',
|
|
|
|
|
name: 'IoCreateOrderBlankReturn',
|
|
|
|
|
component: IoCreateOrderBlankReturn,
|
|
|
|
|
// 假设你需要传递的参数
|
|
|
|
|
componentProps: {
|
|
|
|
|
splitType: 'return'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
number: 2,
|
|
|
|
|
title: '工位退货',
|
|
|
|
|
name: 'IoCreateOrderBlankOut',
|
|
|
|
|
component: IoCreateOrderBlankOut,
|
|
|
|
|
// 假设你需要传递的参数
|
|
|
|
|
componentProps: {
|
|
|
|
|
splitType: 'out'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
number: 3,
|
|
|
|
|
title: '工位存量',
|
|
|
|
|
name: 'ioSplitFifoCodeBlank',
|
|
|
|
|
component: ioSplitFifoCodeBlank,
|
|
|
|
|
// 假设你需要传递的参数
|
|
|
|
|
componentProps: {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
number: 4,
|
|
|
|
|
title: '待处理单',
|
|
|
|
|
name: 'CollectOrderAllotBlank',
|
|
|
|
|
component: CollectOrderAllotBlank,
|
|
|
|
|
// 假设你需要传递的参数
|
|
|
|
|
componentProps: {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
number: 5,
|
|
|
|
|
title: '已完成单',
|
|
|
|
|
name: 'CollectOrderEndBlank',
|
|
|
|
|
component: CollectOrderEndBlank,
|
|
|
|
|
// 假设你需要传递的参数
|
|
|
|
|
componentProps: {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
editableTabs: [{
|
|
|
|
|
number: 0,
|
|
|
|
|
title: '处理单据',
|
|
|
|
|
name: 'DealOrderBlank',
|
|
|
|
|
component: DealOrderBlank,
|
|
|
|
|
// 假设你需要传递的参数
|
|
|
|
|
componentProps: {
|
|
|
|
|
title: '这是单据的标题'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
tabIndex: 0,
|
|
|
|
|
menuActive: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
upodateMenuActive(tab, event){
|
|
|
|
|
const foundTab = this.findTabByName(tab.name);
|
|
|
|
|
if (foundTab) {
|
|
|
|
|
// 如果找到了，执行一些操作
|
|
|
|
|
this.menuActive = foundTab.number;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
clickMenuItem(val){
|
|
|
|
|
//分两种 一种已存在 一种未存在
|
|
|
|
|
let item = this.componentTables[(val)]
|
|
|
|
|
|
|
|
|
|
const foundTab = this.findTabByName(item.name);
|
|
|
|
|
if (foundTab) {
|
|
|
|
|
// 如果找到了，执行一些操作
|
|
|
|
|
this.editableTabsValue = foundTab.name;
|
|
|
|
|
} else {
|
|
|
|
|
// 如果没有找到，执行其他操作
|
|
|
|
|
this.addTab(item)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
findTabByName(name) {
|
|
|
|
|
// 使用find方法找到ID等于tabId的对象
|
|
|
|
|
const tab = this.editableTabs.find(tab => tab.name === name);
|
|
|
|
|
// 如果找到了，返回该对象；否则返回undefined
|
|
|
|
|
return tab;
|
|
|
|
|
},
|
|
|
|
|
addTab(item) {
|
|
|
|
|
++this.tabIndex;
|
|
|
|
|
this.editableTabs.push(item);
|
|
|
|
|
this.editableTabsValue = item.name;
|
|
|
|
|
},
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
|
|
</style>
|
chenhc
10 months ago