crm-xcx/pages-approve/custome/detail.vue

<template>
	<view class="detail-page white-wrap">
		<view>
			<!-- 基础信息模块 -->
			<view class="section white-wrap base-info-wrap" v-if="info">
				<view class="title">
					{{ info.CompanyApprovalDetail.CompanyName }}
					<van-tag 
						color="#ECF5FF" 
						text-color="#4A83F1"
						style="margin-bottom:0;margin-left: 10rpx;"
						v-if="info.CompanyApprovalDetail.ApprovalCount>0"
					>
						第{{ info.CompanyApprovalDetail.ApprovalCount }}次申请
					</van-tag>
				</view>
				<view class="base-info-list">
					<block v-for="item in baseInfo">
						<view :key="item.key">
							<text class="lable">{{ item.key }}：</text>
							<text :style="{ color: item.color }">{{ item.val }}</text>
							<van-tag v-if="item.tag" color="#ECF5FF" text-color="#4A83F1" style="margin-left:5px">
								{{ item.tag }}
							</van-tag>
						</view>
						<view style="padding-left:140rpx;margin-top:-10px" v-if="item.key==='合同期限'">({{item.val|formateYear}})</view>
					</block>
					
					<view v-if="info && info.CompanyApprovalDetail.ApproveStatus === '驳回'">
						<text class="lable" style="color:#FE6B7C">驳回理由：</text>
						<text style="color:#FE6B7C">{{ info.CompanyApprovalDetail.ApproveRemark }}</text>
					</view>
				</view>
				<image :src="info.CompanyApprovalDetail.statusImg" mode="aspectFill" class="status-img"></image>
				<!-- view class="status-img pass-img" v-if="info.CompanyApprovalDetail.ApproveStatus==='已审批'"></view>
				<view class="status-img fail-img" v-if="info.CompanyApprovalDetail.ApproveStatus==='驳回'"></view> -->
			</view>

			<!-- 套餐模块 -->
			<view class="section white-wrap variety-wrap package-type" v-if="packageType">
				<view class="title setmeal">套餐类型</view>
                <van-tag color="#ECF5FF" text-color="#4A83F1" custom-class="package-tag">{{ packageType == 1 ? '大套餐' : '小套餐' }}</van-tag>
			</view>

			<!-- 品种模块 -->
			<view class="section white-wrap variety-wrap" v-if="varietyInfo">
				<view class="title">{{ varietyInfo.title }}</view>
				<view class="variety-list">
					<view class="variety-item flex" v-for="item in varietyInfo.list" :key="item.ClassifyName">
						<view class="lable">{{ item.ClassifyName }}：</view>
						<view class="content">
							<van-tag color="#ECF5FF" text-color="#4A83F1" v-for="tag in item.Items"
								:key="tag.ChartPermissionId" custom-class="tag">{{ tag.PermissionName }}</van-tag>
						</view>
					</view>
				</view>
			</view>

			<!-- 合同模块 -->
			<view class="section white-wrap contract-wrap" v-if="constractFiles.length !== 0">
				<view class="title">查看合同附件</view>
				<view class="contract-list">
					<view class="contract-item" v-for="item in constractFiles" :key="item.url"
						@click="preViewContract(item)">
						<image class="contract-img" mode="aspectFill" :src="item.img"></image>
					</view>
				</view>
			</view>

			<!-- 客户信息模块 -->
			<view class="section white-wrap customer-wrap" v-if="showCustomerInfo && info">
				<view class="title">客户信息</view>
				<view class="customer-main-info">
					<view class="customer-info-item">
						<text>客户名称：</text>
						<text>{{ info.CompanyApprovalDetail.CompanyName }}</text>
					</view>
					<view class="customer-info-item">
						<text>社会信用码：</text>
						<text>{{ info.CompanyApprovalDetail.CreditCode }}</text>
					</view>
					<view class="customer-info-item">
						<text>地址：</text>
						<text>{{ info.CompanyApprovalDetail.Address }}</text>
					</view>
				</view>
				<view class="customer-info-list flex">
					<view class="customer-info-item flex" style="width:50%">
						<text style="flexShrink:0">客户类型：</text>
						<text>{{ info.CompanyApprovalDetail.CompanyType }}</text>
					</view>
					<view class="customer-info-item flex" style="width:50%">
						<text style="flexShrink:0">客户状态：</text>
						<text>{{ info.CompanyApprovalDetail.Status }}</text>
					</view>
					<view class="customer-info-item flex" style="width:50%">
						<text style="flexShrink:0">客户来源：</text>
						<text>{{ info.CompanyApprovalDetail.Source }}</text>
					</view>
					<view class="customer-info-item flex" style="width:50%">
						<text style="flexShrink:0">行业：</text>
						<text>{{ info.CompanyApprovalDetail.IndustryName }}</text>
					</view>
					<view class="customer-info-item flex" style="width:50%">
						<text style="flexShrink:0">申请销售：</text>
						<text>{{ info.CompanyApprovalDetail.SellerName }}</text>
					</view>
				</view>
			</view>
			
			<!-- 流程模块 -->
			<view class="section process-wrap">
				<view class="title" style="font-size: 16px;font-weight: bold;">审批流程</view>
				<steps :data="info.FlowNodeList"></steps>
			</view>
		</view>
		
		
		
		<!-- 审批按钮 -->
		<view class="fix-bottom-wrap btns-wrap flex" v-if="info &&info.CompanyApprovalDetail.OpButton&& info.CompanyApprovalDetail.ApproveStatus === '待审批'">
			<button class="pass-btn" @click="handlePass">通过</button>
			<button class="refuse-btn" @click="handleRefuse">驳回</button>
		</view>

		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import {apiCustomeDetail,apiCustomeContractDetail,apiCustomeApprove} from '@/api/approve/custome.js'
	import {preViewFile} from '../utils/util.js'
	import steps from '../components/steps.vue'
	import {CalculationDate} from '@/utils/calculationDate.js'
	export default {
		components:{
			steps
		},
		filters:{
			formateYear(time){
				let s=time.replace(/\./g, '-').split('~')[0]
				let e=time.replace(/\./g, '-').split('~')[1]
				return `有效期为 ${CalculationDate(s,e)} `;
			}
		},
		computed: {
			//是否显示客户信息模块
			showCustomerInfo() {
				if (this.info && (this.info.CompanyApprovalDetail.ApplyMethod === 2 || this.info.CompanyApprovalDetail
						.ApplyMethod === 4)) {
					return false;
				} else {
					return true;
				}
			},
		},
		data() {
			return {
				id: null,
				info: null,
				baseInfo: null, //顶部基础信息
				varietyInfo: null, //品种信息
				constractFiles: [], //合同文件
                packageType:'',//套餐类型
			};
		},
		onLoad(options) {
			this.id = options.id||0
		},
		onShow() {
			this.getDetail()
		},
		onPullDownRefresh() {
			this.getDetail()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			// 同意
			async handlePass() {
				const res = await apiCustomeApprove({
					CompanyApprovalId: Number(this.info.CompanyApprovalDetail.CompanyApprovalId),
					CompanyContractId: Number(this.info.CompanyApprovalDetail.CompanyContractId),
					CompanyId: Number(this.info.CompanyApprovalDetail.CompanyId),
					Remark: "",
					Status: 1,
				})
				if (res.code === 200) {
					this.$dialog.alert({
						title: "处理成功",
						confirmButtonColor: "#5890FB",
					}).then(() => {
						// on close
						this.getDetail()

						// 更新列表
						uni.$emit('customeApproveListUpdate',{CompanyApprovalId:this.id})
					});
				}
			},
			
			//拒绝
			handleRefuse(){
				const data=this.info.CompanyApprovalDetail
				uni.navigateTo({
					url:`./reason?CompanyApprovalId=${data.CompanyApprovalId}&CompanyContractId=${data.CompanyContractId}&CompanyId=${data.CompanyId}`
				})
			},
			
			// 获取审批单详情
			async getDetail() {
				const res = await apiCustomeDetail({
					ApprovalId: this.id
				})
				if (res.code === 200) {
					this.info = res.data
                    console.log(this.info);
					// 初始化状态
					let statusImg=''
					switch(res.data.CompanyApprovalDetail.ApproveStatus){
						case '已审批':
							statusImg=require('../static/pass-icon.png')
							break;
						case '驳回':
							statusImg=require('../static/fail-icon.png')
							break;
					}
					this.info.CompanyApprovalDetail.statusImg=statusImg
					
					let contractInfo = null
					// 如果有合同id 则获取合同数据
					if (res.data.CompanyApprovalDetail.CompanyContractId != 0) {
						const contractRes = await apiCustomeContractDetail({
							CompanyId: res.data.CompanyApprovalDetail.CompanyId,
							CompanyContractId: res.data.CompanyApprovalDetail.CompanyContractId
						})
						if (contractRes.code === 200) {
							contractInfo = contractRes.data
                            this.packageType = contractRes.data.PackageType
						}
					}

					this.initTopInfo(res.data, contractInfo)
					this.initVarietyInfo(res.data, contractInfo)
					this.initContractFiles(res.data, contractInfo)
				}
			},

			// 预览合同文件
			preViewContract(e) {
				if (e.type === "pdf") {
					preViewFile(e.url)
				} else {
					uni.previewImage({
						urls: [e.url]
					})
				}
			},

			// 初始化合同文件数据
			initContractFiles(info, contractInfo) {
				let arr = [];
				if (info && contractInfo && (info.CompanyApprovalDetail.ApplyMethod === 1 || info
						.CompanyApprovalDetail.ApplyMethod === 5||info
						.CompanyApprovalDetail.ApplyMethod === 6)) {
					const reg = /\.(pdf)|\.doc|\.docx$/;
					arr = contractInfo.ImgUrl.split("#").map((item) => {
						if (reg.test(item)) {
							return {
								type: "pdf",
								url: item,
								img: require("@/pages-approve/static/pdf.png"),
							};
						} else {
							return {
								type: "img",
								url: item,
								img: item,
							};
						}
					});
				}
				this.constractFiles = arr
			},

			// 初始化顶部数据
			initTopInfo(info, contractInfo) {
				let arr = [];

				//试用转正式
				if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 1) {
					uni.setNavigationBarTitle({
						title:'试用转正式'
					})
					arr = [{
							key: "合同编号",
							val: contractInfo.ContractCode,
							tag: contractInfo.ContractType,
						},
						{
							key: "合同期限",
							val: `${contractInfo.StartDate}~${contractInfo.EndDate}`.replace(/-/g, '.'),
						},
						{
							key: "合同金额",
							val: contractInfo.Money+'元',
							color: "#FE6B7C",
						},
						{
							key: "付款方式",
							val: contractInfo.PayMethod,
						},
						{
							key: "付款渠道",
							val: contractInfo.PayChannel,
						},
						{
							key: "申请时间",
							val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
						},
						{
							key: "申请理由",
							val: info.CompanyApprovalDetail.ApplyReasons || "无",
						},
					];
				}

				//冻结转试用
				if (info && info.CompanyApprovalDetail.ApplyMethod === 2) {
					uni.setNavigationBarTitle({
						title:'冻结转试用'
					})
					arr = [{
							key: "客户状态",
							val: info.CompanyApprovalDetail.Status,
						},
						{
							key: "冻结期限",
							val: `${info.CompanyApprovalDetail.FreezeStartDate}~${info.CompanyApprovalDetail.FreezeEndDate}`
								.replace(/-/g, '.'),
						},
						{
							key: "到期天数",
							val: info.CompanyApprovalDetail.FreezeExpireDays,
						},
						{
							key: "申请销售",
							val: info.CompanyApprovalDetail.ApplyRealName,
						},
						{
							key: "申请时间",
							val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
						},
						{
							key: "解冻理由",
							val: info.CompanyApprovalDetail.ApplyReasons,
						},
					];
				}

				//试用延期
				if (info && info.CompanyApprovalDetail.ApplyMethod === 3) {
					uni.setNavigationBarTitle({
						title:'试用延期'
					})
					arr = [{
							key: "地址",
							val: info.CompanyApprovalDetail.Address,
						},
						{
							key: "申请时间",
							val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
						},
						{
							key: "申请理由",
							val: info.CompanyApprovalDetail.ApplyReasons,
						},
					];
				}

				//原销售申请领取
				if (info && info.CompanyApprovalDetail.ApplyMethod === 4) {
					uni.setNavigationBarTitle({
						title:'原销售申请领取'
					})
					arr = [{
							key: "客户状态",
							val: info.CompanyApprovalDetail.Status,
						},
						{
							key: "原销售",
							val: info.CompanyApprovalDetail.SellerName,
						},
						{
							key: "申请销售",
							val: info.CompanyApprovalDetail.ApplyRealName,
						},
						{
							key: "申请时间",
							val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
						},
						{
							key: "申请理由",
							val: info.CompanyApprovalDetail.ApplyReasons,
						},
					];
				}

				//续约申请/补充协议
				if (info && contractInfo && (info.CompanyApprovalDetail.ApplyMethod === 5||info.CompanyApprovalDetail.ApplyMethod===6)) {
					uni.setNavigationBarTitle({
						title:info.CompanyApprovalDetail.ApplyMethod === 5?'续约申请':'补充协议'
					})
					arr = [{
							key: "合同编号",
							val: contractInfo.ContractCode,
							tag: contractInfo.ContractType,
						},
						{
							key: "合同期限",
							val: `${contractInfo.StartDate}~${contractInfo.EndDate}`.replace(/-/g, '.'),
						},
						{
							key: "合同金额",
							val: contractInfo.Money+'元',
							color: "#FE6B7C",
						},
						{
							key: "付款方式",
							val: contractInfo.PayMethod,
						},
						{
							key: "付款渠道",
							val: contractInfo.PayChannel,
						},
						{
							key: "申请时间",
							val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
						},
						{
							key: "申请理由",
							val: info.CompanyApprovalDetail.ApplyReasons || "无",
						},
					];
				}

				this.baseInfo = arr
			},

			// 初始化品种信息
			initVarietyInfo(info, contractInfo) {
				let usertype = this.$store.state.userInfo.ProductName; //用户身份类型admin,ficc,权益
				let arr = [];
				let obj = {
					title: "",
					list: [],
				};

				//试用转正式
				if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 1) {
					obj.title = "购买品种";
					arr = contractInfo.PermissionList;
					if (!arr) return obj;
					arr.forEach((item) => {
						let temarr = item.Items.filter((e) => {
							let flag = item.CheckList.includes(e.ChartPermissionId);
							if (flag) return e;
						});
						if (temarr.length !== 0) {
							obj.list.push({
								ClassifyName: item.ClassifyName,
								Items: temarr,
							});
						}
					});
				}

				//冻结转试用
				if (info && info.CompanyApprovalDetail.ApplyMethod === 2) {
					obj.title = "申请品种";
					if (usertype === "ficc") {
						arr = info.FiccPermissionList;
					} else if (usertype === "权益") {
						arr = info.PermissionList;
					} else if (usertype === "admin") {
						if (info.FiccPermissionList) {
							arr = [...info.FiccPermissionList];
						}
						if (info.PermissionList) {
							arr = [...info.PermissionList];
						}
					}

					if (!arr) return obj;
					arr.forEach((item) => {
						let temarr = item.Items.filter((e) => {
							let flag = item.CheckList.includes(e.ChartPermissionId);
							if (flag) return e;
						});
						if (temarr.length !== 0) {
							obj.list.push({
								ClassifyName: item.ClassifyName,
								Items: temarr,
							});
						}
					});
				}

				//试用延期
				if (info && info.CompanyApprovalDetail.ApplyMethod === 3) {
					obj.title = "申请品种";
					if (usertype === "ficc") {
						arr = info.FiccPermissionList;
					} else if (usertype === "权益") {
						arr = info.PermissionList;
					} else if (usertype === "admin") {
						if (info.FiccPermissionList) {
							arr = [...info.FiccPermissionList];
						}
						if (info.PermissionList) {
							arr = [...info.PermissionList];
						}
					}
					if (!arr) return obj;
					arr.forEach((item) => {
						let temarr = item.Items.filter((e) => {
							let flag = item.CheckList.includes(e.ChartPermissionId);
							if (flag) return e;
						});
						if (temarr.length !== 0) {
							obj.list.push({
								ClassifyName: item.ClassifyName,
								Items: temarr,
							});
						}
					});
				}

				//原销售申请领取
				if (info && info.CompanyApprovalDetail.ApplyMethod === 4) {
					obj.title = "申请品种";
					if (usertype === "ficc") {
						arr = info.FiccPermissionList;
					} else if (usertype === "权益") {
						arr = info.PermissionList;
					} else if (usertype === "admin") {
						if (info.FiccPermissionList) {
							arr = [...info.FiccPermissionList];
						}
						if (info.PermissionList) {
							arr = [...info.PermissionList];
						}
					}
					if (!arr) return obj;
					arr.forEach((item) => {
						let temarr = item.Items.filter((e) => {
							let flag = item.CheckList.includes(e.ChartPermissionId);
							if (flag) return e;
						});
						if (temarr.length !== 0) {
							obj.list.push({
								ClassifyName: item.ClassifyName,
								Items: temarr,
							});
						}
					});
				}

				//续约申请/补充协议
				if (info && contractInfo && (info.CompanyApprovalDetail.ApplyMethod === 5||info.CompanyApprovalDetail.ApplyMethod===6)) {
					obj.title = "购买品种";
					arr = contractInfo.PermissionList;
					if (!arr) return obj;
					arr.forEach((item) => {
						let temarr = item.Items.filter((e) => {
							let flag = item.CheckList.includes(e.ChartPermissionId);
							if (flag) return e;
						});
						if (temarr.length !== 0) {
							obj.list.push({
								ClassifyName: item.ClassifyName,
								Items: temarr,
							});
						}
					});
				}

				this.varietyInfo = obj
			}
		},
	}
