hz_crm_web/src/views/custom_manage/approvalTurn.vue

<template>
	<div class="approvalTurn_box">
		<div class="approvalTurn_container">
			<!-- 转正申请 -->
			<div class="card_cont">
				<h3 style="marginRight:18px;fontSize:16px;">
					申请信息 
					<el-button size="mini" type="primary" @click="isOpenCustomDtl=true" style="marginLeft:10px;">客户信息</el-button>
				</h3>
				<div class="history_item">
					<span>待审批内容：试用转正式</span> <span class="contract_type_hint">{{contractInfo.SourceTag}}</span>
					<ul class="detail_item">
						<li>
							<span>合同类型： {{contractInfo.ContractType}}</span>
						</li>
						<li>
							<span style="min-width:450px;marginRight:260px;display:inline-block;">合同期限：{{ContractTermTxt}}</span>
							<span>合同金额：{{contractInfo.Money}}元</span>
						</li>
						<li>
							<span style="min-width:450px;marginRight:260px;display:inline-block;">付款方式：{{contractInfo.PayMethod}}</span>
							<span>付款渠道：{{contractInfo.PayChannel}}</span>
						</li>
						<li v-if="contractInfo.PackageType">
							<p style="min-width:320px;marginRight:260px;display:inline-block;">套餐类型：<span class="setmeal-bg">{{contractInfo.PackageType==1 ?'大套餐':'小套餐'}}</span></p>
						</li>
						<li class="textarea_item" style="width:97%;">
							<label style="display:block;marginBottom:20px;fontSize:16px;position:relative;">
								权限设置
							</label>	
							<ul class="menu_lists">
								<template v-for="item in authList" >
									<li class="menu_item" v-if="item.CheckList.length" :key="item.ClassifyName">
										<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" disabled style="marginRight:30px;fontWeight:bold;">{{item.ClassifyName+':'}}</el-checkbox>
										<el-checkbox-group v-model="item.CheckList" disabled>
											<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item">{{list.PermissionName}}</el-checkbox>
										</el-checkbox-group>
									</li>
								</template>
							</ul>	
						</li>
						<li class="textarea_item" style="width:97%;display:flex">
							<label style="marginRight:17px;fontSize:16px;position:relative;width:112px;">
								查看合同附件
							</label>
							<ul class="img_cont">
								<li v-for="(img,index) in imglist" :key="img" class="img_item">
									<el-image :src="require('@/assets/img/constract/word-icon.png')" style="width:240px;height:180px;" v-if="img.indexOf('.doc')!=-1||img.indexOf('.docx')!=-1" @click.native="preview('img'+index,index,img)"></el-image>
									<pdf ref="pdf" :src="img" style="width:240px;height:180px;overflow:hidden" v-else-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>
								</li>
							</ul>
						</li>
						<li style="marginBottom:20px;">
							<label style="marginRight:40px;fontSize:16px;position:relative;padding-left:18px;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:0;top:2px;">*</i>
								审批状态
							</label>
							<el-radio-group v-model="status" size="medium" :disabled="isLook">
								<el-radio label="通过"></el-radio>
								<el-radio label="驳回" style="marginLeft:0;"></el-radio>
							</el-radio-group>
						</li>
						<li v-if="status=='驳回'">
							<label style="display:block;marginBottom:10px;fontSize:16px;position:relative;padding-left:18px;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:0;top:2px;">*</i>
								驳回理由
							</label>
							<el-input type="textarea" v-model="reason" rows="4" style="width:97%;" placeholder="输入理由" :disabled="isLook"></el-input>
						</li>
						<li style="display:flex;justify-content:center;margin:60px 0 0;" v-if="!isLook">
							<el-button type="primary" style="width:80px;marginRight:24px;" @click="ensureHandle">确定</el-button>
							<el-button  type="primary" plain style="width:80px;" @click="cancelHandle">取消</el-button>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<Ctimeline :id="companyId"></Ctimeline>
		<!-- 图片预览 -->
		<imgPreview
		:isShowToggle="isShowToggle"
		:isPreview="isPreviewimg" 
		:arr="imglist" 
		:actIndex="preAct"
		@close="closePreview"
		@togglePre="togglePre"></imgPreview>
		<!-- 客户基本信息弹窗 -->
		<CustomDtlDialog 
		 :isOpenCustomDtl="isOpenCustomDtl"
		 :companyInfo="companyInfo"
		 @cancelHandle="isOpenCustomDtl=false"
		/>
	</div>
</template>

