pages-sub/daily/maintain-manage/now-list-page.vue

<template>
    <view class="page-wrap">
        <!-- 顶部提示栏 -->
        <view class="tip-bar">
            一个任务可提交多次上报记录，每一次作业需如实上报。
        </view>
        <!-- 上报记录列表 -->
        <view class="list-wrap" v-if="reportList.length > 0">
            <view class="report-item" v-for="(item, index) in reportList" :key="index">
                <view class="item-title">【第{{ index+1 }}次上报】{{ item.planName }}{{ item.planName }}</view>
                <view class="item-row item-row-bottom">
                    <view class="item-time">提交时间：{{ timeFormat(item.createTime,'yyyy-mm-dd')}}</view>
                    <view class="look-btn" @click="handleView(item)">查看</view>
                </view>
            </view>
        </view>
        <!-- 暂无数据 -->
        <view class="empty-wrap" v-else>
            <empty-view text="暂无数据"></empty-view>
        </view>
        <!-- 底部固定按钮 -->
        <view class="fixed-bottom-btn-wrap">
            <up-button type="primary" size="large" block @click="handleAddReport">上报本次记录</up-button>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { maintainPlanList } from "@/api/maintain-manage/maintain-manage";
import {timeFormat} from '@/uni_modules/uview-plus';
// 上报记录数据
const reportList = ref<any[]>([])
let planNo = ref('')
let planTypeId = ref('')
let businessType = ref('')
// onLoad接收url传过来的planNo
onLoad((options) => {
    if (options.planNo) {
        planNo.value = options.planNo
         planTypeId.value = options.planTypeId
          businessType.value = options.businessType
        // planTypeId=${item.planTypeId}&businessType=${item.busiLine}
        getReportList()
    } else {
        uni.showToast({ title: 'planNo参数缺失', icon: 'none' })
    }
})
// 请求上报记录接口
const getReportList = async () => {
    console.log('3123')
    uni.showLoading({ title: '加载中...', mask: true })
    try {
        // 传入planNo调取接口
        let data = {
            planNo: planNo.value,
            pageNo: 1,
            pageSize: 10
        }
        const res = await maintainPlanList(data)
        // 接口返回list，无数据则reportList为空，页面自动显示empty
        reportList.value = res?.list || []
    } catch (err) {
        console.error('获取上报记录失败', err)
        uni.showToast({ title: '加载失败', icon: 'none' })
    } finally {
        uni.hideLoading()
    }
}
// 查看上报详情
const handleView = (item) => {
    console.log('查看详情', item)
    uni.navigateTo({
        url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${item.planNo}`
    })
}
// 新增上报记录，把planNo带到新增页面
const handleAddReport = () => {
    console.log('上报本次记录')
    uni.navigateTo({
        url: `/pages-sub/daily/maintain-manage/add-record?planNo=${planNo.value}&planTypeId=${planTypeId.value}&businessType=${businessType.value}`
    })
}
</script>
<style scoped lang="scss">
.page-wrap {
    min-height: 100vh;
    padding-bottom: 120rpx; // 给底部按钮预留空间
    background: #ffffff;
}
// 顶部黄色提示条
.tip-bar {
    background-color: #f9e0a2;
    color: #6b4b00;
    font-size: 28rpx;
    padding: 24rpx 20rpx;
    line-height: 1.5;
}
.list-wrap {
    padding: 0;
}
.report-item {
    padding: 30rpx 24rpx;
    border-bottom: 1rpx solid #eee;
    .item-title {
        font-size: 32rpx;
        color: #222;
        font-weight: 500;
        margin-bottom: 20rpx;
    }
    .item-row {
        font-size: 28rpx;
        color: #555;
        margin-bottom: 12rpx;
    }
    .item-row-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
    }
    .look-btn {
        font-size: 28rpx;
        color: #1989fa;
    }
}
.empty-wrap {
    padding-top: 120rpx;
}
.fixed-bottom-btn-wrap {
    //   position: fixed;
    //   bottom: 0;
    //   left:0;
    //   width:100%;
    //   padding:20rpx;
    //   background:#fff;
}
</style>