</script>

<style lang="scss">
	.detail-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-bottom: 14rpx solid #f5f5f5;

		&:last-child {
			margin-bottom: 0;
			border: none;
		}

		.title {
			font-size: 16px;
			font-weight: bold;
			margin: 0 0 40rpx 0;
		}
		.setmeal {
			margin: 0;
		}
		.lable {
			color: #666;
			flex-shrink: 0;
			font-size: 14px;
		}
	}

	.base-info-wrap {
		position: relative;
		.title {
			margin: 0 0 40rpx 0;

			&::before {
				content: "";
				display: inline-block;
				width: 15px;
				height: 17px;
				background-image: url("@/static/man.png");
				background-size: cover;
				background-repeat: no-repeat;
				margin-right: 10rpx;
				position: relative;
				top: 4rpx;
			}
		}
		.base-info-list {
			font-size: 14px;
			color: #000;

			view {
				margin-bottom: 10px;
				display: flex;
			}
		}
		
		.status-img{
			position: absolute;
			width: 220rpx;
			height: 220rpx;
			right: 0;
			top: 100rpx;
		}
	}
    .package-type {
        display: flex !important;
        align-items: center;
        .package-tag {
            margin-left: 15rpx;
        }
    }
	.variety-wrap {
		.variety-item {
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
		}

		.variety-item:first-child {
			padding-top: 0;
		}

		.variety-item:last-child {
			border-bottom: none;
		}

		.tag {
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
	}

	.contract-list {
		display: flex;
		flex-wrap: wrap;

		.contract-img {
			width: 102rpx;
			height: 120rpx;
		}
	}

	.customer-main-info {
		padding-bottom: 40rpx;
		border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
	}

	.customer-info-item {
		font-size: 14px;
		color: #999;
		margin-bottom: 20rpx;
	}

	.customer-info-list {
		flex-wrap: wrap;
		padding-top: 20rpx;
	}

	.btns-wrap {
		justify-content: center;

		button {
			width: 260rpx;
			height: 70rpx;
			border-radius: 28px;
			border: none;
			margin: 0 15px;
			font-size: 15px;
			color: #fff;
			line-height: 70rpx;
		}

		.pass-btn {
			background-color: #5890fb;
		}

		.refuse-btn {
			background-color: #f55768;
		}
	}
</style>