养护计划列表

刘淇
1 parent 5cb33b90
Showing 6 changed files with 774 additions and 30 deletions
api/maintain-manage/maintain-manage.js
api/patrol-manage/patrol-plan.js
pages-sub/daily/maintain-manage/index.vue
pages-sub/daily/maintain-manage/road-detail-list.vue
pages-sub/daily/patrol-manage/index.vue
pages.json
+
+
+
+import { post, get } from '@/common/utils/request';
+
+
+/**
+ * 道路汇总
+ * @returns {Promise}
+ */
+export const roadPage = (params) => {
+  return get('/app-api/app/garden/maintain-plan/page/road',params);
+};
+
+/**
+ * 类型汇总
+ * @returns {Promise}
+ */
+export const planTypePage = (params) => {
+  return get('/app-api/app/garden/maintain-plan/page/plan-type-id',params);
+};
+
+/**
+ *  道路列表
+ * @returns {Promise}
+ */
+export const getRoadDetails = (params) => {
+  return get('/app-api/app/garden/maintain-plan-detail/get/details-road',params);
+};
+
+/**
+ *  巡查计划完成详情
+ * @returns {Promise}
+ */
+export const inspectionCreate = (data) => {
+  return get('/app-api/app/garden/inspection-plan-commit/create',data);
+};
-// api/user.js
 import { post, get } from '@/common/utils/request';
  
 /**
- * 登录接口
- * @param {Object} params {mobile, password, code}
- * @returns {Promise}
- */
-export const login = (params) => {
-  return post('/admin-api/system/auth/login', params);
-};
-
-/**
  * 巡检计划汇总
  * @returns {Promise}
  */
@@ -27,7 +17,6 @@ export const inspectionPlanDetail = (data) =&gt; {
 };
  
  
