workorder-front/pages_order/order/ProcessCardThree.vue

<template>
	<view class="page">
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
		<view class="info">
			
			<view class="Work-List">
				<view class="label">
					部件名：
				</view>
				<view class="text">
					<input type="text"
					:disabled="!isPermission('修改')"
					v-model="StepOne.component"/>
				</view>
			</view>
			
			<view class="Work-List">
				<view class="label">
					研发确认：
				</view>
				<view class="text">
					<input type="text"
					:disabled="!isPermission('修改')"
					v-model="StepOne.comfirmDevelop"/>
				</view>
			</view>
			
			<view class="Work-List">
				<view class="label">
					品质确认：
				</view>
				<view class="text">
					<input type="text"
					:disabled="!isPermission('修改')"
					v-model="StepOne.confirmQuality"/>
				</view>
			</view>
			
			<view class="Work-List">
				<view class="label">
					中试确认：
				</view>
				<view class="text">
					<input type="text"
					:disabled="!isPermission('修改')"
					v-model="StepOne.confirmTrial"/>
				</view>
			</view>
			
			<view class="Work-List">
				<view class="label">
					备注：
				</view>
				<view class="text">
					<input type="text"
					:disabled="!isPermission('修改')"
					v-model="StepOne.remark"/>
				</view>
			</view>
			
		</view>
		
		<view class="list">
			
			<view class="item-box"
				:key="stepIndex"
				v-for="(step, stepIndex) in stepList">
				<view class="title">
					{{ step.name }}
				</view>
				
				<view class="list-box"
				:key="cIndex"
				v-for="(c, cIndex) in step.workorderItemCheckList">
					<view class="title">
						{{ c.name }}
					</view>
					
					<template 
					v-if="c.paramType == 1">
						<view class="item-input"
						:key="wi"
						v-for="(w, wi) in c.workorderParamStepthreeList"
						>
							<view class="image-box">
								<view class="image"
								:key="xi"
								v-for="(x, xi) in 10">
								
									<image 
									v-if="w['param' + (xi + 1)]"
									:src="w['param' + (xi + 1)]"
									@click="previewImage([w['param' + (xi + 1)]], 0)"
									mode="aspectFill"></image>
									
									<view class="add-image"
									v-else
									@click="upload(w, 'param' + (xi + 1))">
										<uv-icon
										size="40rpx"
										name="plus"
										color="#00000022"
										></uv-icon>
									</view>
									
									<view class="delete"
									@click="del(w, 'param' + (xi + 1))"
									v-if="w['param' + (xi + 1)]">
										x
									</view>
									
								</view>
							</view>
						</view>
					</template>
					
					
					<template v-else>
						<view class="item-input"
						:key="wi"
						v-for="(w, wi) in c.workorderParamStepthreeList"
						>
							
							<view class="Work-List"
							>
								<view class="label"
								style="width: 500rpx;">
									规格：{{ w.specs }}
								</view>
							</view>
						
							<view class="Work-List"
							:key="xi"
							v-for="(x, xi) in 10"
							>
								<view class="label">
									参数{{ xi + 1 }}：
								</view>
								<view class="text">
									<input type="text" 
									:disabled="!isPermission('修改')"
									v-model="w['param' + (xi + 1)]"/>
								</view>
							</view>
							
							<view class="Work-List"
							>
								<view class="label">
									作业员：
								</view>
								<view class="text">
									<input type="text" 
									:disabled="!isPermission('修改')"
									style="width: 450rpx;"
									v-model="w.operator"/>
								</view>
							</view>
						</view>
					</template>
					
				</view>
			</view>
			
		</view>
		
		<view class="uni-color-btn"
		v-if="isPermission('修改')"
		@click="submit">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				StepOne: {},
				stepList : [],
				index : 1,
				title : '',
			}
		},
		onLoad(arg) {
			this.id = arg.id
			this.index = arg.index || 2
			this.title = arg.name
			this.queryStepThree()
			this.queryTemplateById()
		},
		methods: {
			queryStepThree() {
				this.$api('queryStepThree', {
					templateId: this.id
				}, res => {
					if (res.code == 200) {
						this.StepOne = res.result.workorderGeneralStepthree
					}
				})
			},
			// 根据id获取工单详情
			queryTemplateById(){
				this.$api('queryTemplateById', {
					templateId : this.id
				}, res =>{
					if(res.code == 200){
						let p = res.result.workorderStepList[this.index]
						
						for(let i = 0;i < p.workorderProcessList.length;i++){
							let step = p.workorderProcessList[i]
							for(let j = 0;j < step.workorderItemCheckList.length;j++){
								let check = step.workorderItemCheckList[j]
								
								if(check.workorderParamStepthreeList.length == 0){
									check.workorderParamStepthreeList.push({
										processId : check.id,
										templateId : this.id,
									})
								}
							}
						}
						
						this.stepList = p.workorderProcessList
					}
				})
			},
			//工单信息-修改工序参数-工序卡1(选配)
			updateParamStepOne(item){
				return new Promise((success, error) => {
					
					let data = JSON.parse(JSON.stringify(item))
					
					delete data.updateBy
					delete data.updateTime
					delete data.createBy
					delete data.createTime
					
					for (let k in data) {
						if(!data[k] || data[k] == 'null'){
							data[k] = ''
						}
					}
					
					this.$api('updateParamStepThree', data, res => {
						if(res.code == 200){
							success(res)
						}else{
							error(res)
						}
					})
				})
			},
			async submit(){
				console.log(this.stepList);
				
				let StepOne = JSON.parse(JSON.stringify(this.StepOne))
				
				delete StepOne.updateBy
				delete StepOne.updateTime
				delete StepOne.createBy
				delete StepOne.createTime
				
				// 修改常规参数
				this.$api('updateGeneralStepThree', StepOne, res => {
				})
				
				uni.showLoading({
					title: '保存中...',
				})
				
				// 任务列表
				let tasks = []
				
				for(let i = 0;i < this.stepList.length;i++){
					let step = this.stepList[i]
					for(let j = 0;j < step.workorderItemCheckList.length;j++){
						let check = step.workorderItemCheckList[j]
						
						for(let k = 0;k < check.workorderParamStepthreeList.length;k++){
							let params = check.workorderParamStepthreeList[k]
							// 将请求添加到任务
							tasks.push(this.updateParamStepOne(params))
						}
					}
				}
				
				// 等待任务所有完成
				await Promise.all(tasks)
				
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				})
				
				setTimeout(uni.navigateBack, 1000, -1)
			},
			upload(w, key){
				if(!this.isPermission('修改')){
					return
				}
				this.$Oss.ossUploadImage({
					success : url => {
						w[key] = url
						this.$forceUpdate()
					}
				})
			},
			del(w, key){
				if(!this.isPermission('修改')){
					return
				}
				w[key] = ''
				this.$forceUpdate()
			},
		}
	}
