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

<template>
	<view class="detail-page white-wrap">
		<view>
		<!-- 基础信息 -->
		<view class="section white-wrap base-info-wrap" v-if="detail">
			<image :src="statusImg" mode="aspectFill" class="status-img"></image>
			<view class="title">
				<text>{{detail.CompanyName}}</text>
				<!-- van-tag 
					color="#ECF5FF" 
					text-color="#4A83F1"
					style="margin-bottom:0;margin-left: 10rpx;"
				>新签</van-tag> -->
			</view>
			<view class="base-info-list">
				<view>
					<text class="lable">合同编号：</text>
					<text >{{detail.ContractCode}}</text>
					<van-tag color="#ECF5FF" text-color="#4A83F1" style="margin-left:5px;margin-top:2px">{{detail.ContractType}}</van-tag>
				</view>
				<view style="margin-bottom:0">
					<text class="lable">合同期限：</text>
					<text>{{detail.StartDate|formatDate}}~{{detail.EndDate | formatDate}}</text>
				</view>
				<view style="padding-left:140rpx">({{detail.StartDate|formateYear(detail.EndDate)}})</view>
				<view>
					<text class="lable">合同金额：</text>
					<text style="color:#FE6B7C">{{detail.Price}}元</text>
				</view>
				<view>
					<text class="lable">合同归属：</text>
					<text>{{detail.ProductId===1?'FICC':'权益'}}</text>
				</view>
				<view>付款方式说明：{{detail.PayRemark}}</view>
				<view>付款渠道：{{detail.PayChannel}}</view>
				<view v-if="detail.SellerRemark">备注：{{detail.SellerRemark}}</view>
				<view v-if="detail && detail.Status === '已驳回'">
					<text class="lable" style="color:#FE6B7C">驳回理由：</text>
					<text style="color:#FE6B7C">{{ detail.ApprovalRemark }}</text>
				</view>
			</view>
		</view>
		<!-- 变更说明 -->
		<view class="section white-wrap change-info-wrap" v-if="changeDesc.length>0">
			<view class="title">变更说明</view>
			<view style="margin-bottom: 20rpx;" v-for="(item,index) in changeDesc" :key="index">{{index+1}}、{{item}}</view>
		</view>
		<!-- 服务内容 -->
		<view class="section white-wrap service-wrap">
			<view class="title">服务内容</view>
			<view style="margin-bottom: 30rpx;" >
				<view class="service-item flex" v-for="item in detail.Service" :key="item.Title">
					<text style="width:60%">{{item.Title}}</text>
					<text class="btn" @click="handlePreviewImg(item.Value)">查看服务单</text>
				</view>
			</view>
			<view v-if="detail.Remark" style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px;margin-bottom: 30rpx;">补充内容：{{detail.Remark}}</view>
			<view style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px" v-if="varietyList.length>0">
				<view style="margin-bottom:10rpx">小套餐购买品种</view>
				<view class="variety-list">
					<view class="variety-item flex" v-for="item in varietyList" :key="item.ClassifyName">
						<view class="lable">{{ item.ClassifyName }}：</view>
						<view class="content">
							<van-tag color="#ECF5FF" text-color="#4A83F1" v-for="tag in item.Items"
								:key="tag.ChartPermissionId" custom-class="tag">{{ tag.PermissionName }}</van-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 回签附件 -->
		<view class="section white-wrap contract-wrap" v-if="detail.Status==='已签回'">
			<view class="title">回签附件</view>
			<view class="contract-list">
				<view class="contract-item" v-for="item in checkBackFiles" :key="item.url"
					@click="preViewContract(item)">
					<image class="contract-img" mode="aspectFill" :src="item.img"></image>
				</view>
			</view>
		</view>

		<!-- 解约附件 -->
		<view class="section white-wrap contract-wrap" v-if="detail.Status==='已解约'">
			<view class="title">解约附件</view>
			<view class="contract-list">
				<view class="contract-item" v-for="item in rescindFile" :key="item.url"
					@click="preViewContract(item)">
					<image class="contract-img" mode="aspectFill" :src="item.img"></image>
				</view>
			</view>
		</view>
		
		<!-- 合同模块 -->
		<view class="section white-wrap contract-wrap" v-if="constractFiles.length !== 0&&detail.Status!='已签回'&&detail.Status!='已解约'">
			<view class="title">合同预览</view>
			<view class="contract-list">
				<view class="contract-item" v-for="item in constractFiles" :key="item.url"
					@click="preViewContract(item)">
					<image class="contract-img" mode="aspectFill" :src="item.img"></image>
				</view>
			</view>
		</view>
		
		<!-- 客户信息模块 -->
		<view class="section white-wrap customer-wrap">
			<view class="title">客户信息</view>
			<view class="customer-main-info">
				<view class="customer-info-item">
					<text>客户名称：</text>
					<text>{{detail.CompanyName}}</text>
				</view>
				<view class="customer-info-item">
					<text>社会信用码：</text>
					<text>{{detail.CreditCode}}</text>
				</view>
				<view class="customer-info-item">
					<text>地址：</text>
					<text>{{detail.Province}}{{detail.City}}{{detail.Address}}</text>
				</view>
				<view class="customer-info-item">
					<text>申请人：</text>
					<text>{{detail.SellerName}}</text>
				</view>
			</view>
		</view>
		
		<!-- 流程模块 -->
		<view class="section white-wrap process-wrap" v-if="flowNodeList">
			<view class="title">审批流程</view>
			<steps :data="flowNodeList"></steps>
		</view>
		</view>
		
		<!-- 审批按钮 -->
		<view class="fix-bottom-wrap btns-wrap flex" v-if="opt.Approval">
			<button class="pass-btn" @click="handlePass">通过</button>
			<button class="refuse-btn" @click="handleRefuse">驳回</button>
		</view>
		<!-- 上传回签附件 -->
		<view class="fix-bottom-wrap btns-wrap flex" v-if="opt.UploadFile">
			<button class="pass-btn" style="width: 450rpx;" @click="handleUploadMethod('file')">{{detail.Status==='已审批'?'上传回签附件':'更新回签附件'}}</button>
		</view>
		<!-- 作废合同 -->
		<!-- <view class="fix-bottom-wrap btns-wrap flex" v-if="opt.Invalid">
			<button class="refuse-btn" style="width: 450rpx;" >作废合同</button>
		</view> -->
		
		<!-- 上传回签附件选择上传文件类型弹窗 -->
		<van-popup :show="show" @close="show=false" round>
			<view style="width: 50vw;text-align: center;font-size: 16px;padding: 32rpx;line-height: 80rpx;">
				<view @click="handleUploadMethod('img')">上传图片</view>
				<view @click="handleUploadMethod('file')">上传文件</view>
			</view>
		</van-popup>
		
		<!-- 上传回签附件弹窗 -->
		<van-popup :show="showUpload" @close="showUpload=false" position="bottom" round>
			<view class="uploadfile-wrap">
				<view style="text-align: center;font-size: 16px;font-weight: bold;">上传回签附件</view>
				<view class="contract-list" style="height: 30vh;">
					<view class="contract-item" v-for="item in files" :key="item.url"
						@click="preViewContract(item)">
						<image class="contract-img" mode="aspectFill" :src="item.img"></image>
					</view>
				</view>
				<button style="width: 450rpx;" @click='handleConfirmSignBack'>确定</button>
			</view>
		</van-popup>
		
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import {apiContractDetail,apiContractApproved,apiContractApprovalDetail,apiContractSignBackFiles} from '@/api/approve/contract.js'
	import steps from '../components/steps.vue'
	import {preViewFile} from '../utils/util.js'
	import {uploadImg,uploadFiles} from '@/utils/uploadFile.js'
	export default{
		components:{
			steps
		},
		filters:{
			formatDate(e){
				if(e==='0001-01-01T00:00:00Z'){
					return ''
				}else{
					return e.split('T')[0].replace(/-/g,'.')
				}
			},
			formatTime(e){
				if(e==='0001-01-01T00:00:00Z'){
					return ''
				}else{
					return e.replace(/T/g,' ').replace(/\+08:00/g,' ').replace(/-/g,'.')
				}
			},
			formateYear(s,e){
				let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
				let start = new Date(s);
				let end = new Date(e);
				let year = end.getFullYear() - start.getFullYear();
				let month = end.getMonth() - start.getMonth();
				let day = end.getDate() - start.getDate();
				if (month < 0) {
					year--;
					month = end.getMonth() + (12 - start.getMonth());
				}
				if (day < 0) {
					month--;
					let index = flag.findIndex((temp) => {
						return temp === start.getMonth() + 1
					});
					let monthLength;
					if (index <= 6) {
						monthLength = 31;
					} else if (index > 6 && index <= 10) {
						monthLength = 30;
					} else {
						monthLength = 28;
					}
					day = end.getDate() + (monthLength - start.getDate());
				}
				

				return `有效期为 ${year>0?year+'年':''}${month>0?month+'个月':''}${day>0?day+'天':''}`;
			}
		},
		computed:{
			// 处理变更说明
			changeDesc(){
				return this.detail&&this.detail.ModifyContent&&this.detail.ModifyContent.split('<br/>').filter(item=> item)
			},
			//回签附件
			checkBackFiles(){
				const reg = /\.(pdf)|\.doc|\.docx$/;
				return this.detail&&this.detail.CheckBackFileUrl&&this.detail.CheckBackFileUrl.split("#").map((item) => {
					if (reg.test(item)) {
						return {
							type: "pdf",
							url: item,
							img: require("@/pages-approve/static/pdf.png"),
						};
					} else {
						return {
							type: "img",
							url: item,
							img: item,
						};
					}
				});
			},
			//解约附件
			rescindFile(){
				const reg = /\.(pdf)|\.doc|\.docx$/;
				return this.detail&&this.detail.RescindFileUrl&&this.detail.RescindFileUrl.split("#").map((item) => {
					if (reg.test(item)) {
						return {
							type: "pdf",
							url: item,
							img: require("@/pages-approve/static/pdf.png"),
						};
					} else {
						return {
							type: "img",
							url: item,
							img: item,
						};
					}
				});
			},
			// 合同附件
			constractFiles(){
				const reg = /\.(pdf)|\.doc|\.docx$/;
				return this.detail&&this.detail.FileUrl&&this.detail.FileUrl.split("#").map((item) => {
					if (reg.test(item)) {
						return {
							type: "pdf",
							url: item,
							img: require("@/pages-approve/static/pdf.png"),
						};
					} else {
						return {
							type: "img",
							url: item,
							img: item,
						};
					}
				});
			},
			// 状态图标
			statusImg(){
				if(!this.detail) return
				if(this.detail.Status==='已审批'){
					return require('../static/pass-icon.png')
				}else if(this.detail.Status==='已签回'){
					return require('../static/draw-back-icon.png')
				}else if(this.detail.Status==='已驳回'){
					return require('../static/fail-icon.png')
				}else if(this.detail.Status==='已作废'){
					return require('../static/cancel-icon.png')
				}else if(this.detail.Status==='已撤回'){
					return require('../static/recall-icon.png')
				}else if(this.detail.Status==='处理中'){
					return require('../static/processing-icon.png')
				}else if(this.detail.Status==='已解约'){
					return require('../static/jieyue-icon.png')
				}
			}
		},
		data() {
			return {
				ContractApprovalId: null,//审批单id
				ContractApprovalRecordId:null,//审批流程单id
				ContractId:null,//合同id
				detail:null,
				flowNodeList:null,
				opt:{},
				show:false,
				showUpload:false,
				files:[],
				varietyList:[],
			}
		},
		onLoad(options) {
			this.ContractApprovalId=options.ContractApprovalId||0
			this.ContractApprovalRecordId=options.ContractApprovalRecordId||0
			this.ContractId=options.ContractId||0
		},
		onShow() {
			// 当合同id 不存在时(或0) 使用审批详情
			if(this.ContractId!=0){
				this.getContractDetail()
			}else{
				this.getApprovalDetail()
			}
		},
		onPullDownRefresh() {
			if(this.ContractId!=0){
				this.getContractDetail()
			}else{
				this.getApprovalDetail()
			}
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		methods: {
			//确认提交上传回签附件
			async handleConfirmSignBack(){
				let FileUrlarr=this.files.map(item=>item.url)
				const res=await apiContractSignBackFiles({
					ContractId:Number(this.detail.ContractId),
					FileUrl:FileUrlarr.join('#')
				})
				if(res.code===200){
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					// 已审批上传签回附件更新列表
					if(this.detail.Status==='已审批'){
						uni.$emit('contractApproveListUpdate',{
							ContractApprovalId:this.ContractApprovalId,
							ContractApprovalRecordId:this.ContractApprovalRecordId,
							ContractId:this.ContractId
						})
					}
					setTimeout(()=>{
						this.showUpload=false
						this.files=[]
						if(this.ContractId!=0){
							this.getContractDetail()
						}else{
							this.getApprovalDetail()
						}
					},1000)
				}
			},
			
			// 上传回签附件文件
			async handleUploadMethod(type){
				let res=[]
				if(type==='img'){
					res=await uploadImg()
				}else if(type==='file'){
					res=await uploadFiles({type:'file'})
				}
				const reg = /\.(pdf)|\.doc|\.docx$/;
				if(!reg.test(res[0])){
					uni.showToast({
						title:'请上传pdf/word格式文件',
						icon:"none"
					})
					return 
				}
				this.files=[{type:'pdf',url:res[0],img: require("@/pages-approve/static/pdf.png")}]
				// this.files=res.map((item) => {
				// 	if (reg.test(item)) {
				// 		return {
				// 			type: "pdf",
				// 			url: item,
				// 			img: require("@/pages-approve/static/pdf.png"),
				// 		};
				// 	} else {
				// 		return {
				// 			type: "img",
				// 			url: item,
				// 			img: item,
				// 		};
				// 	}
				// });
				this.show=false
				this.showUpload=true
			},
			
			// 审批单详情
			async getApprovalDetail() {
				const res=await apiContractApprovalDetail({
					ContractApprovalId:Number(this.ContractApprovalId),
					ContractApprovalRecordId:Number(this.ContractApprovalRecordId)
				})
				if(res.code===200){
					this.detail=res.data.ContractDetail
					this.opt=res.data.OpButton
					this.flowNodeList=res.data.FlowNodeList
					this.handleVariety(res.data.ContractDetail.Service)
				}
			},
			
			//合同详情
			async getContractDetail(){
				const res=await apiContractDetail({ContractId:Number(this.ContractId)})
				if(res.code===200){
					this.detail=res.data.ContractDetail
					this.opt=res.data.OpButton
					this.flowNodeList=res.data.FlowNodeList
					this.handleVariety(res.data.ContractDetail.PermissionLookList)
				}
			},

			// 处理小套餐选中的品种
			handleVariety(e){	
				let arr=e.filter(item=>{
					return item.CheckList.length>0
				})
				arr.forEach(item=>{
					item.Items=item.Items.filter(_item=>{
						return item.CheckList.includes(_item.ChartPermissionId);
					})
				})
				this.varietyList=arr
			},
			
			handlePreviewImg(url){
				uni.previewImage({
					urls:[url]
				})
			},
			
			// 预览合同文件
			preViewContract(e) {
				if (e.type === "pdf") {
					preViewFile(e.url)
				} else {
					this.handlePreviewImg(e.url)
				}
			},
			
			//审批通过
			async handlePass(){
				const res=await apiContractApproved({ContractId:Number(this.detail.ContractId)})
				if(res.code===200){
					this.$dialog.alert({
						title: "处理成功",
						confirmButtonColor: "#5890FB",
					}).then(() => {
						// on close
 						// 当合同id 不存在时(或0) 使用审批详情
 						if(this.ContractId!=0){
 							this.getContractDetail()
 						}else{
 							this.getApprovalDetail()
 						}

						// 更新列表
						uni.$emit('contractApproveListUpdate',{
							ContractApprovalId:this.ContractApprovalId,
							ContractApprovalRecordId:this.ContractApprovalRecordId,
							ContractId:this.ContractId
						})
					});
				}
			},
			
			//审批驳回
			handleRefuse(){
				uni.$once('contractApproveReject',()=>{
					// 更新列表
					uni.$emit('contractApproveListUpdate',{
						ContractApprovalId:this.ContractApprovalId,
						ContractApprovalRecordId:this.ContractApprovalRecordId,
						ContractId:this.ContractId
					})
				})
				uni.navigateTo({
					url:"./reason?ContractId="+this.detail.ContractId
				})
			}
		},
	}
</script>

<style lang="scss">
	.detail-page {
		width: 100%;
		min-height: 100%;
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	}
	
	.section {
		padding: 30rpx 34rpx;
		border-bottom: 14rpx solid #f5f5f5;
	
		&:last-child {
			margin-bottom: 0;
			border: none;
		}
	
		.title {
			font-size: 16px;
			font-weight: bold;
			margin: 0 0 40rpx 0;
			color: #333;
		}
	
		.lable {
			color: #666;
			flex-shrink: 0;
			font-size: 14px;
		}
	}
	.section::last-child{
		border: none;
	}
	.base-info-wrap {
		position: relative;
		.status-img{
			position: absolute;
			width: 222rpx;
			height: 222rpx;
			right: 0;
			top: 150rpx;
			z-index: 10;
		}
		.title {
			margin: 0 0 40rpx 0;
	
			&::before {
				content: "";
				display: inline-block;
				width: 15px;
				height: 17px;
				background-image: url("@/static/man.png");
				background-size: cover;
				background-repeat: no-repeat;
				margin-right: 10rpx;
				position: relative;
				top: 4rpx;
			}
		}
	
		.base-info-list {
			font-size: 14px;
			color: #000;
	
			view {
				margin-bottom: 10px;
				display: flex;
			}
		}
	}
	
	.contract-list {
		display: flex;
		flex-wrap: wrap;
	
		.contract-img {
			width: 102rpx;
			height: 120rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.service-wrap{
		color: #666;
		.service-item{
			margin-bottom: 30rpx;
			position: relative;
			justify-content: space-between;
			.btn{
				color: #3385FF;
			}
			// &::after{
			// 	content: '查看服务单';
			// 	display: inline-block;
			// 	color: #3385FF;
			// 	position: absolute;
			// 	left: 35%;
			// }
		}
	}
	
	.customer-main-info {
		padding-bottom: 40rpx;
	}
	
	.customer-info-item {
		font-size: 14px;
		color: #999;
		margin-bottom: 20rpx;
	}
	
	.customer-info-list {
		flex-wrap: wrap;
		padding-top: 20rpx;
	}

	.variety-list{
		.variety-item {
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
		}

		.variety-item:first-child {
			padding-top: 0;
		}

		.variety-item:last-child {
			border-bottom: none;
		}

		.tag {
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
	}

	
	.btns-wrap {
		justify-content: center;
		button {
			width: 260rpx;
			height: 70rpx;
			border-radius: 28px;
			border: none;
			margin: 0 15px;
			font-size: 15px;
			color: #fff;
			line-height: 70rpx;
		}
		
		.pass-btn {
			background-color: #5890fb;
		}
		
		.refuse-btn {
			background-color: #f55768;
		}
	}
	
	.uploadfile-wrap{
		width: 100%;
		height: 50vh;
		background-color: #FFFFFF;
		padding: 32rpx;
		button {
			margin-left: auto;
			margin-right: auto;
			width: 260rpx;
			height: 70rpx;
			display: block;
			border-radius: 28px;
			border: none;
			font-size: 15px;
			color: #fff;
			line-height: 70rpx;
			background-color: #5890fb;
		}
	}
</style>