forestry-wx/src/plant/print/models/print-confirm-count.vue

<template>
    <view class="pd-24 bg-fff">
        <up-form class="p-rtv bg-#fff" labelPosition="top" :model="form" errorType="toast" :rules="rules" labelWidth="auto" ref="upFormUpRef">
            <view class="f-s-24 c-#999">自行打印功能目前仅适配<span class="c-#333">佳博GP-M322打印机</span>，且标签显示字段 会根据不同规格纸张大小调整。如有疑问，请<span class="c-primary">点击此处联系客服</span>。</view>
            <up-form-item :label="`待打印数量`" borderBottom>
                <view class="f-s-30 c-#333 f-w-5">{{ opts?.printedCount }}</view>
            </up-form-item>
            <up-form-item :label="`打印数量`" prop="printCount" required borderBottom>
                <up-input v-model="form.printCount" placeholder="请输入打印数量" border="none" clearable></up-input>
                <template #right>
                    <span class="f-s-30 f-w-5 c-#333">{{ opts?.unit || form?.unit || 'kg' }}</span>
                </template>
            </up-form-item>
            <up-form-item :label="`打印人`" required borderBottom>
                <up-input v-model="form.printPerson" placeholder="请输入打印人" readonly border="none" clearable></up-input>
            </up-form-item>
        </up-form>
    </view>
    <view class="pd3-40-24-30 d-flex">
        <up-button class="mr-30" type="primary" plain @click="prevSteps">上一步</up-button>
        <up-button type="primary" @click="submitForm">下一步</up-button>
    </view>
</template>
<script setup lang="ts">
import { useInfoStore } from '@/store';
const infoStore = useInfoStore();
const props = defineProps({
    info: {
        type: Object,
        default: () => null,
    },
    nextStepValue: {
        type: String,
        default: '',
    },
    prevStepValue: {
        type: String,
        default: '',
    },
    item: {
        type: Object,
        default: () => null,
    },
    opts: {
        type: Object,
        default: () => null,
    },
});
const upFormUpRef = ref();
const emit = defineEmits(['next', 'prev', 'formdata']);
const form = ref({
    printCount: props?.opts?.printedCount || '',
    printPerson: infoStore.userInfo?.name, // 打印人
});
const rules = reactive({
    printCount: [
        { required: true, message: '请输入打印数量' },
        // 只能输入大于0的正整数
        { pattern: /^[1-9]\d*$/, message: '请输入大于0的正整数' },
        // 打印数量不能大于剩余可打印数量
        {
            asyncValidator: (rule: any, value: any) => {
                if (value === undefined || value === null || value === '') return Promise.resolve();
                const num = Number(value);
                if (Number.isNaN(num)) return Promise.reject('打印数量请输入数字');
                if (num <= 0) return Promise.reject('打印数量需大于0');
                // 打印数量不能大于剩余可打印数量
                if (+props?.opts?.printedCount < +num) {
                    return Promise.reject(`打印数量不能超过待打印数量`);
                }
                return Promise.resolve();
            },
        },
    ],
});
const submitForm = async () => {
    try {
        await upFormUpRef.value?.validate();
    } catch (error: any) {
       
        return;
    }
    emit('formdata', {
        ...form.value
    });
    emit('next', {
        info: {
            ...props.info,
            status: 'completed',
        },
        nextStepValue: props.nextStepValue || 'print',
    });
};
const prevSteps = () => {
   
    emit('prev', {
        prevStepValue: props.prevStepValue || 'confirm',
    });
};
onMounted(() => {});
</script>