yiliangyiyun-app/pages/task/audit/salecontract.vue

<template>
	<view class="container">
		<u-form ref="uForm">
			<u-form-item label-width='260' label="合同编号">
				<u-input v-model="list.contractNo" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="运输方式">
				<u-input v-model="list.shippingType" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="买方">
				<u-input v-model="list.buyer" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="买方电话">
				<u-input v-model="list.buyerPhone" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="卖方">
				<u-input v-model="list.seller" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="卖方电话">
				<u-input v-model="list.sellerPhone" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="结算方式">
				<u-input v-model="list.settlementMethod" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="交货方式">
				<u-input v-model="list.deliverType1" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="包装方式">
				<u-input v-model="list.packingMethod" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="验收方式">
				<u-input v-model="list.acceptanceMethod" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="重量（吨）">
				<u-input v-model="list.weight" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="交货日期（起）">
				<u-input v-model="list.deliveryDateStart" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="溢短装（%）">
				<u-input v-model="list.overShort" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="交货日期（止）">
				<u-input v-model="list.deliveryDateEnd" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="合同单价（元/吨）">
				<u-input v-model="list.unitContractPrice" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="合同总价（元）">
				<u-input v-model="list.totalContractPrice" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="货源所在地区">
				<view class="textCss">
					{{list.sourceProvince}}{{list.sourceCity}}{{list.sourceArea}}
				</view>
			</u-form-item>
			<u-form-item label-width='260' label="货源详细地址">
				<u-input v-model="list.sourceGoods" input-align="right" placeholder="" disabled/>
			</u-form-item>
			<u-form-item label-width='260' label="交货地所在地区">
				<view class="textCss">
					{{list.deliveryProvince}}{{list.deliveryCity}}{{list.deliveryArea}}
				</view>
			</u-form-item>
			<u-form-item label-width='260' label="交货地详细地址">
				<u-input v-model="list.placeDelivery" input-align="right" placeholder="" disabled/>
			</u-form-item>
			<u-form-item label-width='260' label="签订日期">
				<u-input v-model="list.signingDate" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='300' label="最终实际交易量 (吨)">
				<u-input v-model="list.finalTradingVolume" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="货名">
				<u-input v-model="list.contractGoodsInfo.goodsName" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="水分（%）<=">
				<u-input v-model="list.contractGoodsInfo.waterContent" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="品级">
				<u-input v-model="list.contractGoodsInfo.grade" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="杂质（%）<=">
				<u-input v-model="list.contractGoodsInfo.impurity" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item  label-width='260' label="容重（克/升）>=">
				<u-input v-model="list.contractGoodsInfo.bulkDensity" input-align="right" placeholder="" disabled/>
			</u-form-item>
			<u-form-item label-width='260' label="霉变粒（%）<=">
				<u-input v-model="list.contractGoodsInfo.mildewGrain" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="热损伤（%）<=">
				<u-input v-model="list.contractGoodsInfo.jiaorenli" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="不完善粒（%）<=">
				<u-input v-model="list.contractGoodsInfo.imperfectGrain" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="合同收入（元）">
				<u-input v-model="list.contractProcessInfo.goodsNameKey" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="已开发票（元）">
				<u-input v-model="list.contractProcessInfo.goodsName" input-align="right" placeholder="" disabled />
			</u-form-item>


			<u-form-item label-width='260' label="费用支出（元）">
				<u-input v-model="list.contractProcessInfo.waterContent" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="未开发票（元）">
				<u-input v-model="list.contractProcessInfo.impurity" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="未回款（元）">
				<u-input v-model="list.contractProcessInfo.mildewGrain" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="双章原件回收情况">
				<u-input v-model="list.contractProcessInfo.grade" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="备注信息">
				<u-input v-model="list.remarks" input-align="right" placeholder="" disabled />
			</u-form-item>
			<u-form-item label-width='260' label="附件">
				<!-- <view class="textCss">
					<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1" :file-list="imglist"
					:size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress" :deletable="false" :showProgress = "false"></upload>
				</view> -->
				<!-- {{list.contractProcessInfo.grade}} -->
				<!-- <view v-for='item in imglist'>
					<image style='width:100px;height:100px;' :src="item" mode=""></image>
				</view> -->
				<view v-for='item in imglist'>
					<view @click='shadeshow(item)'>
						<image style='width: 200rpx;height: 200rpx;' :src="item" mode=""></image>
					</view>
				</view>

			</u-form-item>
		</u-form>
		<view style='padding:10px;' class='flex bottom-btn'>
			<u-button v-if='list.approveStatus' @click='reject' type="error" class="btn1" hover-class='none'>驳回
			</u-button>
			<u-button v-if='list.approveStatus' @click='pass' type="success" class="btn2">通过</u-button>
		</view>
		<view v-if='show' class="shade">
			<view class="wrap">
				<view style='border-bottom:1px solid #eee;padding:10px;display:flex;justify-content:space-between;'>
					{{title}}
					<u-icon name="close"></u-icon>
				</view>
				<view style='padding:10px;'>
					<input v-model='auditMind' placeholder="请输入审核意见,不超过100字" type="text" value="" />
				</view>
				<view @click='passSubmit()' class="cancel">取消</view>
				<view @click='passSubmit()' class="confirm">确定</view>
			</view>
		</view>
		<view @click='imgShow=false' v-if="imgShow" class="shade">
			<image style='position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;' :src="url" mode=""></image>
		</view>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	export default {
		components: {
			upload
		},
		data() {
			return {
				id: "",
				currentPage: 1,
				pageSize: 10,
				list: [{
					status: "",
				}],
				imglist: [],
				auditMind: '',
				show: false,
				title: '',
				contractNo: "",
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: true,
				url:"",
				imgShow:false
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getList()
		},
		methods: {
			shadeshow(url){
				this.imgShow=true
				this.url=url
			},
			getList(id) {
				var that = this
				this.$api.doRequest('get', '/contractManagementInfo/getInfo', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.list = res.data.data
						if (this.list.deliverType == 1) {
							this.list.deliverType1 = '我方送货'
						} else if (this.list.deliverType == 2) {
							this.list.deliverType1 = '对方自提'
						}
						this.$api.doRequest('get', '/appendix/query/getFileList', {
							appendixIds: that.list.addressUrl
						}).then(res1 => {
							for (var i = 0; i < res1.data.data.length; i++) {
								that.imglist.push(
									res1.data.data[i].appendixPath
								)
							}
						})
					}
				})
			},
			onRemove() {

				return
			},
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			//驳回
			rejectSubmit() {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				that.$api.doRequest('post', '/workflow/api/handle', {
					taskId: that.list.taskId,
					approved: false,
					auditMind: this.auditMind,
					needReapply: true,
				}).then(res => {
					uni.hideLoading()
					that.$api.msg('驳回成功')
					that.show = false
				})
			},
			pass() {
				this.show = true
				this.title = '审核意见'
			},
			reject() {
				this.show = true
				this.title = '驳回原因'
			},
			//通过
			passSubmit() {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				that.$api.doRequest('post', '/workflow/api/handle', {
					taskId: that.list.taskId,
					approved: true,
					auditMind: this.auditMind,
					needReapply: true,
				}).then(res => {
					uni.hideLoading()
					that.$api.msg('通过成功')
					that.show = false
					setTimeout(function() {
						uni.navigateBack()
					}, 1000);
				})
			},
			//审核方法
			audit(item, index, status, status2, reason) {
				if (index < this.list.length) {
					this.$api.doRequest('post', '/workflow/api/handle', {
						taskId: item.taskId,
						approved: status,
						auditMind: reason != undefined ? '已驳回' : '34',
						needReapply: status2 != undefined ? true : false,
					}).then(res => {
						this.audit(this.list[index + 1], index + 1, status)
					})
				} else {
					if (status == true) {
						that.$api.msg('通过成功')
						this.getList()
					} else if (status == false) {
						that.$api.msg('驳回成功')
						this.getList()
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 20rpx 250rpx 20rpx;
	}

	.u-form {
		background: #fff;
		border-radius: 10px;
		padding: 0 10px;

		.u-form-item {
			line-height: 30px;
			padding: 5px 0;
		}
	}

	.content {
		margin-top: 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
		}

		.content-item {
			border-radius: 20rpx;
			background: white;
			padding: 40rpx 20rpx;
			margin-bottom: 30rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			text-align: left;
			margin: 20rpx 0;
		}

		.car-container {
			border-bottom: 2rpx solid #EEEEEE;
		}

		.car-type-item {
			font-size: 28rpx;
			margin: 20rpx 0;
			color: #878C9C;
		}

		.weightInfoCss {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}

		.row {
			display: flex;
			justify-content: space-between;
			// .right,
			// input {
			// 	font-size: 28rpx;
			// 	// color: #333333;
			// }
		}

		.money {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 30rpx;
		}

		.moneyInfo {
			color: #22C572;
			font-size: 32rpx;
		}
	}

	.bottom-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		z-index: 2;
		left: 0;
		background-color: #f8f8f8;
		flex-direction: column;

		.btn1,
		.btn2 {
			width: 100%;
			margin-bottom: 26rpx;
			border-radius: 90rpx;
		}

		.btn1 {
			background: white;
			color: #00C265;
		}
	}

	.topInfo {
		height: 210rpx;
		background: linear-gradient(270deg, #22C572 0%, #34DE8A 100%);
		padding: 30rpx;

		.topInfo-item {
			height: 150rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;

			.logo {
				width: 40rpx;
				height: 40rpx;
				margin-top: 8rpx;
			}

			.infoText {
				font-size: 36rpx;
				font-weight: 600;
				margin-left: 20rpx;
			}

			.infoData {
				color: #878C9C;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.shade {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.1);
		z-index: 3;

		.wrap {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background: #fff;
			width: 80%;
			height: 30%;
		}
	}

	.cancel,
	.confirm {
		position: absolute;
		display: inline-block;
		width: 50%;
		text-align: center;
		bottom: 0;
		padding: 10px;
		border-top: 1px solid #eee;
	}

	.cancel {
		left: 0;
		border-right: 1px solid #eee;
	}

	.confirm {
		right: 0;
	}

	.textCss {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}
	.shade{
		background:#000;
		position:fixed;
		top:0;left:0;
	   width:100%;height:100%;
	   z-index:10000;
	}
</style>