workorder-front/pages_order/order/WorkOrders.vue

<template>
	<!-- 工单详情 -->
	<view class="page">
		
		<navbar
		title="详情"
		leftClick 
		
		@leftClick="$utils.navigateBack"
		/>
		
		<view class="Box">
			<view class="work-box">
				<view class="works">
					任务号：
				</view>
				<view class="index">
					{{TemplateById.taskNo}}
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					担当信息：
				</view>
				<view class="index">
					{{TemplateById.responsibler}}
				</view>
			</view>
			<view class="work-boxx">
				<view class="works">
					机型信息：
				</view>
				<view class="inde">
					{{TemplateById.model}}
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					数量：
				</view>
				<view class="index">
					{{TemplateById.number}}
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					状态：
				</view>
				<view class="index">
					{{TemplateById.remark}}
				</view>
			</view>
			<view class="work-boxx">
				<view class="workss">
					备注：
				</view>
				<view class="indexx">
					
				</view>
			</view>
		</view>
		

		<view class="working-procedure">
			<view class="working" @click="$utils.navigateTo('/pages_order/order/ProcessCardOne?id=' + id)" >
				中试压缩机试作工序卡1（选配）
			</view>
			<view class="working" @click="$utils.navigateTo('/pages_order/order/ProcessCardTo?id=' + id)">
				中试压缩机试作工序卡2
			</view>
			<view class="working" @click="$utils.navigateTo('/pages_order/order/ProcessCardThree?id=' + id)">
				中试压缩机试作工序卡3
			</view>
			<view class="working" @click="$utils.navigateTo('/pages_order/order/ProcessCardFour?id=' + id)">
				中试压缩机试作工序卡4(总成)
			</view>
		</view>
		<view class="modify">
			<view class="modi" 
			@click="$utils.navigateTo('/pages_order/order/ModifyWorkOrder')">
				修改
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id : 0,
				TemplateById : {},
			}
		},
		onLoad(args) {
			this.id = args.id
			this.queryTemplateById()
			console.log(args)
		},
		methods: {
			// 根据id获取工单详情
			queryTemplateById(){
				this.$api('queryTemplateById', {
					templateId : this.id
				}, res =>{
					if(res.code == 200){
						this.TemplateById = res.result
					}
				})
				
			},
	
	
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		height: 100vh;
		.Box{
			margin-top: 40rpx;
			.work-box {
				padding: 0rpx 30rpx;
				margin: 15rpx 0rpx;
				display: flex;
				align-items: center;
				font-size: 35rpx;
			
			}
		
			
			.work-boxx {
				padding: 0rpx 30rpx;
				margin: 15rpx 0rpx;
				display: flex;
				  flex-wrap: wrap;
				font-size: 35rpx;
			
				.indexx {
					margin-top: 3rpx;
				}
			
				.workss {
					width: 170rpx;
					font-size: 35rpx;
			
				}
			}
			
		}

		
		.working-procedure {
			text-align: center;
			margin-top: 150rpx;
			font-size: 35rpx;

			.working {
				margin: 25rpx 0rpx;
				color: rgb(83, 125, 180);

			}
		}
		.modify{
			text-align: center;
			margin-top: 150rpx;
			
			display: flex;
			align-items: center;
			justify-content: center;
			.modi{
				padding: 20rpx 60rpx;
				background-color:rgb(2 ,167, 240) ;
				border-radius: 15rpx;
				color: #fff;
			}
			
		}
	}
</style>