You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
udiwms-vue-frame/src/views/collect/CollectOrderTabs.vue

298 lines
9.0 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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;"
>部门&nbsp:&nbsp{{ this.userInfo.deptName }}</span>
<!--<span style="font-weight: 500;color:rgb(51 48 48); font-size: 14px;">用户&nbsp:&nbsp-->
<!-- {{-->
<!-- this.userInfo.companyName-->
<!-- }}-->
<!--</span>-->
<span
style="font-weight: 500;color:rgb(51 48 48); font-size: 14px; margin-right: 20px"
>&nbsp&nbsp&nbsp&nbsp(用户&nbsp:&nbsp{{
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>