warst/warst-h5/pages/waitHandle/approvalDetail/index.vue

<template>
	<!-- 审批详情 -->
	<view class="approval-detail">
		<view class="main">
			<view class="header">
				<view class="title-box">
					<text class="originator">{{ detailInfo.createName }}</text>
					<text :style="{ color: statusColor }" class="approvedBy">
						{{ proStatus }}
					</text>
				</view>

				<image class="status-icon" :src="statusIcon"></image>
			</view>
			<!--   表单信息 -->
			<fmInfo :content="content"></fmInfo>
			<!--  流程图  -->
			<detailFlowChart :proNodes="proNodes"></detailFlowChart>
			<!-- 审批mdl-form  -->
			<approval-fm
				@reload="getDetailData"
				:rId="id"
				:isShow.sync="isShow"
			></approval-fm>
			<!-- 撤销原因mdl -->
			<revokeFm
				:id="detailInfo.id"
				:showRevoke.sync="showRevoke"
			></revokeFm>
		</view>
		<view class="footer">
			<!--  tabs我审批&&当前登录人的审批状态为true--显示审批按钮    -->
			<c-button
				v-if="type === 1 && detailInfo.audit"
				@click="isShow = true"
				type="primary"
			>
				审批
			</c-button>
			<!--tabs我发起--待审批可修改-->
			<template v-else-if="type === 0">
				<view
					v-if="detailInfo.status === 0"
					@click="updatePro"
					class="update-btn"
				>
					修改
				</view>
				<!-- 0: '待审批',1: '已归档',4: '审批中',-->
				<view
					v-if="[0, 1, 4].includes(detailInfo.status)"
					class="revoke-btn"
					@click="openMdl"
				>
					撤销
				</view>

				<!--tabs我发起--2已撤销/3已驳回,后可再次提交 -->
				<c-button
					v-if="[2, 3].includes(detailInfo.status)"
					type="primary"
				>
					再次提交
				</c-button>
			</template>
		</view>
	</view>
</template>

<script>
import fmInfo from './fmInfo.vue';
import detailFlowChart from './detailFlowChart.vue';
import { details, revoke } from '@/api/approval';
import ApprovalFm from '@/pages/waitHandle/approvalDetail/approvalFm.vue';
import processStatus from '@/utils/types/processStatus.js';
import nodeStatus from '@/utils/types/nodeStatus.js';
import revokeFm from './revokeFm.vue'; // 撤销原因

export default {
	name: 'approvalDetail',
	components: {
		ApprovalFm,
		fmInfo,
		detailFlowChart,
		revokeFm,
	},
	data() {
		return {
			showRevoke: false, // 撤销原因
			type: undefined, // 0我发起,1我审批,2抄送人
			approvedItem: {}, // 找出流程中到谁审批
			isShow: false,
			id: undefined,
			detailInfo: {},
		};
	},
	computed: {
		proStatus() {
			const approvedItem = this.approvedItem;
			const { status } = this.detailInfo;
			if (status === 0 && approvedItem) {
				//  流程状态：待审批,取节点的状态
				const nStatus = nodeStatus[approvedItem.status] || '';
				const uName = approvedItem.userName || '';
				return uName + nStatus; //审批人name+节点状态
			}
			return processStatus[status] || ''; // 流程的状态
		},
		statusColor() {
			const { status } = this.detailInfo;
			const colors = {
				0: '#FF9935', // '待审批'
				1: '#11C59D', // '已归档'
				2: '#436FF6', // '已撤销'
				3: '#FF5E59', // '已驳回'
				4: '#FF9935', // '审批中'
			};
			return colors[status || 0];
		},
		statusIcon() {
			const { status } = this.detailInfo;
			const icons = {
				0: 'sqz', // '待审批'
				1: 'ygd', // '已归档'
				2: 'ycx', // '已撤销'
				3: 'ybh', // '已驳回'
				4: 'sqz', // '审批中'
			};
			const iconName = icons[status || 0];
			return require(`@/static/images/approval/${iconName}.png`);
		},
		proNodes() {
			return this.detailInfo.nodes || [];
		},
		content() {
			const { detailInfo } = this;
			if (!detailInfo || !detailInfo.content) {
				return {};
			}
			return JSON.parse(detailInfo.content);
		},
	},
	onLoad(params) {
		this.id = +params.id;
		this.type = +params.type; // 0我发起,1我审批,2抄送人
		this.getDetailData();
	},
	methods: {
		async revokeProcess() {
			// 撤销原因只有要再走流程的才填
			const { processType, status } = this.detailInfo; // status流程状态
			if (processType === 3 && status === 1) {
				// 请假在归档状态时撤销---查看详情---提交时填写撤销原因
				this.showRevoke = true;
				return;
			}
			try {
				uni.$c.loading();
				await revoke({ id: this.detailInfo.id });
				uni.$c.toast('撤销成功');
				uni.hideLoading();
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
		openMdl() {
			//   撤销流程
			uni.showModal({
				title: '提示',
				content: '确认撤销吗？',
				success: (res) => {
					if (res.confirm) {
						this.revokeProcess(); // 撤销
					}
				},
			});
		},
		updatePro() {
			// 修改流程
			uni.$u.route('pages/approval/index', {
				type: this.detailInfo.processType,
			});
		},
		handleApproval() {},
		async getDetailData() {
			try {
				uni.$c.loading();
				const { data } = await details(this.id);
				this.detailInfo = data || {};
				const nodes = data.nodes || [];
				const curArr = nodes.find((item) => item.current)?.list || [];
				this.approvedItem = curArr.find((item) => item.status === 0); // 找出流程中到谁审批
				uni.hideLoading();
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.approval-detail {
	display: flex;
	flex-direction: column;
	.main {
		flex: 1;
		padding: 28rpx;
		overflow-y: auto;
		.header {
			min-height: 68px;
			padding: 28rpx;
			position: relative;
			background-color: #fff;
			border-radius: $bd-radius;
			.title-box {
				display: flex;
				flex-direction: column;

				.originator {
					font-size: 13px;
					color: #333333;
				}
				.approvedBy {
					font-size: 12px;
					color: #ff9935;
					margin-top: 24rpx;
				}
			}

			.status-icon {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				width: 66px;
				height: 61px;
			}
		}
	}
	.footer {
		display: flex;
		margin-bottom: 20rpx;

		.update-btn {
			flex: 1;
			text-align: center;
			background: #e3eafe;
			height: 38px;
			line-height: 38px;
			color: #436ff6;
			font-size: 14px;
			border-top-width: 2px;
			border-top-style: solid;
			border-top-color: #436ff6;
		}
		.revoke-btn {
			flex: 1;
			text-align: center;
			background: #ffe7e6;
			height: 38px;
			line-height: 38px;
			color: #ff5e59;
			font-size: 14px;
			border-top-width: 2px;
			border-top-style: solid;
			border-top-color: #ff5e59;
		}
	}
}
</style>