370 lines
12 KiB
Vue
370 lines
12 KiB
Vue
<template>
|
||
<!-- 编码绑定-->
|
||
<view class="page-container">
|
||
<div class="card" style="margin-bottom: 10px">
|
||
<uni-forms :model="formData" label-width="100" :border="true">
|
||
<uni-forms-item label="物资名称：" name="maTypeName">
|
||
<span class="form-view">{{ queryParams.maTypeName }}</span>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item label="物资规格：" name="typeName">
|
||
<span class="form-view">{{ queryParams.typeName }}</span>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item label="到货数量：" name="purchaseNum">
|
||
<span class="form-view">{{ queryParams.purchaseNum }}</span>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item label="待绑定数量：" name="waitBindNum">
|
||
<span style="color: #ee0a24" class="form-view">{{ waitBindNum }}</span>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</div>
|
||
<scroll-view scroll-y>
|
||
<view class="table-list-item">
|
||
<uni-row :gutter="24" style="display: flex; align-items: center">
|
||
<uni-col :span="4">
|
||
<view>
|
||
<text style="color: #ee0a24">*</text>
|
||
前缀
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="10">
|
||
<view>
|
||
<uni-easyinput
|
||
v-model="queryBindForm.codePrefix"
|
||
placeholder="请输入编码前缀"
|
||
/>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view
|
||
class="coding-btn"
|
||
@tap="onHandleBinding"
|
||
style="padding: 10rpx 0; color: #fff; background-color: #1989fa"
|
||
>绑定
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="6">
|
||
<view
|
||
class="coding-btn"
|
||
style="padding: 10rpx 0; color: #fff; background-color: #2bc54f"
|
||
@tap="onCodeIdentify"
|
||
>OCR绑定
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
|
||
<uni-row :gutter="24" style="display: flex; align-items: center; margin-top: 10rpx">
|
||
<uni-col :span="4">
|
||
<view>
|
||
<text style="color: #ee0a24">*</text>
|
||
后缀
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="8">
|
||
<view>
|
||
<uni-easyinput
|
||
v-model="queryBindForm.codeSuffixStart"
|
||
type="number"
|
||
placeholder="开始值"
|
||
/>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="8">
|
||
<view>
|
||
<uni-easyinput
|
||
v-model="queryBindForm.codeSuffixEnd"
|
||
type="number"
|
||
placeholder="结束值"
|
||
/>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view
|
||
class="coding-btn"
|
||
@tap="onHandlerFill"
|
||
style="padding: 10rpx 0; color: #1989fa; background-color: #bfd4fa"
|
||
>填充
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
|
||
<uni-row
|
||
:gutter="24"
|
||
style="display: flex; align-items: center; margin-top: 10rpx; font-size: 20rpx"
|
||
v-for="(item, index) in codeBindingList"
|
||
:key="index"
|
||
>
|
||
<uni-col :span="1">
|
||
<view> {{ index + 1 }} </view>
|
||
</uni-col>
|
||
<uni-col :span="3">
|
||
<view> 编码</view>
|
||
</uni-col>
|
||
<uni-col :span="7">
|
||
<view>
|
||
<uni-easyinput v-model="item.maCode" placeholder="请输入" />
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view> 出厂编码 </view>
|
||
</uni-col>
|
||
<uni-col :span="7">
|
||
<view>
|
||
<uni-easyinput v-model="item.outFacCode" placeholder="请输入" />
|
||
</view>
|
||
</uni-col>
|
||
<!-- <uni-col :span="3">
|
||
<view> 出厂时间 </view>
|
||
</uni-col>
|
||
<uni-col :span="4">
|
||
<view>
|
||
<uni-datetime-picker
|
||
type="date"
|
||
:clear-icon="false"
|
||
@maskClick="maskClick"
|
||
/>
|
||
</view>
|
||
</uni-col> -->
|
||
<uni-col :span="2">
|
||
<view @tap="onHandelDelete(index)">
|
||
<uni-icons type="trash" size="22" style="color: #ee0a24"></uni-icons>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onUnmounted, reactive } from 'vue'
|
||
import { setBindCodingAPI } from '@/services/new-purchase/bind.js'
|
||
import { debounce } from 'lodash-es'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
// const query = defineProps() // 获取上级页面传递的路由参数
|
||
// const queryParams = JSON.parse(query.queryParams)
|
||
const queryParams = ref({})
|
||
const codeBindingList = ref([])
|
||
const codeNum = ref(0)
|
||
|
||
const queryBindForm = ref({
|
||
typeId: '', // 物资typeId
|
||
typeName: '', // 规格型号
|
||
codePrefix: '', // 编码前缀
|
||
maTypeName: '', // 物资名称
|
||
codeSuffixEnd: '', // 后缀结束
|
||
codeSuffixStart: '', // 后缀开始
|
||
})
|
||
|
||
// 计算待绑定数量
|
||
const waitBindNum = computed(() => {
|
||
return queryParams.value.checkNum - queryParams.value.bindNum - codeNum.value
|
||
})
|
||
|
||
// 绑定按钮
|
||
const onHandleBinding = debounce(async () => {
|
||
if (codeBindingList.value.length < 1) {
|
||
uni.showToast({
|
||
title: '请填充编码',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
|
||
// 组装参数
|
||
const bindParams = {
|
||
typeId: queryParams.value.typeId,
|
||
taskId: queryParams.value.taskId,
|
||
dtoList: codeBindingList.value,
|
||
}
|
||
|
||
console.log('绑定参数', bindParams)
|
||
|
||
const res = await setBindCodingAPI(bindParams)
|
||
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '编码绑定成功！',
|
||
icon: 'none',
|
||
})
|
||
|
||
setTimeout(() => {
|
||
// 返回上一个页面
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
success() {
|
||
uni.$emit('onUpdate')
|
||
},
|
||
})
|
||
}, 500)
|
||
}
|
||
}, 500)
|
||
|
||
// 填充按钮
|
||
const onHandlerFill = () => {
|
||
const { codeSuffixEnd, codeSuffixStart, codePrefix, typeName, maTypeName } = queryBindForm.value
|
||
|
||
if (!codePrefix) {
|
||
uni.showToast({
|
||
title: '请填写编码前缀',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
if (!codeSuffixStart) {
|
||
uni.showToast({
|
||
title: '请填写后缀开始值',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
if (!codeSuffixEnd) {
|
||
uni.showToast({
|
||
title: '请填写后缀结束值',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
const regex = /^[1-9][0-9]*$/
|
||
if (!regex.test(codeSuffixStart)) {
|
||
uni.showToast({
|
||
title: '后缀开始值不符合要求，请填写大于0且不能以0开头的正整数',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
if (!regex.test(codeSuffixEnd)) {
|
||
uni.showToast({
|
||
title: '后缀结束值不符合要求，请填写大于0且不能以0开头的正整数',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
if (parseInt(codeSuffixEnd) < parseInt(codeSuffixStart)) {
|
||
uni.showToast({
|
||
title: '结束值不可小于开始值',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
|
||
// 可编码数量 如相减大于代编码数量 则取待编码数量 如小于待编码数量 则取相减后值
|
||
let passCodeNUm =
|
||
codeSuffixEnd - codeSuffixStart + 1 > waitBindNum.value
|
||
? waitBindNum.value
|
||
: codeSuffixEnd - codeSuffixStart + 1
|
||
|
||
codeBindingList.value = []
|
||
// 循环生成编码
|
||
for (let i = 0; i < passCodeNUm; i++) {
|
||
const codeItem = {
|
||
typeName,
|
||
maTypeName,
|
||
outFacCode: '',
|
||
// productDate: "",
|
||
maCode: `${codePrefix}${parseInt(codeSuffixStart) + i}`,
|
||
}
|
||
|
||
codeBindingList.value.push(codeItem)
|
||
}
|
||
}
|
||
|
||
// 删除
|
||
const onHandelDelete = (index) => {
|
||
codeBindingList.value.splice(index, 1)
|
||
}
|
||
|
||
// 编码识别按钮
|
||
const onCodeIdentify = () => {
|
||
uni.navigateTo({
|
||
url: `/pages/new-purchase/bind/coding-scan?queryParams=${JSON.stringify(
|
||
queryParams.value,
|
||
)}`,
|
||
})
|
||
}
|
||
|
||
const maskClick = () => {}
|
||
|
||
// 页面加载完毕
|
||
onLoad((options) => {
|
||
// 监听出库完成事件 刷新列表
|
||
uni.$on('onUpdate', (num) => {
|
||
console.log('监听事件', num)
|
||
if (num > 0) {
|
||
codeNum.value = num
|
||
}
|
||
})
|
||
queryParams.value = JSON.parse(options.queryParams)
|
||
queryBindForm.value.typeName = queryParams.value.typeName
|
||
queryBindForm.value.maTypeName = queryParams.value.maTypeName
|
||
})
|
||
// 页面销毁时移除事件监听
|
||
onUnmounted(() => {
|
||
uni.$off('onUpdate') // 移除事件监听
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-container {
|
||
display: flex;
|
||
height: 100%;
|
||
padding: 0 15rpx;
|
||
flex-direction: column;
|
||
background-color: #e8f5fb;
|
||
.card {
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
.table-list-item {
|
||
margin: 5rpx 0;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.coding-btn {
|
||
padding: 5rpx 0;
|
||
background-color: #409eff;
|
||
border-radius: 6rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.form-view {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
// 加载提示文字
|
||
.loading-text {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.outbound-btn {
|
||
position: fixed;
|
||
bottom: 15rpx;
|
||
left: 15%;
|
||
width: 70%;
|
||
height: 65rpx;
|
||
line-height: 65rpx;
|
||
text-align: center;
|
||
background-color: #19be6b;
|
||
border-radius: 12rpx;
|
||
color: #fff;
|
||
}
|
||
</style>
|