eam-uniapp/pages/sparePartsApplication/detail.vue

<template>
	<!-- 详情 -->
	<view class="detail-container">
		<view class="info">
			<view class="title">
				<view>备件申领工单</view>
			</view>
			<view class="dec">
				<view class="dec-item">
					<view>申请主题：</view>
					<view>{{data.name}}</view>
				</view>
				<view class="dec-item">
					<view>申请单号：</view>
					<view>{{data.number}}</view>
				</view>
				<view class="dec-item">
					<view>申请备件：</view>
				</view>
				<view class="items" v-for="(cur,key) in data.subList" :key="key">
					<view class="items-name">
						备件名称：{{cur.itemName}}
					</view>
					<view class="items-dec">
						类型：{{cur.type == 'type'?'设备' :'模具'}}
					</view>
					<view class="items-dec">
						{{cur.type == 'type'?'设备' :'模具'}}名称：{{cur.name}}
					</view>
					<view class="items-dec">
						是否以旧换新：{{cur.isRadeIn == 'TRUE'?'是' :'否'}}
					</view>
					<view class="items-dec">
						数量：{{cur.qty}}
					</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="!from">
			<view class="btns">
				<button class="reset" @click="reject">驳回</button>
				<button class="sure" @click="agree" :loading='loading' :disabled='loading'>通过</button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
	</view>
</template>

<script>
	import * as sparePartsApplicationApi from "@/api/sparePartsApplication.js"
	import * as sparePartsApplicationApproveApi from "@/api/sparePartsApplicationApprove.js"
	export default {
		data() {
			return {
				number: '', 
				data: '',
				loading: false,
				from:'',//从详情进入
			}
		},
		methods: {
			getSparePartsApplicationDetail(){
				sparePartsApplicationApi.sparePartsApplicationDetail(this.number).then((res)=>{
					this.data = res.data
				})
			},
			// 触发提交表单
			agree() {
				this.$modal.confirm('确定通过申请吗').then(() => {
					this.$modal.loading('加载中')
					this.loading = true
					sparePartsApplicationApproveApi.sparePartsApplicationAgree(this.data.id).then((res) => {
						this.$modal.closeLoading()
						if (res.data) {
							this.$modal.showToast('审核成功')
							setTimeout(() => {
								this.$tab.navigateBack()
								this.loading = false
							}, 1500)
						} else {
							this.$modal.showToast('审核失败')
							this.loading = false
						}
					}).catch(() => {
						this.$modal.closeLoading()
						this.loading = false
					})
				})
			
			},
			// 驳回
			reject(item) {
				this.$modal.confirm('确定驳回申请吗？').then(() => {
					this.$modal.loading('加载中')
					this.loading = true
					sparePartsApplicationApproveApi.sparePartsApplicationReject(item.id).then(async (res) => {
						if (res.data) {
							this.$modal.showToast('已驳回')
							setTimeout(() => {
								this.$tab.navigateBack()
								this.loading = false
							}, 1500)
						} else {
							this.$modal.showToast('审核失败')
							this.loading = false
						}
					}).catch(() => {
						this.$modal.closeLoading()
						this.loading = false
					})
			
				})
			},
		},
		onLoad(option) {
			if (option.type) this.type = option.type;
			if (option.from) this.from = option.from;
			if (option.number) {
				this.number = option.number
			}
			console.log(this.data)
		},
		onShow() {
			this.getSparePartsApplicationDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container{
		min-height: 100vh;
		background: white;
	}
	.line{
		background: #f5f5f5;
		height: 20rpx;
	}
	.info {
		background: white;
	}
	

	.tab {
		border-bottom: 1px solid #e4e4e4;

	}

	.title {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #e4e4e4;

		view {
			&:nth-child(1) {
				flex: 1;
				border-left: 10rpx solid #409eff;
				padding-left: 20rpx;
				font-weight: bold;
			}
		}
	}

	.dec {
		padding: 30rpx;

		.dec-item {
			padding-bottom: 30rpx;
			display: flex;

			view {
				&:nth-child(1) {
					width: 160rpx;
				}

				&:nth-child(2) {
					color: #888888;
					flex: 1;
					width: 0px;
					word-wrap: break-word;
				}
			}
		}
	}

	.dec2 {
		padding: 10rpx 30rpx;
		display: flex;

		view {
			&:nth-child(1) {
				width: 180rpx;
			}

			&:nth-child(2) {
				color: #888888;
				flex: 1;
				width: 0px;
				word-wrap: break-word;
			}
		}


	}

	.items {
		border-radius: 12rpx;
		background: #F5F5F5;
		padding-bottom: 20rpx;

		.items-name {
			padding: 20rpx;
			border-bottom: 1px solid #dedede;
		}

		.items-dec {
			padding: 0px 20rpx;
			margin-top: 20rpx;
		}
	}

	
	.list {
		padding: 20rpx;

		.item {
			display: flex;
			margin-bottom: 20rpx;

			.item-box {
				border-radius: 12rpx;
				border: 1px solid #dedede;
				border-radius: 12rpx;

				flex: 1;
				width: 0rpx;
			}

			.spare-title {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e4e4e4;
				display: flex;

				.title-txt {
					color: #409eff;
					font-size: 30rpx;
					font-weight: bold;
					flex: 1;
				}
			}

			.dec {
				color: #9c9c9c;
				padding: 0rpx 30rpx 20rpx;
			}

		}
	}

	.add-btn {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 22;
	}
	
	.btns {
		display: flex;
	
	
		button {
			flex: 1;
		}
	
		.sure {
			background: #409eff;
			color: white;
			border-radius: 0px;
	
			&::after {
				border: 1px solid #409eff;
				border-radius: 0px;
			}
		}
	
		.reset {
			background: #F5F5F5;
			border-radius: 0px;
	
			&::after {
				border-radius: 0px;
			}
		}
	}
</style>