JCSS / jcss-miniprogram

<template>
  <view class="page-wrap">
    <!-- 顶部提示栏 -->
    <view class="tip-bar" v-if="isView==1" >
      一个任务可提交多次上报记录，每一次作业需如实上报。
    </view>
    <!-- 上报记录列表 -->
    <view class="list-wrap" v-if="reportList.length > 0">
      <view class="report-item" v-for="(item, index) in reportList[0].workRecords" :key="index">
        <view class="item-title">【第{{ item.sortNum || (index + 1) }}次上报】{{ planName }}</view>
        <view class="item-row item-row-bottom">
          <view class="item-time">提交时间：{{ timeFormat(item.createTime,'yyyy-mm-dd hh:MM:ss')}}</view>
          <view class="look-btn" @click="handleView(index,item,reportList[0])">查看</view>
        </view>
      </view>
    </view>
    <!-- 暂无数据 -->
    <view class="empty-wrap" v-else>
      <empty-view text="暂无数据"></empty-view>
    </view>
    <!-- 底部固定按钮 -->
    <view class="fixed-bottom-btn-wrap" v-if="isView==1">
      <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 dataList = ref<any[]>([])
const reportList = ref<any[]>([])

let planNo = ref('')
let planTypeId = ref('')
let businessType = ref('')
let planName = ref('')
let isView = ref(true)
// 存储commitState=1对应的commitId，没有则为空字符串
const currentCommitId = ref('')

// onLoad接收url传过来的planNo
onLoad((options) => {
  if (options.planNo) {
    planNo.value = options.planNo
    planTypeId.value = options.planTypeId
    businessType.value = options.businessType
    isView.value = options.isView
    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
    dataList.value = res?.list[0].workRecords
    planName.value = res?.list[0].planName
    reportList.value = res?.list || []



    // ============ 新增逻辑：寻找commitState ===1 的commitId ============
    currentCommitId.value = ''
    if(reportList.value.length > 0){
      // 找到第一条 commitState ===1 的数据
      const activeItem = reportList.value.find(item => item.commitState === 1)
      if(activeItem){
        currentCommitId.value = activeItem.commitId || ''
      }
      // 没有找到 activeItem，currentCommitId保持 ''
    }
    // reportList为空直接 currentCommitId=''

  } catch (err) {
    console.error('获取上报记录失败', err)
    // uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}
// 查看上报详情
const handleView = (index,item,i) => {
  console.log('查看详情', item)
  console.log('查看详情', index)
  uni.navigateTo({
    // 后端 page 接口支持 commitId 精确过滤，必须带上，否则会把该计划全部上报都展示出来
    url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${i.planNo}&commitId=${i.commitId}&index=${index}`
  })
}
// 新增上报记录，把planNo + currentCommitId带到新增页面
const handleAddReport = () => {
  console.log('上报本次记录', currentCommitId.value)
  uni.navigateTo({
    url: `/pages-sub/daily/maintain-manage/add-record?planNo=${planNo.value}&planTypeId=${planTypeId.value}&businessType=${businessType.value}&commitId=${currentCommitId.value}`
  })
}
</script>
<style scoped lang="scss">
.page-wrap {
  min-height: 100vh;
  // 底部固定栏（按钮 88rpx + 上下各 24rpx）+ 安全区
  padding-bottom: calc(136rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(136rpx + env(safe-area-inset-bottom));
  background: #F4F6FA;
}
// 顶部提示条：浅蓝底 + 蓝字 + 圆形感叹号（设计稿 .banner）
.tip-bar {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  margin: 24rpx 24rpx 0;
  padding: 16rpx 24rpx;
  background-color: #EBF3FF;
  border-radius: 16rpx;
  color: #2563EB;
  font-size: 24rpx;
  line-height: 1.6;

  &::before {
    content: "!";
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 30rpx;
    height: 30rpx;
    margin-top: 4rpx;
    line-height: 26rpx;
    text-align: center;
    font-size: 22rpx;
    font-weight: 600;
    color: #2563EB;
    border: 2rpx solid #2563EB;
    border-radius: 50%;
  }
}
// 记录卡片列表：卡片之间 24rpx（设计稿 .body）
.list-wrap {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 24rpx;
}
// 卡片：白底 / 8px 圆角 / 卡片阴影（设计稿 .card）
.report-item {
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);

  .item-title {
    font-size: 32rpx;
    color: #1F2937;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 16rpx;
  }
  .item-row {
    font-size: 26rpx;
    color: #1F2937;
    margin-bottom: 12rpx;
  }
  .item-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
  }
  // 查看：次要操作，白底描边（设计稿 .btn 次级按钮）
  .look-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120rpx;
    height: 56rpx;
    padding: 0 24rpx;
    font-size: 24rpx;
    color: #1F2937;
    background-color: #ffffff;
    border: 1rpx solid #E8EBF0;
    border-radius: 8rpx;
    flex-shrink: 0;
  }
}
.empty-wrap {
  padding-top: 120rpx;
}
// 底部固定操作栏：白底 + 上分隔线 + 蓝色渐变主按钮（设计稿 .bar / .btn.pri）
.fixed-bottom-btn-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 24rpx 24rpx calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
  border-top: 1rpx solid #E8EBF0;

  :deep(.u-button) {
    height: 88rpx !important;
    border-radius: 16rpx !important;
    border: none !important;
    /* 与顶部导航栏同色 */
    background-color: #2563EB !important;
    background-image: none !important;
  }

  :deep(.u-button__text) {
    font-size: 30rpx !important;
    font-weight: 500 !important;
  }
}
</style>