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