hz_crm_web/src/views/custom_manage/customList/applyTurn.vue

<template>
	<div class="applyTurn_container">
		<div class="card_cont">
			<div class="info">
				<h3 class="tit">客户信息</h3>
				<ul class="info_list">
					<li>
						客户名称：{{companyInfo.CompanyName}}
					</li>
					<li>
						社会信用码：{{companyInfo.CreditCode}}
					</li>
					<li>
						地址：{{companyInfo.Address}}
					</li>
					<li>
						客户类型：{{companyInfo.CompanyType}}
					</li>
					<li>
						客户状态：{{companyInfo.Status}}
					</li>
					<li>
						客户来源：{{companyInfo.Source}}
					</li>
					<li>
						行业：{{companyInfo.IndustryName}}
					</li>
					<li>
						所属销售：{{companyInfo.SellerName}}
					</li>
					<li>
						备注：{{companyInfo.Reasons}}
					</li>
				</ul>
			</div>
		</div>
		<!-- 合同列表 -->
		<div class="card_cont">
			<div class="apply_info">
				<h3 style="fontSize:16px;">申请信息</h3>
				<div class="info_cont">
					<span style="display:block;marginBottom:30px;color:#333;paddingLeft:10px;">申请内容：试用转正式</span>
					<el-form 
					@submit.native.prevent 
					inline 
					:model="formData"
					:rules="formRule"
					hide-required-asterisk
					ref="formData" 
					label-width="100px"
					class="demo-ruleForm">
						<el-form-item label="合同类型" prop="contract_type" style="width:100%" v-if="formData.contract_type">
							<el-radio style="margin-right:5px" v-model="formData.contract_type" :label="formData.contract_type"/>
							<el-tooltip
								style="cursor: pointer;"
								effect="dark"
								placement="top-start"
								v-if="formData.contract_type=='续约合同'||formData.contract_type=='新签合同'">
									<div slot="content" v-if="formData.contract_type=='续约合同'">
										1、有正式转试用记录的客户，在申请转正时提交的合同<br>
										2、所有客户在续约申请时提交的合同
									</div>
									<div slot="content" v-if="formData.contract_type=='新签合同'">
										没有正式转试用记录的客户，在申请转正时提交的合同
									</div>
									<i class="el-icon-info"></i>
							</el-tooltip>
						</el-form-item>
						<el-form-item label="合同期限" prop="term" style="marginRight:60px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-date-picker
							v-model="formData.term"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="dateChange"
							value-format="yyyy-MM-dd"
							style="width:400px;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="合同金额" prop="amount" style="marginRight:60px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-input 
							v-model.number="formData.amount"
							placeholder="请输入金额"
							style="width:400px"
							clearable></el-input>
							<span style="color:#666;">元</span>
						</el-form-item>
						<el-form-item label="付款方式" prop="payway" style="marginRight:60px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-select v-model="formData.payway" placeholder="请选择付款方式" style="width:400px;" clearable>
								<el-option
								v-for="item in ['月付','季付','半年付','年付','两年付','三年付']"
								:key="item"
								:label="item"
								:value="item">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="付款渠道" prop="payfrom">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-input 
							v-model="formData.payfrom"
							placeholder="填写代支付的渠道名称，没有可以填无"
							style="width:400px"
							clearable></el-input>
						</el-form-item>
						<el-form-item label="套餐类型" prop="setmeal" style="display:block;"  :rules="{ required: true, message: '请选择套餐',trigger: 'change' }" v-if="companyInfo.CompanyType=='ficc' || isRoleType== 'ficc'">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							 <el-radio-group v-model="formData.setmeal" @change="setmealChange">
								<el-radio :label="1">大套餐</el-radio>
								<el-radio :label="2">小套餐</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item class="textarea_item" style="width:97%;paddingLeft:26px;" prop="CheckList">
							<label style="display:block;marginBottom:10px;fontSize:16px;position:relative;color:#666;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
								权限设置
							</label>
							<template  v-if="companyInfo.CompanyType=='权益' ||isRoleType== '权益'">
								<raiPermissionbox v-for="item in authList" :key="item.ClassifyName" :data="item" :formData="formData"
								:hasNoChild="hasNoChild"></raiPermissionbox>
							</template>
							<ul class="menu_lists" style="width:100%" v-else>
								<li v-for="item in authList" :key="item.ClassifyName" class="menu_item">
									<el-checkbox v-if="item.ClassifyName !== '权益'" :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="item.ClassifyName === '宏观经济' || item.disabled" @change="handleCheckAll(item)" style="marginRight:30px;fontWeight:bold;minWidth:90px;">{{item.ClassifyName+':'}}</el-checkbox>
									<el-checkbox-group v-model="item.CheckList" @change="handleChecked(item)">
										<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="list.ChartPermissionId==1  || list.disabled">{{list.PermissionName}}</el-checkbox>
									</el-checkbox-group>
								</li>
							</ul>
						</el-form-item>
						<el-form-item prop="imglist" style="width:97%;paddingLeft:26px;" class="textarea_item">
							<label style="display:block;marginBottom:10px;fontSize:16px;position:relative;color:#666;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
								上传合同附件<span style="fontSize:12px;color:#f00;">（建议上传盖章后的合同，支持png、jpg、pdf格式）</span>
								<input type="file" name="file" @change="fileSelected()" id="file" class="true-file" style="display:none;">	
								<el-button type="primary" size="medium" @click.native="clickinput('')" style="marginLeft:20px;" :loading="uploadloading">点击上传</el-button>
							</label>
							<ul class="img_cont">
								<li v-for="(img,index) in formData.imglist" :key="img" class="img_item">
									<!-- <el-image :src="img" alt="" style="background:#aaa;width:240px;height:180px;" :preview-src-list="formData.imglist" :id="'img'+index"/> -->
									<pdf ref="pdf" :src="img" style="width:240px;height:180px;overflow:hidden" v-if="img.indexOf('.pdf')!=-1" @click.native="preview('img'+index,index,img)"></pdf>
									<el-image :src="img" alt="" style="background:#aaa;width:240px;height:180px;" :id="'img'+index" v-else @click.native="preview('img'+index,index,img)"/>
									<i class="el-icon-zoom-in" style="position:absolute;right:12px;top:12px;color:#fff;" @click="preview('img'+index,index,img)"></i>
									<span style="position:absolute;right:12px;bottom:12px;color:#409EFF;fontSize:16px;cursor:pointer;" @click.stop="clickinput(index+1)">重新上传</span>
								</li>
							</ul>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="bot_cont">
				<!-- <span style="color:#409EFF;fontSize:16px;cursor:pointer;" @click="addHandle">+添加合同信息</span> -->
				<div style="display:flex;justify-content:center;margin:80px 0 30px;">
					<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveHandle">提交</el-button>
					<el-button type="primary" plain style="width:80px;" @click="cancelHandle">取消</el-button>
				</div>
			</div>
			<!-- 图片预览 -->
			<imgPreview
			:isShowToggle="isShowToggle"
			:isPreview="isPreviewimg" 
			:arr="formData.imglist" 
			:actIndex="preAct"
			@close="closePreview"
			@togglePre="togglePre"></imgPreview>
		</div>

	</div>
