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> |
|||
<div class="page-box padKittingPackPage" v-loading="loading"> |
|||
<div class="page-box" v-loading="loading"> |
|||
<div class="padKittingPackPage"> |
|||
<!-- 左侧按钮 --> |
|||
<div class="leftBtns"> |
|||
<div |
|||
v-for="(item,index) of leftButtons" |
|||
:key="index" |
|||
class="left-button" |
|||
>{{ item.name }}</div> |
|||
@click="letButtonClick(item)" |
|||
:style="{ |
|||
background:(currentKittingInfo && (item.code==currentKittingInfo.code)?'#ff9000':'#409EFF'), |
|||
}" |
|||
> |
|||
<p class="code">{{ item.code }}</p> |
|||
<p class="name">{{ item.name }}</p> |
|||
</div> |
|||
</div> |
|||
<!-- 中间底盘号 --> |
|||
<div class="centerChassisContain"> |
|||
<div class="title">底盘号</div> |
|||
<ul class="chassisList"> |
|||
<ul class="chassisList" v-if="centerChassisList.length > 0"> |
|||
<li |
|||
v-for="(item,index) of centerChassisList" |
|||
:style="{color:(item.canSelect?'#000':'#ddd'),cursor:(item.canSelect?'pointer':'no-drop'),background:(item.isSelect?'green':'#fff')}" |
|||
:style="{ |
|||
color:(item.canSelect?'#000':'#aaa'), |
|||
cursor:(item.canSelect?'pointer':'no-drop'), |
|||
background:(item.isSelect?'#bdddfd':'#fff'), |
|||
}" |
|||
:key="index" |
|||
@click="selectCenterChassis(item,index)" |
|||
>{{ item.number }}{{item.canSelect}}{{item.isSelect}}</li> |
|||
>{{ item.chassisNumber }}</li> |
|||
</ul> |
|||
<div class="footer-button">创建底盘组</div> |
|||
<div class="noDataTipper" v-if="centerChassisList.length <= 0">暂无数据</div> |
|||
<div class="footer-button"><el-button type="primary" @click="createChassisHandle()">创建底盘组</el-button></div> |
|||
</div> |
|||
<!-- 右侧底盘组 --> |
|||
<div class="rightChassisGroup"> |
|||
<!-- 右上组 --> |
|||
<div class="rightTopTable"> |
|||
<el-table |
|||
:border="true" |
|||
:data="rightTopChassisGroup" |
|||
:height="'100%'" |
|||
:header-cell-style="{ background: '#e3f0ff',color:'#333'}" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="number" |
|||
label="组" |
|||
prop="chassisNumber" |
|||
label="底盘组" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="time" |
|||
prop="creationTime" |
|||
label="时间" |
|||
></el-table-column> |
|||
> |
|||
<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="name" |
|||
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">完成该组底盘</div> |
|||
<div class="footer-button"><el-button type="success">完成该组底盘</el-button></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getPageList } from '@/api/wms-api' |
|||
import { ChassisGetListWithNextCount } from '@/api/wms-pad' |
|||
import { formatTimeStrToStr } from "@/utils/formatTime" |
|||
export default { |
|||
name: "padKittingPack", |
|||
data() { |
|||
return { |
|||
loading:false, |
|||
// 默认一次打包数量 |
|||
packGroupNumber:3, |
|||
// 循环数据定时器 |
|||
intervalId:false, |
|||
// 当前左侧按钮选择信息 |
|||
currentKittingInfo:null, |
|||
// 左侧按钮 |
|||
leftButtons:[ |
|||
{name:'K1',id:'1'}, |
|||
{name:'K2',id:'2'}, |
|||
{name:'K3',id:'3'}, |
|||
{name:'K4',id:'4'}, |
|||
{name:'K5',id:'5'}, |
|||
], |
|||
leftButtons:[], |
|||
// 中间底盘号 |
|||
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}, |
|||
], |
|||
centerChassisList:[], |
|||
// 右上方组数据 |
|||
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'}, |
|||
], |
|||
rightTopChassisGroup:[], |
|||
// 右下方组bom数据 |
|||
rightBottomBomData:[ |
|||
{name:'SE370E01B01A',qty:'1',qty2:'1'}, |
|||
{name:'SE370Q41B10AG',qty:'2',qty2:'2'}, |
|||
{name:'THILDD0A510AA',qty:'3',qty2:'3'}, |
|||
], |
|||
rightBottomBomData:[], |
|||
}; |
|||
}, |
|||
mounted(){ |
|||
this.initData() |
|||
clearInterval(this.intervalId) |
|||
//刷新数据 |
|||
this.intervalId = setInterval(() => { |
|||
this.initData() |
|||
}, localStorage.getItem('padKittingPackUpdate') || 180000) |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.intervalId) |
|||
}, |
|||
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){ |
|||
this.centerChassisList.forEach((item,index)=>{ |
|||
// 如果当前项为第一个 或者 前一个已经选中 |
|||
if(Number(selectIndex) == 0 || this.centerChassisList[Number(selectIndex)-1].isSelect){ |
|||
// // 选中 |
|||
for(let i=0;i<this.centerChassisList.length;i++){ |
|||
// 选中 |
|||
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: |
|||
if(selectIndex == 0 || this.centerChassisList[selectIndex - 1].isSelect){ |
|||
this.centerChassisList[selectIndex].isSelect = true |
|||
this.centerChassisList[selectIndex].canSelect = true |
|||
if(this.centerChassisList[selectIndex+1])this.centerChassisList[selectIndex+1].canSelect = true |
|||
} |
|||
return |
|||
} |
|||
// 取消选中 |
|||
else{ |
|||
console.log(123) |
|||
if(Number(index) == Number(selectIndex)){ |
|||
this.centerChassisList.forEach((item,index)=>{ |
|||
if(Number(index) >= Number(selectIndex)){ |
|||
item.canSelect = false |
|||
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 |
|||
// } |
|||
// } |
|||
}) |
|||
this.centerChassisList[selectIndex].canSelect = true |
|||
return |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 创建底盘组操作 |
|||
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(() => { |
|||
|
|||
}); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@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> |
|||
Loading…
Reference in new issue