crm-xcx/pages-approve/seal/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" :data="item"></approve-list-item>
		</view>
		
		<image src="../static/seal-icon.png" mode="aspectFill" class="add-btn" @click="handleGoApplySeal" v-if="showAddSeal"></image>
	</view>

</template>

<script>
	import {apiSealList,apiSealApproveList} from '@/api/approve/seal.js'
	import approveListItem from '../components/approveListItem.vue'
	export default {
		components:{
			approveListItem
		},
		computed:{
			showAddSeal(){
				// 只有销售和合规能有此按钮
				let RoleTypeCode=this.$store.state.userInfo.RoleTypeCode
				if(['ficc_seller','rai_seller','compliance','ficc_group','rai_group','ficc_team'].includes(RoleTypeCode)){
					return true
				}else{
					return false
				}
			}
		},
		data() {
			return {
				tabList:['待审批','处理中','已审批','已签回','其它'],
				status: '待审批',
				list:[],
				page:1,
				finished:false,
			}
		},
		onLoad(options) {
			this.status=options.status||'待审批'
			// this.initTabs()
			this.getList()
			// 更新列表
			uni.$on('sealApproveListUpdate',(e)=>{
				console.log('更新列表');
				if(this.status==='待审批'){
					this.page=1
					this.finished=false
					this.list=[]
					this.getList()
					return
				}
				this.list=this.list.filter(item=>{
					return !(item.ContractApprovalId==e.ContractApprovalId&&item.ContractApprovalRecordId==e.ContractApprovalRecordId&&item.SealId==e.SealId)
				})
			})
		},
		onUnload(){
			uni.$off('sealApproveListUpdate')
		},
		onShow() {
			// this.list=[]
			// this.page=1
			// this.getList()
			this.$nextTick(()=>{
				this.selectComponent('#tabs').resize();// 解决初始渲染 vant tab 底部条
			})
		},
		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: {
			//初始化tab  将已作废、已撤回合并则不用区分用户权限（该方法废弃）
			// initTabs(){
			// 	// ficc销售 权益销售
			// 	const RoleTypeCode=this.$store.state.userInfo.RoleTypeCode
			// 	if(RoleTypeCode==='ficc_seller'||RoleTypeCode==='rai_seller'||RoleTypeCode==='ficc_group'||RoleTypeCode==='rai_group'||RoleTypeCode==='compliance'){
			// 		this.tabList=['待审批','处理中','已审批','已作废','已撤回']
			// 		this.status='待审批'
			// 	}
			// 	// ficc管理员 权益管理员  合规compliance
			// 	if(RoleTypeCode==='ficc_admin'||RoleTypeCode==='rai_admin'||RoleTypeCode==='admin'){
			// 		this.tabList=['待审批','处理中','已审批','已作废']
			// 		this.status='待审批'
			// 	}
			// },
			
			//去添加用印申请、
			handleGoApplySeal(){
				uni.navigateTo({
					url:'/pages-approve/seal/addSeal'
				})
			},
			
			// 去搜索
			handleGoSearch() {
				uni.navigateTo({
					url: '../search/index?type=seal'
				})
			},
			
			typeChange(e){
				this.status=e.detail.name
				this.page=1
				this.finished=false
				this.list=[]
				this.getList()
			},
			
			//获取列表数据
			async getList(){
				// let res=null
				// if(this.status==='已撤回'){
				// 	res=await apiSealList({
				// 		CurrentIndex:this.page,
				// 		Status:this.status,
				// 		Keyword:''
				// 	})
				// }else{
				// 	res=await apiSealApproveList({
				// 		CurrentIndex:this.page,
				// 		Status:this.status,
				// 		Keyword:''
				// 	})
				// }
				let res=await apiSealApproveList({
							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=>{
							return {
								title:item.CompanyName,
								saller:item.UserName,
								submitTime:this.status==='处理中'?item.ModifyTime:item.CreateTime,
								approveTime:item.ApproveTime,
								backTime:item.ModifyTime,
								cancelTime:item.InvalidTime,
								checkBackTime:item.CheckBackFileTime,
								status:item.Status,
								applyType:item.SealType,
								ContractApprovalId:item.ContractApprovalId||0,
								ContractApprovalRecordId:item.ContractApprovalRecordId||0,
								SealId:item.SealId||0,
								AffiliatedCompany:item.AffiliatedCompany,
								type:'seal'
							}
						})
						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;
	}
	.add-btn{
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		bottom: 102rpx;
		right: 34rpx;
		z-index: 100;
	}
</style>