forestry-wx/src/plant/packaging/edit/index.vue

<template>
    <z-paging ref="paging" bgColor="#f7f7f7" safe-area-inset-bottom scroll-with-animation>
        <template #top>
            <ut-navbar :title="'修改包装任务'" :fixed="false" border></ut-navbar>
        </template>
        <up-form class="p-rtv bg-#fff" labelPosition="top" :model="form" :rules="rules" labelWidth="auto" ref="upFormRef">
            <view class="pd-24 bg-#fff mb-10">
                <view class="h-1" id="inputStorageIdpppp"></view>
                <up-form-item borderBottom label="选择包装对象" prop="inputStorageId" required>
                    <view class="flex1">
                        <up-button v-if="!form.inputStorageId" @click="selectStorage" type="primary" plain>
                            <image class="w-36 h-36 mr-10" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/common/select_push_icon.png" mode="widthFix" />
                            <span>请选择您要包装的对象</span>
                        </up-button>
                        <view v-else class="bg-#FBFDFB card-info-block p-rtv border-#A9D7B4 b-radius">
                            <ObjectCardStorage :item="form.stroeObject" :showInOutAmount="false"></ObjectCardStorage>
                        </view>
                    </view>
                </up-form-item>
                <view class="h-1" id="storageUseAmountpppp"></view>
                <up-form-item borderBottom label="本次包装用量" prop="storageUseAmount" required>
                    <up-input v-model="form.storageUseAmount" color="#999" readonly placeholder="请输入本次包装用量" border="none" clearable></up-input>
                    <template #right>
                        <span class="f-s-30 f-w-5 c-#333">{{ form?.storageUseUnit || 'kg' }}</span>
                    </template>
                </up-form-item>
                <view class="h-1" id="capacitypppp"></view>
                <view class="h-1" id="unitpppp"></view>
                <up-form-item label="包装规格" prop="spec" required class="form-item-bottom-padding-0">
                    <div class="flex1 d-flex">
                        <div class="flex1 ov-hd">
                            <up-form-item prop="capacity" border-bottom class="form-item-top-padding-0">
                                <up-input v-model="form.capacity" color="#999" readonly placeholder="请输入包装规格" border="none" clearable></up-input>
                            </up-form-item>
                        </div>
                        <div class="pd-5"></div>
                        <div class="w-200">
                            <up-form-item prop="storageUseUnit" border-bottom class="form-item-top-padding-0">
                                <up-input v-model="form.storageUseUnit" color="#999" inputAlign="center" readonly placeholder="单位" border="none" clearable></up-input>
                            </up-form-item>
                        </div>
                        <div class="pd2-0-10 c-#ccc d-flex a-c j-c">/</div>
                        <div class="w-200">
                            <ut-action-sheet v-model="form.unit" :tabs="pt_pack_spec_unit" mode="custom" title="选择单位">
                                <up-form-item prop="unit" border-bottom class="form-item-top-padding-0">
                                    <up-input v-model="form.unit" inputAlign="center" readonly placeholder="单位" border="none" clearable></up-input>
                                    <template #right>
                                        <up-icon size="22rpx" color="#37A954" name="arrow-down-fill"></up-icon>
                                    </template>
                                </up-form-item>
                            </ut-action-sheet>
                        </div>
                    </div>
                </up-form-item>
                <view class="h-1" id="packagingDateStartpppp"></view>
                <view class="h-1" id="packagingDateEndpppp"></view>
                <up-form-item required label="包装日期" class="form-item-bottom-padding-0">
                    <view class="flex1 d-flex">
                        <view class="flex1">
                            <ut-datetime-picker v-model="form.packagingDateStart" :maxDate="form.packagingDateEnd" mode="date">
                                <up-form-item borderBottom prop="packagingDateStart" class="form-item-top-padding-0">
                                    <up-input v-model="form.packagingDateStart" readonly placeholder="包装开始日期" border="none" clearable></up-input>
                                    <template #right>
                                        <up-icon size="22rpx" color="#37A954" name="arrow-down-fill"></up-icon>
                                    </template>
                                </up-form-item>
                            </ut-datetime-picker>
                        </view>
                        <view class="pd2-0-20"></view>
                        <view class="flex1">
                            <ut-datetime-picker v-model="form.packagingDateEnd" :minDate="form.packagingDateStart" mode="date">
                                <up-form-item borderBottom prop="packagingDateEnd" class="form-item-top-padding-0">
                                    <up-input v-model="form.packagingDateEnd" readonly placeholder="包装结束日期" border="none" clearable></up-input>
                                    <template #right>
                                        <up-icon size="22rpx" color="#37A954" name="arrow-down-fill"></up-icon>
                                    </template>
                                </up-form-item>
                            </ut-datetime-picker>
                        </view>
                    </view>
                </up-form-item>
                <!-- 包装批号 -->
                <view class="h-1" id="packSnpppp"></view>
                <up-form-item borderBottom label="包装批号" prop="packSn" required>
                    <up-input v-model="form.packSn" placeholder="请输入包装批号" border="none" clearable></up-input>
                    <template #right>
                        <up-button @click="generateBatchCode" type="primary" :customStyle="formItemBtnStyle">随机生成</up-button>
                    </template>
                </up-form-item>
                <view class="h-1" id="batchSnpppp"></view>
                <up-form-item borderBottom label="成品批号" prop="batchSn" required>
                    <up-input v-model="form.batchSn" placeholder="请输入成品批号" border="none" clearable></up-input>
                </up-form-item>
                <!-- 保质期 12月，数字加单位单位两个字段， expireDate，expireDateUnit -->
                <view class="h-1" id="expireDatepppp"></view>
                <view class="h-1" id="expireDateUnitpppp"></view>
                <up-form-item label="保质期" class="form-item-bottom-padding-0">
                    <div class="flex1 d-flex a-c">
                        <div class="flex1 ov-hd">
                            <up-form-item prop="expireDate" border-bottom class="form-item-top-padding-0">
                                <up-input v-model="form.expireDate" placeholder="请输入保质期" border="none" clearable></up-input>
                            </up-form-item>
                        </div>
                        <div class="pd-5"></div>
                        <div class="w-200">
                            <ut-action-sheet v-model="form.expireDateUnit" :tabs="pt_expire_date_unit" mode="custom" title="选择单位">
                                <up-form-item prop="expireDateUnit" border-bottom class="form-item-top-padding-0">
                                    <up-input v-model="form.expireDateUnit" inputAlign="center" readonly placeholder="单位" border="none" clearable></up-input>
                                    <template #right>
                                        <up-icon size="22rpx" color="#37A954" name="arrow-down-fill"></up-icon>
                                    </template>
                                </up-form-item>
                            </ut-action-sheet>
                        </div>
                    </div>
                </up-form-item>
                <!-- 请选择赋码方式 -->
                <view class="h-1" id="refTypepppp"></view>
                <up-form-item borderBottom label="赋码方式" required prop="refType">
                    <view v-if="form.refType" class="f-s-30 c-999 f-w-5 flex1">{{ selectDictLabel(pt_pack_ref_type, form.refType) }}</view>
                    <view v-else class="f-s-30 c-ccc f-w-4 flex1">请选择赋码方式</view>
                </up-form-item>
                <view class="d-flex a-c pd2-10-0" @click="$u.route({ url: '/tools/view-html/index', params: { url: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/template/pack_code_type.html', title: '赋码方式区别' } })">
                    <up-icon size="28rpx" name="question-circle" color="#37A954"></up-icon>
                    <span class="c-primary f-s-24">两种赋码方式的区别？怎么选择？</span>
                </view>
            </view>
        </up-form>
        <view class="d-flex flex-cln a-c pd3-40-24-24">
            <view class="f-s-30 c-#333 f-w-5 mb-16">
                <span>预计分包数：</span>
                <span class="f-s-46 c-primary f-w-7">{{ packResult.packNum || '-' }}</span>
                <span>包</span>
            </view>
            <view class="d-flex a-c mb-30">
                <view class="f-s-28 c-#333">包装规格：</view>
                <view class="d-flex a-c gap-24">
                    <view class="bg-#E3EFE6 pd2-12-28 c-primary radius-8 f-s-26">{{ packResult.spec1 || '-' }}</view>
                    <view v-if="packResult.spec2" class="bg-#E3EFE6 pd2-12-28 c-primary radius-8 f-s-26">{{ packResult.spec2 || '-' }}</view>
                </view>
            </view>
            <up-button type="primary" @click="submit">确认修改</up-button>
        </view>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import { formItemBtnStyle } from '@/assets/styles/uview-plus';
