bonus-material-app/src/pages/picking/outbound/details.vue

<template>
    <!-- 领料出库详情 -->
    <view class="page-container">
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="12">
                <view>
                    <uni-easyinput placeholder="请输入内容" />
                </view>
            </uni-col>
            <uni-col :span="4">
                <view class="search">查询</view>
            </uni-col>
        </uni-row>

        <scroll-view scroll-y class="scroll-container">
            <view
                v-for="(item, index) in detailsList"
                :key="index"
                class="table-list-item"
                @tap="onCodingItem(item)"
            >
                <view class="line"></view>
                <uni-row :gutter="24">
                    <uni-col :span="2">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">物资名称：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.maTypeName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">规格型号：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.typeName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">预领数量：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.preNum }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">已领数量：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.alNum }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">待领数量：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.preNum - item.alNum }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">单位：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.unitName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">管理模式：</uni-col>
                    <uni-col :span="16">
                        <uni-tag
                            text="编码"
                            type="warning"
                            v-if="item.manageType === 0"
                            size="small"
                        />
                        <uni-tag
                            text="数量"
                            type="success"
                            v-if="item.manageType === 1"
                            size="small"
                        />
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">状态：</uni-col>
                    <uni-col :span="16">
                        <uni-tag
                            text="未完成"
                            type="warning"
                            size="small"
                            v-if="item.status == 0 || item.status == 1"
                        />
                        <uni-tag
                            text="已完成"
                            type="success"
                            size="small"
                            v-if="item.status == 2"
                        />
                    </uni-col>
                </uni-row>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { getOutboundDetailsAPI } from '@/services/picking/outbound.js'
import { onLoad } from '@dcloudio/uni-app'
const detailsList = ref([])
const query = defineProps() // 获取上级页面传递的路由参数

// 领料单位，参数等信息
const leaseApplyInfo = ref({
    leaseUnit: '', //       领料单位
    leaseProject: '', //    领料工程
    maTypeName: '', //      物资类型
    typeName: '', //        规格型号
    unitName: '', //        单位
    storageNum: '', //      库存数量
    preNum: '', //          预领数量
    parentId: query.id, //  出库时所需参数 取列表 id
    id: '', //              出库时所需参数 取详情接口 id
    typeId: '', //          出库时所需参数 取详情接口 typeId
    manageType: '', //      出库时所需参数 取详情接口 manageType
})

// 获取列表详情
const getOutboundDetailsData = async () => {
    const { data: res } = await getOutboundDetailsAPI(query.id)
    detailsList.value = res.leaseApplyDetailsList
    leaseApplyInfo.value.leaseUnit = res.leaseApplyInfo.leaseUnit
    leaseApplyInfo.value.leaseProject = res.leaseApplyInfo.leaseProject
    // console.log('详情数据', res)
}

// 点击跳转出库页面
const onCodingItem = (item) => {
    // 解构所需要的数据
    const {
        status,
        manageType,
        maTypeName,
        typeName,
        storageNum,
        preNum,
        alNum,
        unitName,
        id,
        typeId,
    } = item

    leaseApplyInfo.value.maTypeName = maTypeName
    leaseApplyInfo.value.typeName = typeName
    leaseApplyInfo.value.unitName = unitName
    leaseApplyInfo.value.storageNum = storageNum
    leaseApplyInfo.value.preNum = preNum
    leaseApplyInfo.value.alNum = alNum
    leaseApplyInfo.value.id = id
    leaseApplyInfo.value.typeId = typeId
    leaseApplyInfo.value.manageType = manageType

    if (status == 2) {
        uni.showToast({ title: '该物资已完成出库！', icon: 'none' })
        return
    }
    let codingUrl = ''
    if (manageType === 0) {
        codingUrl = '/pages/picking/outbound/code-outbound' // 编码出库
    }
    if (manageType == 1) {
        codingUrl = '/pages/picking/outbound/num-outbound' // 数量出库
    }

    // 把 leaseApplyInfo 领料信息转成 json 传递到下个页面
    uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(leaseApplyInfo.value)}` })
}

// 页面加载完毕
onLoad(() => {
    getOutboundDetailsData()

    // 监听出库完成事件 刷新列表
    uni.$on('onUpdate', () => {
        // console.log('监听事件')
        // 刷新列表
        getOutboundDetailsData()
    })
})

// 页面销毁时移除事件监听
onUnmounted(() => {
    uni.$off('onUpdate') // 移除事件监听
})
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    height: 100%;
    padding: 0 15rpx;
    flex-direction: column;
    background-color: #e8f5fb;

    .search-form {
        margin: 10rpx 0;
        display: flex;
        align-items: center;
        box-sizing: content-box;
    }

    .search {
        height: 60rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        border-radius: 10rpx;
    }

    .scroll-container {
        .table-list-item {
            margin-bottom: 20rpx;
            padding: 20rpx;
            background-color: #fff;
            min-height: 300rpx;
            border-radius: 10rpx;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .line {
                margin: 20rpx 0;
                height: 1px;
                background-color: #e8e8e8;
            }
        }
    }
}
// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
}
</style>