<script>
import { customInterence } from '@/api/api.js'
import { filterMoney } from '@/common/js/util'
import Ctimeline from './compontents/Ctimeline.vue'
import imgPreview from '@/components/imgPreview.vue'
import CustomDtlDialog from './compontents/CustomDtlDialog.vue'
import pdf from 'vue-pdf'
import {CalculationDate} from '@/utils/CalculationDate'
export default {
	name:'',
	components: { Ctimeline,pdf,imgPreview,CustomDtlDialog },
	filters:{
		//计算多少年 X年X个月X天
		formateYear(s,e) {
			return `有效期为${CalculationDate(s,e)}`
		},
	},
	data () {
		return {
			companyId:this.$route.query.id,
			contractId:this.$route.query.contractId,
			companyInfo:JSON.parse(sessionStorage.getItem('companyInfo')) || {},//客户基本信息
			contractInfo:{},//合同信息
			authList:[],//权限列表
			imglist:[],//合同列表图片
			status:'通过',
			reason:'',
			diff_time:'',
			isLook:this.$route.query.isLook || false,
			isPreviewimg:false,
			preAct:"",
			isShowToggle:false,//是否显示切换
			/* 客户信息弹窗 */
			isOpenCustomDtl:false,
			ProductId:0,
		};
	},
	methods: {
		/* 获取详情 */
		getCompanyInfo() {
			customInterence.approvalDetail({
				CompanyId:this.companyId,
				CompanyContractId:Number(this.contractId)
			}).then(res => {
				if(res.Ret === 200) {
					this.ProductId=res.Data.Item.ProductId
					/* 处理合同期限 截取一位小数剔除.0 */
					this.diff_time = Number(
						Number((
						(new Date(res.Data.Item.EndDate).getTime())
						-(new Date(res.Data.Item.StartDate).getTime())
						)/(1000*60*60*24*365))
						.toFixed(1).replace(/.0/,''));
					res.Data.Item.StartDate = res.Data.Item.StartDate.replace(/-/g,'.');
					res.Data.Item.EndDate = res.Data.Item.EndDate.replace(/-/g,'.');
					res.Data.Item.Money = filterMoney(res.Data.Item.Money);
					this.contractInfo = res.Data.Item;
					this.imglist = res.Data.Item.ImgUrl.split('#');//合同图片
					/* 权限 */
					let auth = [];
					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,
						}
						auth.push(obj)
					})
					this.authList = auth;
				}
			})
		},
		/* 确定 */
		ensureHandle() {
			if(this.status == '驳回' && !this.reason) {
				this.$message.warning('请填写驳回理由！');
			}else {
				customInterence.Approval({
					CompanyId:parseInt(this.companyId),
					Remark:this.reason,
					Status:this.status=='通过'?1:2,
					ProductId:this.ProductId,
				}).then(res => {
					if(res.Ret === 200) {
						this.$message.success(res.Msg);
						this.$router.go(-1);
					}
				})
			}
		},
		/* 取消 */
		cancelHandle() {
			this.$router.go(-1);
		},
		/* 选择全选或取消全选 */
		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) {
			// $('#'+id).click()
			if(img.indexOf('.pdf')!=-1){
				window.open(img);
			}else if(img.indexOf('.doc')!=-1||img.indexOf('.docx')!=-1){
				 window.open('https://view.officeapps.live.com/op/view.aspx?src='+img,'_blank');
			}else{
				let bol = this.imglist.some(item => {
					return item.indexOf('.pdf') != -1
				})
				// 有pdf或图片只有一张
				if(bol || this.imglist.length<=1) {
					this.isShowToggle = false
				}else {
					this.isShowToggle = true
				}
				this.isPreviewimg = true;
			}

			// if(img.indexOf('.pdf') == -1) {
			// 	this.preAct = index;
			// 	/* 是否显示左右切换 */
			// 	let bol = this.imglist.some(item => {
			// 		return item.indexOf('.pdf') != -1
			// 	})
			// 	// 有pdf或图片只有一张
			// 	if(bol || this.imglist.length<=1) {
			// 		this.isShowToggle = false
			// 	}else {
			// 		this.isShowToggle = true
			// 	}
			// 	this.isPreviewimg = true;
			// }else {
			// 	window.open(img);
			// }
		},
		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;
				}
			}
		}
	},
	created() {},
	mounted() {
		/* 查看审批 */
		if(this.isLook) {
			this.status = this.companyInfo.ApproveStatus=='已审批'?'通过':this.companyInfo.ApproveStatus;
			this.reason = this.companyInfo.ApproveRemark;
		}
		this.getCompanyInfo()
	},
	computed:{
		ContractTermTxt(){
			let date = `${this.contractInfo.StartDate}-${this.contractInfo.EndDate}`;
			let calculation = CalculationDate(this.contractInfo.StartDate,this.contractInfo.EndDate);
			let str = this.contractInfo.Quarter ? this.contractInfo.Quarter + `（${date}）` : date + `（${calculation}）`;
			return str
		}
	},
}
</script>
<style lang='scss'>
.approvalTurn_box {
	display: flex;
}
.approvalTurn_container {
	flex: 1;
	margin-right: 20px;
	*{
		box-sizing: border-box;
	}
	/* reset */
	.el-collapse {
		border: none;
	}
	.el-collapse-item__header {
		display: block;
		border: none;
		font-size: 16px;
		color: #333;
		font-weight: bold;
		position: relative;
	}
	.el-collapse-item__content {
		padding-left: 30px;
	}
	.el-collapse-item__wrap {
		border: none;
		margin-top: 20px;
	}
	.el-form-item {
		margin-bottom: 40px;
	}
	.update_dialog .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);
		.btn_top {
			display: flex;
			justify-content: flex-end;
		}
		.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: 30px;
				padding-bottom: 20px;
				li {
					margin-right: 113px;
					margin-bottom: 20px;
					min-width: 250px;
				}
			}
		}
		.history_item {
			margin-bottom: 60px;
			margin-top: 30px;
			padding-left: 30px;
			font-size: 16px;
			color: #666;
			&:last-child {
				margin-bottom: 0;
			}
			.contract_type_hint{
				font-size: 14px;
				color:#f59a23;
				border: solid 1px #f59a23;
				padding: 2px 6px;
				margin-left: 12px;
			}
			.detail_item {
				font-size: 16px;
				color: #666;
				margin-top: 30px;
				li {
					margin-bottom: 30px;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
	.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;
				}
			}
		}
	}
	.textarea_item {
		.img_cont {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.img_item {
				position: relative;
				margin-right: 15px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.setmeal-bg {
		background-color: #dcecfc;
		padding: 5px 15px;
		border-radius: 5px;
		color:#3994fb;
	}
}
</style>