crm-xcx/pages-approve/businessTrip/list.vue

<template>
    <view  class="list-page">
        <van-sticky>
            <van-tabs swipeable id="tabs" :active="status" title-active-color="#3385FF" color="#3385FF" @change="typeChange">
				<van-tab title="待审批" name="待审批"></van-tab>
				<van-tab title="已审批" name="已审批"></van-tab>
			</van-tabs>
        </van-sticky>
        <van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0"/>
		<view class="list-wrap" v-else>
			<view class="item" v-for="item in list" :key="item.BusinessApplyId" @click="goDetail(item)">
                <view class="info-item" v-for="info in itemOpt" :key="info.key">
                    <view class="label">{{info.lable}}：</view>
                    <view class="content">
                        <text v-if="info.key=='place'">{{item.Province}}{{item.City}}</text>
                        <text v-else>{{item[info.key]}}</text>
                    </view>
                </view>
                <view class="status approve-list-status-wait" v-if="item.Status==='待审批'">待审批</view>
                <view class="status approve-list-status-success" v-if="item.Status==='已通过'">已通过</view>
                <view class="status approve-list-status-fail" v-if="item.Status==='已驳回'">已驳回</view>
                <view class="status approve-list-status-fail" v-if="item.Status==='已关闭'">已关闭</view>
                <view class="status approve-list-status-cancel" v-if="item.Status==='已过期'">已过期</view>
                <view class="status approve-list-status-back" v-if="item.Status==='已撤回'">已撤回</view>
            </view>
		</view>
          
    </view>
</template>

<script>
import {apiApproveList} from '@/api/businessTrip/index'
export default {
    data() {
		return {
			status: '待审批',
			list:[],
			page:1,
			finished:false,
            PageSize:20,
            itemOpt:[
                {lable:'申请人',key:'ApplyRealName'},
                {lable:'目的地',key:'place'},
                {lable:'出差事由',key:'Reason'},
                {lable:'提交时间',key:'CreateTime'},
            ]
		}
	},
    onLoad(){
        this.getList()
        // 更新列表
		uni.$on('businessApproveListUpdate',(e)=>{
			console.log('更新列表');
			this.page=1
            this.finished=false
            this.list=[]
            this.getList()
		})
    },
    onShow() {
		this.selectComponent('#tabs').resize();// 解决初始渲染 vant tab 底部条
	},
    onUnload(){
		uni.$off('businessApproveListUpdate')
	},
    onPullDownRefresh() {
		this.page=1
		this.finished=false
		this.list=[]
		this.getList()
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		},1500)
	},
	onReachBottom() {
		if(this.finished) return
		this.page++
		this.getList()
	},
    methods: {
        typeChange(e){
			this.status=e.detail.name
			this.page=1
			this.finished=false
			this.list=[]
			this.getList()
		},
        
        async getList(){
            const res=await apiApproveList({
                PageSize:this.PageSize,
                CurrentIndex:this.page,
                Status:this.status
            })
            if(res.code===200){
                const arr=res.data.List||[]
                this.list=[...this.list,...arr]
                this.finished=res.data.Paging.IsEnd
            }
        },

        goDetail(item){
            uni.navigateTo({
                url: '/pages-approve/businessTrip/detail?id='+item.BusinessApplyId,
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.list-page{
    min-height: 100vh;
}
.list-wrap{
    padding: 20rpx;
    .item{
        padding: 30rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        border-radius: 8rpx;
        .info-item{
            display: flex;
            font-size: 32rpx;
            margin-bottom: 30rpx;
            .label{
                width: 180rpx;
                flex-shrink: 0;
                text-align: right;
            }
            .content{
                flex: 1;
            }
        }
        .status{
            text-align: right;
        }
    }
}
</style>