</script>

<style scoped lang="scss">
	.page{
		padding-bottom: 200rpx;
		.Work-List{
			display: flex;
			padding: 16rpx 0rpx;
			align-items: center;
			.label{
				width: 200rpx;
				flex-shrink: 0;
			}
			.text{
				input{
					background-color: #eee;
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					width: 430rpx;
				}
			}
		}
		.info{
			padding: 30rpx;
			input{
				width: 430rpx;
			}
		}
		.list{
			padding: 0 30rpx;
			.list-box{
				padding: 20rpx 0;
				padding-left: 40rpx;
				.item-input{
					padding-left: 40rpx;
					.label{
						width: 130rpx;
					}
					
					.image-box{
						display: flex;
						width: 100%;
						flex-shrink: 0;
						flex-wrap: wrap;
						.image{
							width: 100rpx;
							height: 100rpx;
							margin: 10rpx;
							position: relative;
							image{
								width: 100%;
								height: 100%;
								border-radius: 20rpx;
							}
							.add-image{
								width: 100%;
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								border: 1rpx solid #00000022;
								border-radius: 20rpx;
							}
							.delete{
								width: 30rpx;
								height: 30rpx;
								background-color: #00000066;
								color: #fff;
								position: absolute;
								right: 0;
								top: 0;
								font-size: 22rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}
			input{
				width: 320rpx;
			}
		}
	}
</style>