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

<template>
	<view>
		<van-sticky>
			<view class="top-wrap">
				<view @click="handleGoSearch">
					<van-search disabled use-left-icon-slot shape="round" placeholder="客户名称/社会信用码">
						<view slot="left-icon">
							<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
						</view>
					</van-search>
				</view>
				<van-tabs id="tabs" :active="status" title-active-color="#3385FF" color="#3385FF" @change="typeChange">
					<van-tab :title="item" :name="item" v-for="item in tabList" :key="item"></van-tab>
				</van-tabs>
			</view>
		</van-sticky>
		<van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0"/>
		<view class="list" v-else>
			<approve-list-item v-for="item in list" :key="item.id" :data="item"></approve-list-item>
		</view>
		
	</view>
</template>

<script>
	import {apiContractApproveList,apiContractList} from '@/api/approve/contract.js'
	import approveListItem from '../components/approveListItem.vue'
	export default{
		components:{
			approveListItem
		},
		data() {
			return {
				tabList:[],
				status: '待审批',
				list:[],
				page:1,
				finished:false,
			}
		},
		onLoad(options) {
			this.status=options.status||'待审批'
			this.initTabs()//初始化tab 栏
			if(this.status==='待提交'){
				this.getContractList()
			}else{
				this.getList()
			}
			// 更新列表
			uni.$on('contractApproveListUpdate',(e)=>{
				console.log('更新列表');
				this.list=this.list.filter(item=>{
					return !(item.ContractApprovalId==e.ContractApprovalId&&item.ContractApprovalRecordId==e.ContractApprovalRecordId&&item.ContractId==e.ContractId)
				})
			})
		},
		onUnload(){
			uni.$off('contractApproveListUpdate')
		},
		onShow() {
			this.$nextTick(()=>{
				this.selectComponent('#tabs').resize();// 解决初始渲染 vant tab 底部条
			})
			// this.page=1
			// this.list=[]
			// if(this.status==='待提交'){
			// 	this.getContractList()
			// }else{
			// 	this.getList()
			// }
		},
		onPullDownRefresh() {
			this.page=1
			this.finished=false
			this.list=[]
			if(this.status==='待提交'){
				this.getContractList()
			}else{
				this.getList()
			}
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		onReachBottom() {
			if(this.finished) return
			this.page++
			if(this.status==='待提交'){
				this.getContractList()
			}else{
				this.getList()
			}
		},
		methods: {
			//初始化tab
			initTabs(){
				// ficc销售 权益销售
				const RoleTypeCode=this.$store.state.userInfo.RoleTypeCode
				if(['ficc_seller','rai_seller','ficc_group','rai_group','ficc_team'].includes(RoleTypeCode)){
					this.tabList=['待审批','处理中','已审批','已签回','待提交','其它']
					this.status='待审批'
				}
				// ficc管理员 权益管理员  合规compliance
				if(RoleTypeCode==='ficc_admin'||RoleTypeCode==='rai_admin'||RoleTypeCode==='compliance'||RoleTypeCode==='admin'){
					this.tabList=['待审批','处理中','已审批','已签回','其它']
					this.status='待审批'
				}
			},
			
			// 去搜索
			handleGoSearch() {
				uni.navigateTo({
					url: '../search/index?type=contract'
				})
			},
			
			typeChange(e){
				this.status=e.detail.name
				this.page=1
				this.finished=false
				this.list=[]
				if(this.status==='待提交'){
					this.getContractList()
				}else{
					this.getList()
				}
			},
			
			//获取列表数据
			async getList(){
				const res=await apiContractApproveList({
					CurrentIndex:this.page,
					Status:this.status,
					Keyword:''
				})
				if(res.code===200){
					if(!res.data.List||res.data.List.length===0){
						this.finished=true
					}else{
						if(this.page===1&&res.data.List.length<20){
							this.finished=true
						}
						let arr=res.data.List.map(item=>{
							let backTime=''
							if(item.Status==='已撤回'){
								backTime=item.ModifyTime
							}
							return {
								title:item.CompanyName,
								saller:item.SellerName,
								submitTime:this.status==='处理中'?item.ModifyTime:item.CreateTime,
								approveTime:item.ApproveTime,
								checkBackTime:item.CheckBackFileTime,
								backTime:backTime,
								cancelTime:item.InvalidTime,
								status:item.Status,
								applyType:item.ApplyContent,
								id:item.ContractApprovalId,
								ContractApprovalId:item.ContractApprovalId,
								ContractApprovalRecordId:item.ContractApprovalRecordId,
								ContractId:item.ContractId,
								RescindTime:item.RescindTime,
								type:'contract',
							}
						})
						this.list=[...this.list,...arr]
					}
				}
			},
			
			// 获取合同列表
			async getContractList(){
				const res=await apiContractList({
					CurrentIndex:this.page,
					Status:this.status,
					Keyword:''
				})
				if(res.code===200){
					if(res.data.Paging.IsEnd){
						this.finished=true
					}
					let arr=res.data.List.map(item=>{
						let backTime=''
						if(item.Status==='已撤回'){
							backTime=item.ModifyTime
						}
						return {
							title:item.CompanyName,
							saller:item.SellerName,
							submitTime:item.CreateTime,
							approveTime:item.ApproveTime,
							checkBackTime:item.CheckBackFileTime,
							backTime:backTime,
							cancelTime:item.InvalidTime,
							status:item.Status,
							applyType:'生成新模板',
							id:item.ContractId,
							ContractApprovalId:0,
							ContractApprovalRecordId:0,
							ContractId:item.ContractId,
							ModifyTime:item.ModifyTime,
							type:'contract',
						}
					})
					this.list=[...this.list,...arr]
				}
			}
		},
	}
</script>

<style lang="scss">
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		display: block;
		position: relative;
		top: 4rpx;
		margin-right: 10rpx;
	}
	.list{
		padding: 20rpx;
	}
</style>