-// app-api/app/garden/inspection-plan-commit/get/by/plan_no?plan_no=P1765032669066674'
 /**
  *  巡查计划完成详情
  * @returns {Promise}
-<script setup lang="ts">
+<template>
+  <view class="main-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>
  
-</script>
+        <!-- 第二行标签：状态筛选 -->
+        <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>
  
-<template>
+        <!-- 动态搜索框（道路名称/计划名称） -->
+        <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"
+        :top="200"
+    :bottom="20"
+    :page-size="pageSize"
+    >
+    <!-- 空数据提示 -->
+    <template #empty>
+      <empty-view/>
+    </template>
+
+    <!-- 加载中提示（z-paging内置，可自定义） -->
+    <template #loading>
+      <view class="loading-tip">
+        <up-loading-page text="加载中..."></up-loading-page>
+      </view>
+    </template>
  
+    <!-- 列表内容 -->
+    <view class="content-wrap">
+      <!-- 道路类型卡片 -->
+      <view v-if="activeType === '道路'" class="card-list">
+        <view
+            class="card-item"
+            v-for="(item, index) in currentList"
+            :key="index"
+        >
+          <view class="card-content">
+            <view class="card-text up-line-1">
+              <span class="field-name">道路名称：</span>{{ item.roadName || '-' }}
+            </view>
+            <view class="card-text up-line-1">
+              <span class="field-name">所属街道：</span>{{ item.streetName || '-' }}
+            </view>
+            <!-- 养护级别行增加计划明细按钮 -->
+            <view class="card-text up-line-1">
+              <span class="field-name">养护级别：</span>{{uni.$dict.getDictLabel('conserve_level', item.levelId) || '-'}}
+              <view class="inline-action" @click="goToDetail(item)">
+                计划明细
+              </view>
+            </view>
+            <view class="card-text up-line-1">
+              <span class="field-name">计划时间：</span>{{ timeFormat(item.beginTime,'yyyy-mm-dd') || '-'}} 至 {{ timeFormat(item.endTime,'yyyy-mm-dd') || '-'}}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 其他养护类型卡片（补植/浇水等） -->
+      <view v-else class="card-list">
+        <view
+            class="card-item"
+            v-for="(item, index) in currentList"
+            :key="index"
+        >
+          <view class="card-content">
+            <view class="card-text up-line-1 font-bold">{{ item.planName || '-' }}</view>
+            <view class="card-text up-line-1">
+              <span class="field-name">计划编码：</span>{{ item.planNo || '-' }}
+            </view>
+            <view class="card-text up-line-1">
+              <span class="field-name">养护周期：</span>{{ item.rate || '-' }} {{ uni.$dict.getDictLabel('cycle_id_type', item.cycleId) }}
+            </view>
+            <view class="card-text up-line-1">
+              <span class="field-name">计划完成次数：</span>{{ item.planNum || 0 }}
+            </view>
+            <!-- 已完成次数行增加提交记录按钮 -->
+            <view class="card-text up-line-1">
+              <span class="field-name">完成比较：</span>{{ item.finishPercent || 0 }}%
+              <view class="inline-action submit-btn" @click="submitRecord(item)">
+                提交记录
+              </view>
+            </view>
+            <view class="card-text up-line-1">
+              <span class="field-name">计划有效期：</span> {{timeFormat(item.beginTime,'yy-mm-dd hh:MM:ss')}} 至 {{timeFormat(item.endTime,'yy-mm-dd hh:MM:ss')}}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    </z-paging>
+  </view>
 </template>
  
-<style scoped>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { roadPage, getRoadDetails, 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' }
+])
+
+// 核心响应式数据
+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) => {
+  uni.navigateTo({
+    url: `/pages/submitRecord/submitRecord?planId=${item.id || ''}&planName=${encodeURIComponent(item.planName || '')}`
+  })
+  console.log('提交记录：', item)
+}
+
+// 页面加载时初始化数据
+onLoad(() => {
+  // 先处理字典数据
+  handleDictData()
+  // 初始化分页数据
+  pagingRef.value?.reload()
+})
+</script>
+
+<style scoped lang="scss">
+.main-container {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+}
+
+// 吸顶区域样式
+.sticky-wrap {
+  background-color: #fff;
+  padding-bottom: 10rpx;
+  border-bottom: 1px solid #eee;
+
+  .first-tabs, .second-tabs {
+    margin: 10rpx 0;
+  }
+}
+
+// 内容区域样式
+.content-wrap {
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+// 卡片列表样式
+.card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+// 卡片项样式
+.card-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+
+  .card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+
+    .card-text {
+      font-size: 28rpx;
+      color: #333;
+      line-height: 1.4;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between; // 让文本和按钮两端对齐
+
+      &.font-bold {
+        font-weight: 600;
+        font-size: 30rpx;
+      }
+
+      .field-name {
+        color: #999;
+        display: inline-block;
+        margin-right: 15rpx;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+// 行内操作按钮样式
+.inline-action {
+  font-size: 26rpx;
+  color: #1989fa;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+  background-color: #f0f8ff;
+  white-space: nowrap;
+  float: right;
+  &.submit-btn {
+    background-color: #1989fa;
+    color: #fff;
+  }
+}
+
+// 空数据提示
+.empty-tip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300rpx;
+  font-size: 28rpx;
+  color: #999;
+}
  
+// 加载中提示
+.loading-tip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300rpx;
+}
 </style>
 \ No newline at end of file
+<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"
+        :top="140"
+    >
+      <!-- 空数据插槽 -->
+      <template #empty>
+        <view class="empty-container">
+          <up-empty mode="list" text="暂无相关计划数据"></up-empty>
+        </view>
+      </template>
+
+      <!-- 列表内容 -->
+      <view class="card-list">
+        <view
+            class="plan-card"
+            v-for="(item, index) in planList"
+            :key="index"
+        >
+          <view class="card-header">
+            <text class="plan-name">{{ item.planName || '未命名计划' }}</text>
+<!--            <text class="plan-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>-->
+          </view>
+          <view class="card-body">
+            <view class="info-item">
+              <text class="label">计划编码：</text>
+              <text class="value">{{ item.planNo || '-' }}</text>
+            </view>
+            <view class="info-item">
+              <text class="label">养护周期：</text>
+              <text class="value">{{ item.rate || '-' }} {{ uni.$dict.getDictLabel('cycle_id_type', item.cycleId) }}</text>
+            </view>
+            <view class="info-item">
+              <text class="label">计划完成次数：</text>
+              <text class="value">{{ item.planNum || 0 }}</text>
+            </view>
+            <view class="info-item">
+              <text class="label">已完成比例：</text>
+              <text class="value">{{ item.finishPercent || 0 }}%</text>
+            </view>
+            <view class="info-item">
+              <text class="label">计划有效期：</text>
+              <text class="value">{{ timeFormat(item.beginTime,'yyyy-mm-dd') || '-'}} 至 {{ timeFormat(item.endTime,'yyyy-mm-dd') || '-'}}</text>
+            </view>
+          </view>
+          <view class="card-footer">
+            <up-button
+                type="primary"
+                size="mini"
+                @click="handleDetail(item)"
+            >
+              查看详情
+            </up-button>
+          </view>
+        </view>
+      </view>
+    </z-paging>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { timeFormat } from '@/uni_modules/uview-plus'
+import { getRoadDetails } from "@/api/maintain-manage/maintain-manage";
+
+// ========== 基础数据定义 ==========
+// 状态Tabs数据
+const statusTabs = ref([
+  { name: '待完成', id: '1' },
+  { name: '已失效', id: '3' },
+  { name: '已完成', id: '2' }
+])
+
+// 响应式数据
+const activeStatus = ref('1')       // 当前选中的状态
+const searchValue = ref('')         // 搜索框值
+const planList = ref([])            // 计划列表（绑定z-paging）
+const pagingRef = ref(null)         // z-paging实例
+const loading = ref(false)          // 加载状态
+
+// URL参数存储
+const roadId = ref('')              // 从URL获取的roadId
+const finishState = ref('')         // 从URL获取的finish_state
+
+// 搜索占位符
+const searchPlaceholder = computed(() => {
+  return '请输入计划名称'
+})
+
+// ========== 方法定义 ==========
+// 从URL获取参数
+const getUrlParams = (options) => {
+  // 1. 修复：URL中是roadId（驼峰），不是road_id
+  if (options?.roadId) {
+    roadId.value = options.roadId
+    console.log('从URL获取的roadId：', roadId.value) // 打印验证
+  }
+
+  if (options?.finish_state) {
+    finishState.value = options.finish_state
+    // 同步更新Tabs选中状态
+    activeStatus.value = options.finish_state
+    console.log('从URL获取的finish_state：', finishState.value)
+  }
+}
+
+// 状态切换
+const handleStatusChange = (item) => {
+  console.log('切换状态：', item)
+  activeStatus.value = item.id
+  // 更新finishState值
+  finishState.value = item.id
+  // 重置分页并刷新
+  pagingRef.value?.reload()
+}
+
+// 搜索处理
+const handleSearch = () => {
+  console.log('搜索关键词：', searchValue.value)
+  // 重置分页并刷新
+  pagingRef.value?.reload()
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const statusMap = {
+    '1': '待完成',
+    '2': '已完成',
+    '3': '已失效'
+  }
+  return statusMap[status] || '未知状态'
+}
+
+// 获取状态样式类
+const getStatusClass = (status) => {
+  const classMap = {
+    '1': 'status-pending',
+    '2': 'status-completed',
+    '3': 'status-invalid'
+  }
+  return classMap[status] || ''
+}
+
+// 查看详情
+const handleDetail = (item) => {
+  uni.navigateTo({
+    url: `/pages/planDetail/planDetail?planId=${item.id || ''}`
+  })
+}
+
+// 分页请求数据（z-paging回调）
+const queryList = async (pageNo, pageSize) => {
+  try {
+    loading.value = true
+
+    // 构造请求参数：优先使用URL参数
+    const paramsData = {
+      pageNo: pageNo,
+      pageSize: pageSize,
+      road_id: roadId.value, // 现在能拿到正确的roadId了
+      finish_state: finishState.value || activeStatus.value,
+      planName: searchValue.value.trim()
+    }
+
+    console.log('请求参数：', paramsData) // 验证road_id是否有值
+    const res = await getRoadDetails(paramsData)
+    console.log(res)
+    // 兼容不同的接口返回格式
+    const listData = res?.list || res || []
+
+    // 告知z-paging数据加载完成
+    pagingRef.value?.complete(listData)
+    loading.value = false
+  } catch (error) {
+    console.error('请求失败：', error)
+    uni.showToast({ title: '加载失败，请重试', icon: 'none' })
+    pagingRef.value?.complete(false)
+    loading.value = false
+  }
+}
+
+// ========== 生命周期修复 ==========
+// 2. 修复：只有onLoad才会接收页面跳转的options参数
+onLoad((options) => {
+  // 页面首次加载时获取URL参数
+  getUrlParams(options)
+  // 初始化数据
+  pagingRef.value?.reload()
+})
+
+onShow(() => {
+  // 可选：页面再次显示时刷新（比如从详情页返回）
+  // if (roadId.value) { // 有roadId才刷新
+  //   pagingRef.value?.reload()
+  // }
+})
+
+onMounted(() => {
+  // 可选：初始化其他逻辑
+})
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+}
+
+// 顶部吸顶区域样式
+.sticky-header {
+  background-color: #ffffff;
+  padding-bottom: 10rpx;
+  border-bottom: 1px solid #eee;
+
+  // 状态Tabs样式
+  .status-tabs {
+    margin: 10rpx 0 0 0;
+  }
+
+  // 搜索框样式
+  .search-input {
+    margin: 20rpx 20rpx 10rpx !important;
+  }
+}
+
+// 卡片列表样式
+.card-list {
+  padding: 0 20rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+// 计划卡片样式
+.plan-card {
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+
+  // 卡片头部
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+    padding-bottom: 12rpx;
+    border-bottom: 1px solid #f5f5f5;
+
+    .plan-name {
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .plan-status {
+      font-size: 24rpx;
+      padding: 4rpx 12rpx;
+      border-radius: 20rpx;
+
+      // 状态样式
+      &.status-pending {
+        background-color: #fff7e6;
+        color: #ff9f1c;
+      }
+
+      &.status-completed {
+        background-color: #e8f8f5;
+        color: #00b42a;
+      }
+
+      &.status-invalid {
+        background-color: #f5f5f5;
+        color: #999;
+      }
+    }
+  }
+
+  // 卡片内容
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    margin-bottom: 20rpx;
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+
+      .label {
+        color: #999;
+        flex-shrink: 0;
+      }
+
+      .value {
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+
+  // 卡片底部
+  .card-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+// 空数据样式
+.empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400rpx;
+}
+</style>
 \ No newline at end of file
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
 \ No newline at end of file
@@ -83,14 +83,18 @@
 					"path": "12345-order/index",
 					"style": { "navigationBarTitleText": "12345工单" }
 				},
+
 				{
-					"path": "patrol-manage/index",
-					"style": { "navigationBarTitleText": "巡查管理" }
+					"path": "maintain-manage/index",
+					"style": { "navigationBarTitleText": "养护计划" }
 				},
+
 				{
-					"path": "maintain-manage/index",
-					"style": { "navigationBarTitleText": "养护管理" }
+					"path": "maintain-manage/road-detail-list",
+					"style": { "navigationBarTitleText": "道路明细列表" }
 				}
+
+
 			]
 		},
 		{