forestry-wx/src/plant/storage/agro-product/detail/index.vue

<template>
    <z-paging ref="paging" bgColor="#F7F7F7" safe-area-inset-bottom paging-class="paging-btm-shadow" scroll-with-animation>
        <template #top>
            <ut-navbar title="农资详情" :fixed="false" border></ut-navbar>
        </template>

        <template>
            <view class="pd-24 d-flex a-c">
                <view class="flex1 ov-hd">
                    <view class="startline-title">库存信息</view>
                </view>
                <view>
                    <up-button @click="navigateToInOutRecords" type="primary" :customStyle="formItemBtnStyle">
                        <image class="w-30 h-30 mr-10" src="@/static/images/plant/storage/ckcrkjl_icon.png" mode="widthFix" />
                        <span>查看出入库记录</span>
                    </up-button>
                </view>
            </view>
            <view class="bg-#fff pd3-10-24-24">
                <view class="d-flex j-ed a-c mb-16">
                    <view class="f-s-22 c-#666">{{ form?.instoreBizInfo?.instoreDate }}</view>
                </view>
                <view class="d-flex flex1 mb-10">
                    <view class="flex1">
                        <span class="f-s-34 c-#333 f-w-500 mr-10">{{ form?.materialName }}</span>
                        <span class="f-s-24 c-#666">{{ selectDictLabel(pt_material_type, form?.materialType) }}</span>
                    </view>
                    <view>
                        <view v-if="form?.examinReport?.length" class="tag-span c-primary bg-#EBF6EE">已检验</view>
                        <view v-else class="tag-span c-danger bg-#F9ECEA">未检验</view>
                    </view>
                </view>
                <view class="pd2-4-0 f-s-28">
                    <span class="c-#666">入库批号：</span>
                    <span class="c-#333 f-w-500">{{ form?.batchCode }}</span>
                </view>
                <view v-if="form?.supplierId" class="pd2-4-0 f-s-28">
                    <span class="c-#666">供应商：</span>
                    <span class="c-#333 f-w-500">{{ form?.supplierInfo?.cusName || '-' }}</span>
                </view>
                <view v-if="form?.warehouses?.length" class="pd2-4-0 f-s-28">
                    <span class="c-#666">存放库房：</span>
                    <span class="c-#333 f-w-500">{{ getStorageRoomNames(form?.warehouses) || '-' }}</span>
                </view>
                <view class="pd2-4-0 f-s-28">
                    <span class="c-#666">入库量：</span>
                    <span class="c-#333 f-w-500">{{ form?.capacity }}{{ form?.unit }}</span>
                </view>
                <view class="d-flex">
                    <view v-if="form?.inputAmount" class="pd2-4-0 f-s-28 flex1">
                        <span class="c-#666">出库量：</span>
                        <span class="c-#333 f-w-500">{{ form?.inputAmount || '0' }}{{ form?.unit }}</span>
                    </view>
                    <view v-if="form?.restAmount" class="pd2-4-0 f-s-28 flex1">
                        <span class="c-primary">剩余量：</span>
                        <span class="c-primary f-w-500">{{ form?.restAmount || '0' }}{{ form?.unit }}</span>
                    </view>
                </view>
                <view v-if="+form?.restAmount" class="pd3-20-40-0">
                    <up-button @click="navigateToInventoryLoss" type="warning" plain :customStyle="{ background: '#FFF9EF', borderColor: '#F9D9A3' }">库存有消耗？库存损耗登记{{ '>' }}</up-button>
                </view>
            </view>
            <view class="pd-24">
                <view class="startline-title">农资信息</view>
            </view>
            <view class="bg-#fff pd-24">
                <!-- 农资信息详情，对应 info-edit 表单字段顺序 -->
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">产品名称：</span>
                    <span class="c-#333 f-w-600">{{ form?.materialName || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">农资类别：</span>
                    <span class="c-#333 f-w-600">{{ selectDictLabel(pt_material_type, form?.materialType) || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">入库量：</span>
                    <span class="c-#333 f-w-600">{{ form?.capacity }}{{ form?.unit }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom" v-if="form?.spec">
                    <span class="c-#666">规格：</span>
                    <span class="c-#333 f-w-600">
                        {{ form?.spec }}
                        <text v-if="form?.specUnit">{{ selectDictLabel(pt_materail_spec_unit, form?.specUnit) }}</text>
                        <text v-if="form?.unit">/{{ selectDictLabel(pt_materail_unit, form?.unit) }}</text>
                    </span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">农资来源：</span>
                    <span class="c-#333 f-w-600">{{ selectDictLabel(pt_source_type, form?.sourceType) || '-' }}</span>
                </view>
                <view v-if="form?.supplier" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">供应商：</span>
                    <span class="c-#333 f-w-600">{{ form?.supplier || form?.supplierInfo?.cusName || '-' }}</span>
                </view>
                <view v-if="form?.sourceType === '1'" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">供应商是否是生产商：</span>
                    <span class="c-#333 f-w-600">{{ selectDictLabel(yes_no, form?.supplierProducerFlag) || '-' }}</span>
                </view>
                <view v-if="form?.sourceType === '1'" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">生产商：</span>
                    <span class="c-#333 f-w-600">{{ form?.producer || '-' }}</span>
                </view>
                <view v-if="form?.productCode" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">生产批号：</span>
                    <span class="c-#333 f-w-600">{{ form?.productCode }}</span>
                </view>
                <view v-if="form?.productDate" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">生产日期：</span>
                    <span class="c-#333 f-w-600">{{ form?.productDate }}</span>
                </view>
                <view v-if="form?.brand" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">品牌：</span>
                    <span class="c-#333 f-w-600">{{ form?.brand }}</span>
                </view>
                <view v-if="['1', '2'].includes(form?.materialType as string)" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">登记证号：</span>
                    <span class="c-#333 f-w-600">{{ form?.materialCode || '-' }}</span>
                </view>
                <view v-if="form?.imgs" class="f-s-30 pd2-16-0 info-border-bottom">
                    <view class="c-#666 mb-10">农资图片：</view>
                    <ut-album :urls="form?.imgs"></ut-album>
                </view>
                <view v-if="form?.vedios" class="f-s-30 pd2-16-0 info-border-bottom">
                    <view class="c-#666 mb-10">农资视频：</view>
                    <ut-album :urls="form?.vedios"></ut-album>
                </view>
                <view v-if="form?.examinReport && form?.examinReport.length" class="f-s-30 pd2-16-0 info-border-bottom">
                    <view class="c-#666 mb-10">检验报告：</view>
                    <ut-album :urls="form?.examinReport"></ut-album>
                </view>
            </view>
            <view class="pd-24">
                <view class="startline-title">入库信息</view>
            </view>
            <view class="bg-#fff pd-24">
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">入库类型：</span>
                    <span class="c-#333 f-w-600">{{ selectDictLabel(pt_seed_instore_type, form?.instoreType) || '非溯源入库' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">入库日期：</span>
                    <span class="c-#333 f-w-600">{{ form?.instoreBizInfo?.instoreDate || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">入库批号：</span>
                    <span class="c-#333 f-w-600">{{ form?.batchCode || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">库房类型：</span>
                    <span class="c-#333 f-w-600">农资库</span>
                </view>
                <view v-if="form?.warehouses?.length" class="pd2-4-0 f-s-28">
                    <span class="c-#666">存放库房：</span>
                    <span class="c-#333 f-w-500">{{ getStorageRoomNames(form?.warehouses) || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">入库人：</span>
                    <span class="c-#333 f-w-600">{{ form?.instoreBizInfo?.instoreMg || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">入库备注：</span>
                    <span class="c-#333 f-w-600">{{ form?.instoreBizInfo?.remark || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">最后修改人：</span>
                    <span class="c-#333 f-w-600">{{ form?.operatorName || form?.updateByName || form?.createByName || '-' }}</span>
                </view>
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">最后修改时间：</span>
                    <span class="c-#333 f-w-600">{{ form?.operateTime || form?.updateTime || form?.createTime || '-' }}</span>
                </view>
            </view>
        </template>
        <template #bottom>
            <view class="pd-24 d-flex a-c">
                <up-button type="primary" @click="clickEdit">修改</up-button>
            </view>
        </template>
    </z-paging>
</template>

<script setup lang="ts">
import { formItemBtnStyle } from '@/assets/styles/uview-plus';
import { getStorageRoomNames } from '@/utils/common';
import { useClientRequest } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 使用到的字典：入库类型、库房类型、农资类别、来源、单位、规格单位、是否
const { pt_seed_instore_type, pt_warehouse_type, pt_material_type, pt_source_type, pt_materail_unit, pt_materail_spec_unit, yes_no } = toRefs<any>(proxy?.useDict('pt_seed_instore_type', 'pt_warehouse_type', 'pt_material_type', 'pt_source_type', 'pt_materail_unit', 'pt_materail_spec_unit', 'yes_no'));
const paging = ref<any>(null);
const form = ref<any>({});
const did = ref('');

// 获取详情（仓库信息）
const getDetailById = async (id: string) => {
    if (!id) return;
    const res = await useClientRequest.get(`/plt-api/app/material/getInfo/${id}`);
    if (res && res.code === 200) {
        form.value = res.data || {};
    }
};

const onRefresh = () => {
    getDetailById(did.value);
    paging.value?.complete();
};
const clickEdit = () => {
    uni.$on('seed-agro-detail-refresh', () => {
        getDetailById(did.value);
        uni.$off('seed-agro-detail-refresh');
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/storage/agro-product/info-update/index',
        params: {
            id: did.value,
        },
    });
};
const navigateToInOutRecords = () => {
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/storage/stock-list/index',
        params: {
            id: did.value,
            stockType: '1'
        },
    });
};
const navigateToInventoryLoss = () => {
    uni.$on('storage-registered', () => {
        getDetailById(did.value);
        uni.$emit('refreshStorageRoomList');
        uni.$off('storage-registered');
    });
    uni.navigateTo({
        url: '/plant/storage/loss-register/index',
        success: (res)=> {
            res.eventChannel.emit('storage-data', {
                stockType: '1',
                ...form.value
            });
        },
    });
};
// 页面入参解析并加载
onLoad((options: any) => {
    did.value = options?.id || '';
    getDetailById(did.value);
});
</script>

<style lang="scss" scoped>
.card-info-block {
    border: 1rpx solid #afddbb;
    border-radius: 10rpx;
}
.tag-span {
    padding: 4rpx 12rpx;
    font-size: 20rpx;
    border-radius: 18rpx;
}
</style>