eam-uniapp/src/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" style="margin-bottom: 20rpx;">
					<view class="items-name">
						备件名称：{{cur.itemName}}
					</view>
					<view class="items-dec" v-if="cur.type">
						类型：{{cur.type == 'type'?'设备' :'模具'}}
					</view>
					<view class="items-dec" v-if="cur.name">
						{{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 == 3">
			<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 setup lang="ts">
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import * as sparePartsApplicationApi from "@/api/sparePartsApplication.js"
	import * as sparePartsApplicationApproveApi from "@/api/sparePartsApplicationApprove.js"
	const { proxy } = getCurrentInstance()
	const number = ref('')
	const data = ref({})
	const loading = ref(false)
	const from = ref()//1从我的进入3从审核进入
	const type = ref()
	function getSparePartsApplicationDetail() {
		sparePartsApplicationApi.sparePartsApplicationDetail(number.value).then((res) => {
			data.value = res.data
		}).catch(() => { })
	}
	// 触发提交表单
	function agree() {
		proxy.$modal.confirm('确定通过申请吗').then(() => {
			proxy.$modal.loading('加载中')
			loading.value = true
			sparePartsApplicationApproveApi.sparePartsApplicationAgree(data.value.id).then((res) => {
				proxy.$modal.closeLoading()
				if (res.data) {
					proxy.$modal.showToast('审核成功')
					setTimeout(() => {
						proxy.$tab.navigateBack()
						loading.value = false
					}, 1500)
				} else {
					proxy.$modal.showToast('审核失败')
					loading.value = false
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value = false
			})
		})
	
	}
	// 驳回
	function reject(item) {
		proxy.$modal.confirm('确定驳回申请吗？').then(() => {
			proxy.$modal.loading('加载中')
			loading.value = true
			sparePartsApplicationApproveApi.sparePartsApplicationReject(item.id).then(async (res) => {
				if (res.data) {
					proxy.$modal.showToast('已驳回')
					setTimeout(() => {
						proxy.$tab.navigateBack()
						loading.value  = false
					}, 1500)
				} else {
					proxy.$modal.showToast('审核失败')
					loading.value  = false
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value  = false
			})
	
		})
	}
	onLoad((option) => {
		if (option.type) type.value = option.type;
		if (option.from) from.value = option.from;
		if (option.number) {
			number.value = option.number
		}
	})
	onShow(() => {
		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>