BomApp/pages/audit/detail.vue

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

			<!-- 表单数据 -->
			<template v-if="formList.length > 0">
				<uni-section title="表单数据" type="line"></uni-section>
				<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="excelFileList.length > 0">
				<uni-section title="附件信息" type="line"></uni-section>
				<view class="attachment" v-for="item in excelFileList" :key="item.id">
					<!-- {{item.name}} -->
					<previewFile :src="item.url" :name="item.name" />
				</view>
			</template>

			<!-- 审批信息 -->
			<uni-section title="审批信息" type="line"></uni-section>
			<uni-steps :options="flow.list.FlowNodes" :active="flow.current" direction="column"></uni-steps>

			<!-- 清单详情 -->
			<uni-section title="清单详情" type="line"></uni-section>
			<view class="excel-detail" @click="toExcelDetail">查看详情</view>
			<!-- 审批按钮 -->
			<view class="btns" v-if="isAuditor">
				<button type="primary" @click="showAuditModal">通过</button>
				<button type="warn" @click="showRejectModal">拒绝</button>
			</view>
		</view>


		<!-- 审核通过弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="info" mode="base" title="审批" content="是否通过审批" :duration="2000" :before-close="true"
				@close="auditClose" @confirm="auditConfirm"></uni-popup-dialog>
		</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 {
		queryVersionsList,
		queryAttachment,
		queryAuditList,
		approve,
		queryVersionDetail,
	} from "@/services/bom.js"
	import {
		gerCurrentUser
	} from "@/services/user.js"
	import previewFile from "@/components/preview-file/preview-file.vue"

	export default {
		components: {
			previewFile
		},
		data() {
			return {
				projectId: 580,
				templateNodeId: 0,
				versionId: 0,
				version: {},
				excelFileList: [],
				auditMessage: '',
				flow: {
					active: 0,
					active_id: null,
					current: 0,
					currentNode: {},
					list: {
						FlowNodes: [],
					},
				},
				isAuditor: false,
				isMobile: true,
				options: {}
			};
		},
		onLoad(options) {
			this.templateNodeId = options.templateNodeId
			this.versionId = options.versionId
			this.projectId = Number(options.projectId)
			if (!uni.getStorageSync('token')) {
				uni.setStorageSync("token", options['JWT-TOKEN']);
			}
			this.options = options
			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);

				var version = await queryVersionDetail({
					userID: currentUser.ID,
					versionID: this.versionId
				})
				if (!this.checkDeviceType()) {
					// 如果是在电脑上打开，转到PC端的页面去
					window.location.href =
						`http://120.55.44.4:8896/#/bom/home/detail/${version.project_id}/${version.template_id}?version_id=${this.versionId}`
				}

				if (version.flow_id) {
					this.getFlow(version)
				}
				this.version = version;

				if (version.attachment_id) {
					var {
						data: {
							list: excelFileList
						}
					} = await queryAttachment({
						excel_id: version.attachment_id
					})
					this.excelFileList = excelFileList.map(item => {
						const list = item.url.split('/');
						const name = list[list.length - 1];
						return {
							...item,
							name,
						};
					})
					// console.log(this.excelFileList)
				}
			},
			
			// 显示通过审批弹窗
			async showAuditModal() {
				this.$refs.popup.open();
			},
			
			// 通过审批
			async auditConfirm() {
				let flow = this.flow;
				let flowNode = flow.currentNode
				var {
					data: newVersion
				} = await approve({
					id: flow.active_id,
					project_id: this.projectId,
					audit_status: 3,
					flow_id: flowNode.flow_id,
					node_id: flowNode.seq,
				})
				this.version = {
					...this.version,
					id: newVersion.id,
				}
				this.getFlow(this.version)
				uni.showToast({
					title: "操作成功"
				})
				this.$refs.popup.close();
			},
			
			// 显示拒绝审批弹窗
			showRejectModal() {
				this.$refs.rejectPopup.open()
			},
			
			auditClose() {
				this.$refs.popup.close();
			},
			
			rejectClose() {
				this.$refs.rejectPopup.close();
			},
			
			async rejectConfirm(audit_comment) {
				const flow = this.flow
				const flowNode = flow.currentNode;

				var {
					data: newVersion
				} = await approve({
					id: flow.active_id,
					project_id: this.projectId,
					audit_status: 2,
					flow_id: flowNode.flow_id,
					node_id: flowNode.seq,
					audit_comment,
				})
				uni.showToast({
					title: "操作成功"
				})
				this.version = {
					...this.version,
					id: newVersion.id,
				}
				this.getFlow(this.version)
				this.rejectClose()
			},
			// 查询审批信息
			async getFlow(version) {
				const {
					data: auditList
				} = await queryAuditList({
					template_id: version.template_id,
					template_node_id: version.template_node_id,
					flow_id: version.flow_id,
					version_id: version.version_id,
					audit_series: version.audit_series,
				})
				if (auditList.length > 0) {
					let item = auditList.find(item => item.list.id == version.flow_id);
					if (!item) return;
					// 查询当前节点
					let current = item.list.FlowNodes.findIndex(node => node.seq == item.active);
					item.current = current == -1 ? 0 : current;
					// 保存当前所处节点
					item.currentNode = item.list.FlowNodes[item.current];
					item.list.FlowNodes.forEach(item => {
						item.title = item.node
						item.desc = item.AuditRoleInfo ?
							`审批人：${item?.AuditRoleInfo.Name || '-'}` :
							`审批人：${item?.AuditorUser.CName || '-'}`
					})
					this.flow = item;
					// 判断是否含有审批权限
					this.isAuditor = false;
					if (item.active_audit == 1) {
						let user = uni.getStorageSync("user");
						if (item.currentNode && item.currentNode.auditor == user.ID) {
							this.isAuditor = true;
						}
					}
				}
			},
			
			toExcelDetail() {
				uni.navigateTo({
					url: `./excelDetail?templateNodeId=${this.templateNodeId}&versionId=${this.versionId}`
				})
			}
		},
		computed: {
			formList() {
				if (!this.version.formStr) {
					return []
				}
				try {
					const formStrArray = JSON.parse(this.version.formStr);
					const formComponents = []
					if(formStrArray && formStrArray.length){
						formStrArray.forEach(item=>{
							formComponents.push(JSON.parse(item))
						})
					}
					const formComponent = formComponents.filter(item=> item.template_node_id === this.version.template_node_id)
					return formComponent[0].formComponentValues || [];
				} catch (e) {
					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;
		box-shadow: 0 0 1 3 rgba(0, 0, 0, 0.1);

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

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