mes-app/pages/apply/applyInfo.uvue

<template>
	<uni-navbar-lite :showRight=false title="申请详情"></uni-navbar-lite>
    <view class="page-container">
        <scroll-view class="page-content" :class="{ 'has-bottom-buttons': applyStatus != null && (applyStatus.trim() == 'PREPARE' || applyStatus.trim() == 'CONFIRMED') }" :scroll-y="true">
            <!-- 申请单信息 -->
            <view class="section">
                <view class="section-header">
                    <view class="section-indicator"></view>
                    <text class="section-title">申请单信息</text>
                </view>
                <view class="info-card">
                    <view class="info-row">
                        <text class="info-label">申请单号</text>
                        <text class="info-value">{{ applyCode }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">状态</text>
                        <text class="info-value status-text" :class="'status-' + applyStatus">{{ applyStatusText }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">申购状态</text>
                        <text class="info-value status-text" :class="'purchase-status-' + purchaseStatus">{{getPurchaseStatusText(purchaseStatus)}}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">申请时间</text>
                        <text class="info-value">{{ createTime }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">申请人</text>
                        <text class="info-value">{{ nickName }}</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-info">
                            <text class="material-name">{{ getItemName(item) }}</text>
                        <!--    <text class="material-spec">{{ getSpecification(item) }}</text> -->
                        </view>
                        <view class="material-detail">
                            <view class="detail-row detail-row-left">
                                <text class="detail-label">数量</text>
                                <text class="detail-value quantity-value">{{ getQuantity(item) }}</text>
                                <text class="detail-value">{{ getMeasureName(item) }}</text>
                            </view>
                            <view class="detail-row detail-row-right">
                                <text class="detail-label">已出库</text>
                                <text class="detail-value">{{ getQuantityOutTotal(item) }}</text>
								<text class="detail-value">{{ getMeasureName(item) }}</text>
							</view>
                            <view class="detail-row detail-row-left">
                                <text class="detail-label">库存</text>
                                <text class="detail-value">{{ getCurrentStock(item) }}</text>
								<text class="detail-value">{{ getMeasureName(item) }}</text>
							</view>
                            <view class="detail-row detail-row-right">
                                <text class="detail-label">状态</text>
                                <text class="detail-value status-text" :class="'line-status-' + getLineStatus(item)">{{ getLineStatusText(item) }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 底部按钮 -->
        <view v-if="applyStatus != null && applyStatus.trim() == 'PREPARE'" class="bottom-buttons">
            <button class="delete-btn" @click="handleDelete">删除</button>
            <button class="confirm-btn" @click="handleConfirm">确认申请</button>
        </view>
        
        <!-- 采购按钮 -->
        <view v-if="showPurchaseButton" class="bottom-buttons">
            <button class="purchase-btn" @click="handlePurchase">采购</button>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref, computed } from 'vue'
    import { getPurchaseApplyById, confirmPurchaseApply, deletePurchaseApply } from '../../api/apply/index'

    const applyId = ref<string>("")
    const applyCode = ref<string>("")
    const applyStatus = ref<string>("")
    const purchaseStatus = ref<string>("")
    const createTime = ref<string>("")
    const nickName = ref<string>("")
    const lineList = ref<UTSJSONObject[]>([])

    const showPurchaseButton = computed((): boolean => {
        const status = applyStatus.value
        if (status != null && status.trim() === 'CONFIRMED') {
            return true
        }
        return false
    })

    const applyStatusText = computed((): string => {
        const status = applyStatus.value
        switch (status) {
            case 'PREPARE': return '待确认'
            case 'CONFIRMED': return '已确认'
            case 'APPROVING': return '审批中'
            case 'APPROVED': return '已审批'
            case 'FINISHED': return '已完成'
			case 'WAITOUT': return '待出库'
            case 'CANCEL': return '已取消'
            default: return status
        }
    })

    const getPurchaseStatusText = (status: string): string => {
        switch (status) {
            case '0': return '未申购'
            case '1': return '已申购'
            default: return ''
        }
    }

    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['quantityApply']
        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['status']
        return val != null ? val.toString() : ''
    }
    const getLineStatusText = (item: UTSJSONObject): string => {
        if (item == null) return ''
        const val = item['status']
        const status = val != null ? val.toString() : ''
        switch (status) {
            case '1': return '草稿'
            case '2': return '待领取'
            case '3': return '已申请采购'
            case '4': return '已申请采购/出库'
            case '5': return '已完成'
            case '6': return '已取消'
			case '7': return '部分出库'
            default: return status
        }
    }

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

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

    const loadDetail = (): void => {
        if (applyId.value.length === 0) return
        getPurchaseApplyById(applyId.value).then((response: any) => {
            const res = response as UTSJSONObject
			const data = res["data"] as UTSJSONObject
            applyCode.value = data['applyCode'] != null ? data['applyCode'].toString() : ''
            applyStatus.value = data['status'] != null ? data['status'].toString() : ''
			purchaseStatus.value = data['applyStatus'] != null ? data['applyStatus'].toString() : ''
            createTime.value = data['createTime'] != null ? data['createTime'].toString() : ''
            nickName.value = data['nickName'] != null ? data['nickName'].toString() : ''    
            const lines = data['wmPurchaseApplyLineList']
            if (lines != null) {
                lineList.value = (lines as UTSJSONObject[])
            }
        }).catch((e) => {
            const error = e as UTSError
            const errMsg = error?.message
            uni.showToast({ title: errMsg.toString(), icon: 'none' })
        })
    }

    const handleConfirm = (): void => {
        uni.showModal({
            title: '提示',
            content: '确认提交该申请单？',
            success: (res) => {
                if (res.confirm) {
                    const data = new UTSJSONObject()
                    data['applyId'] = parseInt(applyId.value)
                    data['status'] = 'CONFIRMED'
                    
                    confirmPurchaseApply(data).then((res: any) => {
                        uni.showToast({ title: '确认成功', icon: 'success' })
                        applyStatus.value = 'CONFIRMED'
                        loadDetail()
                    }).catch((e) => {
                        const error = e as UTSError
                        const errMsg = error?.message
                        uni.showToast({ title: errMsg.toString(), icon: 'none' })
                    })
                }
            }
        })
    }

    const handleDelete = (): void => {
        uni.showModal({
            title: '提示',
            content: '确定要删除该申请单吗？',
            success: (res) => {
                if (res.confirm) {
                    deletePurchaseApply(applyId.value).then((res: any) => {
                        uni.showToast({ title: '删除成功', icon: 'success' })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    }).catch((e) => {
                        const error = e as UTSError
                        const errMsg = error?.message
                        uni.showToast({ title: errMsg.toString(), icon: 'none' })
                    })
                }
            }
        })
    }

    const handlePurchase = (): void => {
        const hasPurchased = purchaseStatus.value != null && purchaseStatus.value.trim() === '1'
        
        if (hasPurchased) {
            uni.showModal({
                title: '提示',
                content: '该单据已申购，继续采购将重复申购，确定继续吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.navigateTo({
                            url: `/pages/purchase/createByApply?applyIds=${applyId.value}`
                        })
                    }
                }
            })
        } else {
            uni.navigateTo({
                url: `/pages/purchase/createByApply?applyIds=${applyId.value}`
            })
        }
    }

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

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

    .debug-info {
        padding: 20rpx;
        background-color: #ff0000;
        color: #ffffff;
    }

    .page-content {
        flex: 1;
        padding: 20rpx;
    }
    
    .page-content.has-bottom-buttons {
        padding-bottom: 130rpx;
    }

    .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-WAITOUT {
            color: #fa8c16;
        }
        &.status-APPROVED {
            color: #52c41a;
        }
        &.status-FINISHED {
            color: #52c41a;
        }
        &.status-CANCEL {
            color: #c1c1c1;
        }
        &.line-status-1 {
            color: #faad14;
        }
        &.line-status-2 {
            color: #ff0000;
        }
        &.line-status-3 {
            color: #722ed1;
        }
        &.line-status-7 {
            color: #fa8c16;
        }
        &.line-status-5 {
            color: #52c41a;
        }
        &.line-status-6 {
            color: #a9a9a9;
        }
        
        &.purchase-status-0 {
            color: #faad14;
        }
        
        &.purchase-status-1 {
            color: #52c41a;
        }
    }

    .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: 8rpx;
        padding: 20rpx;
        margin-bottom: 16rpx;

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

    .material-info {
        margin-bottom: 16rpx;
    }

    .material-name {
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
    }

    .material-spec {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
    }

    .material-detail {
        flex-direction: row;
        flex-wrap: wrap;
        margin: -8rpx;
    }

    .detail-row {
        flex-direction: row;
        width: 50%;
        padding: 8rpx;
        box-sizing: border-box;
    }
    
    .detail-row-left {
        justify-content: flex-start;
    }
    
    .detail-row-right {
        justify-content: flex-end;
    }

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

    .detail-value {
        font-size: 26rpx;
        color: #333333;

        &.quantity-value {
            color: #007aff;
            font-weight: bold;
        }
    }

    .bottom-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20rpx 30rpx;
        background-color: #ffffff;
        border-top: 1rpx solid #e5e5e5;
        flex-direction: row;
        justify-content: space-between;
    }

    .delete-btn {
        flex: 1;
        height: 80rpx;
        background-color: #ff4d4f;
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 600;
        border-radius: 20rpx;
        border: none;
        margin-right: 20rpx;
    }

    .confirm-btn {
        flex: 1;
        height: 80rpx;
        background-color: #007aff;
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 600;
        border-radius: 20rpx;
        border: none;
    }

    .purchase-btn {
        width: 100%;
        height: 80rpx;
        background-color: #52c41a;
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 600;
        border-radius: 20rpx;
        border: none;
    }
</style>