import { getUrlParams, recursiveDecodeURIComponent } from '@/utils/ruoyi';
import type { PackTaskForm } from './types';
import NP from 'number-precision';
import ObjectCardStorage from '@/plant/models/warehouseCard/object-card-storage.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_pack_ref_type, pt_pack_spec_unit, pt_expire_date_unit } = toRefs<any>(proxy?.useDict('pt_pack_ref_type', 'pt_pack_spec_unit', 'pt_expire_date_unit'));
const upFormRef = ref();
const paging = ref();
const did = ref('');
const form = ref<PackTaskForm>({
    storageUseAmount: '',
    storageUseUnit: 'kg',
    capacity: '',
    unit: '',
    packagingDateStart: '',
    packagingDateEnd: '',
    packSn: '',
    batchSn: '',
    expireDate: '',
    expireDateUnit: '',
    refType: '',
    packCodeType: '3',
});

const rules = reactive<Record<string, any>>({
    storageUseUnit: [{ required: true, message: '请选择包装单位' }],
    unit: [{ required: true, message: '请选择单位' }],
    packagingDateStart: [{ required: true, message: '请选择开始日期' }],
    packagingDateEnd: [{ required: true, message: '请选择结束日期' }],
    packSn: [{ required: true, message: '请输入包装批号' }],
    batchSn: [{ required: true, message: '请输入成品批号' }],
    refType: [{ required: true, message: '请选择赋码方式' }],
});

