hazardousWaste_app/pages/warehousing/InventoryInfo/components/inventoryAgeDetail.vue

<template>
    <navigation title="物料库存查询" back-url="/pages/warehousing/Declaration/materialQuery" />

    <view class="contentBox">
        <view class="topSearch">
            <uni-easyinput type="text" v-model="queryParams.keyword" prefixIcon="search" :inputBorder="false"
                @iconClick="getList" placeholder="请输入搜索内容" />
        </view>
        <!-- 物料库存查询  -->
        <z-paging ref="pagingRef" class="containerBox" v-model="infoList" @query="getDetailInfo">
            <uni-list class="listBox">
                <uni-list-item v-for="item in infoList" :key="item.id">

                    <template v-slot:body>
                        <view style="display: flex; flex-direction: column;  width: 100%;">
                            <view class="line title">
                                <p>{{ item.materialName }} - {{ item.materialCode }}</p>
                                <p>{{ item.quantity }}{{ item.unitName }}</p>
                            </view>
                            <view class="line content" style="color: #F44336;">
                                <p>库龄</p>
                                <p>{{ item.agingDays }}天</p>
                            </view>
                            <view class="line content ">
                                <p class="flex align-center">
                                    <text class="mr-4"> 唯一码<text class="mr-4 ml-4">|</text>RFID</text>
                                    <text @tap.stop="getQRcodeDetail(item)">
                                        <uv-image src="../../../../static/qrcode.png" width="20rpx" height="20rpx" />
                                    </text>
                                </p>
                                <p>
                                    <text v-if="item.uniqueCode" class="mr-4">{{ item.uniqueCode }}</text>
                                    <text v-if="item.rfidCode"> |{{ item.rfidCode }}</text>
                                </p>
                            </view>
                            <view class="line content">
                                <p>入库日期</p>
                                <p>{{ formatDate(item.inboundTime) }}</p>
                            </view>
                            <view class="line content">
                                <p>所在仓库</p>
                                <p>{{ item.warehouseName }}</p>
                            </view>
                            <view class="line content">
                                <p>所在存储区</p>
                                <p> {{ item.areaName }}</p>
                            </view>
                            <view class="line content">
                                <p>物料类别</p>
                                <p>{{ item.typeName }}</p>
                            </view>
                            <!-- <view class="line content">
                                <p>物料分类</p>
                                <p>{{ item.materialName }}</p>
                            </view> -->
                            <view class="line content">
                                <p>物料规格</p>
                                <p>{{ item.specification }}</p>
                            </view>
                            <view class="line content">
                                <p>物料型号</p>
                                <p> <text v-if="item?.model">{{ item?.model }}</text>
                                    <text v-else class="empty">未填写</text>
                                </p>
                            </view>
                        </view>
                    </template>

                </uni-list-item>
            </uni-list>
        </z-paging>
    </view>
    <!-- 唯一码图形显示弹窗 -->
    <uv-modal ref="modalRef" :title="none" class="qrCodeModal" :showConfirmButton="false">
        <qr-code-modal :detail="materialList" />
    </uv-modal>
</template>
<script setup>
import { ref } from 'vue';
import { onShow, onLoad } from "@dcloudio/uni-app";
import { inventoryList } from '@/api/inventoryInfo';
import Navigation from '../../../components/Navigation.vue';
import { formatDate } from '../../../until';
import QrCodeModal from '../../uniqueCode/myUniqueCode/QrCodeModal.vue';

import { getDetail } from '../../uniqueCode/until'
import { detailUniqueCode } from '@/api/uniqueCode'
// 开关：唯一码图形
const modalRef = ref()
const pathParams = ref('')
const materialList = ref({
    material: []
})
const queryParams = ref({
    keyword: ''
})
const pagingRef = ref(null)
const infoList = ref([])

onLoad((options) => {
    pathParams.value = options;
})

const getDetailInfo = () => {
    const params = {
        warehouseCode: pathParams.value.warehouseCode,
        materialId: pathParams.value.materialId,
        keyword: queryParams.value.keyword
    }
    inventoryList(params).then(res => {
        res.data.forEach(e => {
            e.showMore = false;
        });
        infoList.value = res.data
        pagingRef.value.complete(res.data)
    }).catch(res => {
        pagingRef.value.complete(false)
    })
}

// 详情：唯一码
const getQRcodeDetail = (row) => {
    detailUniqueCode({ id: row.uniqueCodeId }).then((res) => {
        if (res.code == 200) {
            materialList.value.material = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial), qrCode: res.data.qrCode, code: res.data.code, uniqueCodeRemark: res.data.remark }]
            setTimeout(() => {
                modalRef.value.open()
            }, 300)
        }
    })
}

onShow(() => {
    pagingRef.value?.reload?.()
})

</script>
<style scoped lang="scss">
.topSearch {
    position: fixed;
    top: 65rpx;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 4rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.containerBox {
    padding-top: 120rpx !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .zp-l-text-rpx {
        font-size: 12px;
    }
}

::v-deep.listBox {
    background-color: #F8F8FF;

    .uni-list-item {
        margin-bottom: 8rpx;
    }

    .uni-list-item__container {
        padding: 0;
    }

    .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 12rpx;
    }

    .title {
        font-weight: 600;
        font-size: 14px;
    }

    .title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4rpx;
        height: 45rpx;
        background: #08a089;
    }

    .content {
        font-weight: 500;
        font-size: 13px;
    }

    .empty {
        color: #D3D3D3;
    }
}

::v-deep.qrCodeModal {
    .uv-modal__content {
        display: block;
        padding: 24rpx;

    }
}
</style>