JCSS / jcss-miniprogram

  <template>
    <view class="pending-plan-detail">
      <!-- 计划详情卡片 -->
      <view class="detail-card">
        <!-- 标题行 -->
        <view class="detail-item">

          <text class="label">计划名称：</text>

          <text class="value up-line-1">{{ planInfo && planInfo.title ? planInfo.title : '-' }}</text>
        </view>
  
        <!-- 计划编码行 -->
        <view class="detail-item">
          <text class="label">计划编码：</text>

          <text class="value up-line-1">{{ planInfo.planNo ? planInfo.planNo : '-' }}</text>

        </view>
  
        <!-- 养护周期行 -->
        <view class="detail-item">
          <text class="label">养护周期：</text>

          <text class="value up-line-1">{{ planInfo && planInfo.rate ? planInfo.rate : '-' }}</text>

        </view>
  
        <!-- 计划完成次数行 -->
        <view class="detail-item">
          <text class="label">计划完成次数：</text>

          <text class="value up-line-1">{{ planInfo && planInfo.planNum ? planInfo.planNum : 0 }} 次</text>

        </view>
  
        <!-- 已完成次数行 + 查看记录按钮 -->
        <view class="detail-item flex-between">
          <view class="left-wrap">
            <text class="label">已完成次数：</text>

            <text class="value up-line-1">{{ planInfo && planInfo.planFinishNum ? planInfo.planFinishNum : 0 }} 次</text>

          </view>
          <!-- 查看记录按钮（限制宽度+紧凑样式） -->

          <up-button

              type="primary"
              size="mini"

              @click="gotoFinishPlanDetail"

              :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"

          >
            查看记录

          </up-button>

        </view>
  
        <!-- 计划有效期行 -->
        <view class="detail-item">
          <text class="label">计划有效期：</text>

  <!--        <text class="value up-line-1">{{ planInfo && planInfo.validTime ? planInfo.validTime : '-' }}</text>-->
          <text class="value up-line-1">{{ timeFormat(planInfo.beginTime,'yyyy-mm-dd')}} 至 {{ timeFormat(planInfo.endTime,'yyyy-mm-dd')}} </text>

        </view>
      </view>
  
      <!-- 底部新增记录按钮 -->

      <view class="fixed-bottom-btn-wrap">
        <up-button

            type="primary"
            size="default"

            @click="submit"
            :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"

        >
          新增记录

        </up-button>

      </view>
    </view>
  </template>
  
  <script setup>

  import { timeFormat } from '@/uni_modules/uview-plus';

  import { ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';

  import { inspectionPlanDetail } from "@/api/patrol-manage/patrol-plan";

  // 响应式数据定义

  const planInfo = ref({});
  const batchNo = ref('')
  const finishState = ref('')

  // 页面加载接收参数
  onLoad((options) => {

    console.log('计划ID：', options.batchNo);
    batchNo.value = options.batchNo;
    finishState.value = options.status

  });

  // 页面显示时请求数据
  onShow(() => {

    if (!batchNo.value) {

      uni.showToast({
        title: '计划ID不存在',
        icon: 'none'
      });
      return;
    }

    getPlanDetail(batchNo.value);

  });

  const getPlanDetail = async () => {
    const queryData = {
      batchNo: batchNo.value,
      finishState: finishState.value
    }
    console.log(queryData)
    const planInfoRes = await inspectionPlanDetail(queryData)
    planInfo.value = planInfoRes[0]
    console.log(planInfoRes)

  };

  // 跳转到已完成计划明细
  const gotoFinishPlanDetail = () => {

    uni.navigateTo({

      url: `/pages-sub/daily/patrol-manage/finish-plan-detail/index?batchNo=${planInfo.value.code}`

    });
  };

  // 新增记录
  const addNewRecord = () => {
    if (!planInfo.value || !planInfo.value.code) {
      uni.showToast({
        title: '计划数据未加载完成',
        icon: 'none'
      });
      return;
    }
    uni.navigateTo({

      url: `/pages-sub/daily/patrol-manage/add-patrol-record/index?batchNo=${planInfo.value.code}`

    });
  };
  </script>
  
  <style scoped lang="scss">
  .pending-plan-detail {
    background-color: #f8f8f8;
    display: flex;
    flex-direction: column;
    min-height: 100vh; // 恢复最小高度，保证页面占满屏幕
    padding-bottom: 88rpx; // 给底部按钮留空间
  }
  
  .detail-card {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    flex: 1;
  }
  
  .detail-item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    line-height: 1.8;
    padding: 10rpx 0;
    border-bottom: 1px solid #f5f5f5;
  
    &:last-child {
      border-bottom: none;
    }
  }
  
  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    .left-wrap {
      display: flex;
      align-items: center;
      flex: 1; // 占满剩余空间，按钮靠右
    }
  }
  
  .label {
    color: #999;
    width: 200rpx;
    flex-shrink: 0;
  }
  
  .value {
    color: #333;
    flex: 1;
    word-break: break-all;
  }
  

  </style>