JCSS / jcss-miniprogram

  <template>
    <view class="page-container">
      <!-- 顶部吸顶区域 -->
      <up-sticky>
        <view class="sticky-header">
          <!-- 状态Tabs -->
          <up-tabs
              v-model="activeStatus"
              :list="statusTabs"
              line-width="40rpx"
              active-color="#1989fa"
              inactive-color="#666"
              :scrollable="true"
              class="status-tabs"
              @click="handleStatusChange"
          ></up-tabs>
  
          <!-- 搜索框 -->
          <up-search
              v-model="searchValue"
              :placeholder="searchPlaceholder"
              bg-color="#f5f5f5"
              shape="round"
              :show-action="true"
              actionText="搜索"
              :animation="true"
              @search="handleSearch"
              @custom="handleSearch"
              :clearabled="false"
              maxlength="50"
              class="search-input"
          ></up-search>
        </view>
      </up-sticky>
  
      <!-- 分页列表区域 -->
      <z-paging
          ref="pagingRef"
          v-model="planList"
          @query="queryList"

          :auto-show-system-loading="true"

      >
        <!-- 空数据插槽 -->
        <template #empty>

          <empty-view/>

        </template>

        <view class="common-card-list" style=" padding-top: 170rpx;">
          <up-card
              :border="false"
              :foot-border-top="false"
              v-for="(item,index) in planList"
              :key="`${item.planNo}_${index}`"

          >

            <!-- 自定义标题区域 -->
            <template #head>
              <view class="card-header">
                <view class="common-card-title  u-line-1">{{ item.planName || '无计划名称' }}</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
                        type="primary"
                        size="mini"
                        @click="submitRecord(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.finishPercent || 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>
      </z-paging>
    </view>
  </template>
  
  <script setup>

  import { ref } from 'vue'

  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { timeFormat } from '@/uni_modules/uview-plus'
  import { getRoadDetails } from "@/api/maintain-manage/maintain-manage";

  // ========== 基础数据定义 ==========

  const statusTabs = ref([

    {name: '待完成', id: '1'},
    {name: '已失效', id: '3'},
    {name: '已完成', id: '2'}

  ])

  const activeStatus = ref('1')
  const searchValue = ref('')
  const planList = ref([])
  const pagingRef = ref(null)
  const loading = ref(false)
  const roadId = ref('')
  const finishState = ref('')

  // 搜索占位符

  const searchPlaceholder = ref('请输入计划名称')

  // ========== 方法定义 ==========

  const getUrlParams = (options) => {

    if (options?.roadId) {
      roadId.value = options.roadId

      console.log('从URL获取的roadId：', roadId.value)

    }

    if (options?.finish_state) {
      finishState.value = options.finish_state

      activeStatus.value = options.finish_state
      console.log('从URL获取的finish_state：', finishState.value)
    }
  }

  const handleStatusChange = (item) => {
    console.log('切换状态：', item)
    activeStatus.value = item.id

    finishState.value = item.id

    pagingRef.value?.reload()
  }

  const handleSearch = () => {
    console.log('搜索关键词：', searchValue.value)

    pagingRef.value?.reload()
  }

  const submitRecord = (item) => {
    console.log('提交记录：', item.finishPercent)
    if (item.finishPercent == 0) {
      uni.navigateTo({
        url: `/pages-sub/daily/maintain-manage/add-record?finishState=${item.finishState}&planNo=${item.planNo}&finishPercent=${item.finishPercent}`
      })
    } else {
      uni.navigateTo({
        url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&finishPercent=${item.finishPercent}&planTypeId=${item.planTypeId}`
      })

    }

  }

  const queryList = async (pageNo, pageSize) => {
    try {
      loading.value = true

      const paramsData = {
        pageNo: pageNo,
        pageSize: pageSize,

        roadId: roadId.value,
        finishState: finishState.value || activeStatus.value,

        planName: searchValue.value.trim()
      }

      console.log('请求参数：', paramsData)

      const res = await getRoadDetails(paramsData)
      console.log(res)

      const listData = res?.list || res || []

      pagingRef.value?.complete(listData)
      loading.value = false
    } catch (error) {
      console.error('请求失败：', error)

      uni.showToast({title: '加载失败，请重试', icon: 'none'})

      pagingRef.value?.complete(false)
      loading.value = false
    }
  }

  // ========== 生命周期 ==========

  onLoad((options) => {

    getUrlParams(options)

  })

  onShow(() => {

    if (roadId.value) {
      pagingRef.value?.reload()
    }

  })
  

  </script>
  
  <style scoped lang="scss">
  .page-container {

  }
  
  // 顶部吸顶区域样式
  .sticky-header {
    background-color: #ffffff;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #eee;
  

    .search-input {
      margin: 20rpx 20rpx 10rpx !important;
    }
  }
  

  </style>