JCSS / jcss-miniprogram

  <template>
    <view class="pending-plan-detail">
      <!-- 计划详情卡片 -->

      <view class="detail-card" v-for="i in planInfo" :key="i.planNo">

        <!-- 标题行 -->
        <view class="detail-item">

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

          <text class="value up-line-1">{{ i.planName || '-' }}</text>

        </view>
  
        <!-- 计划编码行 -->
        <view class="detail-item">
          <text class="label">计划编码：</text>

          <text class="value up-line-1">{{ i.planNo || '-' }}</text>

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

          <text class="value up-line-1">{{ i.rate || '-' }} {{ uni.$dict.getDictLabel('cycle_id_type', i.cycleId) }}
          </text>

        </view>

        <!--      cycle_id_type-->

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

          <text class="value up-line-1">{{ i.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.i || 0 }} 次</text>

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

          <up-button

              v-if="i.planFinishNum>0"

              type="primary"
              size="mini"

              @click="gotoFinishPlanDetail(i)"

              :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(i.beginTime, 'yyyy-mm-dd') }} 至
            {{ timeFormat(i.endTime, 'yyyy-mm-dd') }}
          </text>

        </view>
      </view>
  

      <!-- 底部新增记录按钮     status=3-->
      <view class="fixed-bottom-btn-wrap" v-if="finishState==1">

        <up-button

            type="primary"
            size="default"

            @click="addNewRecord"

            :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 planNo = ref('')

  const finishState = ref('')

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

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

    // planNo.value = options.planNo;

    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

    console.log(planInfoRes)

  };

  // 跳转到已完成计划明细

  const gotoFinishPlanDetail = (i) => {

    uni.navigateTo({

      url: `/pages-sub/daily/patrol-manage/finish-plan-detail/index?planNo=${i.planNo}`

    });
  };

  // 新增记录
  const addNewRecord = () => {

    uni.navigateTo({

      url: `/pages-sub/daily/patrol-manage/add-patrol-record/index?planNo=${planInfo.value[0].planNo}&batchNo=${batchNo.value}`,

    });
  };
  </script>
  
  <style scoped lang="scss">
  .pending-plan-detail {

  }
  
  .detail-card {
    padding: 20rpx;
    background-color: #fff;

    margin-bottom: 20px;

  }
  
  .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>