</template>
 
<script>
import { customInterence } from '@/api/api.js'
import imgPreview from '@/components/imgPreview.vue'
import pdf from 'vue-pdf'
import {CalculationDate} from '@/utils/CalculationDate'
import JurisdictionCheck from '../compontents/jurisdictionCheck.vue';
import raiPermissionbox from './components/raiPermissionbox'

export default {
	name:'',
	components: {imgPreview,pdf ,JurisdictionCheck,raiPermissionbox},
	data () {
		return {
			companyInfo:JSON.parse(sessionStorage.getItem('companyInfo')) || {},//客户基本信息
			isRoleType:localStorage.getItem('RoleType'),
			formData:{
				contract_type:'',
				term:'',
				amount:'',
				payway:'',
				payfrom:'',
				imglist:[],//合同列表图片
				setmeal:'',
				qyBigServeCheck:0,
			},
			hasNoChild:false, // 医药、消费、科技、智造是否没有主客观
			authList:[],//权限列表
			formRule:{
				term:[
					{ required: true, message: '合同期限不能为空', trigger: 'blur' },
				],
				amount:[
					{ required: true, message: '合同金额不能为空', trigger: 'blur' },
					{ type: 'number', message: '合同金额必须为数字'}
				],
				payway:[
					{ required: true, message: '付款方式不能为空', trigger: 'blur' },
				],
				payfrom:[
					{ required: true, message: '付款渠道不能为空', trigger: 'blur' },
				],
				imglist:[
					{ required: true, message: '合同附件不能为空', trigger: 'blur' },
				]
			},
			img_replace:'',//重新上传的img
			isPreviewimg:false,
			preAct:"",
			isShowToggle:false,//是否显示切换
			diff_time:'',
			equityCheckData:[], //权益复选框
			citiesEquity:[], //
			citiesListEquity:[], //
			citiesListpitchOn:[],
		};
	},
	methods: {
		/* 重新申请获取上次申请的合同信息并回显 */
		getLastContract() {
			customInterence.reapplyDetail({
				CompanyApprovalId:parseInt(this.companyInfo.CompanyApprovalId)
			}).then(res => {
				if(res.Ret === 200) {
					/* 处理日期 */
					let date_arr = [];
					date_arr.push(res.Data.Item.StartDate);
					date_arr.push(res.Data.Item.EndDate);
					this.formData = {
						contract_type:res.Data.Item.ContractType,
						term:date_arr,
						amount:res.Data.Item.Money,
						payway:res.Data.Item.PayMethod,
						payfrom:res.Data.Item.PayChannel,
						imglist:res.Data.Item.ImgUrl.split('#'),//合同列表图片
						setmeal:res.Data.Item.PackageType,
						qyBigServeCheck:res.Data.Item.RaiPackageType
					}
					let newArr = [];
					/* 处理权限列表 */
					if(this.companyInfo.CompanyType == '权益' || this.isRoleType== '权益') {
						res.Data.Item.PermissionList[0].Items.map(item => {
							item.disabled=item.isIndeterminate=false								
							if(item.ChartPermissionId==22 && (!item.Child)) this.hasNoChild=true
						})
						/* 处理数据把复选框 拆分成三个*/
						res.Data.Item.PermissionList.length&&res.Data.Item.PermissionList.forEach(item => {
						let arr = item.Items.filter(key=> [22,21,20,19,23,30].includes(key.ChartPermissionId))
						let ItemsPrivate = item.Items.filter(key=> [29,31,20031,20032].includes(key.ChartPermissionId))
						let ItemsUp = item.Items.filter(key=> key.PermissionName.includes('升级'))
						let ItemsBig = item.Items.filter(key=> key.ChartPermissionId==0)
							let obj = {
								...item,
								Items:arr,
								ItemsPrivate,
								ItemsUp,
								ItemsBig
							}
							newArr.push(obj)
						})
					} else {
						res.Data.Item.PermissionList.forEach(item => {
						let obj = {
							checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
							isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
							...item,
						}
						newArr.push(obj)
					})
					}
				this.authList = newArr;
				this.formData.setmeal == '1' &&	this.setmealChange()
				}}
			)},
		/* 获取基本权限信息 */
		getAuthBasic() {
			customInterence.authList().then(res => {
				let newArr = [];
				if(res.Ret === 200) {
					if(this.companyInfo.CompanyType == '权益' || this.isRoleType== '权益') {
						res.Data.List[0].Items.map(item => {
							item.disabled=item.isIndeterminate=false								
							if(item.ChartPermissionId==22 && (!item.Child)) this.hasNoChild=true
						})
						/* 处理数据把复选框 拆分成三个*/
						res.Data.List.length&&res.Data.List.forEach(item => {
						let arr = item.Items.filter(key=> [22,21,20,19,23,30].includes(key.ChartPermissionId))
						let ItemsPrivate = item.Items.filter(key=> [29,31,20031,20032].includes(key.ChartPermissionId))
						let ItemsUp = item.Items.filter(key=> key.PermissionName.includes('升级'))
						let ItemsBig = item.Items.filter(key=> key.ChartPermissionId==0)
							let obj = {
								...item,
								Items:arr,
								ItemsPrivate,
								ItemsUp,
								ItemsBig
							}
							newArr.push(obj)
						})
					}else {
						res.Data.List.length&&res.Data.List.forEach(item => {
					    	let obj = {
					    		checkAll:false,
					    		isIndeterminate:item.ClassifyName === '宏观经济'?true:false,
					    		...item,
					    	}
					    	newArr.push(obj)
						})
					}
					this.authList = newArr;
					// console.log(this.authList,'this.authList');
				}
			})
		},
		/* 获取历史合同 */
		getDealList() {
			customInterence.historydeal({
				CompanyId: Number(this.companyInfo.CompanyId),
				CompanyType: this.companyInfo.CompanyType
			}).then(res => {
				if(res.Ret === 200) {
					this.formData.contract_type = res.Data.List ? '续约合同' :'新签合同';
				}
			})
		},
		/* 提交 */
		saveHandle() {
			this.$refs.formData.validate((valid) => {
				if (valid) {
					
					/* 处理权限列表 */
					let checkArr = [];
					let checkArrName = [];
					if(this.companyInfo.CompanyType==='权益' || this.isRoleType== '权益'){
						this.authList.forEach(item => {
								if(item.CheckList.length) {
									checkArr.push(item.CheckList)
									item.ItemsUp.forEach(key=>{
										if(item.CheckList.includes(key.ChartPermissionId)) {
											checkArrName.push(key.PermissionName)
										}
									})
								}
							})
						}else {
							this.authList.forEach(item => {
								if(item.CheckList.length) {
									checkArr.push(item.CheckList)
								}
							})
						}
					if(!checkArr.length && this.companyInfo.CompanyType === '权益') {
						this.$message.warning('请选择权限！');
						return
					}else {
						let PermissionIds = [... new Set(checkArr.flat(2))].join(',');
						let params = {
							CompanyId:Number(this.companyInfo.CompanyId),
							CompanyApprovalId:this.companyInfo.CompanyApprovalId?parseInt(this.companyInfo.CompanyApprovalId):0,
							ContractType:this.formData.contract_type,
							StartDate:this.formData.term[0],
							EndDate:this.formData.term[1],
							ImgUrl:this.formData.imglist.join('#'),
							Money:Number(this.formData.amount),
							PayChannel:this.formData.payfrom,
							PayMethod:this.formData.payway,
							PermissionIds,
							PackageType:this.formData.setmeal ? this.formData.setmeal : 0,
							PermissionNames:checkArrName.length? checkArrName.join(','):'',
							RaiPackageType:this.formData.qyBigServeCheck||0
						}
						// console.log(params);
						customInterence.applyTurn(params).then(res => {
							if(res.Ret === 200) {
								this.$message.success(res.Msg);
								//this.$router.go(-1);
								this.$router.push({path:`/${this.$route.meta.pathFrom}`})
							}
						})
					}
				}
			})
		},
		/* 取消 */
		cancelHandle() {
			//this.$router.go(-1);
			this.$router.push({path:`/${this.$route.meta.pathFrom}`})
		},
		/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// 取到所有的子菜单id
			let ids = item.Items.map(item =>{
				return item.ChartPermissionId
			})
			item.CheckList = item.checkAll ? ids : [];
        	item.isIndeterminate = false;
		},
		/* 复选框組选中时 */
		handleChecked(item) {
			let len = item.CheckList.length;
			item.checkAll = len === item.Items.length;
			item.isIndeterminate = len > 0 && len < item.Items.length;	
		},
			/* 预览 */
		preview(id,index,img) {
			if(img.indexOf('.pdf') == -1) {
				this.preAct = index;
				/* 是否显示左右切换 */
				let bol = this.formData.imglist.some(item => {
					return item.indexOf('.pdf') != -1
				})
				// 有pdf或图片只有一张
				if(bol || this.formData.imglist.length<=1) {
					this.isShowToggle = false
				}else {
					this.isShowToggle = true
				}
				this.isPreviewimg = true;
			}else {
				window.open(img)
			}
		},
		clickinput(index){  //上传模拟点击
			this.img_replace = '';
			if(index) {
				this.img_replace = index;
			}
			$("#file").click();
		},
		fileSelected(){  //选择文件上传
		    if( document.getElementById('file').files[0] ){
				  let hostfile = document.getElementById('file').files[0];
				
		        let size = Math.floor(hostfile.size / 1024 / 1024);
		        if( size>200 ){
		            this.$message.error('上传文件大小不能大于200M！');
		            hostfile = {};
		            return false
		        }
		        if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') || hostfile.name.toLowerCase().includes('.pdf') ){
		        	let form = new FormData();
		        	form.append('file',hostfile);  //hostfile.name
					this.uploadloading=true;
					customInterence.upload(form).then((res) => {
						if( res.Ret === 200 ){
							/* 是替换还是新增 */
							if(this.img_replace) {
								this.formData.imglist.splice(this.img_replace-1,1,res.Data.ResourceUrl)
							}else {
								if(this.formData.imglist.length >= 4) {
									this.$message.warning('最多上传4张')
								}else {
									this.formData.imglist.push(res.Data.ResourceUrl)
								}
							}
						}
						this.uploadloading=false;
						$("#file").val('');
						hostfile = {};
					});
				}else{
					this.$message.error('上传文件格式不正确！');
		        }
		    } 
		},
		closePreview() {
			this.isPreviewimg = false;
		},
		togglePre(type) {
			if(type==1) {
				this.preAct--;
				if(this.preAct < 0) {
					this.preAct = this.formData.imglist.length-1;
				}
			}else {
				this.preAct++;
				if(this.preAct > this.formData.imglist.length-1) {
					this.preAct = 0;
				}
			}
		},
		dateChange(e){
			if(parseInt((new Date() - new Date(this.formData.term[1]))/(1000*3600*24)) > 0) {
				this.$message.error('结束日期不能小于今天！')
				this.formData.term = []
				return
			}
			// console.log(new Date().getTime() - new Date(this.formData.term[0]).getTime());
			if(e){
				// this.diff_time = Number(
				// 			Number((
				// 			(new Date(this.formData.term[1]).getTime())
				// 			-(new Date(this.formData.term[0]).getTime())
				// 			)/(1000*60*60*24*365))
				// 			.toFixed(1).replace(/.0/,''));

				this.$alert(`你选择的合同期限是 ${CalculationDate(this.formData.term[0],this.formData.term[1])}`, '', {
					confirmButtonText: '确定'
				});
			}
		},

		//获取客户申请转正的合同类型接口
		getConstractType(){
			customInterence.applyTurnContractType({CompanyId:Number(this.companyInfo.CompanyId)}).then(res=>{
				if(res.Ret===200){
					this.formData.contract_type=res.Data.ContractType
				}
			})
		},
		//套餐的选择
		setmealChange(){
			if(this.formData.setmeal == '1'){
				this.authList.forEach(item => {
					if(item.ClassifyName != '市场策略') {
						item.Items.forEach(key => {
							item.CheckList.push(key.ChartPermissionId)
							key.Checked = true
							key.disabled = true
						})
						item.isIndeterminate = false
						item.checkAll = true
						item.disabled = true	
					}
				})
			} else {
				  this.authList.forEach(item => {
					 if(item.ClassifyName == '宏观经济') {
						 item.CheckList = [1]
						 item.isIndeterminate = true
						 item.Items[1].disabled=false
					 }else {
						 item.Items.forEach(key => {		
							item.CheckList = []
							key.Checked = false
							key.disabled = false
						})
						item.isIndeterminate = false
						item.checkAll = false
						item.disabled = false	
					 }
						
				})
				this.$message.warning('请勾选品种')
			}
		}
	
	},
	created() {},
	mounted() {
		if(this.$route.query.isReapply) {
			this.getLastContract();
		}else {
			this.getAuthBasic();	
			// this.getDealList();
			//修改为直接获取接口中数据
			this.getConstractType()
		}
	},
}
</script>
<style lang='scss'>
.applyTurn_container {
	min-width: 1570px;
	*{box-sizing: border-box;}
	/* reset */
	.el-form-item .el-checkbox-group {
		height: 40px;
	}
	.textarea_item .el-form-item__content {
		width: 100%;
	}
	/*  */
	.card_cont {
		margin-bottom: 20px;
		border: 1px solid #ECECEC;
		padding: 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
		.info {
			margin-top: 10px;
			font-size: 16px;
			color: #666;
			.tit {
				color: #333;
				font-size: 16px;
				margin-bottom: 30px;
			}
			.info_list {
				display: flex;
				flex-wrap: wrap;
				padding-left: 50px;
				padding-bottom: 20px;
				li {
					margin-right: 113px;
					margin-bottom: 20px;
					min-width: 250px;
				}
			}
		}
		.apply_info {
			font-size: 16px;
			.info_cont {
				padding-left: 30px;
				margin-top: 30px;
			}
		}
		.menu_lists {
			padding: 40px 18px;
			border: 1px dashed #AAB4CC;
			border-radius: 4px;
			.menu_item {
				display: flex;
				// align-items: center;
				margin-bottom: 40px;
				&:last-child {
					margin-bottom: 0;
				}
				.list_item {
					margin-right: 30px;
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
		.img_cont {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.img_item {
				position: relative;
				margin-right: 23px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

}
</style>