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

<template>
	<div class="process">
		<van-nav-bar :title="route.query.processType == 20 ? '流程详情' : '流程审批'" 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="btn-warp" :class="footerMoreType ? 'open-more' : ''">
			<!-- <div class="more-btn" @click="footerMoreType = !footerMoreType">
				更多 <van-icon name="arrow-up" v-if="!footerMoreType" /> <van-icon name="arrow-down" v-else />
			</div> -->
			<div class="foot-btn-warp" v-if="route.query.processType != 20">
				<div class="for-btn" v-for="(i,index) in approvalRecordData.buttonInfoList" :key="i.type" v-show="index == 0"  @click="handleSubmit(i.type)">
					<div>
						<i class="iconfont" :class="iconObj[i.type]"></i>
					</div>
					{{ i.name }}
				</div>
				<div class="for-btn"  @click="footerMoreType = !footerMoreType">
					<div>
						<i class="iconfont icon-icomx_message"></i>
					</div>
					审批意见
				</div>
				<div class="for-btn" @click="footerMoreBtnType = !footerMoreBtnType" v-if="approvalRecordData.buttonInfoList.length > 1">
					<div>
						<i class="iconfont icon-iconx__caidan1"></i>
					</div>
					更多
				</div>
				<div class="agree-btn" @click="nextFn" v-if="componentObj[route.query.flowKey].tabsNum">下一步</div>
				<div class="next-btn" @click="handleSubmit(1)">同意</div>
				
			</div>
		</div>
		<van-action-sheet v-model:show="footerMoreBtnType" title="更多操作" class="more-modal">
			<div class="for-btn-more" v-for="(i,index) in approvalRecordData.buttonInfoList" :key="i.type" v-show="index != 0"  @click="handleSubmit(i.type)">
				<span style="margin-right:20px">
					<i class="iconfont " :class="iconObj[i.type]"></i>
				</span>
				{{ i.name }}
			</div>
			<div style="height:50px">1</div>
		</van-action-sheet>
		<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  v-if="route.query.processType != 20">
				<div style="padding: 0 12px;margin-bottom: 20px;">
					<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>
			</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 PriceSheet from './components/PriceSheet'
import Contract from './components/Contract'
import SendPurchase from './components/SendPurchase'
import SendPurchasePayment from './components/SendPurchasePayment'
import ContractAlteration from './components/ContractAlteration'
import { showSuccessToast, showFailToast } from 'vant'
const route = useRoute()
const proxy = getCurrentInstance().proxy
// const onClickLeft = () => proxy.$router.push(componentObj.value[route.query.flowKey].backUrl)
const onClickLeft = () => proxy.$router.go(-1)
const message = ref('')
const onClickRight = () => {
	proxy.$router.push('/main/working')
}
const iconObj = ref({
	'2':'icon-icomx_shanchu',
	'3':'icon-icomx_sent',
	'4':'icon-iconx_tuihfqr',
	'5':'icon-iconm_shanchu'
})
const makeDom = ref(null)
let stepsNum = ref(0)
let queryData = reactive({
	data: {},
})
let footerMoreBtnType = ref(false)
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',
		tabsNum: 2,
	},
	account_request_funds_flow: {
		title: '请款',
		component: SendFunds,
		backUrl: '/main/funds',
		tabsNum: 3,
	},
	sale_quotation_flow: {
		title: '报价单',
		component: PriceSheet,
		backUrl: '/main/priceSheet',
		tabsNum: 4,
	},
	contract_flow: {
		title: '销售合同',
		component: Contract,
		backUrl: '/main/contract',
		tabsNum: 5,
	},
	purchase_flow: {
		title: '采购',
		component: SendPurchase,
		backUrl: '/main/procureList',
	},
	pay_flow: {
		title: '采购付款',
		component: SendPurchasePayment,
		backUrl: '/main/purchasePayment',
	},
	contract_update_flow: {
		title: '销售合同变更',
		component: ContractAlteration,
		backUrl: '/main/contract',
		tabsNum: 5,
	},
})

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)
					proxy.$router.go(-1)
				})
			if (_type && _type == 1) {
				proxy
					.post('/flowExample/setStartData', {
						exampleId: route.query.id,
						startData: childrenData,
					})
					.then()
			}
			return
		} else {
			proxy
				.post('/flowProcess/initiate', {
					...flowForm,
					data: childrenData,
				})
				.then((res) => {
					// handleResult(res.data)
					proxy.$router.go(-1)
				})
		}
		proxy.$router.go(-1)
	}
}

const nextFn = () => {
	makeDom.value.tabsChange()
}

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
				//删除type为1的按钮
				approvalRecordData.value.buttonInfoList = approvalRecordData.value.buttonInfoList.filter((item) => item.type != 1)

			})
	} 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;
		}
	}
	.for-btn-more {
		height: 50px;
		line-height: 50px;
		text-align: center;
		display: flex;
		width: 100vw;
		font-size: 16px;
		padding: 0 12px;
		font-size: 12px;
	}
	.load-btn-box {
		height: 50px;
		text-align: center;
		padding: 9px;
		box-sizing: border-box;
		margin-bottom: 50px;
	}

	.foot-btn-warp {
		height: 50px;
		line-height: 50px;
		text-align: center;
		display: flex;
		width: 100vw;
		font-size: 16px;
		.for-btn{
			flex: 1;
			background: #fff;
			color: #999999;
			font-size: 12px;
			text-align: center;
			height: 50px;
			line-height: 15px;
			padding: 10px 0;
			box-sizing: border-box;
			i{
				font-size: 24px;
			}
		}
		.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: 10002;
		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>