jp-housekeep-electric/pages/workOrderManagement/faultReport.vue

<template>
	<view>
		<u-navbar title="故障上报" title-color="#101010"></u-navbar>
		<!-- 设备选择器 -->
		<u-select title="设备选择" v-model="show" mode="single-column" :list="deviceList" @confirm="deviceConfirm">
		</u-select>
		
		<view class="main">
			<!-- 故障设备 -->
			<view class="fault-equipment" @click="show=true">
				<view class="title">
					<text class="asterisk">*</text>故障设备

				</view>
				<view class="value">
					<view class="placeholder" v-if="!faultForm.deviceName">
						请选择设备
					</view>
					<view v-else>
						{{faultForm.deviceName}}
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#acacac"></u-icon>
					</view>
				</view>
			</view>
			<!-- 故障类型 -->
			<view class="fault-type">
				<view class="title">
					<text class="asterisk">*</text>请选择故障类型：
				</view>
				<view class="type">
					<view class="type-item" v-for="(item,index) in stateList" :key="index"
						:class="stateIndex==index ? 'item-checked' : ''" @click="stateClick(item,index)">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<!-- 照片上传 -->
		<view class="picture-upload">
			<view class="title">
				现场照片/视频（最多4张）
			</view>
			<view class="upload">
				<!-- <u-upload :action="action" :file-list="fileList" max-count="4" width="144" height="144"></u-upload> -->
				<u-upload max-count="4" name="photoFile" ref="uUpload" :form-data="formData" :header="header"
					:action="action" :file-list="fileList" width="144" height="144"></u-upload>
			</view>
		</view>
		<!-- 故障描述 -->
		<view class="fault-description">
			<view class="title">
				<text class="asterisk">*</text>故障描述
			</view>
			<view class="textarea">
				<textarea v-model="faultForm.content" placeholder="请详细描述故障现象，以便我们更准确快速的为您解决问题"></textarea>
			</view>
		</view>
		<!-- 底部 --> 
		<view class="bottom">
			<button class="submit" @click="submit">提交工单</button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import * as API_workOrder from '@/apis/pagejs/workOrder.js'
	
	export default {
		data() {
			return {
				stateIndex: -1,
				stateList: [], //故障类型List
				faultForm: {
					deviceId: '', //故障设备id
					deviceName: '',
					faultType: '', //故障类型
					pic: '', //故障拍照
					content: '' //故障内容
				},
				show: false,
				deviceList: [], //设备
				action: '',
				fileList: [],
				formData: {}
			}
		},
		onLoad() {
			this.action = process.car.BASE_URL + "uploadFile";
			this.formData = {
				subFolder: "workorder"
			}
			var token = this.carhelp.getToken();
			this.header={
				'Authorization': token,
				'X-Requested-With': 'application/x-www-form-urlencoded'
			}
			
			this.getLoadMyDevices();
			this.getFindByCatalogName();
		},
		methods: {
			submit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				files = this.$refs.uUpload.lists;
				var imgUrl = files.map(item => {
					return item.response.data.url;
				})
				this.faultForm.pic = imgUrl.join(',');
				
				if(!this.faultForm.deviceId){
					uni.showToast({
						icon: "none",
						title: "请选择故障设备"
					})
					return
				}
				if(!this.faultForm.faultType){
					uni.showToast({
						icon: "none",
						title: "请选择故障类型"
					})
					return
				}
				if(!this.faultForm.content){
					uni.showToast({
						icon: "none",
						title: "请填写故障描述"
					})
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_workOrder.usCreate(this.faultForm).then((res) => {
					uni.hideLoading();
					uni.navigateTo({
						url: '/pages/workOrderManagement/workOrderManagement'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//选择故障类型
			stateClick(item,index) {
				this.stateIndex = index;
				this.faultForm.faultType = item.value;
			},
			// 异常查询条件
			getFindByCatalogName() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_workOrder.findByCatalogName({
					catalogName: '故障类型'
				}).then((response) => {
					uni.hideLoading();
					var list = response.data.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					});
					this.stateList = list;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//选择设备
			deviceConfirm(e) {
				console.log(e)
				this.faultForm.deviceId = e[0].value;
				this.faultForm.deviceName = e[0].label;
			},
			getLoadMyDevices() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_workOrder.loadMyDevices().then((response) => {
					uni.hideLoading();
					this.deviceList = [];
					this.deviceList = response.data.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					});
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-select__header__title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.main {
		background-color: #fff;

		// 故障设备
		.fault-equipment {
			display: flex;
			align-items: center;
			padding: 24rpx 32rpx;
			border-bottom: 1px solid rgba(221, 221, 221, 1);

			.title {
				font-size: 32rpx;
				color: #777777;
				width: 144rpx;

				.asterisk {
					color: rgba(238, 49, 56, 1);

				}
			}

			.value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 64rpx;
				flex: 1;

				.placeholder {
					color: rgba(172, 172, 172, 1);
					font-size: 32rpx;
				}
			}
		}

		// 故障类型
		.fault-type {
			.title {
				font-size: 32rpx;
				color: #111111;
				padding: 32rpx 32rpx 0;
				font-weight: bold;

				.asterisk {
					color: rgba(238, 49, 56, 1);

				}
			}

			.type {
				display: flex;
				padding: 24rpx 32rpx;
				align-items: center;
				flex-wrap: wrap;

				.type-item {
					border: 1px solid rgba(216, 223, 232, 1);
					color: rgba(16, 16, 16, 1);
					line-height: 66rpx;
					text-align: center;
					border-radius: 4px;
					padding:0 16rpx;
					line-height: 66rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}

				.item-checked {
					background-color: rgba(22, 119, 255, 1);
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}

	// 照片上传 故障描述
	.picture-upload,
	.fault-description {
		padding: 32rpx 32rpx;
		background-color: #fff;
		margin-top: 24rpx;

		.title {
			color: rgb(16, 16, 16);
			font-size: 32rpx;
			margin-bottom: 24rpx;
			font-weight: bold;
		}

		.textarea {

			::v-deep.uni-textarea-placeholder {
				color: #b2b2b2;
			}

			::v-deepuni-textarea {
				width: 660rpx;
				height: 180rpx;

			}
		}
	}

	// 底部
	.bottom {
		padding: 20rpx 32rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.submit {
			border-radius: 4px;
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			line-height: 80rpx;
		}
	}
</style>