JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <!-- 吸顶区域 -->
      <up-sticky>
        <view class="sticky-wrap">
          <!-- 第一行标签：养护类型 -->
          <up-tabs
              v-model="activeType"
              :list="typeTabs"
              line-width="40rpx"
              active-color="#1989fa"
              inactive-color="#666"
              :scrollable="true"
              class="first-tabs"
              @click="handleTypeChange"
          ></up-tabs>

          <!-- 第二行标签：状态筛选 -->
          <up-tabs
              v-model="activeStatus"
              :list="statusTabs"
              line-width="40rpx"
              active-color="#1989fa"
              inactive-color="#666"
              :scrollable="true"
              class="second-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"
              style="margin: 20rpx 20rpx 0"
          ></up-search>
        </view>
      </up-sticky>
  
      <!-- 内容区域 - 集成z-paging分页 -->
      <z-paging
          ref="pagingRef"
          v-model="currentList"
          @query="fetchData"

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

      >
      <!-- 空数据提示 -->
      <template #empty>
        <empty-view/>
      </template>
  

        <!-- 道路类型卡片 -->

        <view v-if="activeType === '道路'" class="common-card-list" style="padding-top: 144px;">
  
          <up-card
              :border="false"
              :foot-border-top="false"

              :head-border-bottom="false"

              v-for="(item,index) in currentList"
              :key="`${item.planNo}_${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="">

                    <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">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') || '-' }} 至-->
  <!--                  {{ timeFormat(item.endTime, 'yyyy-mm-dd') || '-' }}-->
  <!--                </view>-->
  <!--              </view>-->

              </view>

            </template>
          </up-card>

        </view>
  
        <!-- 其他养护类型卡片（补植/浇水等） -->

        <view v-else class="common-card-list" style="padding-top: 144px;">
  
          <up-card
              :border="false"
              :foot-border-top="false"
              v-for="(item,index) in currentList"
              :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="" v-if="item.finishState!==3">

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

      </z-paging>
    </view>

  </template>
  

  <script setup>

  import { ref, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { roadPage, planTypePage } from "@/api/maintain-manage/maintain-manage";

  import { timeFormat } from '@/uni_modules/uview-plus';
  
  // 初始化响应式数据
  const typeTabs = ref([])
  const statusTabs = ref([
    { name: '待完成', id: '1' },
    { name: '已失效', id: '3' },

    { name: '已完成', id: '2' },
    { name: '已终止', id: '4' }

  ])
  
  // 核心响应式数据
  const activeType = ref('道路')
  const activeStatus = ref('1')
  const searchValue = ref('')
  const pagingRef = ref(null) // z-paging实例
  
  // 分页参数
  const pageSize = ref(10)
  const currentList = ref([]) // z-paging绑定的列表
  
  // 处理字典数据的方法
  const handleDictData = () => {
    // 获取养护类型字典
    const tabList = uni.$dict.getDictSimpleList('maintain_type')
    console.log('原始字典数据：', tabList)
  
    if (!tabList || tabList.length === 0) {
      console.warn('养护类型字典数据为空，请检查字典配置')
      typeTabs.value = [{ name: '道路', planTypeId: '', id: '道路' }]
      return
    }
  
    // 1. 过滤掉临时养护（包含"临时养护"的项）
    const filteredList = tabList.filter(item => !item.label.includes('临时养护'))
  
    // 2. 转换为 {name: 字典原生标签, planTypeId: 字典值, id: 标签名} 格式
    const convertedList = filteredList.map(item => ({
      name: item.label, // 直接使用字典原始名称
      planTypeId: item.value,
      id: item.label // 兼容up-tabs的id字段
    }))
  
    // 3. 补充道路类型（放在第一位）
    convertedList.unshift({
      name: '道路',
      planTypeId: '',
      id: '道路'
    })
  
    // 赋值给typeTabs
    typeTabs.value = convertedList
    console.log('处理后的字典数据：', typeTabs.value)
  }
  
  // 动态搜索框占位符
  const searchPlaceholder = computed(() => {
    return activeType.value === '道路' ? '请输入道路名称' : '请输入计划名称'
  })
  
  // 养护类型切换
  const handleTypeChange = (item) => {
    console.log('切换养护类型：', item)
    activeType.value = item.name
    searchValue.value = ''
    // 重置分页并刷新
    pagingRef.value?.reload()
  }
  
  // 状态筛选切换
  const handleStatusChange = (item) => {
    console.log('切换状态：', item)
    activeStatus.value = item.id
    // 重置分页并刷新
    pagingRef.value?.reload()
  }
  
  // 搜索处理
  const handleSearch = () => {
    console.log('搜索关键词：', searchValue.value)
    // 重置分页并刷新
    pagingRef.value?.reload()
  }
  
  // 核心数据请求方法（适配z-paging的query回调）
  const fetchData = async (pageNo, pageSize) => {
    try {
      let res = null
      // 道路类型请求
      if (activeType.value === '道路') {
        res = await roadPage({
          roadName: searchValue.value.trim(),
          pageNo,
          pageSize,
          finishState: activeStatus.value
        })
      } else {
        // 其他养护类型请求
        // 找到当前类型对应的planTypeId
        const currentType = typeTabs.value.find(item => item.name === activeType.value)
        res = await planTypePage({
          planTypeId: currentType?.planTypeId || '',
          planName: searchValue.value.trim(),
          pageNo,
          pageSize,
          finishState: activeStatus.value
        })
      }
  
      // 告诉z-paging数据加载完成
      // res.list为当前页数据，res.total为总条数（如果接口返回）
      pagingRef.value?.complete(res?.list || [], res?.total)
    } catch (error) {
      console.error('请求失败：', error)
      uni.showToast({ title: '网络异常，请重试', icon: 'none' })
      // 加载失败，告诉z-paging
      pagingRef.value?.complete(false)
    }
  }
  
  // 跳转到计划明细页面
  const goToDetail = (item) => {
    uni.navigateTo({
      url: `/pages-sub/daily/maintain-manage/road-detail-list?roadId=${item.roadId}&finish_state=${item.finishState || ''}`
    })
  }
  
  // 提交记录
  const submitRecord = (item) => {

    console.log('提交记录：', item)

    if (item.planFinishNum == 0) { // 去新增

      uni.navigateTo({

        url: `/pages-sub/daily/maintain-manage/add-record?finishState=${item.finishState}&planNo=${item.planNo}`

      })
    } else {
      uni.navigateTo({

        url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&planTypeId=${item.planTypeId}`

      })
    }
  
  

  }
  
  // 页面加载时初始化数据
  onLoad(() => {
    // 先处理字典数据
    handleDictData()

  })
  onShow(()=>{

    // 初始化分页数据
    pagingRef.value?.reload()
  })
  </script>
  
  <style scoped lang="scss">

  // 吸顶区域样式
  .sticky-wrap {

    margin-top: -10rpx;

    background-color: #fff;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #eee;
  
    .first-tabs, .second-tabs {
      margin: 10rpx 0;
    }
  }
  

  </style>