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

<template>
	<view class="add-page white-wrap">
		<view class="section white-wrap">
			<view class="section-title require">用印用途</view>
			<view class="section-select-box" :style="{color:purpose?'#333':'#999'}" @click="showPurpose=true">{{purpose?purpose:'请选择'}}</view>
		</view>
		
		<view class="section white-wrap">
			<van-radio-group :value="radioVal" @change="radioChange" direction="horizontal">
			  <van-radio name="系统合同" style="margin-right: 70px;">系统合同</van-radio>
			  <van-radio name="上传附件">上传附件</van-radio>
			</van-radio-group>
		</view>
		
		<!-- 系统合同模块 -->
		<view v-if="radioVal==='系统合同'">
			<view class="section white-wrap">
				<view class="section-title require">客户名称（全称）</view>
				<view 
					class="section-select-box" 
					:style="{color:customeName?'#333':'#999'}" 
					@click="showCustome=true"
				>
					{{customeName?customeName:'请输入客户名称'}}
				</view>
			</view>
			<view class="section white-wrap" v-if="CreditCode">
				<view class="section-title require">统一社会信用码</view>
				<input type="text" v-model="CreditCode" placeholder="请填写统一社会信用码" disabled/>
			</view>
			<view class="section white-wrap" v-if="UseCompanyName">
				<view class="section-title">实际使用方名称</view>
				<input type="text" v-model="UseCompanyName" placeholder="请填写实际使用方名称" disabled/>
			</view>
			<view class="section white-wrap" v-if="ServiceType">
				<view class="section-title require">业务类型</view>
				<view :style="{color:ServiceType?'#333':'#999'}">{{ServiceType?ServiceType:'请选择业务类型'}}</view>
			</view>
		</view>
		<!-- 上传附件模块 -->
		<view v-if="radioVal==='上传附件'">
			<view class="section white-wrap">
				<view class="section-title require">客户名称（全称）</view>
				<input type="text" v-model="customeName" placeholder="请输入客户名称"/>
			</view>
			<view class="section white-wrap">
				<view class="section-title require">统一社会信用码</view>
				<input type="text" v-model="CreditCode" placeholder="请填写统一社会信用码"/>
			</view>
			<view class="section white-wrap">
				<view class="section-title">实际使用方名称</view>
				<input type="text" v-model="UseCompanyName" placeholder="请填写实际使用方名称"/>
			</view>
			<view class="section white-wrap">
				<view class="section-title require">业务类型</view>
				<view class="section-select-box" :style="{color:ServiceType?'#333':'#999'}" @click="showServiceType=true">{{ServiceType?ServiceType:'请选择业务类型'}}</view>
			</view>
		</view>
		
		<view class="section white-wrap">
			<view class="section-title require">文件份数</view>
			<input type="number" v-model="fileNum" placeholder="请填写总共盖章文件份数"/>
		</view>
		<view class="section white-wrap">
			<view class="section-title require">加盖何种印章</view>
			<view class="section-select-box" :style="{color:type?'#333':'#999'}" @click="showType=true">{{type?type:'请选择'}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title">备注</view>
			<textarea type="text" v-model="remark" placeholder="请填写备注"></textarea>
		</view>
		<view class="section white-wrap" v-if="radioVal==='系统合同'&&ContractfileUrl">
			<view class="section-title require">合同附件</view>
			<image src="../static/pdf.png" mode="aspectFill" style="width: 102rpx;height: 120rpx;" @click="handlePreviewFiles({type:'pdf',url:ContractfileUrl})"></image>
		</view>
		<view class="section white-wrap" v-if="radioVal==='上传附件'">
			<view class="section-title require">附件上传</view>
			<div class="check-file-box" :style="'background-image:url('+file.img+')'" v-if="file.url" @click="handlePreviewFiles(file)">
				<image class="del-icon" src="../static/del-icon.png" @click.stop="handleDeleteCheckFile"></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 process-wrap" v-if="processData">
			<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;">
			<van-button type="info" custom-class="btn" round @click="handleSubmit">提交</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="showServiceType" @close="showServiceType=false" position="bottom">
			<van-picker 
				show-toolbar 
				title="选择业务类型" 
				:columns="ServiceTypeArr" 
				@confirm="handleServiceTypeConfirm"  
				@cancel="showServiceType=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">
						<van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="!searchCustomeStatus"/>
						<view v-else>
						<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>
					<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>
	</view>
</template>

<script>
	import steps from '../components/steps.vue'
	import {apiFlowDetail,apiSealAdd,apiSearchCustome,apiSearchContract} from '@/api/approve/seal.js'
	import {uploadFiles} from '@/utils/uploadFile.js'
	import {preViewFile} from '../utils/util.js'
	export default{ 
		components:{
			steps
		},
		watch:{
			showCustome(){
				this.searchCustomeVal=''
				this.searchCustomeStatus=true 
				this.searchCustomeList=[]
				this.searchContractList=[]
			}
		},
		data() {
			return {
				showPurpose:false,//显示用印用途选项
				purposeArr:['销售合同','渠道合同','付款通知函','招投标','战略合作协议'],
				purpose:"",
				
				showType:false,//显示用印用途选项
				typeArr:['公章','合同章','法人章'],
				type:"",
				
				showServiceType:false,//显示业务类型选项
				ServiceTypeArr:['新签合同','续约合同','补充协议'],
				ServiceType:'',//业务类型
				
				
				showCustome:false,//显示搜索客户名称
				customeName: '',//客户名称
				fileNum:'',//文件数
				remark:'',//备注
				CreditCode:'',//社会统一信用代码
				
				UseCompanyName:'',//实际使用方客户名称
				ContractId:0,//合同id
				ContractfileUrl:'',//合同文件地址 pdf
				
				file:{
					type:'',
					img:'',
					url:''
				},//上传附件 文件
				
				processData:null,//流程数据
				
				radioVal:'系统合同',
				
				searchCustomeVal:'',//搜索客户输入数据
				searchCustomeStatus:true,//搜索客户 是否有结果
				searchCustomeList:[],//搜索到的客户名称列表
				searchContractList:[],//选择搜索中的客户后合同列表数据
			}
		},
		methods: {
			//删除上传的附件
			handleDeleteCheckFile(){
				this.file={
					type:'',
					img:'',
					url:''
				}
			},

			//预览文件
			handlePreviewFiles(e){
				if (e.type === "pdf") {
					preViewFile(e.url)
				} else {
					uni.previewImage({
						urls: [e.url]
					})
				}
			},
			
			//上传附件
			async handleUpload(){
				const res=await uploadFiles({type:'all'})
				const reg = /\.(pdf)$/;
				if(reg.test(res[0])){
					this.file={
						type:'pdf',
						url:res[0],
						img:require('../static/pdf.png')
					}
				}else{
					this.file={
						type:'img',
						url:res[0],
						img:res[0]
					}
				}
			},
			
			// 客户搜索 
			// 先搜索出客户 再通过客户去请求出客户下面存在的合同
			onSearchValChange(e){
				this.searchCustomeVal=e.detail
			},
			
			//搜索客户
			async onSearch(){
				this.searchContractList=[]
				this.searchCustomeList=[]
				const res=await apiSearchCustome({Keyword:this.searchCustomeVal})
				if(res.code===200){
					this.searchCustomeList=res.data
					if(res.data.length===0){
						this.searchCustomeStatus=false
					}else{
						this.searchCustomeStatus=true
					}
				}
			},
			
			// 搜索客户对应的合同
			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.customeName=e.CompanyName
				this.CreditCode=e.CreditCode
				this.ServiceType=e.ContractType
				this.UseCompanyName=e.CompanyName
				this.ContractId=e.ContractId
				this.ContractfileUrl=e.FileUrl
				// 关闭搜索弹窗
				this.showCustome=false
				this.searchCustomeVal=''
				this.searchContractList=[]
				this.searchCustomeList=[]
			},
			
			// 系统合同 上传附件类型切换
			radioChange(e){
				this.radioVal=e.detail
				this.customeName=''
				this.CreditCode=''
				this.ServiceType=''
				this.UseCompanyName=''
				this.ContractfileUrl=''
				this.fileUrlArr=[]
			},
			
			// 选择用印用途
			handlePurposeConfirm(e) {
				this.purpose=e.detail.value 
				this.showPurpose=false
			},
			
			//选择盖章类型
			handleTypeConfirm(e){
				this.type=e.detail.value
				this.showType=false
				this.getProcessData()
			},
			
			//选择业务类型
			handleServiceTypeConfirm(e){
				this.ServiceType=e.detail.value
				this.showServiceType=false
			},
			
			//合同章5  公章、法人章 6
			async getProcessData(){
				let id=0
				if(this.type==='合同章'){
					id=5
				}else{
					id=6
				}
				
				let res=await apiFlowDetail({FlowId:id})
				if(res.code===200){
					this.processData=res.data||null
				}
			},
			
			// 提交申请
			async handleSubmit(){
				let fileUrl=''
				if(this.radioVal==='系统合同'){
					fileUrl=this.ContractfileUrl
				}else{
					fileUrl=this.file.url
				}
				
				let params={
					CompanyName:this.customeName,
					ContractId:this.ContractId,
					CreditCode:this.CreditCode,
					FileUrl:fileUrl,
					FileNum:Number(this.fileNum),
					Remark:this.remark,
					SealType:this.type,
					ServiceType:this.ServiceType,
					Use:this.purpose,
					UseCompanyName:this.UseCompanyName,
				}
				
				if(!params.Use){
					uni.showToast({
						title:'请选择用印用途',
						icon:"none"
					})
					return
				}
				if(!params.CompanyName){
					uni.showToast({
						title:'客户名称不能为空',
						icon:"none"
					})
					return
				}
				if(!params.CreditCode){
					uni.showToast({
						title:'信用代码不能为空',
						icon:"none"
					})
					return
				}
				if(!params.ServiceType){
					uni.showToast({
						title:'业务类型不能为空',
						icon:"none"
					})
					return
				}
				if(!params.FileNum){
					uni.showToast({
						title:'请填写文件份数',
						icon:"none"
					})
					return
				}
				if(params.FileNum<1){
					uni.showToast({
						title:'文件份数不合法',
						icon:"none"
					})
					return
				}
				if(!params.SealType){
					uni.showToast({
						title:'印章类型不能为空',
						icon:"none"
					})
					return
				}
				if(!params.FileUrl){
					uni.showToast({
						title:'请上传文件',
						icon:"none"
					})
					return
				}
				console.log(params);
				
				const res=await apiSealAdd(params)
				if(res.code===200){
					uni.showToast({
						title:"用印申请单已提交",
						icon:"none"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				}
			}
		},
	}
</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;
		}
	}

	.add-page{
		width: 100%;
		min-height: 100vh;
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	}
	.section{
		padding: 30rpx 34rpx;
		border-top: 10rpx solid #F5F5F5;
		position: relative;
		textarea{
			width: 100%;
			height: 200rpx;
		}
		.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{
		width: 360rpx;
		height: 60rpx;
	}
	
	.radio-wrap{
		.radio{
			font-size: 14px;
			&::before{
				content: '';
				display: inline-block;
			}
		}
	}
	
	.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>