bonus-material-app/src/pages/new-purchase/bind/coding-bind.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>