303 lines
9.9 KiB
Vue
303 lines
9.9 KiB
Vue
<template>
|
||
<view class="zd_container">
|
||
<!-- <nav-bar title="子卷装箱"></nav-bar> -->
|
||
<nav-bar :title="title"></nav-bar>
|
||
<view class="zd_content">
|
||
<view class="zd_wrapper">
|
||
<view class="filter_item">
|
||
<view class="filter_label_wraper">
|
||
<span class="filter_label">{{$t('grid.sub-roll-number')}}</span>
|
||
</view>
|
||
<view class="filter_input_wraper">
|
||
<search-box v-model="val1" @handleChange="handleChange" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zd_wrapper grid-wraper">
|
||
<view class="slide_new">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>{{$t('grid.select')}}</th>
|
||
<th class="th_2">{{$t('grid.order-number')}}</th>
|
||
<th><view style="width: 240rpx;">{{$t('grid.customer-name')}}</view></th>
|
||
<th>{{$t('grid.sub-roll-number')}}</th>
|
||
<th><view style="width: 240rpx;">{{$t('grid.sub-roll-spec')}}</view></th>
|
||
<th>{{$t('grid.sub-roll-weight')}}</th>
|
||
<th>{{$t('grid.subtube-weight')}}</th>
|
||
<th>{{$t('filter.box-type')}}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(e, i) in dataList" :key="i">
|
||
<td><span class="iconfont icon_minus-filled" @click="toCheck(e, i)">−</span></td>
|
||
<td class="td_2">{{e.sale_order_name}}</td>
|
||
<td class="wrap">{{e.customer_description}}</td>
|
||
<td>{{e.container_name}}</td>
|
||
<td class="wrap">{{e.paper_tube_description}}</td>
|
||
<td>{{e.paper_weight}}</td>
|
||
<td>{{e.box_weight}}</td>
|
||
<td>{{e.box_type}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zd-row submitbar">
|
||
<button class="zd-col-6 btn-submit btn-default letter-30" @tap="clearUp">{{$t('button.clear')}}</button>
|
||
<button class="zd-col-15 btn-submit btn-success letter-30" :class="{'btn-info': !dataList.length}" @tap="toSure">{{$t('button.group-disk')}}</button>
|
||
</view>
|
||
<view class="msg_wrapper" :class="show ? 'popshow' : 'pophide'">
|
||
<view class="pop-line"></view>
|
||
<view class="zd_wrapper-2">
|
||
<view class="zd-row filter_item">
|
||
<view :class="!disabled ? 'zd-col-18' : 'zd-col-24'">
|
||
<input type="text" :placeholder="$t('toast.enter-keywords-search')" class="filter_input" :class="{'filter_input_disabled': disabled}" :disabled="disabled" v-model="val2">
|
||
</view>
|
||
<view v-show="!disabled" class="zd-col-5"><button class="btn-submit btn-success" @tap="_queryBoxSpec">{{$t('button.search')}}</button></view>
|
||
</view>
|
||
</view>
|
||
<view class="msg_content msg_content_1 pdb110">
|
||
<view class="zd_wrapper grid-wraper">
|
||
<view class="slide_new">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>{{$t('grid.wooden-box-specs')}}</th>
|
||
<th><view style="width: 240rpx;">{{$t('grid.material-name')}}</view></th>
|
||
<th>{{$t('grid.wooden-box-length')}}</th>
|
||
<th>{{$t('grid.wooden-box-width')}}</th>
|
||
<th>{{$t('grid.wooden-box-height')}}</th>
|
||
<th>{{$t('grid.wooden-box-quantity')}}</th>
|
||
<th>{{$t('grid.maximum-rolls')}}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(e, i) in popData" :key="'pop' + i" @click="popCheck(e)" :class="{'checked': e.material_code === pkId}">
|
||
<td>{{e.material_code}}</td>
|
||
<td class="wrap">{{e.material_name}}</td>
|
||
<td>{{e.box_length}}</td>
|
||
<td>{{e.box_width}}</td>
|
||
<td>{{e.box_high}}</td>
|
||
<td>{{e.ivt_num}}</td>
|
||
<td>{{e.num}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zd-row submitbar">
|
||
<button class="zd-col-6 btn-submit btn-success letter-30" @tap="show = false, pkId = '', pkObj = {}">{{$t('button.cancel')}}</button>
|
||
<button class="zd-col-15 btn-submit btn-success letter-30" :class="{'btn-info': !pkId}" :disabled="disabled1" @tap="popSure">{{$t('button.confirm')}}</button>
|
||
</view>
|
||
</view>
|
||
<view v-if="show" class="msg_mask"></view>
|
||
<view class="msg_modal" :class="modalShow ? 'popshow1' : 'pophide1'">
|
||
<view class="msg_tip">{{$t('toast.prompt')}}</view>
|
||
<view class="zd_content pdt26">
|
||
<view class="msg_p1">{{$t('toast.check-subroll-box-spec-match')}}，</view>
|
||
<view class="msg_p2">{{$t('toast.box-specifications')}}：{{this.pkObj.material_name}},</view>
|
||
<view class="msg_p2">{{$t('toast.subroll-specifications')}}：{{this.current.paper_tube_description}},</view>
|
||
<view class="msg_p1">{{$t('toast.generate-outbound-task')}}！</view>
|
||
</view>
|
||
<view class="zd-row submitbar">
|
||
<button class="zd-col-6 btn-submit btn-success letter-30" @tap.stop="modalShow = false">{{$t('button.cancel')}}</button>
|
||
<button class="zd-col-15 btn-submit btn-success letter-30" @tap="modalSure">{{$t('button.confirm')}}</button>
|
||
</view>
|
||
</view>
|
||
<view v-if="modalShow" class="msg_mask msg_mask_1"></view>
|
||
<view class="msg_modal" :class="modalShow1 ? 'popshow1' : 'pophide1'">
|
||
<view class="msg_tip">{{$t('toast.prompt')}}</view>
|
||
<view class="zd_content pdt26">
|
||
<view class="msg_p1">{{$t('toast.check-subroll-count-match')}}，</view>
|
||
<view class="msg_p2">{{$t('toast.current-subroll-scan-count')}}： {{dataList.length}}{{$t('toast.roll-unit')}}，{{$t('toast.box-roll-capacity')}}：{{pkObj.num}}{{$t('toast.roll-unit')}}，</view>
|
||
<view class="msg_p1">{{$t('toast.generate-outbound-task')}}!</view>
|
||
</view>
|
||
<view class="zd-row submitbar">
|
||
<button class="zd-col-6 btn-submit btn-success letter-30" @tap.stop="modalShow1 = false">{{$t('button.cancel')}}</button>
|
||
<button class="zd-col-15 btn-submit btn-success letter-30" @tap="modalSure1">{{$t('button.confirm')}}</button>
|
||
</view>
|
||
</view>
|
||
<view v-if="modalShow1" class="msg_mask msg_mask_1"></view>
|
||
<up-top ref="UT" :scrollTop="top"></up-top>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import NavBar from '@/components/NavBar.vue'
|
||
import SearchBox from '@/components/SearchBox.vue'
|
||
import UpTop from '@/components/upTop.vue'
|
||
import {queryContainerNameBySaleOrder, queryBoxSpec, updateEntityList} from '@/utils/getData3.js'
|
||
export default {
|
||
components: {
|
||
NavBar,
|
||
SearchBox,
|
||
UpTop
|
||
},
|
||
data() {
|
||
return {
|
||
title: '',
|
||
top: 0,
|
||
val1: '',
|
||
dataList: [],
|
||
popData: [],
|
||
show: false,
|
||
disabled: false,
|
||
val2: '',
|
||
pkId: '',
|
||
pkObj: {},
|
||
paper: '',
|
||
modalShow: false,
|
||
modalShow1: false,
|
||
disabled1: false
|
||
};
|
||
},
|
||
computed: {
|
||
current () {
|
||
let res = {paper_tube_description: '', sale_order_name: ''}
|
||
if (this.dataList.length > 0) {
|
||
res = this.dataList[0]
|
||
}
|
||
return res
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
this.$refs.UT.topData(e.scrollTop)
|
||
},
|
||
onLoad (options) {
|
||
this.title = options.title
|
||
},
|
||
methods: {
|
||
handleChange (e) {
|
||
this._queryContainerNameBySaleOrder(e)
|
||
},
|
||
async _queryContainerNameBySaleOrder (e) {
|
||
let res = await queryContainerNameBySaleOrder(e)
|
||
if (res.content.length) {
|
||
if (res.content[0].paper_tube_description === null || res.content[0].paper_tube_description === '') {
|
||
uni.showToast({
|
||
title: this.$t('toast.no-subroll-spec-info'),
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
return
|
||
}
|
||
if (this.dataList.length >= 1 && res.content[0].paper_tube_description !== this.current.paper_tube_description) {
|
||
uni.showToast({
|
||
title: `${this.$t('toast.scanned-specifications')}：${res.content[0].paper_tube_description}，${this.$t('toast.spec-mismatch-check')}！`,
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
return
|
||
}
|
||
if (this.dataList.length >= 1 && res.content[0].sale_order_name !== this.current.sale_order_name) {
|
||
uni.showToast({
|
||
title: `${this.$t('toast.current-scanned-order-number')}：${res.content[0].sale_order_name}，${this.$t('toast.order-number-mismatch-check')}！`,
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
return
|
||
}
|
||
if (res.content[0].status !== '99') {
|
||
uni.showToast({
|
||
title: `${this.$t('toast.subroll-assigned-spec')}！`,
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let flag = false
|
||
this.dataList.map(el => {
|
||
if (el.container_name === res.content[0].container_name) {
|
||
flag = true
|
||
}
|
||
})
|
||
if (flag) {
|
||
uni.showToast({
|
||
title: `${this.$t('toast.subroll-exists-check')}！`,
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.dataList = [...this.dataList, ...res.content]
|
||
}
|
||
},
|
||
toCheck (e, i) {
|
||
this.dataList.splice(i, 1)
|
||
},
|
||
toSure () {
|
||
if (!this.dataList.length) {
|
||
return
|
||
}
|
||
this.pkId = ''
|
||
this.pkObj = {}
|
||
let code = ''
|
||
for (let i = 0; i < this.dataList.length; i++) {
|
||
if (this.dataList[i].box_type !== '') {
|
||
code = this.dataList[i].box_type
|
||
break
|
||
}
|
||
}
|
||
this.disabled = code !== ''
|
||
this.val2 = code
|
||
this._queryBoxSpec()
|
||
},
|
||
async _queryBoxSpec () {
|
||
let res = await queryBoxSpec(this.val2)
|
||
if (res.code === 200) {
|
||
this.popData = [...res.content]
|
||
this.show = true
|
||
}
|
||
},
|
||
clearUp () {
|
||
this.val1 = ''
|
||
this.dataList = []
|
||
this.disabled = false
|
||
this.disabled1 = false
|
||
this.show = false
|
||
this.modalShow = false
|
||
},
|
||
popCheck (e) {
|
||
this.pkId = this.pkId === e.material_code ? '' : e.material_code
|
||
this.pkObj = this.pkId === e.material_code ? e : {}
|
||
},
|
||
async _updateEntityList () {
|
||
this.disabled1 = true
|
||
try {
|
||
let res = await updateEntityList(this.pkId, this.dataList)
|
||
uni.showToast({
|
||
title: this.$t('toast.operation-success'),
|
||
icon: 'none'
|
||
})
|
||
this.clearUp()
|
||
} catch (e) {
|
||
this.disabled1 = false
|
||
}
|
||
},
|
||
popSure () {
|
||
if (this.dataList.length > Number(this.pkObj.num)) {
|
||
uni.showToast({
|
||
title: this.$t('toast.subroll-count-exceed'),
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
return
|
||
}
|
||
if (this.dataList.length < Number(this.pkObj.num)) {
|
||
this.modalShow1 = true
|
||
return
|
||
}
|
||
this.modalShow = true
|
||
},
|
||
modalSure () {
|
||
this._updateEntityList()
|
||
this.modalShow = false
|
||
},
|
||
modalSure1 () {
|
||
this.modalShow1 = false
|
||
this.modalShow = true
|
||
}
|
||
}
|
||
}
|
||
</script> |