6 changed files with 374 additions and 124 deletions
@ -0,0 +1,11 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
let baseURL = localStorage.getItem('base') + '/api/' |
||||
|
|
||||
|
// 【pad】 Kitting组包 - 获取中间底盘数据
|
||||
|
export function ChassisGetListWithNextCount(params) { |
||||
|
return request({ |
||||
|
url: baseURL + 'wms/store/ChassisOperationSequence/get-list-with-next-count', |
||||
|
method: 'post', |
||||
|
params: params, |
||||
|
}) |
||||
|
} |
@ -1,156 +1,388 @@ |
|||||
<template> |
<template> |
||||
<div class="page-box padKittingPackPage" v-loading="loading"> |
<div class="page-box" v-loading="loading"> |
||||
<!-- 左侧按钮 --> |
<div class="padKittingPackPage"> |
||||
<div class="leftBtns"> |
<!-- 左侧按钮 --> |
||||
<div |
<div class="leftBtns"> |
||||
v-for="(item,index) of leftButtons" |
<div |
||||
:key="index" |
v-for="(item,index) of leftButtons" |
||||
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" |
:key="index" |
||||
@click="selectCenterChassis(item,index)" |
class="left-button" |
||||
>{{ item.number }}{{item.canSelect}}{{item.isSelect}}</li> |
@click="letButtonClick(item)" |
||||
</ul> |
:style="{ |
||||
<div class="footer-button">创建底盘组</div> |
background:(currentKittingInfo && (item.code==currentKittingInfo.code)?'#ff9000':'#409EFF'), |
||||
</div> |
}" |
||||
<!-- 右侧底盘组 --> |
> |
||||
<div class="rightChassisGroup"> |
<p class="code">{{ item.code }}</p> |
||||
<!-- 右上组 --> |
<p class="name">{{ item.name }}</p> |
||||
<div class="rightTopTable"> |
</div> |
||||
<el-table |
</div> |
||||
:data="rightTopChassisGroup" |
<!-- 中间底盘号 --> |
||||
style="width: 100%"> |
<div class="centerChassisContain"> |
||||
<el-table-column |
<div class="title">底盘号</div> |
||||
prop="number" |
<ul class="chassisList" v-if="centerChassisList.length > 0"> |
||||
label="组" |
<li |
||||
></el-table-column> |
v-for="(item,index) of centerChassisList" |
||||
<el-table-column |
:style="{ |
||||
prop="time" |
color:(item.canSelect?'#000':'#aaa'), |
||||
label="时间" |
cursor:(item.canSelect?'pointer':'no-drop'), |
||||
></el-table-column> |
background:(item.isSelect?'#bdddfd':'#fff'), |
||||
</el-table> |
}" |
||||
|
:key="index" |
||||
|
@click="selectCenterChassis(item,index)" |
||||
|
>{{ item.chassisNumber }}</li> |
||||
|
</ul> |
||||
|
<div class="noDataTipper" v-if="centerChassisList.length <= 0">暂无数据</div> |
||||
|
<div class="footer-button"><el-button type="primary" @click="createChassisHandle()">创建底盘组</el-button></div> |
||||
</div> |
</div> |
||||
<!-- 右下bom --> |
<!-- 右侧底盘组 --> |
||||
<div class="rightBottomBomData"> |
<div class="rightChassisGroup"> |
||||
<el-table |
<!-- 右上组 --> |
||||
:data="rightBottomBomData" |
<div class="rightTopTable"> |
||||
style="width: 100%"> |
<el-table |
||||
<el-table-column |
:border="true" |
||||
prop="name" |
:data="rightTopChassisGroup" |
||||
label="Kitting组别Bom" |
:height="'100%'" |
||||
></el-table-column> |
:header-cell-style="{ background: '#e3f0ff',color:'#333'}" |
||||
<el-table-column |
style="width: 100%"> |
||||
prop="qty" |
<el-table-column |
||||
label="底盘组物品数量" |
prop="chassisNumber" |
||||
></el-table-column> |
label="底盘组" |
||||
<el-table-column |
></el-table-column> |
||||
prop="qty1" |
<el-table-column |
||||
label="Kiting组数量" |
prop="creationTime" |
||||
></el-table-column> |
label="时间" |
||||
</el-table> |
> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ formatDate(scope.row.creationTime) }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<!-- 右下bom --> |
||||
|
<div class="rightBottomBomData"> |
||||
|
<el-table |
||||
|
:border="true" |
||||
|
:data="rightBottomBomData" |
||||
|
:header-cell-style="{ background: '#e3f0ff',color:'#333'}" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="itemCode" |
||||
|
label="Kitting组别Bom" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qty" |
||||
|
label="底盘组物品数量" |
||||
|
></el-table-column> |
||||
|
<!-- todo: Kiting组数量字段确定--> |
||||
|
<el-table-column |
||||
|
prop="qty1" |
||||
|
label="Kiting组数量" |
||||
|
></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="footer-button"><el-button type="success">完成该组底盘</el-button></div> |
||||
</div> |
</div> |
||||
<div class="footer-button">完成该组底盘</div> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
|
import { getPageList } from '@/api/wms-api' |
||||
|
import { ChassisGetListWithNextCount } from '@/api/wms-pad' |
||||
|
import { formatTimeStrToStr } from "@/utils/formatTime" |
||||
export default { |
export default { |
||||
name: "padKittingPack", |
name: "padKittingPack", |
||||
data() { |
data() { |
||||
return { |
return { |
||||
loading:false, |
loading:false, |
||||
// 默认一次打包数量 |
// 循环数据定时器 |
||||
packGroupNumber:3, |
intervalId:false, |
||||
|
// 当前左侧按钮选择信息 |
||||
|
currentKittingInfo:null, |
||||
// 左侧按钮 |
// 左侧按钮 |
||||
leftButtons:[ |
leftButtons:[], |
||||
{name:'K1',id:'1'}, |
|
||||
{name:'K2',id:'2'}, |
|
||||
{name:'K3',id:'3'}, |
|
||||
{name:'K4',id:'4'}, |
|
||||
{name:'K5',id:'5'}, |
|
||||
], |
|
||||
// 中间底盘号 |
// 中间底盘号 |
||||
centerChassisList:[ |
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:[ |
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数据 |
// 右下方组bom数据 |
||||
rightBottomBomData:[ |
rightBottomBomData:[], |
||||
{name:'SE370E01B01A',qty:'1',qty2:'1'}, |
|
||||
{name:'SE370Q41B10AG',qty:'2',qty2:'2'}, |
|
||||
{name:'THILDD0A510AA',qty:'3',qty2:'3'}, |
|
||||
], |
|
||||
}; |
}; |
||||
}, |
}, |
||||
|
mounted(){ |
||||
|
this.initData() |
||||
|
clearInterval(this.intervalId) |
||||
|
//刷新数据 |
||||
|
this.intervalId = setInterval(() => { |
||||
|
this.initData() |
||||
|
}, localStorage.getItem('padKittingPackUpdate') || 180000) |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearInterval(this.intervalId) |
||||
|
}, |
||||
methods:{ |
methods:{ |
||||
|
initData(){ |
||||
|
this.getKittingList() |
||||
|
if(this.currentKittingInfo){ |
||||
|
this.letButtonClick(this.currentKittingInfo) |
||||
|
} |
||||
|
}, |
||||
|
// 格式化时间 |
||||
|
formatDate (time) { |
||||
|
if (time == null) { |
||||
|
return '-' |
||||
|
} |
||||
|
return formatTimeStrToStr(time) |
||||
|
}, |
||||
|
// 获取kitting |
||||
|
getKittingList(){ |
||||
|
let _data = { |
||||
|
condition: { |
||||
|
filters: [] |
||||
|
}, |
||||
|
Sorting: "code ASC", |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 9999, |
||||
|
} |
||||
|
this.loading = true |
||||
|
getPageList(_data, 'basedata/kitting',true).then(res => { |
||||
|
this.leftButtons = res.items |
||||
|
this.loading = false |
||||
|
}).catch(err => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 左侧按钮点击事件 |
||||
|
letButtonClick(selectItem){ |
||||
|
this.currentKittingInfo = selectItem; |
||||
|
let _data = { |
||||
|
count:30, |
||||
|
kittingCode:selectItem.code |
||||
|
} |
||||
|
this.loading = true |
||||
|
// 获取中间数据 |
||||
|
ChassisGetListWithNextCount(_data).then(res => { |
||||
|
this.centerChassisList = [] |
||||
|
this.rightTopChassisGroup = [] |
||||
|
// 初始化中间和右侧数据数据: |
||||
|
// 如果不够chassisQty条,则不分开 |
||||
|
if(res.items.length<Number(selectItem.chassisQty)){ |
||||
|
this.centerChassisList = res.items |
||||
|
} |
||||
|
// 如果够chassisQty条:前三条数据,放到右上方,第四条数据开始显示在中间位置 |
||||
|
else{ |
||||
|
res.items.forEach((item,index)=>{ |
||||
|
if(index < Number(selectItem.chassisQty)){ |
||||
|
this.rightTopChassisGroup.push(item) |
||||
|
}else{ |
||||
|
item.isSelect = false |
||||
|
item.canSelect = false |
||||
|
this.centerChassisList.push(item) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
this.centerChassisList[0].canSelect = true |
||||
|
this.rightBottomBomData = selectItem.details |
||||
|
this.loading = false |
||||
|
}).catch(err => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
// 点击选中中间数据 |
// 点击选中中间数据 |
||||
selectCenterChassis(selectItem,selectIndex){ |
selectCenterChassis(selectItem,selectIndex){ |
||||
this.centerChassisList.forEach((item,index)=>{ |
for(let i=0;i<this.centerChassisList.length;i++){ |
||||
// 如果当前项为第一个 或者 前一个已经选中 |
// 选中 |
||||
if(Number(selectIndex) == 0 || this.centerChassisList[Number(selectIndex)-1].isSelect){ |
if(selectItem.isSelect == false){ |
||||
// // 选中 |
if(selectIndex == 0 || this.centerChassisList[selectIndex - 1].isSelect){ |
||||
if(selectItem.isSelect == false){ |
this.centerChassisList[selectIndex].isSelect = true |
||||
console.log(109,this.centerChassisList[Number(selectIndex)].isSelect) |
this.centerChassisList[selectIndex].canSelect = true |
||||
this.centerChassisList[Number(selectIndex)].isSelect = true |
if(this.centerChassisList[selectIndex+1])this.centerChassisList[selectIndex+1].canSelect = 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: |
return |
||||
else{ |
} |
||||
console.log(123) |
// 取消选中 |
||||
if(Number(index) == Number(selectIndex)){ |
else{ |
||||
|
this.centerChassisList.forEach((item,index)=>{ |
||||
|
if(Number(index) >= Number(selectIndex)){ |
||||
|
item.canSelect = false |
||||
item.isSelect = false |
item.isSelect = false |
||||
} |
} |
||||
// console.log(120,index,selectIndex) |
}) |
||||
// if(Number(index) > Number(selectIndex)){ |
this.centerChassisList[selectIndex].canSelect = true |
||||
// item.canSelect = false |
return |
||||
// 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 |
createChassisHandle(){ |
||||
// } |
let _selectItems = this.centerChassisList.filter(item=>{return item.isSelect}) |
||||
// } |
if(!_selectItems || _selectItems.length <= 0){ |
||||
}) |
this.$warningMsg("请选择至少一项") |
||||
|
return |
||||
|
} |
||||
|
let _selectChassisNumber = [] |
||||
|
_selectItems.forEach(item=>{ if(item.isSelect)_selectChassisNumber.push(item.chassisNumber)}) |
||||
|
let _msg = `是否确定将底盘号 (${_selectChassisNumber.join(",")}) 移入底盘组` |
||||
|
this.$confirm(_msg, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
// 中间数据移除已选项 |
||||
|
this.centerChassisList = this.centerChassisList.filter(item => !_selectChassisNumber.includes(item.chassisNumber)) |
||||
|
// 右侧数据添加已选 |
||||
|
this.rightTopChassisGroup = [ |
||||
|
...this.rightTopChassisGroup, |
||||
|
..._selectItems |
||||
|
] |
||||
|
}).catch(() => { |
||||
|
|
||||
|
}); |
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
|
||||
}, |
|
||||
}; |
}; |
||||
</script> |
</script> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
@import "@/styles/mainbasicData.scss"; |
@import "@/styles/mainbasicData.scss"; |
||||
|
$boxPadding:15px; |
||||
|
$boxBorder:#ddd solid 1px; |
||||
|
$footerBtn_height:60px; |
||||
|
.page-box{ |
||||
|
overflow:auto; |
||||
|
background:#f8f8f8; |
||||
|
padding:10px |
||||
|
} |
||||
|
.padKittingPackPage{ |
||||
|
min-width:1000px; |
||||
|
height:100%; |
||||
|
display:flex; |
||||
|
.leftBtns{ |
||||
|
width:15%; |
||||
|
min-width:150px; |
||||
|
border:$boxBorder; |
||||
|
padding:$boxPadding; |
||||
|
flex-shrink:0; |
||||
|
height:100%; |
||||
|
overflow:auto; |
||||
|
background:#fff; |
||||
|
|
||||
|
.left-button{ |
||||
|
flex-wrap: wrap; |
||||
|
display:flex; |
||||
|
width:100%; |
||||
|
height:90px; |
||||
|
background:#409EFF; |
||||
|
color:#fff; |
||||
|
margin:15px 0; |
||||
|
border-radius:12px; |
||||
|
text-align:center; |
||||
|
cursor:pointer; |
||||
|
align-content: center; |
||||
|
|
||||
|
&:hover{ |
||||
|
opacity:0.8 |
||||
|
} |
||||
|
|
||||
|
p{ |
||||
|
width:100%; |
||||
|
flex-shrink:0; |
||||
|
margin:0; |
||||
|
padding:0; |
||||
|
font-size:14px; |
||||
|
|
||||
|
&.code{ |
||||
|
font-size:20px |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.centerChassisContain{ |
||||
|
position:relative; |
||||
|
width:calc(30% - 20px); |
||||
|
min-width:260px; |
||||
|
border:$boxBorder; |
||||
|
padding:$boxPadding; |
||||
|
height:100%; |
||||
|
overflow:auto; |
||||
|
margin:0 10px; |
||||
|
background:#fff; |
||||
|
|
||||
|
$title_height:40px; |
||||
|
.title{ |
||||
|
position:absolute; |
||||
|
top:0; |
||||
|
left:0; |
||||
|
right:0; |
||||
|
text-align:center; |
||||
|
line-height:$title_height; |
||||
|
height:$title_height; |
||||
|
overflow:hidden |
||||
|
} |
||||
|
|
||||
|
.chassisList,.noDataTipper{ |
||||
|
position:absolute; |
||||
|
top:$title_height; |
||||
|
left:0; |
||||
|
right:0; |
||||
|
bottom:$footerBtn_height; |
||||
|
overflow:auto; |
||||
|
padding:0; |
||||
|
margin:0; |
||||
|
|
||||
|
li{ |
||||
|
margin:10px; |
||||
|
padding:5px 15px; |
||||
|
list-style:none; |
||||
|
} |
||||
|
} |
||||
|
.noDataTipper{ |
||||
|
color:#909399; |
||||
|
line-height:60px; |
||||
|
text-align:center; |
||||
|
font-size:14px; |
||||
|
} |
||||
|
} |
||||
|
.rightChassisGroup{ |
||||
|
position:relative; |
||||
|
width:55%; |
||||
|
min-width:600px; |
||||
|
border:$boxBorder; |
||||
|
padding:$boxPadding; |
||||
|
height:100%; |
||||
|
overflow:auto; |
||||
|
background:#fff; |
||||
|
|
||||
|
.rightTopTable{ |
||||
|
position:absolute; |
||||
|
top:0; |
||||
|
left:0; |
||||
|
right:0; |
||||
|
height:30%; |
||||
|
overflow:auto; |
||||
|
} |
||||
|
|
||||
|
.rightBottomBomData{ |
||||
|
position:absolute; |
||||
|
top:calc(30% + 30px); |
||||
|
left:0; |
||||
|
right:0; |
||||
|
bottom:$footerBtn_height; |
||||
|
overflow:auto; |
||||
|
border-top:$boxBorder; |
||||
|
} |
||||
|
} |
||||
|
.footer-button{ |
||||
|
position:absolute; |
||||
|
bottom:0; |
||||
|
left:0; |
||||
|
right:0; |
||||
|
text-align:center; |
||||
|
border-top:$boxBorder; |
||||
|
height:$footerBtn_height; |
||||
|
|
||||
|
.el-button{ |
||||
|
width:180px; |
||||
|
margin-top:10px |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
Loading…
Reference in new issue