index.vue
8.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<template>
<view class="page-container">
<!-- 吸顶区域 -->
<up-sticky>
<view class="sticky-wrap">
<!-- 动态搜索框（道路名称/计划名称） -->
<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: 0rpx 24rpx 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 maintain-card-list">
<up-card
:border="false"
:foot-border-top="false"
:head-border-bottom="false"
margin="0"
padding-head="24rpx 24rpx 0"
padding-body="16rpx 24rpx 24rpx"
box-shadow="0 4rpx 16rpx rgba(17, 24, 39, 0.06)"
v-for="(item,index) in currentList"
:key="`${item.planNo}_${index}`"
@click="goToDetail(item)"
>
<!-- 卡片标题：道路名称 -->
<template #head >
<view class="card-header">
<view class="common-card-title common-name u-line-1">{{ item.roadName || '无道路名称' }}</view>
</view>
</template>
<template #body>
<view class="card-body">
<view class="u-body-item">
<view class="u-body-item-title">道路名称：</view>
<view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
</view>
<view class="u-body-item">
<view class="u-body-item-title">业务线：</view>
<view class="u-line-1 u-body-value">{{ uni.$dict.getDictLabel('business_line', item.busiLine) || item.busiLine || '-' }}</view>
</view>
<view class="u-body-item">
<view class="u-body-item-title">养护级别：</view>
<view class="u-line-1 u-body-value">{{ uni.$dict.getDictLabel('conserve_level', item.levelId) || '-' }}</view>
</view>
<!-- 操作区：统一收底 -->
<view class="card-action-row">
<view class="mini-btn mini-btn--primary">执行任务</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 { maintainPlan } 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
const currentType = typeTabs.value.find(item => item.name === activeType.value)
res = await maintainPlan({
// planTypeId: currentType?.planTypeId || '',
roadName: searchValue.value.trim(),
pageNo,
pageSize,
finishState: 1
// 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.setStorageSync('temp_maintain_item', item)
uni.navigateTo({
url: `/pages-sub/daily/maintain-manage/type-list`
})
}
// 提交记录
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}&planTypeId=${item.planTypeId}&businessType=${item.busiLine}`
})
} else {
uni.navigateTo({
url: `/pages-sub/daily/maintain-manage/pending-plan-detail?finishState=${item.finishState}&planNo=${item.planNo}&planTypeId=${item.planTypeId}&businessType=${item.busiLine}`
})
}
}
// 页面加载时初始化数据
onLoad(() => {
// 先处理字典数据
handleDictData()
})
onShow(() => {
// 初始化分页数据
pagingRef.value?.reload()
})
</script>
<style scoped lang="scss">
/* 页面底色：统一浅灰蓝（设计稿 --page-bg） */
.page-container {
min-height: 100vh;
background-color: #F4F6FA;
box-sizing: border-box;
}
// 吸顶区域样式
.sticky-wrap {
background-color: #fff;
padding: 24rpx 0;
border-bottom: 1rpx solid #E8EBF0;
.first-tabs, .second-tabs {
margin: 10rpx 0;
}
}
/* 卡片列表 */
.maintain-card-list {
display: flex;
flex-direction: column;
gap: 24rpx;
padding: 136rpx 24rpx 24rpx;
position: relative;
.card-action-row {
position: absolute;
top: 50px;
right: 20px;
border-top: none;
}
}
/* 卡片体 */
.card-body {
padding: 0;
}
.u-body-item {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
/* ✅固定标题盒子宽度，文字右对齐，实现冒号竖对齐 */
.u-body-item-title {
width: 100rpx!important;
flex-shrink: 0;
// text-align: right;
font-size: 26rpx;
color: #606266;
}
.u-body-value {
flex: 1;
padding-left:16rpx;
font-size: 26rpx;
color: #333;
}
</style>