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

<template>
	<view class="add-page white-wrap">
		<view class="section white-wrap">
			<view class="section-title require">归属公司
				<span class="tip">(归属公司：申请用章公司)</span>
			</view>
			<view class="section-select-box" :style="{color:belongCompany?'#333':'#999'}" @click="showBelongCompanyPop=true">{{belongCompany?belongCompany:'请选择'}}</view>
		</view>
		
		<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 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',purpose=='代付合同'?'require':'']">实际使用方名称</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" style="position:relative">
				<view class="section-title require">客户名称（全称）</view>
				<input type="text" v-model="customeName" @input="handleAllCutomeInput" placeholder="请输入客户名称"/>
				<view class="show-all-custome-box" v-if="allCustome.list.length>0">
					<scroll-view scroll-y @scrolltolower="handleScrollToLower" style="height: 100%;width:100%">
						<view 
							class="all-custome-item" 
							v-for="item in allCustome.list" 
							:key="item.CompanyId"
							@click="chooseAllCustomeItem(item)"
						>{{item.CompanyName}}</view>
					</scroll-view>
				</view>
			</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',purpose=='代付合同'?'require':'']">实际使用方名称</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:typeLength?'#333':'#999'}" @click="showType=true">{{type.length>0?type.join(','):'请选择'}}</view>
		</view>
		<view class="section white-wrap">
			<view class="section-title">备注</view>
			<textarea type="text" auto-height v-model="remark" placeholder="请填写备注"></textarea>
		</view>
		<view class="section white-wrap" v-if="radioVal==='系统合同'&& fileList &&fileList.length>0">
			<view class="section-title require">合同附件</view>
			<image src="../static/pdf.png" mode="aspectFill" style="width: 102rpx;height: 120rpx;" @click="handlePreviewFiles(fileList[0])"></image>
		</view>
		<view class="section white-wrap" v-if="radioVal==='上传附件'">
			<view class="section-title require">附件上传</view>
			<!-- crm_8.7 支持上传多个附件 -->
			<div class="check-file-contain">
				<image @click="handleUpload" src="../static/upload-icon.png" mode="aspectFill" 
				style="width: 102rpx;height: 120rpx;margin: 0 16rpx 24rpx 16rpx;"></image>
				<div class="check-file-box" :style="'background-image:url('+item.img+')'"
				@click="handlePreviewFiles(item)" v-for="(item,index) in fileList" :key="item.url">
					<image class="del-icon" src="../static/del-icon.png" @click.stop="handleDeleteCheckFile(item)"></image>
				</div>
			</div>
		</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="showBelongCompanyPop" @close="showBelongCompanyPop=false" position="bottom">
			<van-picker 
				show-toolbar 
				title="选择归属公司" 
				:columns="belongCompanyOptions" 
				@confirm="handleComfirmBelongCmpany"  
				@cancel="showBelongCompanyPop=false"
			/>
		</van-popup>
		
		<!-- 用印用途 -->
		<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">
			<view class="type-popup-wrap">
				<view class="flex top-title">
					<text style="color:#969799" @click="showType=false">取消</text>
					<text style="font-size:16px">选择何种印章</text>
					<text style="color:#576b95" @click="handleTypeConfirm">确认</text>
				</view>
				<van-checkbox-group v-model="temType" @change="onChangeType">
					<van-checkbox shape="square" :name="item" v-for="item in typeArr" :key="item">{{item}}</van-checkbox>
				</van-checkbox-group>
			</view>
		</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 {sealMixin} from './mixin'
	import { apiSealDetail,apiSealEdit } from "@/api/approve/seal.js";
	export default{ 
		components: {
			steps,
		},
		mixins: [sealMixin],
		data() {
			return {
				SealId:0,
			}
		},
		onLoad(options) {
			let ContractApprovalId=options.ContractApprovalId
			let ContractApprovalRecordId=options.ContractApprovalRecordId
			let SealId=options.SealId
			this.getDetail({ContractApprovalId,ContractApprovalRecordId,SealId})
			this.getBelongCompanyOptions()
		},
		methods: {
			
			// 获取详情
			async getDetail({ContractApprovalId,ContractApprovalRecordId,SealId}){
				const res=await apiSealDetail({
					ContractApprovalId:Number(ContractApprovalId),
					ContractApprovalRecordId:Number(ContractApprovalRecordId),
					SealId:Number(SealId),
				})
				if(res.code===200){
					if(res.data.SealDetail.ContractId>0){
						this.radioVal='系统合同'
					}else{
						this.radioVal='上传附件'
					}
					this.SealId=res.data.SealDetail.SealId
					this.purpose=res.data.SealDetail.Use
					this.type=res.data.SealDetail.SealType.split(',')
					this.temType=res.data.SealDetail.SealType.split(',')
					this.ServiceType=res.data.SealDetail.ServiceType
					this.customeName=res.data.SealDetail.CompanyName
					this.fileNum=res.data.SealDetail.FileNum
					this.remark=res.data.SealDetail.Remark
					this.CreditCode=res.data.SealDetail.CreditCode
					this.UseCompanyName=res.data.SealDetail.UseCompanyName
					this.belongCompany=res.data.SealDetail.AffiliatedCompany
					// this.ContractfileUrl=res.data.SealDetail.FileUrl
					this.handleFile(res.data.SealDetail.FileUrls)
					this.ContractId=res.data.SealDetail.ContractId
					this.getProcessData()
				}
			},

			//处理文件
			handleFile(filesUrls){
				const reg = /\.(pdf)$/;
				const reg2=	/\.doc|\.docx$/
				filesUrls.map(filesUrl=>{
					if(reg.test(filesUrl)){
						this.fileList.push({
							type: "pdf",
							url: filesUrl,
							img: require("../static/pdf.png"),
						})
					}else if(reg2.test(filesUrl)){
						this.fileList.push({
							type: "word",
							url: filesUrl,
							img: require("../static/word.png"),
						})
					}else{
						this.fileList.push({
							type: "img",
							url: filesUrl,
							img: filesUrl,
						})
					}
				})
			},
			
			// 选择合同 更新表单数据
			handleChooseContract(e){
				
				this.customeName=e.CompanyName
				this.CreditCode=e.CreditCode
				this.ServiceType=e.ContractType
				this.UseCompanyName=e.ContractBusinessType=='代付合同'?e.UseCompanyName:e.CompanyName
				this.ContractId=e.ContractId
				// this.ContractfileUrl=e.FileUrl
				this.handleFile([e.FileUrl])
				// 关闭搜索弹窗
				this.showCustome=false
				this.searchCustomeVal=''
				this.searchContractList=[]
				this.searchCustomeList=[]
			},
			
			// 提交申请
			async handleSubmit(){
				
				let params={
					CompanyName:this.customeName,
					ContractId:this.ContractId,
					CreditCode:this.CreditCode,
					FileUrls:this.fileList.map(file => file.url),
					FileNum:Number(this.fileNum),
					Remark:this.remark,
					SealType:this.type.join(','),
					ServiceType:this.ServiceType,
					Use:this.purpose,
					UseCompanyName:this.UseCompanyName,
					SealId:Number(this.SealId),
					AffiliatedCompany: this.belongCompany
				}
				
				if(!params.AffiliatedCompany){
					uni.showToast({
						title:'请选择归属公司',
						icon:"none"
					})
					return
				}
				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.FileUrls){
					uni.showToast({
						title:'请上传文件',
						icon:"none"
					})
					return
				}
				// 代付合同 实际使用方必填
				if(params.Use=='代付合同'){
					if(!params.UseCompanyName&&this.radioVal==='上传附件'){
						uni.showToast({
							title:'请填写实际使用方',
							icon:"none"
						})
						return
					}
				}
				
				const res=await apiSealEdit(params)
				if(res.code===200){
					uni.showToast({
						title:"用印申请单已提交",
						icon:"none"
					})
					uni.$emit('sealEditSubmit')
					setTimeout(()=>{
						uni.navigateBack({
							delta:2
						})
					},1000)
				}
			}
		},
	}
</script>

<style lang="scss">
	.check-file-contain{
		display: flex;
		flex-wrap: wrap;
		.check-file-box{
			width: 102rpx;
			height: 120rpx;
			background-size: cover;
			background-position: center;
			position: relative;
			margin: 0 16rpx;
			.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;
			.tip {
				font-size: 12px;
				color: #999;
			}
		}
		.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);
			}
		}
		.show-all-custome-box{
			top: 100%;
			width: 85vw;
			height: 440rpx;
			z-index: 10;
			padding: 30rpx 40rpx;
			position: absolute;
			background: #FFFFFF;
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
			.all-custome-item{
				margin-bottom: 30rpx;
			}
		}
	}
	
	.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;
					}
				}
			}
		}
	}

	.type-popup-wrap{
		padding: 20rpx 32rpx;
		height: 280px;
		.top-title{
			justify-content: space-between;
			margin-bottom: 124rpx;
		}
		.van-checkbox{
			margin-bottom: 30rpx;
			width: 300rpx;
			margin-left: auto;
			margin-right: auto;
		}
	}
</style>