byte-sailing-mobile/src/views/processApproval/processDtl.vue

<template>
	<div class="process">
		<van-nav-bar title="流程审批" left-text="" left-arrow @click-left="onClickLeft">
		</van-nav-bar>
		<div>
			<component ref="makeDom" :queryData="queryData.data" :is="
					componentObj[route.query.flowKey]
						? componentObj[route.query.flowKey].component
						: SendSubscribe
				"></component>
		</div>

		<!-- <div class="card">
			<div class="common-title border-btm">申购信息</div>
			<div class="common-form-text">
				<div class="common-form-text-item">
					<div class="common-form-text-item-label">申购单号</div>
					<div class="common-form-text-item-value">
						PR-221101-170404-296
					</div>
				</div>
				<div class="common-form-text-item">
					<div class="common-form-text-item-label">申购时间</div>
					<div class="common-form-text-item-value">
						2022-11-01 17:04:04
					</div>
				</div>
				<div class="common-form-text-item">
					<div class="common-form-text-item-label">申购部门</div>
					<div class="common-form-text-item-value">仓库</div>
				</div>
				<div class="common-form-text-item">
					<div class="common-form-text-item-label">申购人</div>
					<div class="common-form-text-item-value">阮平芳</div>
				</div>
				<div class="common-form-text-item">
					<div class="common-form-text-item-label">申购类型</div>
					<div class="common-form-text-item-value">物料</div>
				</div>
				
			</div>
		</div> -->

		<div class="btn-warp" :class="footerMoreType ? 'open-more' : ''">
			<div class="more-btn" @click="footerMoreType = true">
				更多 <van-icon name="arrow-up" />
			</div>
			<div class="foot-btn-warp">
				<div class="agree-btn" @click="handleSubmit(1)">同意</div>
				<div class="next-btn" @click="nextFn">下一步</div>
			</div>
		</div>
		<van-action-sheet v-model:show="footerMoreType" title="审批记录" class="more-modal">
			<div class="card">
				<van-steps direction="vertical" :active="stepsNum" class="common-steps">
					<van-step v-for="(i, index) in recordList" :key="i.nodeId">
						<div class="label">
							<span class="name">{{ i.processedUser }}</span>
							<span class="tip">{{ i.nodeName }}</span>
							<span class="state" :class="index == stepsNum
								? 'cl-yl'
								: index < stepsNum
									? 'cl-blue'
									: ''
								">
								{{ i.nodeName }}
							</span>
						</div>
						<div class="content">审批意见：{{ i.remark }}</div>
						<p>{{ i.processedDate }}</p>
					</van-step>
				</van-steps>
			</div>
			<div style="padding: 0 12px">
				<van-field v-model="flowForm.remark" rows="3" autosize type="textarea" maxlength="400" placeholder="请输入审批意见"
					show-word-limit style="backround: #f1f1f1" />
			</div>
			<div class="load-btn-box">
				<van-button size="small" type="primary" plain round v-for="i in approvalRecordData.buttonInfoList"
					:key="i.type" v-show="i.type != 1" @click="handleSubmit(i.type)">{{ i.name }}
				</van-button>
			</div>
			<div class="content">
				<div class="foot-btn-warp">
					<div class="agree-btn" @click="handleSubmit(1)">同意</div>
					<div class="next-btn" @click="nextFn">下一步</div>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import SendSubscribe from './components/SendSubscribe'
import SendFunds from './components/SendFunds'
import Contract from './components/Contract'
import SendPurchasePayment from './components/SendPurchasePayment'

import { showSuccessToast, showFailToast } from 'vant'
const route = useRoute()
const proxy = getCurrentInstance().proxy
const onClickLeft = () => proxy.$router.push(componentObj.value[route.query.flowKey].backUrl)
const message = ref('')
const onClickRight = () => {
	proxy.$router.push('/main/working')
}
const makeDom = ref(null)
let stepsNum = ref(0)
let queryData = reactive({
	data: {},
})
let footerMoreType = ref(false)
const flowForm = reactive({
	flowKey: '',
	tenantType: '',
	handleUserId: '',
	remark: '',
	data: {},
})
let recordList = ref([])
const approvalRecordData = ref({
	buttonInfoList: [],
})

const getAuxiliaryData = (data) => {
	auxiliaryData.value = data
}

let componentObj = ref({
	subscribe_flow: {
		title: '申购',
		component: SendSubscribe,
		backUrl: '/main/subscribe',
	},
	account_request_funds_flow: {
		title: '请款',
		component: SendFunds,
		backUrl: '/main/funds',
	},
	contract_flow: {
		title: '销售合同',
		component: Contract,
		backUrl: '/main/contract',
	},
		pay_flow: {
		title: '采购付款',
		component: SendPurchasePayment,
		backUrl: '/main/purchasePayment',
	},
})

