forestry-wx/src/tools/species-info-process/models/souceinfo.vue

<template>
    <view class="bg-#FBFDFB border-#AFDDBB pd-24 b-radius mb-10">
        <view v-if="showClose" class="c-#F81242 f-s-36 ab2-10-10 pl-20 pr-10"
            style="position: absolute; right: 10rpx; top: 0rpx" @click="() => handleClose(index)"> × </view>
        <view class="d-flex a-c pb-10">
            <view class="c-primary pd-4 bg-#E7F4EA radius-10" style="font-style: italic">{{ index + 1 < 10 ? '0' +
                (index + 1) : index + 1 }}</view>
                    <view class="c-#333 f-s-34 f-w-5 ml-10 mr-10">{{ data?.variety }}</view>
                    <span class="f-s-24 c-#666">{{ selectDictLabel(pt_seed_type, data?.seedType) }}</span>
            </view>
            <view class="pt-6 pb-6 d-flex a-c">
                <view class="c-#666 f-s-28"> 入库批次号：</view>
                <view class="c-#333 f-s-28 f-w-5">{{ data?.batchCode }}</view>
            </view>
            <view class="pt-6 pb-6 d-flex a-c">
                <view class="c-#666 f-s-28"> 供应商：</view>
                <view class="c-#333 f-s-28 f-w-5">{{ data?.supplier }}</view>
            </view>
            <view class="pt-6 pb-6 d-flex a-c">
                <view class="c-#666 f-s-28 w-s-no"> 所在库房：</view>
                <view class="c-#333 f-s-28 f-w-5">{{ data?.warehouses }}</view>
            </view>
            <view class="pt-6 pb-6 d-flex mb-12">
                <view class="w-50% d-flex a-c">
                    <view class="c-#666 f-s-28"> 入库量：</view>
                    <view class="c-#333 f-s-28 f-w-5">{{ data?.capacity }}{{ data?.unit }}</view>
                </view>
                <view class="w-50% d-flex a-c">
                    <view class="c-#666 f-s-28"> 剩余量：</view>
                    <view class="c-primary f-s-28 f-w-5">{{ data?.restAmount }}{{ data?.unit }}</view>
                </view>
            </view>
            <up-line color="#AFDDBB" style="margin-left: -24rpx; margin-right: -24rpx; width: auto"></up-line>
            <view class="f-s-28 c-#666 pt-16">本次使用量：</view>
            <view class="pt-6 pb-6 d-flex a-c">
                <view class="flex1 mr-10">
                    <up-input v-model="inputsModel.inputAmount" placeholder="请输入本次使用量" border="bottom"
                        style="padding-left: 0">
                        <template #suffix>
                            <view class="c-#333 f-s-28 f-w-5">{{ data?.unit }}</view>
                        </template>
                    </up-input>
                </view>
                <view class="">
                    <up-checkbox label="全部使用" usedAlone v-model:checked="hasChecked"
                        @change="handleUseAllChange"></up-checkbox>
                </view>
            </view>
        </view>
</template>
<script setup lang="ts">
import { ref, watch, computed, nextTick } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_seed_instore_type, pt_seed_type, pt_fungus_code_type } = toRefs<any>(proxy?.useDict('pt_seed_instore_type', 'pt_seed_type', 'pt_fungus_code_type'));
// 从外部获取数据
const props = defineProps<{
    showClose?: boolean;
    index: number;
    data: any;
}>();

const emit = defineEmits<{
    close: [index: number];
}>();

const inputsModel = defineModel<any>('inputs', { default: () => { } });

// 处理关闭事件
const handleClose = (index: number) => {
    emit('close', index);
};
// 建立一个计算属性 如果props.data.restAmount 等于或者大于inputsModel.inputAmount 那么就为true
const hasChecked = computed(() => {
    return +inputsModel?.value.inputAmount >= +props.data.restAmount;
});
const handleUseAllChange = () => {
    console.log(hasChecked.value, 'hasChecked.value');
    if (!hasChecked.value || +hasChecked.value == 0) {
        inputsModel.value.inputAmount = props.data.restAmount;
    }
};
watch(
    () => inputsModel.value?.inputAmount,
    (val) => {
        if (val === undefined || val === null) return;

        const numVal = Number(val);
        if (!isNaN(numVal) && numVal > props.data.restAmount) {
            // 使用 nextTick 确保 UI 更新
            nextTick(() => {
                inputsModel.value.inputAmount = props.data.restAmount;
            });
        }
    },
    { flush: 'post' },
);
</script>