const submit = async () => {
    try {
        await upFormRef.value?.validate();
    } catch (error: any) {
        const firstErrorField = error && error[0].field + 'pppp';
        paging.value?.scrollIntoViewById(firstErrorField, 30, true);
        return;
    }
    try {
        await uni.showLoading({ title: '修改中...', mask: true });
        const payload: any = { ...(form.value as any), planCount: packResult.value.packNum };
        delete payload.stroeObject;
        const res = await useClientRequest.post('/plt-api/app/packTask/save', payload);
        uni.hideLoading();
        if (res && res.code === 200) {
            uni.$emit('refreshPackTaskList');
            await uni.showModal({
                title: '修改成功',
                content: '若已印刷，请查看已印刷包装上的信息是否正确！以免造成扫码信息与包装信息不一致。',
                showCancel: false,
                confirmText: '知道了',
            });
            uni.navigateBack({
                delta: 1,
            });
        }
    } catch (e) {
        uni.hideLoading();
        console.error('保存包装任务失败:', e);
    }
};
// 点击随机生成服务端生成唯一的批号
const generateBatchCode = async () => {
    uni.showLoading({
        title: '生成中...',
    });
    const res = await useClientRequest.post('/plt-api/app/plantationTask/getBatchCode', {
        plType: 'Z',
        linkType: 'I',
    });
    if (res && res.code === 200) {
        uni.hideLoading();
        form.value.packSn = res.data;
        uni.showToast({
            title: '批号生成成功',
            icon: 'success',
        });
    }
};
// 去选择包装对象页选择包装对象，选择后返回并赋值
const selectStorage = () => {
    uni.$on('selectStorageObject', (data: any) => {
        console.log(data, '---');
        form.value.inputStorageId = data.id;
        form.value.packTaskType = data.storageType;
        form.value.storageUseUnit = data.unit;
        form.value.storageUseAmount = '';
        form.value.capacity = '';
        form.value.stroeObject = data;
        form.value.batchSn = data?.batchCode;
        uni.$off('selectStorageObject');
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/packaging/select-object/index',
        params: {
            emitField: 'selectStorageObject',
            storageType: form.value.packTaskType, // 传入当前选择的包装对象类型，种子、苗木、农资等
            id: form.value.inputStorageId, // 传入当前选择的包装对象id，编辑时使用，用于回显选中状态
        },
    });
};
const deleteStorage = () => {
    form.value.inputStorageId = '';
    form.value.storageUseUnit = 'kg';
    form.value.storageUseAmount = '';
    form.value.capacity = '';
    form.value.unit = '';
    form.value.stroeObject = null;
};

