<template>
|
<view class="check-stock-detail-list-component">
|
<view class="detail-top-view">
|
<view class="top-container block-item">
|
<view class="top-container-title block-item-title auto-wrap">{{mainObj.planNo}}</view>
|
<view class="block-item-container">
|
<view class="item-desc">
|
<view class="label">时间</view>
|
<view class="content auto-wrap">{{mainObj.startPlanTimeFormat}}~{{mainObj.endPlanTimeFormat}}</view>
|
</view>
|
<view class="item-desc">
|
<view class="label">仓库</view>
|
<view class="content auto-wrap">{{mainObj.areaName}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<scroll-view class="list-scroll-view" :scroll-y="true">
|
<view class="list-items-around">
|
<view class="detail-item block-item" v-for="(item,index) in list" :key="'check-item-'+index" @tap.stop="onActiveItem(item,index)">
|
<view class="active-view" v-if="item.actived"></view>
|
<view :class="['block-item-title',(!item.expanded?'not-expanded':'')]">
|
<view class="title-content">
|
<view class="item-desc no-border">
|
<view class="label">库位</view>
|
<view class="content auto-wrap">{{item.placeCode}}</view>
|
</view>
|
<view class="item-desc no-border">
|
<view class="label">托盘</view>
|
<view class="content auto-wrap">{{item.containerCode}}</view>
|
</view>
|
</view>
|
<view class="tag-view">
|
<u-tag v-if="item.statusDetailEnum===1" :text="item.statusDetailEnumName" size="mini" bg-color="#808080" color="#ffffff" border-color="#808080" />
|
<u-tag v-else-if="item.statusDetailEnum===2" :text="item.statusDetailEnumName" size="mini" bg-color="#FEF3E6" color="#F18201" border-color="#F18201" />
|
<u-tag v-else-if="item.statusDetailEnum===3" :text="item.statusDetailEnumName" size="mini" bg-color="#EFFCF2" color="#5CDF7D" border-color="#5CDF7D" />
|
<u-tag v-else :text="item.statusDetailEnumName" size="mini" bg-color="#ffc0cb" color="#ff0000" border-color="#ff0000" />
|
</view>
|
<view class="arrow-view" @tap.stop="onChangeItemExpanded(item,index)">
|
<u-icon v-if="!item.expanded" name="arrow-down" color="#909193" :size="24" />
|
<u-icon v-else name="arrow-up" color="#909193" :size="24" />
|
</view>
|
</view>
|
<view class="block-item-container" v-if="item.expanded">
|
<view class="check-table-header table-row">
|
<view class="cell1">序号</view>
|
<view class="cell2">物料</view>
|
<view class="cell3">库存</view>
|
<view class="cell4">实盘</view>
|
</view>
|
<view class="check-table-body">
|
<view class="table-row" v-for="(itemx,indexx) in item.materials" :key="'check-item-material-'+indexx">
|
<view class="cell1">{{indexx+1}}</view>
|
<view class="cell2 auto-wrap">{{itemx.inventoryMateriaUnique}}</view>
|
<view class="cell3">{{itemx.stockNumber}}</view>
|
<view class="cell4 large">{{itemx.inventoryNumber}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="no-more-text-row">没有更多了</view>
|
</scroll-view>
|
<view class="bottom-btns-row">
|
<template v-if="checkType===1">
|
<view class="btn-frame"><u-button type="primary" text="出 库" @click="onOutAction"></u-button></view>
|
<view class="divider"></view>
|
</template>
|
<view class="btn-frame"><u-button type="primary" text="盘 点" @click="onGoCheck"></u-button></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { parseDic, $alert, $successInfo } from '@/static/js/utils/index.js'
|
export default {
|
name:'checkStockDetailListComponent',
|
emits:['action'],
|
props:{
|
mainObj: {
|
type: Object,
|
default: function(){
|
return {}
|
}
|
}
|
},
|
data(){
|
return {
|
list:[]
|
}
|
},
|
computed:{
|
checkType(){
|
let res = 2
|
if (this.mainObj.inventoryRuled && this.mainObj.inventoryRuled.ruleType===1) {
|
res = 1
|
}
|
return res
|
},
|
},
|
methods:{
|
init(){
|
this.getList()
|
},
|
getList(){
|
this.$api.get('PageDetail',{id:this.mainObj.id},{block:'checkStock'}).then(d=>{
|
this.list = (d || []).map((obj)=>{
|
obj.statusDetailEnumName = parseDic(this.$store,'task_status',obj.statusDetailEnum)
|
return obj
|
});
|
}).catch(err=>{
|
console.log(err)
|
})
|
},
|
onActiveItem(obj,index) {
|
if (this.checkType!==1) return false
|
obj.actived = !obj.actived
|
this.$set(this.list,index,obj)
|
},
|
onChangeItemExpanded(obj,index){
|
if (obj.expanded) {
|
obj.expanded = false
|
this.$set(this.list,index,obj)
|
} else {
|
if (!obj.materials) {
|
this.getContainerInfo(obj,index,(f,_arr)=>{
|
if (f) {
|
obj.expanded = true
|
obj.materials = _arr
|
this.$set(this.list,index,obj)
|
}
|
})
|
} else {
|
obj.expanded = true
|
this.$set(this.list,index,obj)
|
}
|
}
|
},
|
getContainerInfo(obj,index,callback){
|
let params = {
|
InventoryPlanId:this.mainObj.id,
|
ContainerVsLocation:obj.containerCode
|
}
|
this.$api.get('ByContainerCodeGetInfo',params,{block:'checkStock'}).then(d=>{
|
let _arr = d || []
|
callback && callback(true,_arr)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
},
|
onGoCheck(){
|
this.$emit('action')
|
},
|
onOutAction(){
|
let params = {containerCodes:[]}
|
this.list.forEach((eachObj)=>{
|
if (eachObj.actived) {
|
params.containerCodes.push(eachObj.containerCode)
|
}
|
})
|
if (params.containerCodes.length===0) {
|
$alert('请选择出库托盘')
|
return false
|
}
|
this.outAjax(params,(f)=>{
|
if (f) {
|
$successInfo('出库提交成功')
|
this.getList()
|
}
|
})
|
},
|
outAjax(params,callback){
|
this.$api.post('ByContainerCodeOut',params,{block:'checkStock'}).then(d=>{
|
callback && callback(true)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.check-stock-detail-list-component{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.detail-top-view,.bottom-btns-row{
|
flex-shrink: 0;
|
}
|
.detail-top-view{
|
.top-container{
|
.top-container-title{
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
.block-item {
|
background-color: $uni-bg-color;
|
font-size: 38rpx;
|
border-width: 2rpx 0;
|
border-style: solid;
|
border-color: $uni-border-color;
|
.block-item-title{
|
border-bottom:2rpx solid $uni-border-color;
|
font-size: 1.1em;
|
padding: 12rpx 16rpx;
|
}
|
.block-item-container{
|
padding: 0 16rpx;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
}
|
.item-desc{
|
flex-shrink: 0;
|
width: 100%;
|
font-size: .9em;
|
display: flex;
|
align-items: flex-start;
|
padding: 10rpx 0;
|
border-bottom: 2rpx dashed $uni-border-color;
|
&.no-border{
|
border-bottom: 0;
|
}
|
&>.label {
|
font-size: .9em;
|
flex-shrink: 0;
|
color:#989898;
|
width: 80rpx;
|
}
|
&>.content{
|
width: 1px;
|
flex-grow: 1;
|
line-height: 1.2em;
|
padding: 0 4rpx;
|
}
|
&:last-child {
|
border-bottom:0;
|
}
|
}
|
.bottom-btns-row{
|
display: flex;
|
padding: 10rpx 20rpx;
|
background-color: #fff;
|
.btn-frame{
|
width: 1%;
|
box-sizing: border-box;
|
flex-grow: 1;
|
}
|
.divider{
|
width: 20rpx;
|
flex-shrink: 0;
|
}
|
}
|
.list-scroll-view{
|
flex-grow: 1;
|
height: 1px;
|
.list-items-around{
|
padding-top: 12rpx;
|
}
|
.detail-item {
|
position: relative;
|
margin-bottom: 12rpx;
|
&:last-child{
|
margin-bottom: 0;
|
}
|
.active-view{
|
position: absolute;
|
top:0;
|
left:0;
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
border:6rpx solid $u-primary;
|
}
|
.block-item-title{
|
font-size: 1em;
|
display: flex;
|
&.not-expanded{
|
border-bottom: 0;
|
}
|
.tag-view,.arrow-view{
|
flex-shrink: 0;
|
}
|
.title-content{
|
width: 1px;
|
flex-grow: 1;
|
}
|
.tag-view,.arrow-view{
|
display: flex;
|
align-items: center;
|
}
|
.arrow-view{
|
padding-left: 16rpx;
|
}
|
}
|
.block-item-container{
|
.check-table-header{
|
opacity: .8;
|
font-size: .9em;
|
}
|
.check-table-body{
|
width: 100%;
|
.table-row:last-child{
|
border-bottom: 0;
|
}
|
}
|
.table-row {
|
display: flex;
|
width: 100%;
|
border-bottom: 2rpx dashed $uni-border-color;
|
.cell1,.cell2,.cell3,.cell4{
|
text-align: center;
|
padding: 16rpx 0;
|
}
|
.cell1,.cell3,.cell4{
|
flex-shrink: 0;
|
}
|
.cell1{
|
width: 80rpx;
|
}
|
.cell3{
|
width: 90rpx;
|
}
|
.cell4{
|
width: 90rpx;
|
&.large {
|
color: #0366AA;
|
}
|
&.small {
|
color: #ff0000;
|
}
|
}
|
.cell2{
|
width: 1px;
|
flex-grow: 1;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
