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-box">
				<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.statusDescribe}}
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					备注：
				</view>
				<view class="index">
					{{TemplateById.remark}}
				</view>
			</view>
		</view>
		

		<view class="working-procedure">
			<view class="working" 
			v-for="(item, index) in TemplateById.workorderStepList"
			:key="index"
			@click="clickStep(item, index)" >
				{{ item.name }}
			</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?id=' + id)">
				修改
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				id : 0,
				TemplateById : {
					workorderStepList : []
				},
			}
		},
		onLoad(args) {
			this.id = args.id
		},
		onShow() {
			if(this.id){
				this.queryTemplateById()
			}
		},
		computed : {
			...mapState(['workDetail']),
		},
		methods: {
			// 根据id获取工单详情
			queryTemplateById(){
				this.$api('queryTemplateById', {
					templateId : this.id
				}, res =>{
					if(res.code == 200){
						this.TemplateById = res.result
					}
				})
			},
			clickStep(item, index){
				
				let urls = [
					`/pages_order/order/ProcessCardOne?id=${this.id}&index=${index}&name=${item.name}`,
					`/pages_order/order/ProcessCardTo?id=${this.id}&index=${index}&name=${item.name}`,
					`/pages_order/order/ProcessCardThree?id=${this.id}&index=${index}&name=${item.name}`,
					`/pages_order/order/ProcessCardFour?id=${this.id}&index=${index}&name=${item.name}`,
				]
				
				this.$utils.navigateTo(urls[index])
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		height: 100vh;
		font-size: 28rpx;
		.Box{
			margin-top: 40rpx;
			.work-box {
				padding: 0rpx 30rpx;
				margin: 20rpx 0rpx;
				display: flex;
				.works {
					width: 150rpx;
					flex-shrink: 0;
				}
				.index {
					margin-top: 3rpx;
				}
			}
		}
		
		.working-procedure {
			text-align: center;
			margin-top: 150rpx;
			.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>