client_LemonBeans/subPackages/repair/finish.vue

<template>
	<view class="finish-page">
		<navigation title="完工"></navigation>
		<view class="form-box">
			<u--form labelPosition="left" labelWidth="160rpx" :model="info" :rules="rules" ref="form">
				<view class="form">
					<u-form-item label="设备号" borderBottom>
						<u--input v-model="equipmentText" placeholder="设备号" border="none" disabled disabledColor="#fff">
						</u--input>
					</u-form-item>
					<u-form-item label="停机原因" prop="reasonId" borderBottom>
						<uni-data-select v-model="info.reasonId" :localdata="reasonActions" placeholder="请选择停机原因">
						</uni-data-select>
					</u-form-item>
					<view class="flex-box">
						<view class="content">
							<u-form-item label="备品备件" prop="materialId" borderBottom>
								<uni-data-select v-model="info.materialId" :localdata="materiaActions"
									placeholder="请选择备品备件">
								</uni-data-select>
							</u-form-item>
							<u-form-item label="数量" prop="materialCount" borderBottom>
								<u--input v-model="info.materialCount" placeholder="请输入数量" border="none">
								</u--input>
							</u-form-item>
						</view>
						<image class="icon" src="@/static/add.jpg" @click="addItem"></image>
					</view>
					<view class="flex-box" v-for="(item,i) of items" :key="i">
						<view class="content">
							<u-form-item label="备品备件" borderBottom>
								<uni-data-select v-model="item.materialId" :localdata="materiaActions"
									placeholder="请选择备品备件">
								</uni-data-select>
							</u-form-item>
							<u-form-item label="数量" borderBottom>
								<u--input v-model="item.materialCount" placeholder="请输入数量" border="none">
								</u--input>
							</u-form-item>
						</view>
						<image class="icon" src="../../static/delete.jpg" @click="deleteItem(i)"></image>
					</view>
					<u-form-item label="备注" prop="remark" borderBottom>
						<u--textarea v-model="info.remark" placeholder="请输入备注"></u--textarea>
					</u-form-item>
					<u-form-item label="完工照片" prop="completeImg">
						<u-upload name="img" :fileList="imgFileList" :maxCount="3" :sizeType="['compressed']"
							@afterRead="afterRead" @delete="deletePic"></u-upload>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="submit">
			<u-button @click="onSubmit" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	import $baseUrl from '@/https/index.js';
	export default {
		data() {
			return {
				equipmentText: '',
				reasonActions: [],
				materiaActions: [],
				imgFileList: [],
				info: {
					id: '',
					reasonId: '',
					remark: '',
					completeImg: '',
					materialList: [],
					materialId: '1',
					materialCount: ''
				},
				rules: {
					reasonId: {
						type: 'number',
						required: true,
						message: '请选择停机原因',
						trigger: ['blur', 'change']
					},
					// materialId: {
					// 	type: 'number',
					// 	required: true,
					// 	message: '请选择备品备件',
					// 	trigger: ['blur', 'change']
					// },
					// materialCount: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请输入数量',
					// 	trigger: ['blur', 'change']
					// },
					// remark: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写备注',
					// 	trigger: ['blur', 'change']
					// },
					// completeImg: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请上传完工照片',
					// 	trigger: ['blur', 'change']
					// },
				},
				items: []
			}
		},
		onLoad(option) {
			this.info.id = option.id
			this.equipmentText = option.num
		},
		onShow() {
			this.getReasonList()
			this.getMaterialList()
		},
		methods: {
			onSubmit() {
				if (this.imgFileList.length > 0) {
					let completeImgArr = []
					for (var i = 0; i < this.imgFileList.length; i++) {
						completeImgArr.push(this.imgFileList[i].url)
					}
					this.info.completeImg = completeImgArr.toString()
				}
				this.info.materialList = []
				var defaultValue = {
					materialId: this.info.materialId,
					materialCount: this.info.materialCount
				}
				this.info.materialList.push(defaultValue)
				for (var i = 0; i < this.items.length; i++) {
					var inputValue = {
						materialId: this.items[i].materialId,
						materialCount: this.items[i].materialCount
					}
					this.info.materialList.push(inputValue)
				}
				this.$refs.form.validate().then(res => {
					this.$api.completeOrder(this.info).then(res => {
						uni.showToast({
							title: '提交成功！',
							duration: 2000
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 2000);
					}).catch(err => {})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			addItem() {
				this.items.push({
					"materialId": '',
					"materialCount": ''
				})
			},
			deleteItem(i) {
				this.items.splice(i, 1);
			},
			// 停机原因
			getReasonList() {
				this.$api.dictList({
					baseType: 'CATEGORY_FAUT'
				}).then(res => {
					this.reasonActions = res.rows
					for (var i = 0; i < this.reasonActions.length; i++) {
						this.reasonActions[i].value = this.reasonActions[i].id
						this.reasonActions[i].text = this.reasonActions[i].baseDesc
					}
				}).catch(err => {})
			},
			// 备品备件
			getMaterialList() {
				this.$api.materialList({
					materielType: 'type_spare'
				}).then(res => {
					this.materiaActions = res.rows
					for (var i = 0; i < this.materiaActions.length; i++) {
						this.materiaActions[i].value = this.materiaActions[i].id
						this.materiaActions[i].text = this.materiaActions[i].materielName
					}
				}).catch(err => {})
			},
			// 删除图片
			deletePic(event) {
				console.log(event)
				this[`${event.name}FileList`].splice(event.index, 1)
				this.$refs.form.validate()
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				const fileList = this[`${event.name}FileList`]
				let fileListLen = fileList.length
				lists.map((item) => {
					fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				const url = '/common/upload'
				for (let i = 0; i < lists.length; i++) {
					uni.uploadFile({
						url: $baseUrl.url + url,
						filePath: lists[i].url,
						name: 'file',
						header: {
							Authorization: "Bearer " + uni.getStorageSync('token'),
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							let item = fileList[fileListLen]
							fileList.splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: data.msg
							}))
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.finish-page {
		padding-bottom: 20rpx;

		.add-bg {
			width: 100%;
			height: 330rpx;
		}

		.form-box {
			.form {
				background-color: #fff;
				margin: 0 24rpx;
				padding: 10rpx 24rpx;
				border-radius: 12rpx;

				/deep/.uni-select {
					border: none;
					padding: 0;
				}

				.flex-box {
					display: flex;
					align-items: center;

					.content {
						width: 90%;
					}

					.icon {
						width: 55rpx;
						height: 55rpx;
						margin-left: 2%;
					}
				}

			}
		}

		.submit {
			margin: 34rpx;
		}
	}
</style>