6 changed files with 175 additions and 14 deletions
@ -0,0 +1,156 @@ |
|||||
|
<template> |
||||
|
<div class="page-box padKittingPackPage" v-loading="loading"> |
||||
|
<!-- 左侧按钮 --> |
||||
|
<div class="leftBtns"> |
||||
|
<div |
||||
|
v-for="(item,index) of leftButtons" |
||||
|
:key="index" |
||||
|
class="left-button" |
||||
|
>{{ item.name }}</div> |
||||
|
</div> |
||||
|
<!-- 中间底盘号 --> |
||||
|
<div class="centerChassisContain"> |
||||
|
<div class="title">底盘号</div> |
||||
|
<ul class="chassisList"> |
||||
|
<li |
||||
|
v-for="(item,index) of centerChassisList" |
||||
|
:style="{color:(item.canSelect?'#000':'#ddd'),cursor:(item.canSelect?'pointer':'no-drop'),background:(item.isSelect?'green':'#fff')}" |
||||
|
:key="index" |
||||
|
@click="selectCenterChassis(item,index)" |
||||
|
>{{ item.number }}{{item.canSelect}}{{item.isSelect}}</li> |
||||
|
</ul> |
||||
|
<div class="footer-button">创建底盘组</div> |
||||
|
</div> |
||||
|
<!-- 右侧底盘组 --> |
||||
|
<div class="rightChassisGroup"> |
||||
|
<!-- 右上组 --> |
||||
|
<div class="rightTopTable"> |
||||
|
<el-table |
||||
|
:data="rightTopChassisGroup" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="number" |
||||
|
label="组" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="time" |
||||
|
label="时间" |
||||
|
></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<!-- 右下bom --> |
||||
|
<div class="rightBottomBomData"> |
||||
|
<el-table |
||||
|
:data="rightBottomBomData" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="Kitting组别Bom" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qty" |
||||
|
label="底盘组物品数量" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qty1" |
||||
|
label="Kiting组数量" |
||||
|
></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="footer-button">完成该组底盘</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: "padKittingPack", |
||||
|
data() { |
||||
|
return { |
||||
|
loading:false, |
||||
|
// 默认一次打包数量 |
||||
|
packGroupNumber:3, |
||||
|
// 左侧按钮 |
||||
|
leftButtons:[ |
||||
|
{name:'K1',id:'1'}, |
||||
|
{name:'K2',id:'2'}, |
||||
|
{name:'K3',id:'3'}, |
||||
|
{name:'K4',id:'4'}, |
||||
|
{name:'K5',id:'5'}, |
||||
|
], |
||||
|
// 中间底盘号 |
||||
|
centerChassisList:[ |
||||
|
{number:'BC0000004',id:'4',time:'09:00:00',canSelect:true,isSelect:false}, |
||||
|
{number:'BC0000005',id:'5',time:'09:00:00',canSelect:false,isSelect:false}, |
||||
|
{number:'BC0000006',id:'6',time:'09:00:00',canSelect:false,isSelect:false}, |
||||
|
{number:'BC0000007',id:'7',time:'09:00:00',canSelect:false,isSelect:false}, |
||||
|
], |
||||
|
// 右上方组数据 |
||||
|
rightTopChassisGroup:[ |
||||
|
{number:'BC0000001',id:'1',time:'09:00:00'}, |
||||
|
{number:'BC0000002',id:'2',time:'09:00:00'}, |
||||
|
{number:'BC0000003',id:'3',time:'09:00:00'}, |
||||
|
], |
||||
|
// 右下方组bom数据 |
||||
|
rightBottomBomData:[ |
||||
|
{name:'SE370E01B01A',qty:'1',qty2:'1'}, |
||||
|
{name:'SE370Q41B10AG',qty:'2',qty2:'2'}, |
||||
|
{name:'THILDD0A510AA',qty:'3',qty2:'3'}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 点击选中中间数据 |
||||
|
selectCenterChassis(selectItem,selectIndex){ |
||||
|
this.centerChassisList.forEach((item,index)=>{ |
||||
|
// 如果当前项为第一个 或者 前一个已经选中 |
||||
|
if(Number(selectIndex) == 0 || this.centerChassisList[Number(selectIndex)-1].isSelect){ |
||||
|
// // 选中 |
||||
|
if(selectItem.isSelect == false){ |
||||
|
console.log(109,this.centerChassisList[Number(selectIndex)].isSelect) |
||||
|
this.centerChassisList[Number(selectIndex)].isSelect = true |
||||
|
this.centerChassisList[Number(selectIndex)].canSelect = true |
||||
|
if(this.centerChassisList[Number(selectIndex + 1)]){ |
||||
|
this.centerChassisList[Number(selectIndex + 1)].canSelect = true |
||||
|
} |
||||
|
// if(Number(index) <= Number(selectIndex))item.isSelect = true |
||||
|
// if(Number(index) <= Number(selectIndex + 1))item.canSelect = true |
||||
|
// if(Number(selectIndex) == this.centerChassisList.length - 1){ |
||||
|
// item.isSelect = true |
||||
|
// } |
||||
|
} |
||||
|
// 取消选中todo: |
||||
|
else{ |
||||
|
console.log(123) |
||||
|
if(Number(index) == Number(selectIndex)){ |
||||
|
item.isSelect = false |
||||
|
} |
||||
|
// console.log(120,index,selectIndex) |
||||
|
// if(Number(index) > Number(selectIndex)){ |
||||
|
// item.canSelect = false |
||||
|
// item.isSelect = false |
||||
|
// } |
||||
|
} |
||||
|
// if(selectIndex == this.centerChassisList.length - 1){ |
||||
|
// item.canSelect = true |
||||
|
// }else{ |
||||
|
// this.centerChassisList[Number(selectIndex)+1].canSelect = true |
||||
|
// } |
||||
|
}else{ |
||||
|
this.$warningMsg("必须从上按顺序选择") |
||||
|
} |
||||
|
// if(selectItem.isSelect){ |
||||
|
// if(Number(index) > Number(selectIndex)){ |
||||
|
// item.canSelect = false |
||||
|
// item.isSelect = false |
||||
|
// } |
||||
|
// } |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/styles/mainbasicData.scss"; |
||||
|
</style> |
Loading…
Reference in new issue