JCSS / jcss-miniprogram

<template>
  <view class="page-container">
    <!-- 计划详情卡片区域（统一卡片样式） -->
    <view class="page-body">
      <view class="plan-card-wrap" v-for="(i, index) in planInfo" :key="`${i.planNo}_${index}`">

        <!-- 计划名称 -->
        <view class="form-card form-card--title">
          <view class="card-title">{{ i.planName || '无计划名称' }}</view>
        </view>

        <!-- 计划信息 -->
        <view class="form-card">
          <view class="sec-head">
            <view class="sec-bar"></view>
            <view class="sec-title">计划信息</view>
          </view>

            <!-- 计划编码 -->
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">计划编码：</view>
              <view class="u-line-1 u-body-value">{{ i.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">
                {{ i.rate || '-' }} {{ uni.$dict.getDictLabel('cycle_id_type', i.cycleId) }}
              </view>
            </view>

<!--            &lt;!&ndash; 计划完成次数 &ndash;&gt;-->
<!--            <view class="u-body-item u-flex">-->
<!--              <view class="u-body-item-title">计划完成次数：</view>-->
<!--              <view class="u-line-1 u-body-value">{{ i.planNum || 0 }} 次</view>-->
<!--            </view>-->

            <!-- 已完成次数 + 查看记录按钮 -->
            <view class="u-body-item u-flex common-item-center common-justify-between">
              <view class="u-body-item-title">已完成次数： {{ i.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(i.beginTime, 'yyyy-mm-dd') || '-' }} 至
                {{ timeFormat(i.endTime, 'yyyy-mm-dd') || '-' }}
              </view>
            </view>

          <!-- 底部操作区（分隔线 + 右对齐按钮） -->
          <view class="card-action-row">
            <view class="mini-btn mini-btn--primary" @click="gotoFinishPlanDetail(i)">查看记录</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部新增记录按钮 -->
    <view class="fixed-bottom-btn-wrap" v-if="finishState==1">
      <up-button
          type="primary"
          size="default"
          @click="addNewRecord"
      >
        新增记录
      </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 { notFinish } from "@/api/maintain-manage/maintain-manage";

// 响应式数据定义（逻辑完全保留）
const planInfo = ref([]);
const batchNo = ref('')
const planNo = ref('')
const finishState = ref('')
const planTypeId = ref('')
const businessType = ref('')


// 页面加载接收参数（逻辑完全保留）
onLoad((options) => {
  planNo.value = options.planNo;
  finishState.value = options.finishState
  planTypeId.value = options.planTypeId
  businessType.value = options.businessType
});

// 页面显示时请求数据（逻辑完全保留）
onShow(() => {
  if (!planNo.value) {
    uni.showToast({
      title: '计划ID不存在',
      icon: 'none'
    });
    return;
  }
  getPlanDetail();
});

// 获取计划详情（逻辑完全保留）
const getPlanDetail = async () => {
  const queryData = {
    planNo: planNo.value,
    planTypeId: planTypeId.value,
    finishState:finishState.value
  }
  console.log(queryData)
  const planInfoRes = await notFinish(queryData)
  planInfo.value = planInfoRes
  console.log(planInfoRes)
};

// 跳转到已完成计划明细（逻辑完全保留）
const gotoFinishPlanDetail = (i) => {
  uni.navigateTo({
    url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${i.planNo}`
  });
};

// 新增记录（逻辑完全保留）
const addNewRecord = () => {
  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-container {
  min-height: 100vh;
  padding-bottom: 200rpx;
  background-color: #F4F6FA;
  box-sizing: border-box;
}

.page-body {
  padding: 0 24rpx;
}

// 白色卡片：8px 圆角 + 卡片阴影（设计稿 .card）
.form-card {
  margin-top: 24rpx;
  padding: 8rpx 24rpx 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
}

// 区块标题：蓝色竖条 + 标题文字
.sec-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx 0 8rpx;
}
.sec-bar {
  width: 6rpx;
  height: 28rpx;
  background-color: #2563EB;
  border-radius: 3rpx;
}
.sec-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #1F2937;
}

/* 计划名称卡片 */
.form-card--title {
  padding: 28rpx 24rpx;
}
.card-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #1F2937;
  line-height: 1.4;
}

/* 信息行 */
.form-card .u-body-item {
  margin-bottom: 12rpx;

  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>