hazardousWaste_app/pages/components/DetailInfo.vue

<template>
    <view>
        <view>
            <view class="detailInfo mb-2">
                <view class="line title">
                    <p> {{ typeName + '单号' }}：{{ detailInfo?.billNo }}</p>
                    <text :style="getColor(detailInfo?.billType)">
                        {{ getBillType(detailInfo?.billType, detailInfo?.status, flag) }}
                    </text>

                </view>
                <p class="line content">仓库：
                    <text> {{ detailInfo?.warehouseName }}</text>
                </p>
                <p class="line content">存储区：
                    <text> {{ detailInfo?.areaName }}</text>
                </p>
                <p class="line content">开单时间：
                    <text>{{ formatDate(detailInfo?.createTime) }}</text>
                </p>
                <p class="line content" v-if="detailInfo?.inboundTime">{{ typeName + '时间' }} ：
                    <text>{{ formatDate(detailInfo?.inboundTime) }}</text>
                </p>
            </view>
            <view class="detailInfo mb-6">
                <p class="line content">
                    <text class="grey" style="font-weight: 600;">详细备注：</text>

                    <text>{{ detailInfo?.billRemark || '-' }}</text>
                </p>
            </view>
        </view>
        <!-- 物料列表 -只读 -->
        <view>
            <material-list ref="materialRef" isEdit="3" :extendData="{ billType: detailInfo?.billType }"
                :pathParams="{ billNo: detailInfo?.billNo }" backStr="stockInDetail"
                :formData="{ material: detailInfo.itemList }" />
        </view>

    </view>

</template>
<script setup>
import { getBillType, formatDate, getColor } from '../until'
import { computed, toRefs } from 'vue';
import MaterialList from './MaterialList.vue'
import { includes } from 'lodash';
const props = defineProps({
    // 查询列表类型 stockIn:入库  stockOut：出库
    type: {
        type: String,
        default: '',
        required: true
    },
    detailInfo: {
        type: Object,
        default: {},
        required: true
    }

})
const { type, detailInfo } = toRefs(props)
const typeName = computed(() => includes(type.value, 'stockIn') ? '入库单' : '出库单')
const flag = computed(() => includes(type.value, 'stockIn') ? 0 : 1)
</script>

<style scoped lang="scss">
.line {
    display: flex;
    background-color: #fff;
    align-items: center;
    padding: 6rpx 20rpx;
}

.title {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 13px;
}

.content {
    font-weight: 500;
    font-size: 13px;
}
</style>