workorder-front/pages_order/order/ProcessCardFour.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"
			@click="$refs.datetimePicker.open()">
				<view class="label">
					日期：
				</view>
				<view class="text">
					{{ $dayjs(StepOne.currentdate).format('YYYY-MM-DD') }}
				</view>
				<view 
				style="margin-left: auto;">
					<uv-icon
					name="arrow-right"
					></uv-icon>
				</view>
			</view>
			
			<uv-datetime-picker 
			ref="datetimePicker" 
			mode="date" 
			:value="new Date(StepOne.currentdate).getTime()"
			@confirm="e => StepOne.currentdate = e.value"/>
			
			<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.comfirmQuality"/>
				</view>
			</view>
			
			<view class="Work-List">
				<view class="label">
					中试确认：
				</view>
				<view class="text">
					<input type="text"
					:disabled="!isPermission('修改')"
					v-model="StepOne.comfirmTrial"/>
				</view>
			</view>
			
			<!-- <view class="Work-List">
				<view class="label">
					备注：
				</view>
				<view class="text">
					<input type="text" 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>
					
					<view class="item-input"
					:key="wi"
					v-for="(w, wi) in c.workorderParamStepfourList"
					>
						
						<view class="Work-List"
						>
							<view class="label">
								规格：
								<!-- {{ w.specs }} -->
							</view>
							<view class="text">
								<input type="text" 
								style="width: 450rpx;"
								:disabled="!isPermission('修改')"
								v-model="w.specs"/>
							</view>
						</view>
					
						<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 class="Work-List"
						>
							<view class="label">
								作业员：
							</view>
							<view class="text">
								<input type="text" 
								style="width: 450rpx;"
								:disabled="!isPermission('修改')"
								v-model="w.operator"/>
							</view>
						</view>
					</view>
				</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 : '',
				stepId : 0,
			}
		},
		onLoad(arg) {
			this.id = arg.id
			this.index = arg.index || 2
			this.title = arg.name
			this.queryStepFour()
			this.queryTemplateById()
		},
		methods: {
			queryStepFour() {
				this.$api('queryStepFour', {
					templateId: this.id
				}, res => {
					if (res.code == 200) {
						this.StepOne = res.result.workorderGeneralStepfour || {
							currentdate : new Date().getTime()
						}
						
						for (let k in this.StepOne) {
							if(!this.StepOne[k] || this.StepOne[k] == 'null'){
								this.StepOne[k] = ''
							}
						}
					}
				})
			},
			// 根据id获取工单详情
			queryTemplateById(){
				this.$api('queryTemplateById', {
					templateId : this.id
				}, res =>{
					if(res.code == 200){
						let p = res.result.workorderStepList[this.index]
						
						this.stepId = p.id
						
						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.workorderParamStepfourList.length == 0){
									check.workorderParamStepfourList.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('updateParamStepFour', 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))
				
				StepOne.stepId = this.stepId
				StepOne.templateId = this.id
				StepOne.currentdate = this.$dayjs(StepOne.currentdate).format('YYYY-MM-DD')
				
				delete StepOne.updateBy
				delete StepOne.updateTime
				delete StepOne.createBy
				delete StepOne.createTime
				
				// 修改常规参数
				this.$api('updateGeneralStepFour', 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.workorderParamStepfourList.length;k++){
							let params = check.workorderParamStepfourList[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()
			},
			// deleteImage(e, w){
			// 	w.fileList.splice(e.index, 1)
			// },
			// afterRead(e, w){
			// 	let self = this
			// 	e.file.forEach(file => {
			// 		self.$Oss.ossUpload(file.url).then(url => {
			// 			w.fileList.push({
			// 				url
			// 			})
			// 		})
			// 	})
			// },
		}
	}
</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;
				}
			}
		}
		.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>