This commit is contained in:
@@ -8,24 +8,45 @@
|
||||
<view v-if="idx === activeTab" class="tab-underline"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表区 -->
|
||||
<view class="ins-list">
|
||||
<view v-for="(item, idx) in list" :key="idx" class="ins-card" @click="goProcess(item)">
|
||||
<view class="ins-row">
|
||||
<view class="ins-no">保洁部日常巡检 {{ item.createTime.substring(0,11) }}</view>
|
||||
<view class="ins-status" :class="getStatusColor(item.status)">
|
||||
{{ getStatusLabel(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="ins-line-image" src="/static/ic_my_repair_03.png" />
|
||||
<view class="ins-info">巡检人：{{ item.createTime }}</view>
|
||||
<view class="ins-info">计划完成时间：{{ item.typeName }}</view>
|
||||
<view class="ins-info">实际完成时间：{{ item.location }}</view>
|
||||
<view class="ins-info">巡检进度：{{ item.location }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 为每个标签页创建独立的scroll-view -->
|
||||
<view class="ins-list-container">
|
||||
<scroll-view
|
||||
v-for="(tab, idx) in tabs"
|
||||
:key="idx"
|
||||
v-show="idx === activeTab"
|
||||
class="ins-list"
|
||||
scroll-y
|
||||
refresher-enabled
|
||||
:refresher-triggered="refresherTriggered[idx]"
|
||||
refresher-background="#f7f7f7"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scrolltolower="loadMore"
|
||||
:scroll-with-animation="true"
|
||||
>
|
||||
<view v-for="(item, index) in tabData[idx].list" :key="index" class="ins-card" @click="goProcess(item)">
|
||||
<view class="ins-row">
|
||||
<view class="ins-no">{{item.planName || ''}} {{ item.createTime ? item.createTime.substring(0,11) : '' }}</view>
|
||||
<view class="ins-status" :class="getStatusColor(item.status)">
|
||||
{{ getStatusLabel(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="ins-line-image" src="/static/ic_my_repair_03.png" />
|
||||
<view class="ins-info">巡检人：{{ item.actUserName || '' }}</view>
|
||||
<view class="ins-info">计划完成时间：{{ item.planInsTime || '' }}</view>
|
||||
<view class="ins-info">实际完成时间：{{ item.location || '' }}</view>
|
||||
<view class="ins-info">巡检进度：{{ item.inspectionProgress || '' }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="loading[idx]" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
加载中...
|
||||
</view>
|
||||
<view v-if="noMore[idx] && tabData[idx].list.length > 0" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
没有更多数据了
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -33,65 +54,122 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: ['待进行', '处理中', '已完成'],
|
||||
tabs: ['待进行', '处理中', '已完成', '已超时'],
|
||||
activeTab: 0,
|
||||
tabData: [
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
], // 每个tab的数据
|
||||
tabLoaded: [false, false, false], // 每个tab是否已加载
|
||||
loading: false
|
||||
{ list: [], pageNum: 1, pageSize: 10 },
|
||||
{ list: [], pageNum: 1, pageSize: 10 },
|
||||
{ list: [], pageNum: 1, pageSize: 10 },
|
||||
{ list: [], pageNum: 1, pageSize: 10 }
|
||||
],
|
||||
pageNum: [1, 1, 1, 1], // 每个 tab 当前页码
|
||||
pageSize: 10,
|
||||
noMore: [false, false, false, false], // 每个 tab 是否没有更多数据
|
||||
tabLoaded: [false, false, false, false], // tab 是否加载过
|
||||
loading: [false, false, false, false], // 每个 tab 的加载状态
|
||||
refresherTriggered: [false, false, false, false] // 每个 tab 的下拉刷新状态
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
return this.tabData[this.activeTab];
|
||||
return this.tabData[this.activeTab].list;
|
||||
},
|
||||
hasMore() {
|
||||
return !this.noMore[this.activeTab];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadTabData(this.activeTab); // 初始化加载当前tab数据
|
||||
this.loadAllTabsData();
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
// 加载所有tab数据
|
||||
async loadAllTabsData() {
|
||||
for (let idx = 0; idx < this.tabs.length; idx++) {
|
||||
if (!this.tabLoaded[idx]) {
|
||||
await this.loadTabData(idx);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 切换 tab
|
||||
async changeTab(idx) {
|
||||
this.activeTab = idx;
|
||||
if (!this.tabLoaded[idx]) {
|
||||
await this.loadTabData(idx);
|
||||
await this.onRefresh();
|
||||
}
|
||||
},
|
||||
// 下拉刷新
|
||||
async onRefresh() {
|
||||
this.refresherTriggered[this.activeTab] = true;
|
||||
this.pageNum[this.activeTab] = 1;
|
||||
this.noMore[this.activeTab] = false;
|
||||
this.tabData[this.activeTab].list = [];
|
||||
await this.loadTabData(this.activeTab);
|
||||
this.refresherTriggered[this.activeTab] = false;
|
||||
},
|
||||
// 滚动加载更多
|
||||
async loadMore() {
|
||||
if (this.loading[this.activeTab] || this.noMore[this.activeTab]) return;
|
||||
this.pageNum[this.activeTab]++;
|
||||
this.loading[this.activeTab] = true;
|
||||
await this.loadTabData(this.activeTab);
|
||||
this.loading[this.activeTab] = false;
|
||||
},
|
||||
async loadTabData(idx) {
|
||||
this.loading = true;
|
||||
// 模拟接口请求，不同tab返回不同mock数据
|
||||
let params = {}
|
||||
|
||||
|
||||
let data = [];
|
||||
this.loading[idx] = true;
|
||||
let params = {
|
||||
pageNum: this.pageNum[idx],
|
||||
pageSize: this.pageSize
|
||||
};
|
||||
|
||||
// 根据tab索引设置不同的状态参数
|
||||
switch(idx) {
|
||||
case 0: // 待进行
|
||||
params.status = '0';
|
||||
break;
|
||||
case 1: // 处理中
|
||||
params.status = '1';
|
||||
break;
|
||||
case 2: // 已完成
|
||||
params.status = '2';
|
||||
break;
|
||||
case 3: // 已超时
|
||||
params.status = '3';
|
||||
break;
|
||||
}
|
||||
|
||||
let res = await this.$u.api.getInspection(params);
|
||||
if (res.code == '200') {
|
||||
data = res.rows
|
||||
let rows = res.rows || [];
|
||||
if (rows.length < this.pageSize) {
|
||||
this.noMore[idx] = true;
|
||||
}
|
||||
if (this.pageNum[idx] === 1) {
|
||||
// 刷新时重置数据
|
||||
this.tabData[idx].list = rows;
|
||||
} else {
|
||||
// 加载更多时追加数据
|
||||
this.tabData[idx].list = [...this.tabData[idx].list, ...rows];
|
||||
}
|
||||
}
|
||||
|
||||
this.$set(this.tabData, idx, data);
|
||||
this.$set(this.tabLoaded, idx, true);
|
||||
this.loading = false;
|
||||
this.loading[idx] = false;
|
||||
},
|
||||
goProcess(item) {
|
||||
const detailItemStr = encodeURIComponent(JSON.stringify(item));
|
||||
uni.navigateTo({
|
||||
url: `/pages/sys/workbench/inspection/inspectionProcess?detailItem=${item}`
|
||||
uni.navigateTo({
|
||||
url: `/pages/sys/workbench/inspection/inspectionProcess?item=${detailItemStr}`
|
||||
});
|
||||
},
|
||||
|
||||
getStatusLabel(status) {
|
||||
const statusMap = {
|
||||
0: '待确认',
|
||||
1: '已确认',
|
||||
2: '已取消',
|
||||
3: '已完成'
|
||||
0: '待进行',
|
||||
1: '处理中',
|
||||
2: '已完成',
|
||||
3: '已超时'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
},
|
||||
@@ -100,7 +178,8 @@
|
||||
0: '待确认',
|
||||
1: 'orange',
|
||||
2: '已取消',
|
||||
3: '已完成'
|
||||
3: 'done',
|
||||
4: 'done'
|
||||
};
|
||||
return statusMap[status] || '';
|
||||
}
|
||||
@@ -153,15 +232,15 @@
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.ins-list {
|
||||
margin: 25rpx 0 0 0;
|
||||
padding: 0 35rpx;
|
||||
.ins-list-container {
|
||||
flex: 1;
|
||||
/* 占据所有剩余空间 */
|
||||
overflow-y: auto;
|
||||
/* 内容超出时，开启垂直滚动 */
|
||||
padding-bottom: 200rpx;
|
||||
/* 为底部按钮留出空间 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ins-list {
|
||||
height: 100%;
|
||||
padding: 25rpx 35rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ins-card {
|
||||
@@ -180,43 +259,47 @@
|
||||
margin-top: 25rpx;
|
||||
margin-left: 19rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
.ins-no {
|
||||
font-size: 24rpx;
|
||||
color: #0B0B0B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ins-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ins-line-image {
|
||||
margin: left 29rpx;
|
||||
margin-right: 39rpx;
|
||||
height: 2rpx;
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
|
||||
.ins-status.orange {
|
||||
color: #F3AB44;
|
||||
}
|
||||
|
||||
.ins-status.doing {
|
||||
color: #00C9AA;
|
||||
}
|
||||
|
||||
.ins-status.done {
|
||||
color: #8A8A8A;
|
||||
}
|
||||
|
||||
.ins-info {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 47rpx;
|
||||
}
|
||||
|
||||
.ins-no {
|
||||
font-size: 24rpx;
|
||||
color: #0B0B0B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ins-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ins-line-image {
|
||||
margin: left 29rpx;
|
||||
margin-right: 39rpx;
|
||||
height: 2rpx;
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
|
||||
.ins-status.orange {
|
||||
color: #F3AB44;
|
||||
}
|
||||
|
||||
.ins-status.doing {
|
||||
color: #00C9AA;
|
||||
}
|
||||
|
||||
.ins-status.done {
|
||||
color: #8A8A8A;
|
||||
}
|
||||
|
||||
.ins-status.overdue {
|
||||
color: #FF4D4D;
|
||||
}
|
||||
|
||||
.ins-info {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 47rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user