image.png
4)继续实现加载更多数据
1>在o nLo a d() 事件中编写业务代码，这⼀步是实现了所有功能，包含下拉刷新以及搜索框信息，有不同的⼩伙伴们，可以指出，后续加上更新讲解
<template>
<div class="mes_woTask">
<div class="rach">
<van-arch
v-model="rachValue"
show-action
placeholder="请输⼊"
@refresh="onRefresh"
@arch="onSearch"
@clear="clear"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-arch>
</div>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<div class="list">
<div class="total">共{{totalNum}}个任务:</div>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:immediate-check="fal"
:offt="50"
>
<div class="totalItem" v-for="item in list" :key="item.woRd" >
<div class="link">
<div class="left">
<div class="fonts"> {{item.materialCode}} </div>
<div>⼯单单号:{{item.woCode}}</div>
<div>计划开始时间:{{item.jstartDate}}</div>
</div>
<div class="right">
<div class="jindu">进度: {{item.finishNum}}/{{item.num}}</div>
<span><van-icon name="arrow" color="#ccc" size="35"/></span>
</div>
</div>
</div>
</van-list>
</div>
</van-pull-refresh>
</div>
</div>
</template>
<script>
export default {
data(){
return{
list:[], //当前所有⼯单任务信息
英语对话下载rachValue: '', //当前搜索框值
loading:fal,
mbo
finished:fal,
totalNum:0, //加载出当前所有条数
isSearch:fal,
refreshing:fal, //下拉刷新
prams:{ //搜索事件和加载后台数据，参数都是由后端代码定义的 current:1, //当前页
size:10, //每页显⽰总数
fields:[{
fieldName:"woCode",
fieldOpt:"like",
fieldVal:''
},{
fieldName:"createTime",
fieldOpt:"order by",device
fieldVal:"desc"
}]
}
}
},
glu
created(){
},
methods:{
getAllWoTask(){
this.$axios({
method:'post',
url:'/mes/WO/GetAllNewWOInfo',
header:{
'Content-Type':'application/json' //如果写成contentType会报错 },
data: this.prams
}).then(res=>{
const {status,body} = res.data;
if(status==='00'){
this.list=[...this.list,...body.data.list];
//每⼀次加载完设置fal，便于下次继续加载
this.loading=fal;
this.isSearch=fal;
//判断是否还有数据加载
if(this.prams.size>body.data.list.length){
this.finished=true;
}
}el{
this.$toast.fail(body.msgDes)
}
});
},
onLoad(){
if (freshing) {
this.list = [];
this.prams.fields[0].fieldVal=this.rachValue;
树木名称}el if(this.isSearch){
this.list = [];
this.prams.current=1;
this.prams.current=1;
this.prams.fields[0].fieldVal=this.rachValue; }
el{
this.prams.current++;
}
},
onSearch(val) {
this.prams.current=1;
if(val===''){
this.isSearch=fal;
}el{
abacusthis.isSearch=true;
}
/
/ AllWoTask();
},
onRefresh() {
// 清空列表数据
this.finished = fal;
// 重新加载数据
// 将 loading 设置为 true，表⽰处于加载状态
this.loading = true;
this.prams.current=1;
马丁路德金简介
},
clear(){
this.rachValue='';
}
}
}
</script>
<style lang="less" scoped>
.mes_woTask{
.rach{
come up with
}
.list{
.total{
height: 30px;
line-height: 30px;
margin-left: 12px;
}
.totalItem{
height: 65px;
weaknessline-height: 65px;
border-bottom: 1px solid #999;
margin-top: 10px;
padding: 10px;
.link{
height: 25px;
line-height: 25px;
color: #999;
position: absolute;
.left{
float: left;
.fonts{
font-size: 20px;
font-weight:bold;
}the four
}
.right{
float: right;
margin-left: 90px;
}
}
