工单列表增加tab 默认展示未处理、处理中的工单

This commit is contained in:
白菜
2025-07-16 20:51:25 +08:00
parent c3820a5805
commit 78334cfa6a
2 changed files with 73 additions and 18 deletions

View File

@ -1,9 +1,9 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询工单主列表 // 查询工单主列表
export function listTicket({pageNum, pageSize}) { export function listTicket(url) {
return request({ return request({
url: `/ticket/list?pageNum=${pageNum}&pageSize=${pageSize}`, url,
method: 'get', method: 'get',
}) })
} }

View File

@ -1,4 +1,15 @@
<template> <template>
<view class="container">
<view class="btn-list">
<uni-row >
<uni-col :span="12">
<button type="default" class="btns" :class="{'active-btn' : active === 'undone'}" @click="changeTab('undone')">未处理</button>
</uni-col>
<uni-col :span="12">
<button type="default" class="btns" :class="{'active-btn' : active === 'done'}" @click="changeTab('done')">已处理</button>
</uni-col>
</uni-row>
</view>
<scroll-view class="scroll-y" :scroll-y="true" @scrolltolower="lower" scrolltoupper="upper" > <scroll-view class="scroll-y" :scroll-y="true" @scrolltolower="lower" scrolltoupper="upper" >
<view class="content"> <view class="content">
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)"> <view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
@ -13,6 +24,7 @@
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
</view>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import {mapState} from 'vuex'
@ -25,6 +37,7 @@
}, },
data(){ data(){
return { return {
active:'undone',
total:0, total:0,
list:[], list:[],
pageNum:1, pageNum:1,
@ -32,6 +45,12 @@
} }
}, },
methods:{ methods:{
changeTab(active){
if(active===this.active)return
this.active = active
this.reset()
this.init()
},
lower(){ lower(){
if(this.list.length>=this.total){ if(this.list.length>=this.total){
return console.log('数据已经加载完成') return console.log('数据已经加载完成')
@ -40,8 +59,15 @@
this.init().catch(()=>{this.pageNum-=1}) this.init().catch(()=>{this.pageNum-=1})
}, },
init(){ init(){
//0:'待处理', 1:'已处理', 2:'处理中'
let url=`/ticket/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
if(this.active === 'done'){
url +=`&status=1`
}else{
url +=`&status=0&status=2`
}
uni.showLoading() uni.showLoading()
return listTicket({pageNum:this.pageNum,pageSize:this.pageSize}).then(response=>{ return listTicket(url).then(response=>{
const data = JSON.parse(JSON.stringify(response?.rows || [])) const data = JSON.parse(JSON.stringify(response?.rows || []))
this.list =this.list.concat(data) this.list =this.list.concat(data)
this.total = response?.total || 0 this.total = response?.total || 0
@ -64,12 +90,41 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container{
position: relative;
}
uni-button:after{
border:none;
border-radius: 0;
}
.btn-list{
position: absolute;
top:0;
left: 0;
width:100%;
z-index:2;
.btns{
border-radius: 0;
border:none;
border-bottom: 1px solid #eee;
width:100%;
text-align: center;
font-size: 16px;
line-height: 50px;
background-color: #fff;
&.active-btn{
background-color: #3a98ff;
color:#fff;
}
}
}
.scroll-y{ .scroll-y{
height: calc(100vh - 50px) height: calc(100vh - 50px);
z-index:1;
} }
.content { .content {
background-color: #ffffff; background-color: #ffffff;
padding:50px 20px; padding:70px 20px 50px 20px;//todo 根据顶部tab设置padding-top
} }
.item-list{ .item-list{
border-radius: 7px; border-radius: 7px;