forestry-wx/src/plant/storage/fresh-goods/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 pd-24">
                <view class="d-flex j-sb a-c li-item-head mb-16">
                    <view class="li-left-tag" :class="{ [`bg-${selectDictListClass(pt_seed_instore_type, form?.instoreType)}`]: true }">{{ selectDictLabel(pt_seed_instore_type, form?.instoreType) }}</view>
                    <view class="f-s-22 c-#666">{{ form?.instoreBizInfo?.instoreDate }}</view>
                </view>
                <view class="mb-10">
                    <span class="f-s-34 c-#333 f-w-500 mr-10">{{ form?.variety }}</span>
                    <span v-if="form?.partName" class="f-s-24 c-#666">{{ form?.partName }}</span>
                </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">
                <!-- 鲜货信息详情 -->
                <view class="f-s-30 pd2-16-0 info-border-bottom">
                    <view class="c-#666 mb-10">动植物名称：</view>
                    <view v-if="form?.varietyInfo" class="bg-#FBFDFB card-info-block pd-24 p-rtv">
                        <view class="mb-10">
                            <span class="f-s-34 c-#333 f-w-5 mr-16">{{ form?.varietyInfo?.varietyName || '-' }}</span>
                            <span class="f-s-24 c-#666">{{ form?.varietyInfo?.latinName || '' }}</span>
                        </view>
                        <view class="mb-10">
                            <span class="f-s-28 c-#333 f-w-5 mr-16">{{ form?.varietyInfo?.genusName || '' }}</span>
                            <span class="f-s-24 c-#666">{{ form?.varietyInfo?.genusLatinName || '' }}</span>
                        </view>
                        <view class="f-s-24 c-#666" v-if="form?.varietyInfo?.medicineName">产出：{{ form?.varietyInfo?.medicineName }}</view>
                    </view>
                    <view v-else class="c-#333 f-w-600">{{ form?.variety || '-' }}</view>
                </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?.partName || form?.part || '-' }}</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_medicine_source, form?.sourceType) || '-' }}</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 || '-' }}{{ selectDictLabel(pt_medicine_unit, form?.unit) || form?.unit || '' }}</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?.producePlaceName || form?.producePlace || '-' }}</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?.productDate || '-' }}</span>
                </view>

                <template v-if="['2'].includes(form?.sourceType as string)">
                    <view 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 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 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>
                </template>

                <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';
import { selectDictListClass } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { pt_seed_instore_type,yes_no, pt_medicine_source, pt_medicine_unit } = toRefs<any>(proxy?.useDict('pt_seed_instore_type','yes_no', 'pt_medicine_source', 'pt_medicine_unit'));
const paging = ref<any>(null);
const form = ref<any>({});
const did = ref('');

// 繁衍世代显示文案
const genCountMap = reactive({
    A4: '累计扩繁代数',
    A3: '继代培养次数',
});

// 获取详情（仓库信息）
const getDetailById = async (id: string) => {
    if (!id) return;
    const res = await useClientRequest.get(`/plt-api/app/storage/getInfo/${id}`);
    if (res && res.code === 200) {
        form.value = res.data || {};
    }
};
const navigateToInOutRecords = () => {
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/storage/stock-list/index',
        params: {
            id: did.value,
            stockType: '4',
        },
    });
};
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: '4',
                ...form.value,
            });
        },
    });
};
const onRefresh = () => {
    getDetailById(did.value);
    paging.value?.complete();
};
const clickEdit = () => {
    uni.$on('fresh-goods-detail-refresh', () => {
        getDetailById(did.value);
        uni.$off('fresh-goods-detail-refresh');
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/storage/fresh-goods/info-update/index',
        params: {
            id: did.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;
}
.li-item-head {
    margin-left: -24rpx;
    margin-top: -24rpx;
}
.li-left-tag {
    padding: 6rpx 16rpx;
    color: #fff;
    border-radius: 0 0 16rpx 0;
    font-size: 20rpx;
    font-weight: 500;
}
</style>