forestry-wx/src/plant/storage/storage-room/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 :breadcrumb="`库房管理 > 库房详情`"></ut-navbar>
        </template>

        <template>
            <view class="pd-24">
                <view class="startline-title">库房信息</view>
            </view>
            <view class="pd-24 bg-#fff mb-10">
                <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_warehouse_type, form?.type) || '-' }}</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?.warehouseName || '-' }}</span>
                </view>
                <view v-if="form?.sn" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">库房编号：</span>
                    <span class="c-#333 f-w-600">{{ form?.sn }}</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?.contactName || '-' }}</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?.tel || '-' }}</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?.address || '-' }}</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?.area || '-' }} 平方米</span>
                </view>
                <view v-if="form?.storageCondition" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">库房条件：</span>
                    <span class="c-#333 f-w-600">{{ form?.storageCondition }}</span>
                </view>
                <view v-if="form?.remark" class="f-s-30 pd2-16-0 info-border-bottom">
                    <span class="c-#666">备注：</span>
                    <span class="c-#333 f-w-600">{{ form?.remark }}</span>
                </view>
            </view>

            <view class="pd-24">
                <view class="startline-title">货位信息</view>
            </view>
            <view class="pd-24 bg-#fff mb-10">
                <view class="f-s-28 c-#666 mb-10"
                    >货位数量：<span class="c-#333 f-w-600">{{ form?.shelves?.length || 0 }}</span></view
                >
                <template v-if="form?.shelves?.length">
                    <view>
                        <view v-for="(item, index) in form.shelves" :key="index" class="plot-item pd-24 mb-20">
                            <view class="d-flex mb-16">
                                <view class="f-s-32 f-w-5 c-#333 flex1 mr-10">{{ item?.shelvesName || '-' }}</view>
                                <view v-if="item?.sn" class="f-s-24 c-#333">编号：{{ item?.sn }}</view>
                            </view>
                            <view class="f-s-28 c-#666" v-if="item?.remark">
                                <span class="">备注：</span>
                                <span class="c-#333 f-w-5">{{ item?.remark }}</span>
                            </view>
                        </view>
                    </view>
                </template>
                <template v-else>
                    <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx">暂无货位信息</ut-empty>
                </template>
            </view>
        </template>

        <template #empty>
            <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx">暂无库房详情</ut-empty>
        </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 { useClientRequest } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_warehouse_type } = toRefs<any>(proxy?.useDict('pt_warehouse_type'));

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/warehouse/getInfoById/${id}`);
    if (res && res.code === 200) {
        form.value = res.data || {};
    }
};

const onRefresh = () => {
    getDetailById(did.value);
    paging.value?.complete();
};
const clickEdit = () => {
    uni.$on('storage-room-detail-refresh', () => {
        getDetailById(did.value);
        uni.$off('storage-room-detail-refresh');
    });
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/storage/storage-room/edit/index',
        params: {
            id: did.value,
        },
    });
};
// 页面入参解析并加载
onLoad((options: any) => {
    did.value = options?.id || '';
    getDetailById(did.value);
});
</script>

<style lang="scss" scoped>
.z-paging-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}
.plot-item {
    border: 1rpx solid rgba($u-primary, 0.4);
    border-radius: 10rpx;
}
</style>