cxc-szcx-uniapp/bpm/supervise.vue

<template>
	<view class="">
		<view class="tab f-row aic">
			<view :class="{'active':currentTab==item.id}" v-for="item,i in tabArr" :key="i" @click="changeTab(item.id)">
				{{item.title}}
			</view>
		</view>
		<processCom :info="info"></processCom>
		<view class="f-col aic">
			<view class="progress">
				<view class="title">
					审批流程
				</view>
				<view class="progress_box">
					<view class="box" v-for="(item,index) in step" :key="index">
						<view class="topic f-row aic">
							<view class="">
								{{item.name}}
							</view>
							<view
								:class="['status',{'complete':item.deleteReason=='已完成'},{'refuse':item.deleteReason=='已拒绝'}]">
								{{item.deleteReason}}
							</view>
						</view>
						<view class="name_time">
							{{item.assigneeName}} | {{item.endTime}}
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		dbSxxqQueryByIdApi,
		dbJbxxQueryByIdApi,
		extActFlowDataApi,
		processHistoryListApi
	} from '@/api/api.js';
	import processCom from './processCom.vue';
	import {
		ref,
		onBeforeMount,
		watch,
		onMounted
	} from 'vue';
	const props = defineProps({
		dataId: {
			type: String,
			default: ''
		}
	})
	const tabArr = [{
		title: '基本信息',
		id: 1
	}, {
		title: '事项详情',
		id: 2
	}, {
		title: '添加下级',
		id: 3
	}, {
		title: '节点顺序',
		id: 4
	}, {
		title: '运行计划',
		id: 5
	}]
	const currentTab = ref(1)
	const changeTab = (id) => {
		currentTab.value = id
		dbSxxqQueryById()

	}
	const info = ref([])
	/**事项详情*/ 
	const dbSxxqQueryById = () => {
		dbSxxqQueryByIdApi({
			id: props.dataId
		}).then((res) => {
			if (res.success) {
				
				if(currentTab.value==1){
					
				dbJbxxQueryById(res.result.jbxxid)
				}
				if(currentTab.value==2){
					let d = res.result
					info.value = [{
						title: '承办部门',
						data: d.zbdw
					}, {
						title: '协办部门',
						data: d.xbdw
					}, {
						title: '部门领导',
						data: d.fgld
					}, {
						title: '办理人员',
						data: d.dbry
					}, {
						title: '要求反馈时间',
						data: d.yqfksj
					}, {
						title: '节点名称',
						data: ''
					}, {
						title: '预计完成时间',
						data: ''
					}, {
						title: '实际反馈时间',
						data: d.sjfksj
					}, {
						title: '自评价',
						data: d.zpj
					}, {
						title: '发起时间',
						data: d.fqsj
					}, {
						title: '序号',
						data: ''
					}, {
						title: '概述',
						data: ''
					}, {
						title: '时间进度',
						data: ''
					}, {
						title: '事项内容',
						data: d.sxnr
					}]
				}
			}
		})
	}
	/**基本信息*/ 
	const dbJbxxQueryById = (id) => {
		dbJbxxQueryByIdApi({
			id
		}).then((res) => {
			if (res.success) {
				let d = res.result
				info.value = [{
					title: '督办分类',
					data: d.fl
				}, {
					title: '协办部门',
					data: d.xbbm
				}, {
					title: '督办部门',
					data: d.cbbm
				}, {
					title: '督办人员',
					data: d.dbry
				}, {
					title: '督办部门负责人',
					data: d.zrr
				}, {
					title: '是否涉密',
					data: d.sfsm
				}, {
					title: '计划完成时间',
					data: d.jhwcsj
				}, {
					title: '实际完成时间',
					data: d.wcsj
				}, {
					title: '完成状态',
					data: d.wczt
				}, {
					title: '备注',
					data: d.bz
				}, {
					title: '督办事项',
					data: d.dbsx
				}, {
					title: '时间进度',
					data: d.sjjd
				}]
			}
		})
	}
	const extActFlowData = (dataId) => {
		extActFlowDataApi({
			flowCode: "dev_db_sxxq_001",
			dataId: props.dataId
		}).then((res) => {
			if (res.success) {
				processHistoryList(res.result.processInstanceId)
			}
		})
	}
	const step = ref([])
	/**审批步骤*/
	const processHistoryList = (processInstanceId) => {
		console.log('000', processInstanceId);
		processHistoryListApi({
			processInstanceId
		}).then((res) => {
			console.log('0088800', res);
			if (res.success) {
				step.value = res.result.records
			}
		})
	}
	onMounted(() => {
		dbSxxqQueryById()
		extActFlowData()
	})
</script>

<style lang="scss" scoped>
	.tab {
		background-color: #fff;
		overflow-x: auto;

		view {
			padding: 20rpx 30rpx;
			white-space: nowrap;
		}

		.active {
			position: relative;
			color: #1890ff;

			&::after {
				content: ' ';
				position: absolute;
				width: 100rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background-color: #1890ff;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}



	.progress {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		width: 630rpx;
		padding: 40rpx 30rpx 16rpx 30rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.status {
			padding: 4rpx 8rpx;
			display: inline-block;

			color: #FFFFFF;
			font-size: 20rpx;
			margin-left: 8rpx;
			border-radius: 8rpx;

		}

		.complete {
			background-color: #7AC756;
		}

		.refuse {
			background-color: #FE4600;
		}

		.title {
			font-size: 28rpx;
			color: #333333;
			background-image: url(../../static/index/line.png);
			background-size: 44rpx 12rpx;
			background-repeat: no-repeat;
			background-position: left bottom;
			margin-bottom: 40rpx;

		}

		// .box:not(:first-child) {
		// 	padding-top: 60rpx;
		// }
		.box:not(:last-child) {
			position: relative;
			padding-bottom: 60rpx;

			&::before {
				position: absolute;
				content: ' ';
				width: 1px;
				height: 100%;
				background: #efefef;
				left: -42rpx;
				top: 10rpx;
			}
		}

		.box {
			margin-left: 50rpx;


			.topic {
				position: relative;
				font-size: 28rpx;
				color: #333333;

				&::before {
					position: absolute;
					content: ' ';
					width: 18rpx;
					height: 18rpx;
					background: #01508B;
					border-radius: 14rpx;
					left: -50rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.name_time {
				font-size: 24rpx;
				color: #888888;
				margin-top: 12rpx;
			}
		}
	}
</style>