let dialogVisible = ref(false)
//判断是否有下一节点处理人
const handleResult = (res) => {
	if (res !== null && res.success) {
		skipPage()
	} else {
		dialogVisible.value = true
		nextHandleUser.value = res.userList
	}
}
const skipPage = () => {
	onClickLeft()
	// proxy.$router({
	// 	path:
	// 		route.query.processType === 10
	// 			? '/main/processApproval'
	// 			: componentObj.value[route.query.flowKey].backUrl,
	// })
}

const handleSelectUser = () => {
	if (!flowForm.handleUserId) {
		return ElMessage({
			message: '请选择下一节点处理人！',
			type: 'info',
		})
	}
	handleSubmit()
}
const handleSubmit = async (_type) => {
	const childrenData = await makeDom.value.handleSubmit()
	if (childrenData) {
		if (route.query.processType == 10 || route.query.processType == 30) {
			proxy
				.post('/flowProcess/jump', {
					...flowForm,
					data: childrenData,
					handleType: _type,
					version: route.query.version,
					flowId: route.query.id,
				})
				.then((res) => {
					handleResult(res.data)
				})
			if (_type && _type == 1) {
				proxy
					.post('/flowExample/setStartData', {
						exampleId: route.query.id,
						startDate: childrenData,
					})
					.then()
			}
			return
		} else {
			proxy
				.post('/flowProcess/initiate', {
					...flowForm,
					data: childrenData,
				})
				.then((res) => {
					handleResult(res.data)
				})
		}
	}
}

const getRecords = (_id) => {
	if (_id) {
		proxy
			.post('/flowExample/getApprovalRecord', {
				id: _id,
			})
			.then((res) => {
				for (let i = 0; i < res.data.recordList.length; i++) {
					const element = res.data.recordList[i]
					if (element.status === 2) {
						stepsNum.value = i
						break
					}
				}
				recordList.value = res.data.recordList
				queryData.data.recordList = res.data.recordList
				approvalRecordData.value = res.data

			})
	} else {
		proxy
			.post('/flowExample/getFlowNode', {
				flowKey: flowForm.flowKey,
			})
			.then((res) => {
				recordList.value = res.data
				stepsNum.value = 0
			})
	}
}
onMounted(async () => {
	//processType 10 为审批 20为查看 30回退发起 无为发起
	if (!componentObj.value[route.query.flowKey]) {
		showSuccessToast('代码未配置此流程！')
		return
	}
	if (
		route.query.processType == 10 ||
		route.query.processType == 20 ||
		route.query.processType == 30
	) {
		await proxy
			.post('/flowProcess/getStartData', { flowId: route.query.id })
			.then((res) => {
				queryData.data = { ...res.data }
			})
	} else {
		queryData.data = { ...route.query }
	}
	flowForm.flowKey = route.query.flowKey
	getRecords(route.query.id)
})
</script>
<style>
.van-step--vertical .van-step__circle-container {
	top: 25px;
}

.van-step--vertical .van-step__line {
	top: 23px;
}
</style>
<style lang="scss">
.process {
	.more-modal {
		.van-field {
			border: none;
			background: #f1f1f1;
			border-radius: 5px;
			padding: 5px 10px;
		}
	}

	.load-btn-box {
		height: 50px;
		text-align: center;
		padding: 9px;
		box-sizing: border-box;
	}

	.foot-btn-warp {
		height: 50px;
		line-height: 50px;
		text-align: center;
		display: flex;
		width: 100vw;
		font-size: 16px;

		.agree-btn {
			flex: 1;
			background: #eaf0ff;
			color: #0084ff;
		}

		.next-btn {
			flex: 1;
			background: #0084ff;
			color: #fff;
		}
	}

	.btn-warp {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		z-index: 2;

		button {
			width: 48%;
		}

		.content {
			height: 0;
			overflow: hidden;
			transition: all 0.3s ease;
			background: #fff;
			padding: 0 12px;
		}

		.more-btn {
			width: 100%;
			background: #fff;
			color: #999999;
			font-size: 14px;
			text-align: center;
			height: 50px;
			line-height: 50px;
		}
	}

	.open-more {
		.content {
			height: 170px;
		}
	}

	padding-bottom: 60px;

	.card {
		background: #fff;
		padding: 0 12px;
		margin-top: 10px;
	}

	.textarea {
		.van-field {
			border: none;
			background: #f1f1f1;
			border-radius: 5px;
			padding: 5px 10px;
		}
	}

	.more-btn {
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		color: #0084ff;
		text-align: center;
	}
}
</style>