hz_crm_web/src/views/custom_manage/approvalList.vue

<template>
	<div class="approvalList_container">
		<div class="approvalList_top">
			<el-select v-model="status" placeholder="请选择状态" style="width:200px;marginRight:16px;" @change="changeStatus" v-if="Role=='ficc_admin'||Role=='rai_admin'">
				<el-option
					v-for="item in statusArr"
					:key="item"
					:label="item"
					:value="item">
				</el-option>
			</el-select>
			<el-input
				placeholder="公司名称/信用代码"
				v-model="search_txt"
				@input="handlSearch"
				clearable
				style="maxWidth:500px">
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="approvalList_cont">
			<el-table
				ref="userTable"
				:data="tableData"
				v-loading="isShowloadding"
				element-loading-text="数据加载中..."
				border>
					<el-table-column
					prop="CompanyName"
					label="客户名称"
					align="center">
						<template slot-scope="scope"> <span style="color:#409EFF;cursor:pointer;" @click="goDetail(scope.row)" class="customName">{{scope.row.CompanyName}}</span></template>
					</el-table-column>
					<el-table-column
					prop="CompanyType"
					label="客户类型"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.CompanyType}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="IndustryName"
					label="所属行业"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.IndustryName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="SellerName"
					label="所属销售"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.SellerName}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="ApprovalTime"
					label="提交审批时间"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.ApprovalTime|formatTime}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="CreateTime"
					label="审批时间"
					align="center">
						<template slot-scope="scope"> 
							<span v-if="scope.row.ApproveStatus!=='待审批' && scope.row.ApproveStatus!=='已撤回'">{{
								 scope.row.ApproveTime|formatTime}}
							</span> 
							<span v-else>--</span>
						</template>
					</el-table-column>
					<el-table-column
					prop="Status"
					label="客户状态"
					align="center">
						<template slot-scope="scope"> <span>{{scope.row.Status}}</span> </template>
					</el-table-column>
					<el-table-column
					prop="ApproveContent"
					label="待审内容"
					align="center">
						<template slot-scope="scope"> 
							<span :style="(Role=='ficc_seller' || Role=='rai_seller')?'':status=='已审批'?'color:#666;':'color:#F00;'">{{scope.row.ApproveContent}}</span> 
						</template>
					</el-table-column>
					<el-table-column
					prop="ApproveStatus"
					label="当前状态"
					align="center">
						<template slot-scope="scope">
							<span :style="scope.row.ApproveStatus=='已审批'?'':scope.row.ApproveStatus=='已撤回'?'color:#409EFF':'color:#F00'">{{scope.row.ApproveStatus=='驳回'?'已驳回':scope.row.ApproveStatus}}</span>
						</template>
					</el-table-column>
					<el-table-column
					prop="ApproveStatus"
					label="申请人"
					align="center">
						<template slot-scope="scope">
							<span :style="scope.row.ApproveStatus=='待审批'?'color:#F00':''">{{scope.row.ApplyRealName}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" min-width="110" v-if="Role!='admin'">
						<template slot-scope="scope">
							<div style="color:#4099ef; font-size:24px;">
								<span class="editsty" style="marginRight:10px;" @click="retractHandle(scope.row)"
								v-if="scope.row.OpButton.Cancel&&scope.row.ApproveStatus=='待审批'">撤回</span>
								<template 
								v-if="scope.row.ApproveStatus=='驳回'&&(Role=='ficc_seller' || Role=='rai_seller')">
									<span class="editsty" style="marginRight:10px;" @click="openHandle(scope.row)">驳回理由</span>
									<span class="editsty" style="marginRight:10px;" @click="editHandle(scope.row)">重新申请</span>
								</template>
								<span class="editsty" style="marginRight:10px;" @click="openApproval(scope.row)" 
								v-if="scope.row.OpButton.Approval&&scope.row.ApproveStatus=='待审批'">审批</span>
								<span class="editsty" @click="openApprovalDtl(scope.row)" 
								v-if="(Role=='ficc_admin'||Role=='rai_admin')&&scope.row.ApproveStatus=='已审批'">审批信息</span>
								<template 
								v-if="scope.row.ApproveStatus=='已撤回'&&(Role=='ficc_seller' || Role=='rai_seller')">
									<span class="editsty" style="marginRight:10px;" @click="editHandle(scope.row)">重新申请</span>
									<span class="deletesty" style="marginRight:10px;" @click="delHandle(scope.row)">删除</span>
								</template>
							</div>
						</template>
					</el-table-column>
					<div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
						<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
						<span>暂无数据</span>
					</div>
				</el-table>
				<el-col :span="24" class="toolbar">
					<el-pagination
					layout="total,prev,pager,next,jumper" 
					background
					:current-page="page_no"
					@current-change="handleCurrentChange"
					:page-size="pageSize" 
					@size-change="handleSizeChange" 
					:total="total"
					style="float:right;">
					</el-pagination>
				</el-col>
		</div>
		<!-- 撤回弹窗 -->
		<el-dialog
		title=""
		:visible.sync="isRetract"
		:close-on-click-modal="false"
		:show-close="false"
		:modal-append-to-body='false'
		custom-class="appro_dialog"
		center
		width="22%">
			<div style="display:flex;justify-content:center;alignItems:center;margin:20px 0 50px;color:#606266;fontSize:16px;">
				<i class="el-icon-success" style="fontSize:20px;color:#409EFF;marginRight:10px;"></i>
				<span>撤回成功</span>
			</div>
			<div style="display:flex;justify-content:center;margin:0 0 25px;">
				<el-button type="primary" style="width:112px;marginRight:24px;" @click="editHandle(revokeItem)">重新申请</el-button>
				<el-button  style="width:112px;" @click="cancelHandle(1)" type="primary" plain>关闭</el-button>
			</div>
		</el-dialog>
		<!-- 驳回弹窗 -->
		<el-dialog
		title="驳回理由"
		:visible.sync="isReject"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		custom-class="appro_dialog"
		@close="cancelHandle(2)"
		center
		top="20vh"
		width="22%">
			<div style="display:flex;margin:13px 0 50px;color:#606266;">
				<span>{{rejectTxt}}</span>
			</div>
			<div style="display:flex;justify-content:flex-end;margin:0 0 26px;">
				<el-button type="primary" style="width:80px;" @click="cancelHandle(2)">知道了</el-button>
			</div>
		</el-dialog>
		<!-- 审批弹窗 -->
		<CapprovalDia
		:isLook="isLookApproval"
		:approvalInfo="approvalInfo"
		:isApproval="isApproval"
		:title="approval_title"
		@cancelHandle="cancelHandle(3)"
		@approvalOver="approvalOver"
		></CapprovalDia>
		<!-- 申请弹窗 -->
		<Capplydia 
		:isApply="isApply"
		:title="applyTit"
		:formdata="applyForm"
		@cancelHandle="closeApply">
		</Capplydia>

		<!-- 申请转正、续约申请、补充协议选择申请合同模式弹窗 根据申请时类型跳过选择 -->
		<!-- <el-dialog
			:visible.sync="contractModel.show"
			:modal-append-to-body='false'
			width="670px"
			class="self-dialog"
		>
			<div style="text-align:center;margin:50px 0 100px 0">
				<img width="200" src="../../assets/img/cus_m/bzht.png" @click="handleContractModel('标准')" style="margin-right:50px;cursor: pointer;">
				<img width="200" src="../../assets/img/cus_m/fbzht.png" @click="handleContractModel('非标准')" style="cursor: pointer;">
			</div>
		</el-dialog> -->
		<!-- 申请转正、续约申请、补充协议标准合同模式下 合同信息弹窗 -->
		<ContractInfo 
			:initData="contractDialog" 
			@contractInfoDialogClose="contractInfoDialogClose"
		></ContractInfo>
	</div>
</template>

<script>
import CapprovalDia from './compontents/Capprovedialog.vue'
import { customInterence } from '@/api/api.js'
import Capplydia from './compontents/Capplydialog.vue'
import ContractInfo from './compontents/ContractInfo.vue'
export default {
	name:'',
	components: {CapprovalDia,Capplydia,ContractInfo},
	computed:{
		Role() {
			let role = localStorage.getItem('Role') || '';
			return role;
		},
		RoleType() {
			let type = localStorage.getItem('RoleType') || '';
			return type;
		},
	},
	data () {
		return {
			contractModel:{
				show:false,
				data:null,//客户信息（列表用户数据）
				type:'',//类型 申请转正、续约申请、补充协议
			},// 申请转正、续约申请、补充协议 选择合同类型弹窗 
			contractDialog:{
				show:false,
				type:'',//类型 申请转正、续约申请、补充协议
				cusdata:null,//客户信息（列表用户数据）
			},//申请转正、续约申请、补充协议 合同信息弹窗

			search_txt:'',
			status:"待审批",
			statusArr:['全部','待审批','已审批'],
			tableData:[],
			isShowloadding:false,
			total:1,
			page_no:sessionStorage.getItem('approvalListBack')?JSON.parse(sessionStorage.getItem('approvalListBack')).page_no:1,
			pageSize:10,
			isRetract:false,//撤回弹窗
			revokeItem:'',//撤回的列信息
			isReject:false,//驳回弹窗
			rejectTxt:'',//驳回理由
			approvalInfo:{},//审批信息
			isApproval:false,//审批弹窗
			approval_title:'',//审批标题
			isApply:false,//申请弹窗
			applyTit:'',//申请标题
			applyForm:{},//申请信息
			isLookApproval:false,//是否查看审批信息
		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no:this.page_no,
			status:this.status,
			keyword:this.search_txt
		}
		sessionStorage.setItem('approvalListBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/approvalUpdate'&&from.path!='/approvalTurn'&&from.path!='/updateCustom'&&from.path!='/customDetail'&&from.path!='/turnCustom') {
			sessionStorage.removeItem('approvalListBack')
		}
		next()
	},
	methods: {
		contractInfoDialogClose(){
			this.contractDialog={
				show:false,
				type:'',//类型 申请转正、续约申请、补充协议
				cusdata:null,//客户信息（列表用户数据）
			}
		},

		// 申请转正、续约申请、补充协议点击合同类型
		handleContractModel(e){
			this.contractModel.show=false
			if(e==='非标准'){
				if(this.contractModel.type==='申请转正'){
					sessionStorage.setItem('companyInfo',JSON.stringify(this.contractModel.data))
					this.$router.push({
						path:'/turnCustom',
						query:{
							isReapply:true
						}
					})
				}else if(this.contractModel.type==='续约申请'){
					sessionStorage.setItem('companyInfo',JSON.stringify(this.contractModel.data))
					this.$router.push({
						path:'/updateCustom',
						query:{
							isReapply:true
						}
					})
				}else if(this.contractModel.type==='补充协议'){
					sessionStorage.setItem('companyInfo',JSON.stringify(this.contractModel.data))
					this.$router.push({
						path:'/addAgreement',
						query:{
							isReapply:true
						}
					})
				}
				return
			}
			// 标准合同
			this.contractDialog.show=true
			this.contractDialog.type=this.contractModel.type
			this.contractDialog.cusdata=this.contractModel.data
		},

		//搜索
		handlSearch(){
			this.status='全部'
			this.page_no=1
			this.getTableData()
		},

		/* 获取表格数据 */
		getTableData() {
			this.isShowloadding = true;
			let status=''
			if(this.Role=='ficc_admin'||this.Role=='rai_admin'){
				status=this.status=='全部'?'':this.status
			}
			customInterence.approvalList({
				PageSize:this.pageSize,
				CurrentIndex:this.page_no,
				Status:status,
				KeyWord:this.search_txt
			}).then(res => {
				this.isShowloadding = false;
				if(res.Ret === 200) {
					res.Data.List&&res.Data.List.forEach(item => {
						item.StartDate = item.StartDate.replace(/-/g,'.');
						item.EndDate = item.EndDate.replace(/-/g,'.');
						item.FreezeStartDate = item.FreezeStartDate?item.FreezeStartDate.replace(/-/g,'.'):'';
						item.FreezeEndDate = item.FreezeEndDate?item.FreezeEndDate.replace(/-/g,'.'):'';
					})
					this.tableData = res.Data.List || [];
					this.total = res.Data.Paging.Totals;
				}
			})
		},
		/* 详情页 */
		goDetail(item) {
			this.$router.push({
				path:'/customDetail',
				query:{
					id:item.CompanyId
				}
			})
		},
		// 状态改变
		changeStatus() {
			this.page_no = 1;//当前页
			this.getTableData();
		},
		/* 页码改变 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData();
		},
		/* 重新申请 */
		editHandle(item) {
			console.log(item);
			this.isRetract = false;
			/* 转正申请 */
			// ApplyContractType:申请合同类型  0 非标  1 标准
			if(item.ApplyMethod == 1) {
				this.contractModel={
					show:false,
					data:item,
					type:'申请转正'
				}
				if(item.ApplyContractType==0){
					this.handleContractModel('非标准')
				}else{
					this.handleContractModel('标准')
				}
				// sessionStorage.setItem('companyInfo',JSON.stringify(item));
				// this.$router.push({
				// 	path:'/turnCustom',
				// 	query:{
				// 		isReapply:true
				// 	}
				// })
			}else if(item.ApplyMethod == 2 || item.ApplyMethod == 3 || item.ApplyMethod == 4) {
				this.applyForm = item;
				this.applyTit = item.ApplyMethod == 2?'申请解冻':item.ApplyMethod == 3?'申请延期':'申请领取';
				this.isApply = true;
			/* 续约申请 */
			}else if(item.ApplyMethod == 5) { 
				this.contractModel={
					show:false,
					data:item,
					type:'续约申请'
				}
				if(item.ApplyContractType==0){
					this.handleContractModel('非标准')
				}else{
					this.handleContractModel('标准')
				}
				// sessionStorage.setItem('companyInfo',JSON.stringify(item));
				// this.$router.push({
				// 	path:'/updateCustom',
				// 	query:{
				// 		isReapply:true
				// 	}
				// })
			}else if(item.ApplyMethod == 6){
				this.contractModel={
					show:false,
					data:item,
					type:'补充协议'
				}
				if(item.ApplyContractType==0){
					this.handleContractModel('非标准')
				}else{
					this.handleContractModel('标准')
				}
			}
		},
		/* 删除 */
		delHandle(item) {
			this.$confirm('确定删除该条审批单吗?','提示',{
				type:'warning'
			}).then(() => {
				customInterence.approvalDel({
					CompanyApprovalId:item.CompanyApprovalId,
					CompanyId:item.CompanyId
				}).then(res => {
					if(res.Ret === 200) {
						this.$message.success(res.Msg)
						let index = this.tableData.indexOf(item);
						this.tableData.splice(index,1)
					}
				})
			}).catch(() => {});
		},
		/* 撤回 */
		retractHandle(item) {
			this.revokeItem = item;
			customInterence.Revoke({
				CompanyId:item.CompanyId
			}).then(res => {
				this.isRetract = true;
				this.getTableData();
			})
		},
		/* 驳回理由弹窗 */
		openHandle(item) {
			this.rejectTxt = item.ApproveRemark;
			this.isReject = true;
		},
		/* 审批*/
		openApproval(item) {
			/* 转正审批 */
			if(item.ApplyMethod == 1) {
				sessionStorage.setItem('companyInfo',JSON.stringify(item));
				this.$router.push({
					path:'/approvalTurn',
					query:{
						id:item.CompanyId,
						contractId:item.CompanyContractId
					}
				})
			}else if(item.ApplyMethod == 2 || item.ApplyMethod == 3 || item.ApplyMethod == 4) {//item.ApprovalCount
				this.approvalInfo = item;
				this.approval_title = item.ApplyMethod == 2?'解冻审批':item.ApplyMethod == 3?'延期审批':'领取审批';
				let str=item.ApprovalCount>0?`(第${item.ApprovalCount}次申请)`:''
				this.approval_title=this.approval_title+str
				this.isLookApproval = false;
				this.isApproval = true;
			}else if(item.ApplyMethod == 5||item.ApplyMethod==6) { // 续约审批
				sessionStorage.setItem('companyInfo',JSON.stringify(item));
				this.$router.push({
					path:'/approvalUpdate',
					query:{
						id:item.CompanyId,
						contractId:item.CompanyContractId,
						ApplyMethod:item.ApplyMethod
					}
				})
			}
		},
		/* 查看审批信息 */
		openApprovalDtl(item) {
			/* 转正审批 */
			if(item.ApplyMethod == 1) {
				sessionStorage.setItem('companyInfo',JSON.stringify(item));
				this.$router.push({
					path:'/approvalTurn',
					query:{
						id:item.CompanyId,
						contractId:item.CompanyContractId,
						isLook:true
					}
				})
			}else if(item.ApplyMethod == 2 || item.ApplyMethod == 3 || item.ApplyMethod == 4) {
				this.approvalInfo = item;
				// this.approval_title = item.ApplyMethod == 2?'解冻审批':item.ApplyMethod == 3?'延期审批'+(item.ApprovalCount!=0?'(第'+item.ApprovalCount+'次申请)':''):'领取审批';
				this.approval_title = item.ApplyMethod == 2?'解冻审批':item.ApplyMethod == 3?'延期审批':'领取审批';
				let str=item.ApprovalCount>0?`(第${item.ApprovalCount}次申请)`:''
				this.approval_title=this.approval_title+str
				this.isLookApproval = true;
				this.isApproval = true;
			}else if(item.ApplyMethod == 5) { // 续约审批
				sessionStorage.setItem('companyInfo',JSON.stringify(item));
				this.$router.push({
					path:'/approvalUpdate',
					query:{
						id:item.CompanyId,
						contractId:item.CompanyContractId,
						isLook:true
					}
				})
			}
		},
		/* 审批完成 */
		approvalOver() {
			this.isApproval = false;
			this.getTableData();
		},
		/* 取消 */
		cancelHandle(type) {
			if(type === 1) {
				this.isRetract = false
			}else if(type === 2) {
				this.isReject = false
			}else if(type === 3) {
				this.isApproval = false
			}
		},
		 /* 关闭重新申请弹窗 */
		closeApply(type) {
			this.isApply = false;
			if(type == 1) {
				this.getTableData();
			}
		}
	},
	created() {
	},
	mounted() {
		if(sessionStorage.getItem('approvalListBack')) {
			let backData = JSON.parse(sessionStorage.getItem('approvalListBack'));
			this.search_txt = backData.keyword;
			this.page_no = backData.page_no,
			this.status = backData.status
		}
		this.getTableData();
	},
}
</script>
<style lang='scss'>
.self-dialog {
    width: 100%; 
}
.approvalList_container {
	.appro_dialog .el-dialog__header{
		background: #fff !important;
	}
	.appro_dialog .el-dialog__title {
		color: #333 !important;
	}
	.appro_dialog .el-dialog__close {
		color: #909399 !important;
	}
	.approvalList_top {
		display: flex;
		justify-content:flex-end;
		align-items: center;
		border: 1px solid #ECECEC;
		padding: 20px 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.approvalList_cont {
		min-height: calc(100vh - 260px);
		padding: 20px 30px 80px;
		background: #fff;
		margin-top: 20px;
		position: relative;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
}
</style>