client_LemonBeans/subPackages/repair/add.vue

<template>
	<view class="page-add">
		<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="故障设备" prop="equipmentId" borderBottom>
						<uni-data-select v-model="info.equipmentId" :localdata="equipmentActions" placeholder="请选择故障设备">
						</uni-data-select>
					</u-form-item>
					<u-form-item label="发生时间" prop="happenTime" borderBottom @click="showTimePicker = true">
						<u--input v-model="info.happenTime" placeholder="请选择发生时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
					</u-form-item>
					<u-form-item label="故障描述" prop="orderMsg" borderBottom>
						<u--textarea v-model="info.orderMsg" placeholder="请输入故障描述"></u--textarea>
					</u-form-item>
					<u-form-item label="故障图片" prop="orderImg">
						<u-upload name="img" :fileList="imgFileList" :maxCount="3" :sizeType="['compressed']"
							@afterRead="afterRead" @delete="deletePic"></u-upload>
					</u-form-item>
				</view>
			</u--form>
			<u-datetime-picker :show="showTimePicker" v-model="defaultTime" mode="datetime"
				@cancel="showTimePicker=false" @confirm="timePickerConfirm($event)"></u-datetime-picker>
			</u-action-sheet>
		</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 {
				showTimePicker: false,
				defaultTime: Number(new Date()),
				equipmentActions: [],
				imgFileList: [],
				info: {
					equipmentId: '',
					happenTime: '',
					orderMsg: '',
					orderImg: ''
				},
				rules: {
					equipmentId: {
						type: 'number',
						required: true,
						message: '请选择故障设备',
						trigger: ['blur', 'change']
					},
					happenTime: {
						type: 'string',
						required: true,
						message: '请选择发生时间',
						trigger: ['blur', 'change']
					},
					orderMsg: {
						type: 'string',
						required: true,
						message: '请填写故障描述',
						trigger: ['blur', 'change']
					},
					orderImg: {
						type: 'string',
						required: true,
						message: '请上传故障图片',
						trigger: ['change']
					},
				},
			}
		},
		onShow() {
			this.getEquipmentList()
		},
		methods: {
			timePickerConfirm(e) {
				this.info.happenTime = this.dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.showTimePicker = false
			},
			onSubmit() {
				if (this.imgFileList.length > 0) {
					let orderImgArr = []
					for (var i = 0; i < this.imgFileList.length; i++) {
						orderImgArr.push(this.imgFileList[i].url)
					}
					this.info.orderImg = orderImgArr.toString()
				}
				this.$refs.form.validate().then(res => {
					this.$api.addWorkOrder(this.info).then(res => {
						uni.showToast({
							title: '新增成功！',
							duration: 2000
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 2000);
					}).catch(err => {})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 设备
			getEquipmentList() {
				let params = {
					pageSize: 9999
				}
				this.$api.equipmentList(params).then(res => {
					this.equipmentActions = res.rows
					for (var i = 0; i < this.equipmentActions.length; i++) {
						this.equipmentActions[i].value = this.equipmentActions[i].id;
						this.equipmentActions[i].text = this.equipmentActions[i].equipmentName;
					}
				}).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>
	.page-add {
		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;
			}
		}

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