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

<template>
	<view class="detail white-wrap">
		<image :src="statusImg" mode="aspectFill" class="status-img" v-if="statusImg"></image>
		<view class="section white-wrap">
			<view class="section-title require">用印用途</view>
			<view :class="opButton.CheckEdit?'section-select-box':null" :style="{color:oldUse?'#333':'#999'}" @click="handleOperation('showPurpose')">{{oldUse?oldUse:'请选择'}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">客户名称（全称）</view>
			<view>{{detail.CompanyName}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">统一社会信用码</view>
			<input type="text" v-model="detail.CreditCode" placeholder="请填写统一社会信用码" disabled/>
		</view>
		<view class="section white-wrap">
			<view class="section-title">实际使用方名称</view>
			<input type="text" v-model="detail.UseCompanyName" placeholder="请填写实际使用方名称" disabled/>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">业务类型</view>
			<input type="text" v-model="detail.ServiceType" placeholder="请填写业务类型" disabled/>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">文件份数</view>
			<input type="number" v-model="oldFileNum" placeholder="请填写总共盖章文件份数" :disabled="!opButton.CheckEdit"/>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">加盖何种印章</view>
			<view :class="opButton.CheckEdit?'section-select-box':null" :style="{color:oldSealType?'#333':'#999'}" @click="handleOperation('showType')">{{oldSealType?oldSealType:'请选择'}}</view>
		</view>
		<view class="section white-wrap" v-if="detail.ContractId>0">
			<view class="section-title require">合同附件</view>
			<image 
				:src="files.img" 
				mode="aspectFill" 
				style="width: 102rpx;height: 120rpx" 
				@click="handlepreViewFile(files)">
			</image>
		</view>
		<view class="section white-wrap" v-else>
			<view class="section-title require">合同附件</view>
			<!-- 合规可修改上传 -->
			<div class="check-file-box" :style="'background-image:url('+files.img+')'" v-if="files.url" @click="handlepreViewFile(files)">
				<image class="del-icon" src="../static/del-icon.png" @click.stop="handleDeleteCheckFile" v-if="opButton.CheckEdit"></image>
			</div>
			<image v-else @click="handleUpload" src="../static/upload-icon.png" mode="aspectFill" style="width: 102rpx;height: 120rpx;"></image>
		</view>
		<view class="section white-wrap" v-if="detail.Status==='已驳回'">
			<view class="section-title">驳回理由</view>
			<view style="color: #F55768;">{{detail.ApprovalRemark}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title">备注</view>
			<textarea type="text" v-model="oldRemark" placeholder="请填写备注" :disabled="!opButton.CheckEdit"></textarea>
		</view>
		<!-- 流程模块 -->
		<view class="section white-wrap process-wrap">
			<view class="title" style="font-size: 16px;font-weight: bold;">审批流程</view>
			<steps :data="processData"></steps>
		</view>
		
		<!-- 审批/撤回申请 -->
		<view class="fix-bottom-wrap" style="text-align: center;" v-if="opButton.Approval||opButton.Cancel">
			<div class="flex" style="justify-content: space-between;width:100%">
				<van-button type="info" color="#3385FF" style="flex:1;" custom-class="btn-small" round @click="handleClickPass" v-if="opButton.Approval">通过</van-button>
				<van-button type="info" color="#F55768" style="flex:1;" custom-class="btn-small" round @click="handleApprovalReject" v-if="opButton.Approval">驳回</van-button>
				<van-button type="info" color="#F55768" style="flex:1;" :custom-class="opButton.Approval?'btn-small':'btn-big'" round @click="handleCancelApply" v-if="opButton.Cancel">撤回申请</van-button>
			</div>
		</view>
		<!-- 作废 -->
		<view class="fix-bottom-wrap" style="text-align: center;" v-if="opButton.Invalid">
			<view v-if="detail.ContractId>0" style="margin-bottom: 10rpx;" @click="checked=!checked"><radio value="同时作废合同" :checked="checked" color="#3385FF" style="transform:scale(0.8)"/>是否同时作废合同？</view>
			<van-button type="info" color="#F55768" custom-class="btn-big" round @click="handleSealInvalid">用印作废</van-button>
		</view>
		<!-- 重新提交 -->
		<view class="fix-bottom-wrap" style="text-align: center;" v-if="opButton.Edit">
			<van-button type="info" color="#3385FF" custom-class="btn-big" round @click="handleEdit">重新申请</van-button>
		</view>
		<!-- 撤回申请 -->
		<!-- <view class="fix-bottom-wrap" style="text-align: center;" v-if="opButton.Cancel">
			<van-button type="info" color="#3385FF" custom-class="btn-big" round @click="handleCancelApply">撤回申请</van-button>
		</view> -->
		
		<!-- 用印用途 -->
		<van-popup :show="showPurpose" @close="showPurpose=false" position="bottom">
			<van-picker 
				show-toolbar 
				title="选择用印用途" 
				:columns="purposeArr" 
				@confirm="handlePurposeConfirm"  
				@cancel="showPurpose=false"
			/>
		</van-popup>
		<!-- 何种印章 -->
		<van-popup :show="showType" @close="showType=false" position="bottom">
			<van-picker 
				show-toolbar 
				title="选择何种印章" 
				:columns="typeArr" 
				@confirm="handleTypeConfirm"  
				@cancel="showType=false"
			/>
		</van-popup>
		
		<!-- 客户搜索 -->
		<van-popup :show="showCustome" @close="showCustome=false" position="bottom" custom-style="height: 100vh">
			<view class="custome-search-wrap">
				<van-search use-left-icon-slot use-action-slot shape="round" :value="searchCustomeVal" placeholder="请输入客户名称/社会信用码" @change="onSearchValChange" @search="onSearch"
					custom-class="search-box" field-class="search-con">
					<view slot="left-icon">
						<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
					</view>
					<view slot="action" @click="showCustome=false" class="search-btn">取消</view>
				</van-search>
				<view class="search-result">
					<view class="result-custome-box" v-if="searchContractList.length===0">
						<view class="result-item flex" v-for="item in searchCustomeList" :key="item" @click="getContract(item)">
							<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
							<view class="con van-ellipsis">{{item}}</view>
							<image src="../static/click-icon.png" mode="aspectFill" class="click-icon"></image>
						</view>
					</view>
					<view class="result-contract-box" v-else>
						<view class="result-contract-item" v-for="item in searchContractList" :key="item.ContractId" @click="handleChooseContract(item)">
							<view class="name">{{item.CompanyName}}</view>
							<view style="margin-top: 20rpx;">合同编号：{{item.ContractCode}}</view>
							<view style="margin-top: 20rpx;">合同类型：{{item.ContractType}}</view>
							<view style="margin-top: 20rpx;">合同金额：{{item.Price}}</view>
						</view>
					</view>
					
				</view>
			</view>
		</van-popup>
		
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import {
		apiSealDetail,
		apiSearchCustome,
		apiSearchContract,
		apiApprovalPass,
		apiInvalidSeal,
		apiApprovalPassModify,
		apiSealCancelApply
		} from '@/api/approve/seal.js'
	import steps from '../components/steps.vue'
	import {preViewFile} from '../utils/util.js'
	import {uploadFiles} from '@/utils/uploadFile.js'
	export default{
		components:{
			steps
		},
		computed:{
			statusImg(){
				if(this.detail.Status==='已审批'){
					return require('../static/pass-icon.png')
				}else if(this.detail.Status==='已驳回'){
					return require('../static/fail-icon.png')
				}else if(this.detail.Status==='处理中'){
					return require('../static/processing-icon.png')
				}else if(this.detail.Status==='已撤回'){
					return require('../static/recall-icon.png')
				}else if(this.detail.Status==='已作废'){
					return require('../static/cancel-icon.png')
				}
			}
		},
		data() {
			return {
				val:'',
				ContractApprovalId:0,
				ContractApprovalRecordId:0,
				SealId:0,
				processData:null,
				detail:{},
				opButton:{},
				files:{
					type:'',
					img:'',
					url:''
				},//合同附件
				
				showPurpose:false,//显示用印用途选项
				purposeArr:['销售合同','渠道合同','付款通知函','招投标','战略合作协议'],

				showType:false,//显示用印用途选项
				typeArr:['合同章','公章','法人章'],
				showCustome:false,//显示搜索客户名称
				searchCustomeVal:'',//搜索客户输入数据
				searchCustomeList:[],//搜索到的客户名称列表
				searchContractList:[],//选择搜索中的客户后合同列表数据
				
				checked:false,//是否同时作废合同
				
				oldUse:"",
				oldFileNum:'',
				oldSealType:'',
				oldRemark:'',
				oldFile:''
			}
		},
		onLoad(options) {
			this.ContractApprovalId=options.ContractApprovalId
			this.ContractApprovalRecordId=options.ContractApprovalRecordId
			this.SealId=options.SealId
			this.getDetail()
		},
		onShow() {
			uni.$once('updateSealDetail',(data)=>{
				console.log('监听到事件来自updateSealDetail ，携带参数 msg 为：' + data.msg);
				this.getDetail()
			})
		},
		onPullDownRefresh() {
			this.getDetail()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		methods: {
			// 更新列表页
			handleUpdateList(){
				uni.$emit('sealApproveListUpdate',{
					ContractApprovalId:this.ContractApprovalId,
					ContractApprovalRecordId:this.ContractApprovalRecordId, 
					SealId:this.SealId
				})
			},

			// 合规删除合同附件
			handleDeleteCheckFile(){
				this.files={
					type:'',
					img:'',
					url:''
				}
			},

			//合规上传附件
			async handleUpload(){
				const res=await uploadFiles({type:'all'})
				const reg = /\.(pdf)$/;
				if(reg.test(res[0])){
					this.files={
						type:'pdf',
						url:res[0],
						img:require('../static/pdf.png')
					}
				}else{
					this.files={
						type:'img',
						url:res[0],
						img:res[0]
					}
				}
			},

			// 撤回申请
			handleCancelApply(){
				this.$dialog.confirm({
					title: '提示',
					 message: '是否确认撤回',
				}).then(async ()=>{
					const res=await apiSealCancelApply({SealId:Number(this.detail.SealId)})
					if(res.code===200){
						uni.showToast({
							title:'撤回成功',
							icon:'none'
						})
						this.handleUpdateList()
						this.getDetail()
					}
				}).catch(() => {
					console.log('取消撤回');
				});
				
			},
			
			handlePurposeConfirm(e){
				this.oldUse=e.detail.value
				this.showPurpose=false
			},
			
			handleTypeConfirm(e){
				this.oldSealType=e.detail.value
				this.showType=false
			},
			
			//前去重审
			handleEdit(){
				uni.$once('sealEditSubmit',()=>{
					this.handleUpdateList()
				})
				uni.navigateTo({
					url:`./edit?ContractApprovalId=${this.ContractApprovalId}&ContractApprovalRecordId=${this.ContractApprovalRecordId}&SealId=${this.SealId}`
				})
			},
			
			//用印作废
			handleSealInvalid(){
				this.$dialog.confirm({
					title: '提示',
					 message: '是否确认作废',
				}).then(async ()=>{
					const res=await apiInvalidSeal({
						IsInvalidContract:this.checked,
						SealId:this.detail.SealId
					})
					if(res.code===200){
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
						this.handleUpdateList()
						this.getDetail()
					}
				}).catch(() => {
					console.log('取消作废');
				});
				
			},
			
			//点击通过
			handleClickPass(){
				//判断是否有内容修改
				const flag1=this.oldUse===this.detail.Use 
				const flag2=Number(this.oldFileNum)===Number(this.detail.FileNum)
				const flag3=this.oldSealType===this.detail.SealType
				const flag4=this.oldRemark===this.detail.Remark
				const flag5=this.files.url===this.detail.FileUrl
				if(flag1&&flag2&&flag3&&flag4&&flag5){
					this.handleApprovalPass()
				}else{
					this.handleApprovePassModify()
				}
			},
			
			//审批通过 （修改内容）
			async handleApprovePassModify(){
				if(!this.oldFileNum){
					uni.showToast({
						title:'请填写文件份数',
						icon:"none"
					})
					return
				}
				if(this.oldFileNum<1){
					uni.showToast({
						title:'文件份数不合法',
						icon:"none"
					})
					return
				}
				if(!this.oldSealType){
					uni.showToast({
						title:'印章类型不能为空',
						icon:"none"
					})
					return
				}
				if(!this.oldUse){
					uni.showToast({
						title:'请选择用印用途',
						icon:"none"
					})
					return
				}
				if(!this.files.url){
					uni.showToast({
						title:'合同附件不能为空',
						icon:"none"
					})
					return
				}
				const res=await apiApprovalPassModify({
					FileNum:Number(this.oldFileNum),
					Remark:this.oldRemark,
					SealId:Number(this.detail.SealId),
					SealType:this.oldSealType,
					Use:this.oldUse,
					FileUrl:this.files.url
				})
				if(res.code===200){
					this.$dialog.alert({
						title: "处理成功",
						confirmButtonColor: "#5890FB",
					}).then(() => {
						this.handleUpdateList()
						this.getDetail()
					});
				}
			},
			
			// 审批通过 （未修改内容）
			async handleApprovalPass(){
				const res=await apiApprovalPass({
					SealId:Number(this.detail.SealId),
					Remark:""
				})
				if(res.code===200){
					this.$dialog.alert({
						title: "处理成功",
						confirmButtonColor: "#5890FB",
					}).then(() => {
						this.handleUpdateList()
						this.getDetail()
					});
				}
			},
			
			//驳回
			handleApprovalReject(){
				uni.$once('sealApproveReject',()=>{
					this.handleUpdateList()
				})
				uni.navigateTo({
					url:`./reason?SealId=${this.detail.SealId}`
				})
			},
			
			//预览文件
			handlepreViewFile(e){
				if (e.type === "pdf") {
					preViewFile(e.url)
				} else {
					uni.previewImage({
						urls: [e.url]
					})
				}
			},
			
			// 只有当 checkEdit 为true  即合规才能修改
			handleOperation(key){
				if(this.opButton.CheckEdit){
					this[key]=true
				}
			},
			
			// 客户搜索
			// 先搜索出客户 再通过客户去请求出客户下面存在的合同
			onSearchValChange(e){
				this.searchCustomeVal=e.detail
			},
			
			//搜索客户
			async onSearch(){
				if(!this.searchCustomeVal){
					uni.showToast({
						title:'请输入搜索关键字',
						icon:'none'
					})
					return
				}
				this.searchContractList=[]
				this.searchCustomeList=[]
				const res=await apiSearchCustome({Keyword:this.searchCustomeVal})
				if(res.code===200){
					this.searchCustomeList=res.data
				}
			},
			
			// 搜索客户对应的合同
			async getContract(e){
				const res=await apiSearchContract({Keyword:e})
				if(res.code===200){
					if(res.data.List){
						this.searchContractList=res.data.List 
					}else{
						uni.showToast({
							title:"此客户无合同，请重新选择",
							icon:"none"
						})
					}
				}
			},
			
			// 选择合同 更新表单数据
			handleChooseContract(e){
				
				this.detail.CompanyName=e.CompanyName
				this.detail.ServiceType=e.ContractType
				this.detail.CreditCode=e.CreditCode
				this.detail.UseCompanyName=e.CompanyName
				this.detail.ContractId=e.ContractId
				this.detail.ContractfileUrl=e.FileUrl
				// 关闭搜索弹窗
				this.showCustome=false
				this.searchCustomeVal=''
				this.searchContractList=[]
				this.searchCustomeList=[]
			},
			
			//获取详情
			async getDetail() {
				const res=await apiSealDetail({
					ContractApprovalId:Number(this.ContractApprovalId),
					ContractApprovalRecordId:Number(this.ContractApprovalRecordId),
					SealId:Number(this.SealId)
				})
				if(res.code===200){
					this.detail=res.data.SealDetail
					this.oldUse=res.data.SealDetail.Use
					this.oldFileNum=res.data.SealDetail.FileNum
					this.oldSealType=res.data.SealDetail.SealType
					this.oldRemark=res.data.SealDetail.Remark
					this.processData=res.data.FlowNodeList
					this.opButton=res.data.OpButton
					this.handleFile(res.data.SealDetail.FileUrl)
				}
			},
			
			//处理文件
			handleFile(filesUrl){
				const reg = /\.(pdf)$/;
				if(reg.test(filesUrl)){
					this.files={
						type: "pdf",
						url: filesUrl,
						img: require("../static/pdf.png"),
					}
				}else{
					this.files={
						type: "img",
						url: filesUrl,
						img: filesUrl,
					}
				}
			},
		},
	}
</script>

<style lang="scss">
	.check-file-box{
		width: 102rpx;
		height: 120rpx;
		background-size: cover;
		background-position: center;
		position: relative;
		.del-icon{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top: -15rpx;
			right: -15rpx;
		}
	}
	.detail{
		width: 100%;
		min-height: 100vh;
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		position: relative;
	}
	.status-img{
		position: absolute;
		right: 0;
		top: 50rpx;
		width: 220rpx;
		height: 220rpx;
		z-index: 10;
	}
	.section{
		padding: 30rpx 34rpx;
		border-top: 10rpx solid #F5F5F5;
		position: relative;
		.section-title{
			font-size: 16px;
			margin-bottom: 20rpx;
		}
		.require::before{
			content: '*';
			font-size: 16px;
			color: #FF0000;
			position: absolute;
			left: 20rpx;
		}
		.section-select-box{
			color: #999;
			position: relative;
			&::after{
				position: absolute;
				right: 0;
				top: 50%;
				content: '';
				display: block;
				width: 18rpx;
				height: 18rpx;
				border-top: 1px solid #999;
				border-right: 1px solid #999;
				transform: translateY(-50%) rotate(45deg);
			}
		}
	}
	
	.btn-big{
		width: 450rpx;
		height: 60rpx;
	}
	.btn-small{
		min-width: 220rpx;
		height: 60rpx;
	}
	
	.custome-search-wrap{
		padding: 34rpx;
		height: 100%;
		.search-box {
			border: 1px solid #3385FF;
			padding: 0 !important;
			border-radius: 60rpx;
			background-color: #fff !important;
		}
		
		.search-con {
			background-color: #fff !important;
		}
		
		.van-search__content {
			background-color: #fff !important;
			padding-left: 30rpx !important;
		}
		
		.search-btn {
			position: relative;
			color: #3385FF;
			&::before {
				content: '';
				display: block;
				width: 1px;
				height: 60%;
				background-color: #D1D1D1;
				position: absolute;
				left: -16rpx;
				top: 20%;
			}
		}
		.search-icon{
			width: 40rpx;
			height: 40rpx;
			display: block;
			position: relative;
			top: 4rpx;
			margin-right: 20rpx;
		}
	
		.click-icon{
			width: 24rpx;
			height: 24rpx;
		}
		.result-item{
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #EBEBEB;
			.con{
				flex: 1;
				margin-right: 20rpx;
			}
		}
		.search-result{
			overflow-y: auto;
			height: 100%;
		}
	
		.result-contract-box{
			padding: 0 10rpx;
			.result-contract-item{
				margin-top: 30rpx;
				box-shadow: 0px 0px 12rpx rgba(175, 175, 175, 0.38);
				padding: 30rpx;
				border-radius: 8px;
				.name{
					font-size: 16px;
					font-weight: bold;
					&::before{
						content:'';
						display:inline-block;
						width: 31rpx;
						height: 34rpx;
						background-image: url(../../static/man.png);
						background-size: cover;
						position: relative;
						top: 4rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>