workorder-front/pages_order/order/ModifyWorkOrder.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">
					{{detail.taskNo}}
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					担当信息：
				</view>
				<view class="index">
					{{detail.responsibler}}
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					机型信息：
				</view>
				<view class="inde">
					{{detail.model}}
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					数量：
				</view>
				<view class="index">
					<uv-number-box v-model="detail.number"></uv-number-box>
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					状态：
				</view>
				<view class="index"
				@click="$refs.picker.open()">
					<input type="text" 
					disabled
					v-model="detail.statusDescribe"/>
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					备注：
				</view>
				<view class="index">
					<input type="text" v-model="detail.remark"/>
				</view>
			</view>
			<view class="work-box">
				<view class="works">
					是否加急：
				</view>
				<view class="index">
					<uv-radio-group v-model="detail.isEmergency">
						<uv-radio 
							:customStyle="{margin: '8px'}" 
							v-for="(item, index) in radiolist" 
							:key="index" 
							:label="item.name" 
							:name="item.id">
						</uv-radio>
					</uv-radio-group>
				</view>
			</view>
		</view>
		
		<uv-picker ref="picker" 
		:columns="columns" 
		keyName="name"
		@confirm="confirm"></uv-picker>

		<view class="modify">
			<view class="modi" 
			@click="submit">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				id : 0,
				detail : {
				},
				radiolist : [
					{
						name : '不加急',
						id : '0',
					},
					{
						name : '加急',
						id : '1',
					},
				],
			}
		},
		onLoad(args) {
			this.id = args.id
		},
		onShow() {
			if(this.id){
				this.querydetail()
			}
		},
		computed : {
			...mapState(['workDetail', 'statusList']),
			columns(){
				
				let list = JSON.parse(JSON.stringify(this.statusList))
				
				list.splice(0, 1)
				
				return [
					list
				]
			},
		},
		methods: {
			// 根据id获取工单详情
			querydetail(){
				this.$api('queryTemplateById', {
					templateId : this.id
				}, res =>{
					if(res.code == 200){
						delete res.result.workorderStepList
						this.detail = res.result
					}
				})
			},
			submit(){
				
				let data = JSON.parse(JSON.stringify(this.detail))
				
				delete data.updateBy
				delete data.updateTime
				delete data.createBy
				delete data.createTime
				
				this.$api('updateTemplate', data, res => {
					if(res.code == 200){
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						
						setTimeout(uni.navigateBack, 1000, -1)
					}
				})
			},
			confirm(e){
				this.detail.statusId = e.value[0].id
				this.detail.statusDescribe = e.value[0].name
			},
		}
	}
</script>

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