forestry-wx/src/plant/storage/finished-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="https://yujin-szyy.oss-cn-chengdu.aliyuncs.com/szyy/images-plt/plant/storage/ckcrkjl_icon.png" mode="widthFix" />
                        <span>查看出入库记录</span>
                    </up-button>
                </view>
            </view>
            <!-- 卡片顶部 -->
            <view class="b-radius bg-#fff pd-20 p-rtv">
                <!-- 顶部类型标签和日期 -->
                <view class="d-flex j-sb a-c li-item-head mb-16">
                    <view :class="['li-left-tag', typeBgClass]">{{ selectDictLabel(pt_product_type, form?.instoreBizInfo?.productType) }}</view>
                    <view class="f-s-22 c-#666">{{ form?.productDate || '' }}包装</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?.instoreBizInfo?.proName }}</span>
                        <span v-if="form?.instoreBizInfo?.proLevel" class="f-s-24 c-#666">
                            {{ form?.instoreBizInfo?.proLevel }}
                        </span>
                    </view>
                </view>
                <view class="" v-if="+form.instoreBizInfo?.productType == 6">
                    <span v-if="form?.instoreBizInfo?.finalSpecn" class="f-s-24 c-#666"> {{ form?.instoreBizInfo?.finalSpecn }}{{ form?.instoreBizInfo?.finalUnit }} </span>
                </view>
                <!-- 详细信息 -->
                <view class="pd2-4-0 f-s-28 d-flex a-c">
                    <span class="c-#666">成品批号：</span>
                    <span class="c-#333 f-w-500 flex1">{{ form?.batchCode || '-' }}</span>
                </view>

                <view class="pd2-4-0 f-s-28">
                    <span class="c-#666">包装批号：</span>
                    <span class="c-#333 f-w-500">{{ form?.instoreBizInfo?.packSn || '-' }}</span>
                </view>

                <view 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="d-flex">
                    <view class="pd2-4-0 f-s-28 d-flex w-50%">
                        <view class="c-#666 w-s-no">入库量：</view>
                        <view class="d-flex flex-cln">
                            <span class="c-#333 f-w-500 d-flex a-c">{{ form?.specn }}*{{ form?.capacity }}{{ form?.unit }}</span>
                            <span class="c-#333 f-w-500 d-flex a-c" v-if="+form?.restSpecn">{{ form?.restSpecn }}*{{ form?.capacity }}{{ form?.unit }}</span>
                        </view>
                    </view>
                    <view class="pd2-4-0 f-s-28 w-50% d-flex">
                        <span class="c-primary w-s-no">剩余量：</span>
                        <view class="d-flex flex-cln">
                            <span class="c-primary f-w-500">{{ form?.specn }}*{{ form?.restAmount }}{{ form?.unit }}</span>
                            <span class="c-primary f-w-500 d-flex a-c" v-if="+form?.restRestAmount">{{ form?.restSpecn }}*{{ form?.restRestAmount }}{{ form?.unit }}</span>
                        </view>
                    </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">
                    <span class="c-#666">成品批号：</span>
                    <span class="c-#333 f-w-500 flex1">{{ 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-500">{{ form?.instoreBizInfo?.packSn || '-' }}</span>
                </view>

                <view class="f-s-30 pd2-16-0 info-border-bottom d-flex">
                    <view class="c-#666 w-s-no">入库量：</view>
                    <view class="d-flex flex-cln">
                        <span class="c-#333 f-w-500 d-flex a-c">{{ form?.specn }}*{{ form?.capacity }}{{ form?.unit }}</span>
                        <span class="c-#333 f-w-500 d-flex a-c" v-if="form?.restSpecn">{{ form?.restSpecn }}*{{ form?.capacity }}{{ form?.unit }}</span>
                    </view>
                </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 v-if="form?.instoreType == '2'" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">采收日期：</span>
                    <span class="c-#333 f-w-600">{{ form?.productDate || '-' }}~{{ form?.productDateEnd || '-' }}</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 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 class="pd2-4-0 f-s-28 info-border-bottom">
                    <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?.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?.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>
        </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_tag, pt_medicine_unit, pt_product_type } = toRefs<any>(proxy?.useDict('pt_seed_instore_type', 'yes_no', 'pt_medicine_source_tag', 'pt_medicine_unit', 'pt_product_type'));

// 类型标签背景色类名
const typeBgClass = computed(() => `bg-instore-${form.value?.instoreBizInfo?.productType}`);
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('finished-product-detail-refresh', () => {
        getDetailById(did.value);
        uni.$off('finished-product-detail-refresh');
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/storage/finished-product/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: 0rpx 0 16rpx 0;
    font-size: 20rpx;
    font-weight: 500;
}

/* 类型标签背景色 */
.bg-instore-2 {
    background-color: #2289e0;
}

/* 药材 - 绿色 */
.bg-instore-4 {
    background-color: #ff9800;
}

/* 鲜货 - 橙色 */
.bg-instore-5 {
    background-color: #1ebddc;
}

/* 种源 - 蓝色 */
.bg-instore-6 {
    background-color: #ebf6ee;
}
</style>