const getStorageInfoById = async (id: string, storageType?: string | number) => {
    const type = String(storageType || form.value.packTaskType || '');
    let url = `/plt-api/app/storage/getInfo/${id}`;
    if (type === '1') {
        url = `/plt-api/app/material/getInfo/${id}`;
    } else if (type === '2') {
        url = `/plt-api/app/storageSeed/getById/${id}`;
    }
    const res = await useClientRequest.get(url);
    if (!res || res.code !== 200) return null;
    return {
        ...(res.data || {}),
        storageType: String((res.data || {})?.storageType || type || ''),
    };
};

const getDetailById = async (id: string) => {
    const res = await useClientRequest.get(`/plt-api/app/packTask/${id}`);
    if (!res || res.code !== 200) return;
    const detail = res.data || {};
    form.value = {
        ...form.value,
        ...detail,
    };
    if (!form.value.packTaskType && detail?.storageType) {
        form.value.packTaskType = String(detail.storageType);
    }

    if (!form.value.inputStorageId) return;
    const storageInfo = await getStorageInfoById(form.value.inputStorageId, detail?.packTaskType || detail?.storageType || form.value.packTaskType);
    if (storageInfo) {
        form.value.stroeObject = storageInfo;
        if (!form.value.storageUseUnit) {
            form.value.storageUseUnit = storageInfo?.unit || 'kg';
        }
    } else {
        form.value.stroeObject = detail;
    }
};
// 计算属性分包结果
const packResult = computed(() => {
    // 预计分包数 = 本次包装用量 / 包装规格，向上取整
    // 分包数，包装规格，整除的情况，直接除；不整除的情况，向上取整
    // 包装规格，整除的时候包装规格只有一个，不整除包装规格有两个，第二个是剩余量
    const result: any = {
        packNum: 0,
        spec1: '',
        // 零包规格
        spec2: '',
    };
    if (form.value.storageUseAmount && form.value.capacity) {
        const useAmount = Number(form.value.storageUseAmount);
        const capacity = Number(form.value.capacity);
        if (capacity > 0) {
            result.packNum = Math.ceil(useAmount / capacity);
            result.spec1 = `${capacity}${form.value.storageUseUnit}/${form.value.unit}`;
            if (useAmount % capacity !== 0) {
                const lastAmount = NP.round(useAmount - capacity * Math.floor(useAmount / capacity), 2);
                result.spec2 = `${lastAmount}${form.value.storageUseUnit}/${form.value.unit}`; // 零包规格
            } else {
                result.spec2 = ''; // 没有零包规格
            }
        }
    }
    return result;
});
onLoad((options: any) => {
    did.value = options?.id || getUrlParams(recursiveDecodeURIComponent(options?.q))?.id || '';
    if (did.value) {
        getDetailById(did.value);
    }
});
</script>
<style lang="scss" scoped>
.close-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
</style>