koyo_crm/RuoYi-Mobile-master/pages/work/approve/list.vue

<template>
	<view>
		<u-sticky bgColor="#fff" offset-top="-100rpx" style="z-index: 99;">
			<pageHead pageTitle="审批" :showBack="false" :showLogout="true" style="margin-bottom: -15px;"></pageHead>
			<u-tabs :list="approveTypes" :scrollable="false"
				:activeStyle="{color: '#E60013', fontSize: '32rpx', fontWeight: 'bold'}"
				:inactiveStyle="{color: '#6B7688', fontSize: '32rpx',}" lineWidth="128rpx" lineHeight="8rpx"
				lineColor="#E60114" :itemStyle="{height: '120rpx'}" @change="tabChange"></u-tabs>
		</u-sticky>
		<view class="list-content">
			<!-- 项目报备 -->
			<view v-if="index == 0">
				<view class="list-card" v-for="(item, index) in projectList">
						<view class="flex-center-between">
							<uni-tooltip :content="item.projectName" placement="bottom">
							   <view class="list-card__title">{{item.projectName}}</view>
							</uni-tooltip>
							<view class="flex-center">
								<u-icon name="map" color="#E60114" size="16"></u-icon>
								<view class="list-card__area">{{item.areaName}}</view>
							</view>
						</view>
						<u-divider class="divider"></u-divider>
						<view class="flex-center">
							<view class="list-card__text">申&ensp;报&ensp;人：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.createByName}}</text>
							</view>					
						</view>
						<view class="flex-center">
							<view class="list-card__text">客户名称：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.accountName}}</text>
							</view>
						</view>
						<view class="flex-center">
						
							<view class="list-card__text">代&ensp;理&ensp;商：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.ownerAgentName}}</text>
							</view>
						</view>
						<view class="flex-center">
							<view class="list-card__left">国&emsp;&emsp;家：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.countryName}}</text>
							</view>
							<view class="list-card__text">城&emsp;&emsp;市：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.city}}</text>
							</view>
						</view>
						<view class="flex-center">
							<view class="list-card__text">类&emsp;&emsp;型：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.typeName}}</text>
							</view>
						</view>
						<view class="flex-center mt32">
							<view class="button-left flex-center-middle" @click="toggle(item,'ret')">
								<img class="button-icon" src="@/static/img/approve/reject.png" alt="" />
								<view class="reject-text">驳回</view>
							</view>
							<view class="button-right flex-center-middle" @click="toggle(item, 'pass')">
								<img class="button-icon" src="@/static/img/approve/pass.png" alt="" />
								<view class="pass-text">通过</view>
							</view>
						</view>
				</view>
				<u-empty  v-if="approveTypes[0].badge.value == 0" text="列表为空" mode="list"></u-empty>
			</view>
			<!-- 议价审批 -->
			<view v-if="index == 1">
				<view class="list-card" v-for="(item, index) in bargainList"
					@click="jumpPage('1',item.id)">
					<view class="flex-center-between">
						<uni-tooltip :content="item.projectName" placement="bottom">
							<view class="list-card__title">{{item.projectName}}</view>
						</uni-tooltip>
						<view class="flex-center">
							<u-icon name="arrow-right" color="#000000" size="16"></u-icon>
						</view>
					</view>
				
					<view class="flex-center">
						<view class="list-card__text">报价者：
							<text style="color:#3C485B;">{{item.nickName}}</text>
						</view>
					
					</view>
					
					<view class="flex-center">
				
						<view class="list-card__text">区&emsp;域：
							<text style="color:#3C485B;">{{item.countryName+'/'+item.city}}</text>
						</view>
					</view>
				
					<u-divider class="divider"></u-divider>
				
					<view class="flex-center">
						<view class="list-card__price">
							<view class="txt-label">报价金额</view>
							<view class="txt-value" style="display: flex;align-items: center;justify-content: center;">
								<view class="txt-value-min">{{item.currencyName}}</view>
								<view class="txt-value" >  {{stateFormat(item.price,0)}}</view>
							</view>
						</view>
						<u-line direction="col"></u-line>
						<view style="    transform: scaleX(0.5) ;border: 1px solid #E9EEF3;height: 25px;"></view>
						<view class="list-card__price">
							<view class="txt-label">议价金额</view>
							<view class="txt-value2" style="display: flex;align-items: center;justify-content: center;">
								<view class="txt-value-min">{{item.currencyName}}</view>
								<view class="txt-value2">{{stateFormat(item.bargainPrice,0)}}</view>
							</view>
						</view>
					</view>
				
					<!-- 		<view class="flex-center mt32">
						<view class="button-left flex-center-middle" @click="handleApprove(item, '02')">
							<img class="button-icon" src="@/static/img/approve/reject.png" alt="" />
							<view class="reject-text">驳回</view>
						</view>
						<view class="button-right flex-center-middle" @cl<strong></strong>ick="handleApprove(item, '03')">
							<img class="button-icon" src="@/static/img/approve/pass.png" alt="" />
							<view class="pass-text">通过</view>
						</view>
					</view> -->
				</view>
				<u-empty v-if="approveTypes[1].badge.value == 0" text="列表为空" mode="list"></u-empty><strong></strong>
			</view>
			<!-- 合同审批 -->
			<view v-if="index == 2">
				<view class="list-card" v-for="(item, index) in contractList" 
				@click="jumpPage('2',item.id)">
						<view class="flex-center-between">
							<uni-tooltip :content="item.contractNo" placement="bottom">
							   <view class="list-card__title">{{item.contractNo}}</view>
							</uni-tooltip>
							<view class="flex-center">
								<u-icon name="arrow-right" color="#000000" size="16"></u-icon>
							</view>
						</view>
						<u-divider class="divider"></u-divider>
						<view class="flex-center">
							<view class="list-card__text">合同名称：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.contractName}}</text>
							</view>
						</view>
						<view class="flex-center">
							<view class="list-card__text">申&ensp;报&ensp;人：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.salesmanName}}</text>
							</view>					
						</view>
						<view class="flex-center">
							<view class="list-card__text">终端客户：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.endCustomersName}}</text>
							</view>
						</view>
						<view class="flex-center">
						
							<view class="list-card__text">代&ensp;理&ensp;商：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.agentName}}</text>
							</view>
						</view>
						<view class="flex-center">
							<view class="list-card__left">国&emsp;&emsp;家：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.countryName}}</text>
							</view>
							<view class="list-card__text">城&emsp;&emsp;市：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.city}}</text>
							</view>
						</view>
						<view class="flex-center">
							<view class="list-card__text">装船期限：
								<text style="color: rgba(0, 0, 0, 0.85);">{{item.shipmentDeadline}}</text>
							</view>
						</view>

				</view>
				<u-empty v-if="approveTypes[2].badge.value == 0" text="列表为空" mode="list"></u-empty>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<view>
			<!-- 驳回弹窗 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff" style="border-radius: 8rpx;">
				<view class="popup-content" >
					<view class="return_title">
						<text style="color: rgba(0, 0, 0, 0.85);">驳回原因：</text>
					</view>
					<view class="uni-textarea">
						<textarea v-model.trim="returnMsg" placeholder-style="color:#6B7688" placeholder="请输入驳回原因…" class="return_content" maxlength="200"/>
					</view>
					<view class="flex-center mt32">
						<view class="button-left flex-center-middle" @click="closePup()">
							<img class="button-icon" src="@/static/img/approve/reject.png" alt="" />
							<view class="reject-text">取消</view>
						</view>
						<view class="button-right flex-center-middle" @click="handleApprove('02')">
							<img class="button-icon" src="@/static/img/approve/pass.png" alt="" />
							<view class="pass-text">提交</view>
						</view>
					</view>
				</view>
			</uni-popup>
		
			<!-- 通过弹窗 -->
			<uni-popup ref="popupPass" background-color="#fff" borderRadius="10px 10px 10px 10px" style="width: 90%;">
				<view class="popup-content" style="padding: 20rpx 40rpx" >
					<view class="flex-center" style="justify-content: center;margin-bottom: 20rpx 0 30rpx">
						<view><img style="height: 100%;width: 300rpx;" src="@/static/img/approve/nomessage.png" alt="" /></view>
					</view>
					<view style="text-align: center;margin-bottom: 30rpx">
						<img class="button-icon" src="@/static/img/approve/warning.png" alt="" />
						<text style="color: rgba(0, 0, 0, 0.85);">确认无误并通过审核？</text>
					</view>
					<view class="flex-center mt32" style="margin-bottom: 30rpx;justify-content: center;">
						<view class="button-left-one flex-center-middle" @click="closePup()">
							<img class="button-icon" src="@/static/img/approve/reject.png" alt="" />
							<view class="reject-text">取消</view>
						</view>
						<view style="width: 50rpx;"></view>
						<view class="button-right-one flex-center-middle" @click="handleApprove('03')">
							<img class="button-icon" src="@/static/img/approve/pass.png" alt="" />
							<view class="pass-text">通过</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import * as ApproveApi from '@/api/work/approve'
	import {
		stateFormat
	} from '@/utils/common.js'

	export default {
		data() {
			return {
				index: 0,
				approveTypes: [{
						index: 0,
						name: '项目报备',
						badge: {
							value: 0
						}
					}, {
						index: 1,
						name: '议价审批',
						badge: {
							value: 0
						}
					},
					{
						index: 2,
						name: '合同审批',
						badge: {
							value: 0
						}
					}
				],
				projectPageParam: {
					pageNum: 1,
					pageSize: 5
				},
				bargainPageParam: {
					pageNum: 1,
					pageSize: 5
				},
				contractPageParam: {
					pageNum: 1,
					pageSize: 5
				},
				projectList: [],
				bargainList: [],
				contractList:[],
				projectLoadAll: false,
				bargainLoadAll: false,
				contractLoadAll: false,
				returnItem:{},
				returnMsg:"",
				currencyTypeList:[]
			}
		},
		
		onLoad() {
			this.getProjectList()
			this.getBargainList()
			this.getContractList()
			this.currencyParam();
			uni.getStorage({
				key: 'activePage',
				success: function (res) {
					if(res){
						this.index = res
						uni.removeStorage({
							key: 'activePage'
						});
					}
				}
			});
		},
		onReachBottom() {
			if (this.index == 0) {
				//项目报备
				if (!this.projectLoadAll) {
					this.projectPageParam.pageNum++
					this.getProjectListPage()
				}
			}
			if (this.index == 1) {
				//议价审批
				if (!this.bargainLoadAll) {
					this.bargainPageParam.pageNum++
					this.getBargainListPage()
				}
			}
			if (this.index == 2) {
				//合同审批
				if (!this.contractLoadAll) {
					this.contractPageParam.pageNum++
					this.getContractListPage()
				}
			}

		},
		methods: {
			jumpPage(type,id){
				debugger
				if(type== '1'){
					uni.navigateTo({url:'/pages/work/approve/bargainDtl?quotationId='+id})
					uni.setStorage({
						key: 'activePage',
						data: 1,
						success: function () {
							console.log('success');
						}
					});
				}
				if(type== '2'){
					uni.navigateTo({url:'/pages/work/approve/contractDtl?contractId='+id})
					uni.setStorage({
						key: 'activePage',
						data: 2,
						success: function () {
							console.log('success');
						}
					});
				}
			},
			currencyParam(){
				ApproveApi.getDicts("currency_type").then(res => {
					if (res.code == 200) {
						this.currencyTypeList = res.data;
					}
				})
			},
			onPullDownRefresh(){
				this.getProjectList()
				this.getBargainList()
				this.getContractList()	
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000);
			},
			closePup(){
				this.returnItem = {};
				this.returnMsg = "";
				this.$refs.popup.close()
				this.$refs.popupPass.close()
			},
			toggle(item,type) {
				this.returnItem = item
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if(type  == 'ret'){
					this.$refs.popup.open()
				}else{
					this.$refs.popupPass.open()
				}
			},
			handleApprove(status){
				let that = this
				if(status == '02' && this.returnMsg == ""){
					uni.showToast({
						icon: 'error',
						mask: true,
						title: '请输入驳回原因..',
					})
					return
				}
				//设置实体
				const project = {
					projectId: this.returnItem.projectId,
					status: status,
					updateTime: this.returnItem.updateTime
				}
				if (status == '02') {
					project.refuseReason = this.returnMsg
				}
				ApproveApi.projectApprove(project).then(res => {
					if (res.code == 200) {
						this.closePup();
						setTimeout(() => {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '操作成功',
							})
						}, 500)
						this.getProjectList()
					}
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			stateFormat,
			tabChange(item) {
				this.index = item.index
				switch (item.index) {
					case 0:
						this.getProjectList();
						break;
					case 1:
						this.getBargainList()
						break;
					case 2:
						this.getContractList()
						break;
				}
			},
			//获取项目报备
			getProjectList() {
				this.projectLoadAll = false
				this.projectPageParam.pageNum = 1
				this.getProjectListPage()
			},
			getProjectListPage() {
				ApproveApi.projectList(this.projectPageParam).then(res => {
					if (res.code == 200) {
						// 没有下一页数据了
						if (res.rows.length < this.projectPageParam.pageSize) {
							this.projectLoadAll = true
						}
						if (this.projectPageParam.pageNum == 1) {
							this.projectList = res.rows
						} else {
							this.projectList = [...this.projectList, ...res.rows]
						}
						this.approveTypes[0].badge.value = res.total
					}
				})
			},
			//获议价审批
			getBargainList() {
				this.bargainLoadAll = false
				this.bargainPageParam.pageNum = 1
				this.getBargainListPage()
			},
			getBargainListPage() {
				ApproveApi.bargainList(this.bargainPageParam).then(res => {
					if (res.code == 200) {
						// 没有下一页数据了
						if (res.rows.length < this.bargainPageParam.pageSize) {
							this.bargainLoadAll = true
						}
						if (this.bargainPageParam.pageNum == 1) {
							this.bargainList = res.rows
						} else {
							this.bargainList = [...this.bargainList, ...res.rows]
						}
						this.approveTypes[1].badge.value = res.total
					}
				})
			},
			
			getContractList(){
				this.contractLoadAll = false
				this.contractPageParam.pageNum = 1
				this.getContractListPage()
			},
			getContractListPage(){
				ApproveApi.contractList(this.contractPageParam).then(res => {
					if (res.code == 200) {
						// 没有下一页数据了
						if (res.rows.length < this.contractPageParam.pageSize) {
							this.contractLoadAll = true
						}
						if (this.contractPageParam.pageNum == 1) {
							this.contractList = res.rows
						} else {
							this.contractList = [...this.contractList, ...res.rows]
						}
						this.approveTypes[2].badge.value = res.total
					}
				})
			},
			// 审批
			handleApproveOld(item, status) {
				const that = this
				uni.showModal({
					title: status == '02' ? '是否确认驳回' : '是否确认通过',
					editable: status == '02',
					placeholderText: status == '02' ? '请输入驳回原因' : null,
					cancelColor: '#6B7688',
					confirmColor: '#E60114',
					success: function(res) {
						if (res.confirm) {
							const project = {
								projectId: item.projectId,
								status: status,
								updateTime: item.updateTime
							}
							if (status == '02') {
								project.refuseReason = res.content
							}
							ApproveApi.projectApprove(project).then(res => {
								if (res.code == 200) {
									setTimeout(() => {
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '操作成功',
										})
									}, 500)
									that.getProjectList()
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #EFF2F6;
	}
</style>

<style lang="scss" scoped>
	.list-card__text{
		
	}
	.list-card__left{
		width: 55%;
	    font-size: 18px;
		color: #6B7688;
		line-height: 20px;
	}
	.txt-label {
		color: #3C485B;
		text-align: center;
		margin-bottom: 5px;
	}
	.txt-value-min {
		color: #000000;
		text-align: center;
		font-size: 16px;
		font-weight: 600;
	}

	.txt-value {
		color: #000000;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
	}

	.txt-value2 {
		color: #E60012;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
	}

	.list-card__price {
		width: 50%;
	}

	::v-deep .u-badge--error {
		background-color: #E60114;
	}

	.flex-center {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.flex-center-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.flex-center-middle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ml40 {
		margin-left: 40rpx
	}

	.mt32 {
		margin-top: 32rpx;
	}

	.list-content {
		padding: 20rpx 24rpx;

		.divider {
			margin: 32rpx 0;
			border: 2rpx solid #E9EEF3;
		}

		.list-card {
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx;
			margin-bottom: 20rpx;

			&__title {
				font-weight: 600;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
				width: 480rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&__area {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.85);
				line-height: 32rpx;
			}

			&__text {
				font-size: 32rpx;
				color: #6B7688;
				line-height: 40rpx;
			}

			.developer {
				color: rgba(0, 0, 0, 0.85);
				width: 490rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.button-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			.button-left {
				width: 350rpx;
				height: 84rpx;
				background: #FFF8F8;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;
				.reject-text {
					font-size: 32rpx;
					color: #E60114;
					line-height: 44rpx;
				}
			}

			.button-right {
				width: 350rpx;
				height: 84rpx;
				background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
				box-shadow: 0px 2px 8px 0px #DFDFDF;
				border-radius: 0rpx 200rpx 200rpx 0rpx;

				.pass-text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		
		}
	}

	.popup-content {
		padding: 20rpx 20rpx;
		.return_content{
			width: 92%;
			padding: 20rpx 28rpx;
			background: #EFF2F6;
			border-radius: 4px;
		}
		.return_title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 16px;
			color: rgba(0,0,0,0.85);
			margin-bottom: 10rpx;
		}
		.button-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}
		
		.button-left {
			width: 350rpx;
			height: 84rpx;
			background: #FFF8F8;
			border-radius: 200rpx 0rpx 0rpx 200rpx;
			box-shadow: 0px 2px 8px 0px #DFDFDF;
			.reject-text {
				font-size: 32rpx;
				color: #E60114;
				line-height: 44rpx;
			}
		}
		
		.button-right {
			width: 350rpx;
			height: 84rpx;
			background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
			border-radius: 0rpx 200rpx 200rpx 0rpx;
			box-shadow: 0px 2px 8px 0px #DFDFDF;
		
			.pass-text {
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
			}
		}
		.button-left-one {
			width: 220rpx;
			height: 84rpx;
			background: #FFF8F8;
			border-radius: 200rpx;
			box-shadow: 0px 2px 8px 0px #DFDFDF;
			.reject-text {
				font-size: 32rpx;
				color: #E60114;
				line-height: 44rpx;
			}
		}
		
		.button-right-one {
			width: 220rpx;
			height: 84rpx;
			background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
			border-radius: 200rpx;
			box-shadow: 0px 2px 8px 0px #DFDFDF;
		
			.pass-text {
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
			}
		}
		
		


			
		
	}

</style>