mes-app/pages/out/detail.uvue

<template>
	<uni-navbar-lite @leftClick="handleBack" :show-right=false title="出库单详情"></uni-navbar-lite>
    <view class="page-container">
        <scroll-view class="page-content" :scroll-y="true">
            <!-- 出库单信息 -->
            <view class="section">
                <view class="info-card">
                    <view class="info-row">
                        <text class="info-label">出库单号</text>
                        <text class="info-value">{{ salseCode }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">状态</text>
                        <text class="info-value status-text" :class="'status-' + status">{{ statusText }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">创建人</text>
                        <text class="info-value">{{ createBy }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">领用人</text>
                        <text class="info-value">{{ receiverUser }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">创建时间</text>
                        <text class="info-value">{{ createTime }}</text>
                    </view>
                </view>
            </view>

            <!-- 物料明细 -->
            <view class="section">
                <view class="section-header">
                    <view class="section-indicator"></view>
                    <text class="section-title">物料明细</text>
                </view>
                <view class="material-list">
                    <view v-if="lineList.length === 0" class="empty-tip">
                        <text class="empty-tip-text">暂无物料</text>
                    </view>
                    <view 
                        v-else
                        v-for="(item, index) in lineList" 
                        :key="index" 
                        class="material-item"
                    >
                        <view class="material-header">
                            <text class="material-name">{{ getItemName(item) }}</text>
                            <text class="material-status" :class="getLineStatus(item) == 'Y' ? 'status-received' : 'status-pending'">
                                {{ getLineStatusText(item) }}
                            </text>
                        </view>
                        <view class="material-spec" v-if="getSpecification(item)">
                            <text class="spec-label">规格：</text>
                            <text class="spec-value">{{ getSpecification(item) }}</text>
                        </view>
                        <view class="material-divider"></view>
                        <view class="material-footer">
                            <view class="quantity-info">
                                <view class="detail-row">
                                    <text class="quantity-label">领料人：</text>
                                    <text class="quantity-value">{{ getReceiverUser(item) }}</text>
                                </view>
                                <view class="detail-row">
                                    <text class="quantity-label">签收人：</text>
                                    <text class="quantity-value">{{ getReceiverSigner(item) }}</text>
                                </view>
                            </view>
                            <view class="right-info">
                                <text class="quantity-num">{{ getQuantity(item) }} {{ getMeasureName(item) }}</text>
                            </view>
                            <view v-if="status == 'FINISHED' && getLineStatus(item) != 'Y'" class="receive-btn-wrap">
                                <button v-if="checkPermissions(['mes:wm:productsalse:sign', 'mes:wm:productsalse:personsign'])" class="receive-btn" @click="handleSignReceive(item)">签收</button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="uts">
    import { ref, computed } from 'vue'
    import { getProductSalseById, signReceiveLine } from '../../api/out/index'
    import { getUserInfo } from '../../utils/storage'
    import { checkPermissions } from '../../utils/permission'

    const salseId = ref<string>("")
    const salseCode = ref<string>("")
    const status = ref<string>("")
    const createBy = ref<string>("")
    const receiverUser = ref<string>("")
    const createTime = ref<string>("")
    const lineList = ref<UTSJSONObject[]>([])
    
    let currentUserId: string = ''

    const statusText = computed((): string => {
        const s = status.value
        switch (s) {
            case 'PREPARE': return '待确认'
            case 'CONFIRMED': return '已确认'
            case 'EXECUTING': return '执行中'
            case 'FINISHED': return '已完成'
            case 'CANCEL': return '已取消'
            default: return s
        }
    })

    const getItemName = (item: UTSJSONObject): string => {
        if (item == null) return ''
        const val = item['itemName']
        return val != null ? val.toString() : ''
    }

    const getSpecification = (item: UTSJSONObject): string => {
        if (item == null) return ''
        const val = item['specification']
        return val != null ? val.toString() : ''
    }

    const getQuantity = (item: UTSJSONObject): string => {
        if (item == null) return '0'
        const val = item['quantitySalse']
        return val != null ? val.toString() : '0'
    }

    const getMeasureName = (item: UTSJSONObject): string => {
        if (item == null) return ''
        const val = item['measureName']
        return val != null ? val.toString() : ''
    }

    const getLineStatus = (item: UTSJSONObject): string => {
        if (item == null) return ''
        const val = item['receiverStatus']
        return val != null ? val.toString() : ''
    }
	
	const getReceiverUser = (item: UTSJSONObject): string => {
	    if (item == null) return ''
	    const val = item['receiverUser']
	    return val != null ? val.toString() : ''
	}
	
	const getReceiverSigner = (item: UTSJSONObject): string => {
	    if (item == null) return ''
	    const val = item['receiverSigner']
	    return val != null ? val.toString() : ''
	}

    const getLineStatusText = (item: UTSJSONObject): string => {
        const s = getLineStatus(item)
        if (s == 'Y') return '已签收'
        if (s == 'N') return '待签收'
        return s
    }

    const loadDetail = (): void => {
        const len = salseId.value.length as number
        if (len === 0) return
        getProductSalseById(salseId.value).then((res: any) => {
            const resData = res as UTSJSONObject
			const data = resData["data"] as UTSJSONObject
            salseCode.value = data['salseCode'] != null ? data['salseCode'].toString() : ''
            status.value = data['status'] != null ? data['status'].toString() : ''
            createBy.value = data['createNickName'] != null ? data['createNickName'].toString() : ''
            receiverUser.value = data['receiverUser'] != null ? data['receiverUser'].toString() : ''
            createTime.value = data['createTime'] != null ? data['createTime'].toString() : ''
            
            const lines = data['wmProductSalseLineList']
            if (lines != null) {
                lineList.value = lines as UTSJSONObject[]
            } else {
                lineList.value = []
            }
        }).catch((e) => {
            const error = e as UTSError
            const errMsg = error?.message
            uni.showToast({ title: errMsg.toString(), icon: 'none' })
        })
    }

    const handleSignReceive = (item: UTSJSONObject): void => {
        const lineId = item['lineId']
        if (lineId == null) {
            uni.showToast({ title: '明细ID不存在', icon: 'none' })
            return
        }
        uni.showModal({
            title: '提示',
            content: '确认签收该物料？',
            success: (res) => {
                if (res.confirm) {
                    signReceiveLine(lineId.toString()).then((res: any) => {
                        uni.showToast({ title: '签收成功', icon: 'success' })
                        loadDetail()
                    }).catch((e) => {
                        const error = e as UTSError
                        const errMsg = error?.message
                        uni.showToast({ title: errMsg.toString(), icon: 'none' })
                    })
                }
            }
        })
    }

    const handleBack = (): void => {
        uni.navigateBack()
    }

    onLoad((options: any) => {
		const params = options as UTSJSONObject
        if (params != null && params['id'] != null) {
            salseId.value = params['id'].toString()
            
            const userInfo = getUserInfo()
            if (userInfo != null) {
                const userId = userInfo['userId']
                currentUserId = userId != null ? userId.toString() : ''
            }
            
            loadDetail()
        }
    })
</script>

<style lang="scss">
    .page-container {
        flex: 1;
        background-color: #e8f0f9;
    }

    .page-content {
        flex: 1;
        padding: 20rpx;
    }

    .section {
        margin-bottom: 20rpx;
        background: #ffffff;
        border-radius: 16rpx;
        padding: 20rpx;
    }

    .section-header {
        flex-direction: row;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .section-indicator {
        width: 6rpx;
        height: 32rpx;
        background-color: #007aff;
        border-radius: 3rpx;
        margin-right: 12rpx;
    }

    .section-title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
    }

    .info-card {
        background-color: #f8f9fa;
        border-radius: 8rpx;
        padding: 20rpx;
    }

    .info-row {
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 16rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .info-label {
        font-size: 28rpx;
        color: #666666;
    }

    .info-value {
        font-size: 28rpx;
        color: #333333;
    }

    .status-text {
        &.status-PREPARE {
            color: #faad14;
        }
        &.status-CONFIRMED {
            color: #1890ff;
        }
        &.status-EXECUTING {
            color: #722ed1;
        }
        &.status-FINISHED {
            color: #52c41a;
        }
        &.status-CANCEL {
            color: #ff4d4f;
        }
        &.status-received {
            color: #52c41a;
        }
        &.status-pending {
            color: #faad14;
        }
    }

    .material-list {
        background-color: #f8f9fa;
        border-radius: 8rpx;
        padding: 20rpx;
    }

    .empty-tip {
        align-items: center;
        padding: 40rpx;
    }

    .empty-tip-text {
        color: #999999;
        font-size: 28rpx;
    }

    .material-item {
        background-color: #ffffff;
        border-radius: 12rpx;
        padding: 28rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .material-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16rpx;
    }

    .material-name {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
        flex: 1;
        margin-right: 16rpx;
        line-height: 44rpx;
    }

    .material-status {
        font-size: 24rpx;
        padding: 8rpx 20rpx;
        border-radius: 12rpx;
        
        &.status-received {
            background-color: #f6ffed;
            color: #52c41a;
        }
        &.status-pending {
            background-color: #fff7e6;
            color: #fa8c16;
        }
    }

    .material-spec {
        flex-direction: row;
        margin-bottom: 16rpx;
    }

    .spec-label {
        font-size: 26rpx;
        color: #999999;
        margin-right: 8rpx;
    }

    .spec-value {
        font-size: 26rpx;
        color: #666666;
        flex: 1;
    }

    .material-divider {
        height: 2rpx;
        background-color: #f0f0f0;
        margin: 16rpx 0;
    }

    .material-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .quantity-info {
        flex-direction: column;
        flex: 1;
    }

    .right-info {
        justify-content: center;
        margin-right: 24rpx;
    }

    .quantity-num {
        font-size: 32rpx;
        color: #007aff;
        font-weight: bold;
    }

    .detail-row {
        flex-direction: row;
        margin-bottom: 8rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .quantity-label {
        font-size: 26rpx;
        color: #999999;
        width: 120rpx;
    }

    .quantity-value {
        font-size: 26rpx;
        color: #007aff;
        font-weight: bold;
        flex: 1;
    }

    .receive-btn-wrap {
        margin-left: 24rpx;
    }

    .receive-btn {
        padding: 14rpx 36rpx;
        background-color: #007aff;
        color: #ffffff;
        font-size: 26rpx;
        border-radius: 8rpx;
        border: none;
        font-weight: bold;

        &:active {
            background-color: #0056b3;
        }
    }

    .material-detail {
        flex-direction: row;
        justify-content: space-between;
    }

    .detail-row {
        flex-direction: row;
    }
</style>