BomApp/pages/audit/OA/detail.vue

<template>
	<view class="page-detail">
		<view class="page-center">
			<uni-section title="清单名称" type="line" style="margin-top: 0;" />
			<text style="padding-left: 20rpx;">{{detail.name}}</text>

			<!-- 表单数据 -->
			<template v-if="formList.length > 0">
				<uni-section title="表单数据" type="line" />
				<uni-forms class="form" label-align="right" :labelWidth="100">
					<uni-forms-item v-for="item in formList" :label="item.name" name="email">
						<view class="content">{{item.value.join(",")}}</view>
					</uni-forms-item>
				</uni-forms>
			</template>

			<!-- 附件信息 -->
			<template v-if="attachments.length > 0">
				<uni-section title="附件信息" type="line" />
				<view class="attachment" v-for="item in attachments" :key="item.id">
					<!-- {{item.name}} -->
					<previewFile :src="item.url" :name="item.name" />
				</view>
			</template>

			<!-- 审批信息 -->
			<uni-section title="审批信息" type="line" />
			<uni-steps :options="auditList" :active="currentStep" direction="column" />

			<!-- 清单详情 -->
			<!-- 	<uni-section title="清单详情" type="line" />
			<view class="excel-detail" @click="toExcelDetail">查看详情</view> -->

			<!-- 审批按钮 -->
			<view class="btns" v-if="isAuditor">
				<button type="primary" @click="showAuditModal" style="width: 200rpx; height: 45px;">通过</button>
				<button type="warn" @click="showRejectModal" style="width: 200rpx; height: 45px;">拒绝</button>
			</view>
		</view>


		<!-- 审核通过弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" placeholder="请输入审批意见" :duration="2000" :before-close="true" @close="auditClose"
				@confirm="auditConfirm" />
		</uni-popup>

		<!-- 审批拒绝弹窗 -->
		<uni-popup ref="rejectPopup" type="dialog">
			<uni-popup-dialog mode="input" placeholder="请输入拒绝原因" :duration="2000" :before-close="true" @close="rejectClose"
				@confirm="rejectConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		gerCurrentUser
	} from "@/services/user.js"

	import previewFile from "@/components/preview-file/preview-file.vue"
	import {
		audit,
		getOAAuditDetail
	} from "../../../services/oa";

	export default {
		components: {
			previewFile
		},
		data() {
			return {
				id: "",
				detail: {},
				attachments:[],
				auditList: [],
				currentStep: 0,
				isAuditor: true,
				query: {},
				excelFileList: []
			};
		},
		onLoad(query) {
			if (!uni.getStorageSync('token')) {
				uni.setStorageSync("token", query['JWT-TOKEN']);
			}
			this.id = query.id
			this.query = query
			this.checkDeviceType()
			this.init()
		},
		methods: {
			checkDeviceType() {
				const userAgent = navigator.userAgent.toLowerCase();
				const mobileKeywords = ['android', 'iphone', 'ipad', 'ipod', 'mobile'];
				this.isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
				return this.isMobile
			},

			async init() {
				var currentUser = await gerCurrentUser();
				if (!currentUser) {
					return
				}
				uni.setStorageSync("user", currentUser);

				// if (!this.isMobile) {
				// 	// 如果是在电脑上打开，转到PC端的页面去
				// 	window.location.href =
				// 		`http://120.55.44.4:8896/#/bom/home/detail/${version.project_id}/${version.template_id}?version_id=${this.versionId}&JWT-TOKEN=${this.query['JWT-TOKEN']}`
				// }

				const detail = await getOAAuditDetail(this.id)
				this.detail = detail
				this.attachments = detail.Files
				this.getAuditList(detail.OaAuditList, detail.AuditorInfo)
			},


			getAuditList(list, currentAuditor) {
				// 填充审核人列表
				if (list && list.length) {
					this.auditList = list.map((item, index) => {
						if (currentAuditor.ID === item.auditor) {
							this.currentStep = index
						}
						return {
							title: item.seq_name,
							desc: `审核人：${item.AuditorUser.CName || '-'}`
						}
					})
				}
			},

			// 显示通过审批弹窗
			async showAuditModal() {
				this.$refs.popup.open();
			},

			// 通过审批
			async auditConfirm(audit_comment) {
				await audit({
					id: this.id,
					status: 1,
					desc: audit_comment
				})
				uni.showToast({
					title: "操作成功"
				})
				this.auditClose()
			},

			auditClose() {
				this.$refs.popup.close();
			},

			// 显示拒绝审批弹窗
			showRejectModal() {
				this.$refs.rejectPopup.open()
			},

			async rejectConfirm(audit_comment) {
				await audit({
					id: this.id,
					status: 2,
					desc: audit_comment
				})
				uni.showToast({
					title: "操作成功"
				})

				this.rejectClose()
			},

			rejectClose() {
				this.$refs.rejectPopup.close();
			},

			toExcelDetail() {
				uni.navigateTo({
					url: `./excelDetail?templateNodeId=${this.templateNodeId}&versionId=${this.versionId}`
				})
			}
		},
		computed: {
			formList() {
				const form = this.detail?.form
				if (!form) {
					return []
				}
				try {
					const formDatas = JSON.parse(form)
					if (formDatas && formDatas.length) {
						return formDatas.filter(item=>item.type!=='DIYTable')
					}
					return []
				} catch {
					return []
				}
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.page-detail {
		min-height: 100vh;
		padding: 20rpx 30rpx 40rpx;
		background: url("~@/static/index/bg.png") no-repeat center;
		background-size: cover;
		background-attachment: fixed;

		.page-center {
			padding: 30rpx;
			padding-top: 0;
			background-color: #fff;
		}
	}

	.btns {
		display: flex;
		margin-top: 40rpx;
	}

	.excel-detail {
		color: #2f42ca;
		text-decoration: underline;
		padding-left: 20rpx;
	}

	.form {
		width: 90%;
		margin: 0 auto;

		.content {
			line-height: 44rpx;
			padding: 14rpx;
			word-break: break-all;
		}
	}

	.attachment {
		padding-left: 20rpx;
		margin-bottom: 20rpx;
	}
</style>