JCSS / jcss-miniprogram

  <template>
    <view class="page-container">
      <!-- 顶部固定区域：Tabs + 搜索框 -->

      <up-sticky>
        <view class="sticky-header">

        <u-tabs
            :list="tabList"
            :is-scroll="false"
            :activeStyle="{
            color: '#3c9cff',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
          }"
            :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
          }"
            font-size="28rpx"
            @change="handleTabChange"
        ></u-tabs>

        <up-search
            v-model="searchValue"
            placeholder="请输入道路名称"
            bg-color="#f5f5f5"
            shape="round"
            :show-action="true" actionText="搜索" :animation="true"
            @search="handleSearch"
            @custom="handleSearch"
            :clearabled="false"
            maxlength="50"
            style="margin: 20rpx 20rpx 0"
        ></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: 94px;">
  
          <up-card
              :border="false"
              :foot-border-top="false"
              :head-border-bottom="false"
              v-for="(item,index) in planList"
              :key="`${item.batchNo}_${index}`"
              :show-head="false"
          >
            <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.roadName || '-' }}</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.streetName }}
                  </view>

                </view>

                <view class="u-body-item u-flex common-item-center common-justify-between">
                  <view class="u-body-item-title">养护级别： {{uni.$dict.getDictLabel('conserve_level', item.levelId) || '-'}}</view>
                  <view class="u-line-1">
                    <up-button
                        type="primary"
                        size="mini"
                        @click="gotoDetail(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">{{uni.$dict.getDictLabel('inspection_maintain_type', item.planTypeId)}}</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 { timeFormat } from '@/uni_modules/uview-plus';
  import { ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { inspectionPlanPage } from "@/api/patrol-manage/patrol-plan";
  // Tabs 配置
  const tabList = ref([
    {name: '待完成', id: '1'},
    {name: '已失效', id: '3'},
    {name: '已完成', id: '2'}
  ]);

  const pagingRef = ref(null)

  const activeTab = ref('1');
  // 搜索相关
  const searchValue = ref('');
  // 分页相关

  // const pageNo = ref(1);
  // const pageSize = ref(10);

  
  const planList = ref([]);

  
  
  // Tab切换
  const handleTabChange = (val) => {
    console.log(val)
    console.log(activeTab.value)
    activeTab.value = val.id
    searchValue.value = ''

    pagingRef.value.reload()

  };
  // 搜索/清空搜索
  const handleSearch = () => {
    // searchValue.value = '';
    console.log(searchValue.value)

    pagingRef.value.reload()

  };
  const handleSearchClear = () => {
    // searchValue.value = ''

    pagingRef.value.reload()

  };
  // 加载数据
  const queryList = async (pageNo, pageSize) => {
    try {
      const params = {
        roadName: searchValue.value.trim() || '',
        pageNo: pageNo,
        pageSize: pageSize,
        finishState: activeTab.value
      };
      console.log('请求参数：', params);
      const res = await inspectionPlanPage(params);
      console.log('接口返回：', res);

      pagingRef.value.complete(res.list);

    } catch (error) {
      console.error('加载失败：', error);
      // 修复点4：加载失败调用complete(false)

      pagingRef.value?.complete(false);

      uni.showToast({title: '加载失败，请重试', icon: 'none'});
    }
  };
  // 跳转明细
  const gotoDetail = (item) => {
    uni.navigateTo({

      url: `/pages-sub/daily/patrol-manage/pending-plan-detail?batchNo=${item.batchNo}&status=${activeTab.value}`

    });
  };
  // 修复点5：优化页面生命周期逻辑
  onLoad(() => {

    // auto=true时，z-pagingRef会自动触发query，此处可省略手动调用；若需强制初始化，可加：
    // pagingRef.value?.triggerQuery();

  });
  // 仅在页面从明细页返回时，若有数据则刷新当前tab数据（避免干扰上拉加载）
  onShow(() => {

    pagingRef.value?.reload()

  });
  </script>
  
  <style scoped lang="scss">

  .page-container {

  }

  .sticky-header {
    background-color: #ffffff;
    padding-bottom: 10rpx;

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

  }

  </style>