pages-sub/daily/patrol-manage/pending-plan-detail.vue

<template>
  <view class="page-container">
    <view class="common-card-list" style=" ">
      <up-card
          :border="false"
          :foot-border-top="false"
          v-for="(item,index) in planInfo"
          :key="`${item.planNo}_${index}`"
      >
        <!-- 自定义标题区域 -->
        <template #head>
          <view class="card-header">
            <view class="common-card-title common-name">{{ item.planName || '无计划名称' }}{{
                item.planName || '无计划名称'
              }}
            </view>
            <!-- 已失效标识 -->
            <view v-show="item.finishState == 3 " class="common-invalid-tag">已失效</view>
            <view v-show="item.finishState == 2 " class="common-finish-tag">已完成</view>
          </view>
        </template>
        <template #body>
          <view class="card-body">
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">计划编码：</view>
              <view class="u-line-1 u-body-value">{{ item.planNo || '-' }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">养护周期：</view>
              <view class="u-line-1 u-body-value">{{ item.rate || '-' }}
                {{ uni.$dict.getDictLabel('cycle_id_type', item.cycleId) }}
              </view>
            </view>
            <view class="u-body-item u-flex common-item-center common-justify-between">
              <view class="u-body-item-title">计划完成次数： {{ item.planNum || 0 }}</view>
              <view class="u-line-1">
                <up-button
                    v-if="item.finishState ==3"
                    type="primary"
                    size="mini"
                    @click=""
                    class="submit-record-btn"
                    :disabled="true"
                >
                  补交记录
                </up-button>
                <up-button
                    v-if="item.finishState !== 3 && item.planFinishNum > 0"
                    type="primary"
                    size="mini"
                    @click="gotoFinishPlanDetail(item)"
                    class="submit-record-btn"
                >
                  提交记录
                </up-button>
              </view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">已完成次数：</view>
              <view class="u-line-1 u-body-value">{{ item.planFinishNum || 0 }}</view>
            </view>
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">计划有效期：</view>
              <view class="u-line-1 u-body-value">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') || '-' }} 至
                {{ timeFormat(item.endTime, 'yyyy-mm-dd') || '-' }}
              </view>
            </view>
          </view>
        </template>
      </up-card>
    </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?planNo=${i.planNo}`
  });
};
// 新增记录
const addNewRecord = () => {
  uni.navigateTo({
    url: `/pages-sub/daily/patrol-manage/add-patrol-record?planNo=${planInfo.value[0].planNo}&batchNo=${batchNo.value}`,
  });
};
</script>
<style scoped lang="scss">
</style>