UniappVue3/src/pages/TodayExamine/index.vue

<!-- 今日检查项 -->
<template>
    <view class="PageBox">
        <view class="TopBox FlexBox">
            <view class="iconBox FlexBox">
                <!-- 返回列表页 -->
                <u-icon name="arrow-leftward" size="24" @click="goBack"></u-icon>
            </view>
            <view class="Title">今日风险检查项</view>
            <view class="informBox">
                <u-icon name="bell-fill" size="24"></u-icon>
                <view class="MsgTxt"></view>
            </view>
        </view>
        <view class="ContentBox">
            <view class="ListBox">
                <view class="ListItem" v-for="item in checkItemList" :key="item.id">
                    <view class="LabelBox">{{ item.checkItemName }}</view>
                    <view class="ValueBox">
                        <u-radio-group v-model="item.value" @change="change(item)">
                            <u-radio label="合格" :name="'合格'" :border-color="item.value === '合格' ? '#ff9900' : '#c5d5d6'"></u-radio>
                            <u-radio label="不合格" :name="'不合格'" :border-color="item.value === '不合格' ? '#ff9900' : '#c5d5d6'"></u-radio>
                        </u-radio-group>
                    </view>
                </view>
            </view>
        </view>
        <view class="FootBox">
            <u-button type="primary" plain>保存草稿</u-button>
            <u-button type="primary">提交检查项</u-button>
        </view>
    </view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getProjectImplementationDetail } from '@/api'

// 检查项列表
const checkItemList = ref([])

// 返回列表页
const goBack = () => {
    uni.navigateBack({
        delta: 1
    })
}

// 获取项目详情并提取检查项
const fetchCheckItems = async (projectId) => {
    try {
        const data = await getProjectImplementationDetail(projectId)
        if (data && data.riskControlCard && data.riskControlCard.checkItems && data.riskControlCard.checkItems.length > 0) {
            // 将接口返回的checkItems转换为页面需要的格式，并按sortOrder排序
            checkItemList.value = data.riskControlCard.checkItems
                .map(item => ({
                    id: item.checkItemId,
                    checkItemName: item.itemDescription,
                    value: item.checkResult === '合格' ? '合格' : (item.checkResult || ''),
                    checkItemId: item.checkItemId,
                    templateItemId: item.templateItemId,
                    sortOrder: item.sortOrder || 0,
                    originalData: item // 保留原始数据，方便后续提交
                }))
                .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
        } else {
            uni.showToast({
                title: '暂无检查项数据',
                icon: 'none'
            })
            checkItemList.value = []
        }
    } catch (error) {
        console.error('获取检查项数据失败:', error)
        uni.showToast({
            title: '获取检查项数据失败',
            icon: 'none'
        })
        checkItemList.value = []
    }
}

// 单选改变事件
const change = (item) => {
    console.log('检查项选择改变:', item)
}

// 页面加载时获取数据
onMounted(() => {
    // 从URL参数获取项目ID
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const options = currentPage.options || {}
    const projectId = options.projectId || options.id
    
    if (projectId) {
        fetchCheckItems(projectId)
    } else {
        uni.showToast({
            title: '缺少项目ID参数',
            icon: 'none'
        })
    }
})
</script>

<style lang="scss" scoped>
.FlexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
}

.PBasicBox {
    padding: 20rpx;
    background-color: #fff;

    .LabelBox {
        font-size: 24rpx;
        color: #666;
        margin-top: 20rpx;
    }

    .LabelBoxTxt {
        font-size: 24rpx;
        color: #333;
        font-weight: bold;
    }
}

.PageBox {
    background-color: #ff9900;
    height: 100vh;
    overflow: hidden;

    .TopBox {
        height: 100rpx;
        padding: 20rpx;
        background-color: #fff;

        .iconBox {
            font-size: 32rpx;
        }

        .Title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }

        .informBox {
            .MsgTxt {
                padding: 8rpx;
                background-color: hsla(17, 100%, 50%, 0.849);
                color: #fff;
                position: absolute;
                top: 16rpx;
                right: 16rpx;
                border-radius: 50%;
            }
        }
    }

    .ContentBox {
        background-color: #c5d5d6;
        height: calc(100vh - 250rpx);
        overflow: hidden;
    }

    .FootBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 150rpx;
        gap: 20rpx;
        padding: 20rpx;
        background-color: #fff;
        font-weight: bold;
    }
}

.ListBox {
    height: 100%;
    padding: 20rpx;
    background-color: #fff;
    overflow: auto;
    .ListItem {
       margin-bottom: 20rpx;
       .LabelBox {
        font-weight: bold;
        font-size: 28rpx;
        color: #333;
        margin-top: 20rpx;
       }
    }
}
</style>