jp-youdian-Inspection/pages/task/addTask.vue

<template>
	<view class="jpmain  ">
		<u-navbar title="故障上报" title-color="#101010"></u-navbar>

		<view class="list">
			<view class="item">
				<view class="name">
					<span>*</span>选择场站

				</view>
				<view class="value" @click="gotoSelectStation()">
					<view :style="taskInfo.stationId?'':'color:#BBB'">{{taskInfo.stationId?stationName:'选择故障上报的场站'}}</view>
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>



			<view class="item">
				<view class="name">
					<span>*</span>故障类型

				</view>
				<view class="value" @click="selectTaskInfoCodeBtn">
					<view :style="taskInfo.code?'':'color:#BBB'">{{taskInfo.code?codeN:'请选择故障类型'}}</view>
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>
			<view class="item item-plus">
				<view class="name">
					<span>*</span>上报人员

				</view>

				<view class="value  ">

					<u-checkbox-group>
						<u-checkbox v-model="item.checked"  @change="memberListchange"
						 v-for="(item, index) in memberList" :key="index"
							:name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group>


				</view>
			</view>
		</view>
		<view class="list">
			<view class="item item-plus">
				<view class="name">
					<span>*</span>故障描述

				</view>
				<view class="value">
					<textarea placeholder="请简单描述故障问题" v-model="taskInfo.desc" placeholder-class="textareaclass"
						class="textarea"></textarea>
				</view>
			</view>
			<view class="item item-plus">
				<view class="name">
					<span>*</span>拍照上传


				</view>
				<view class="value">
					<u-upload name="photoFile" ref="uUpload" :form-data="formData" :header="header" :action="action"
						:file-list="listPic"></u-upload>
				</view>
			</view>
		</view>

		<u-select v-model="selectTaskInfoCode" :default-value="selectTaskInfoCodeValue" value-name="value"
			label-name="name" @confirm="selectTaskInfoCodeConfirm" :list="codeList"></u-select>

		<view class="floating-button">
			<view class="button" @click="submit">

				提交
			</view>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTask.js'

	export default {
		data() {
			return {
				listPic: [],
				memberList: [],
				action: "",
				formData: {

				},
				header: {

				},
				codeN: "",
				selectTaskInfoCode: false,
				selectTaskInfoCodeValue: [0],
				
				stationName: "",

				taskInfo: {
					stationId: "",
					code: "",
					desc: "",
					images: "",

				},
				codeList: []
			};
		},
		onLoad() {
			this.action = process.jphelp.BASE_URL + "uploadPicture"
			this.formData.subFolder = "/yooudian/inspection/addTask"
			var token = this.jphelp.getToken()

			this.header = {

				'Authorization': token
			}
			this.getteamMembers()
			this.findByCatalogName({
				catalogName: '设备故障类型'
			}, "codeList")

		},
		methods: {
			memberListchange(e){
				console.log(e)
				this.$forceUpdate()
			},
			submit() {
				
				
				
				if (!this.taskInfo.stationId) {
					uni.showToast({
						title: "选择故障上报的场站"
					})
					return
				}
				if (!this.taskInfo.code) {
					uni.showToast({
						title: "请选择故障类型"
					})
					return
				}
				
				var mp=this.memberList.filter(item=>{
					return item.checked
				}).map(item=>{
					return item.id
				})
				
				if (mp.length==0) {
					uni.showToast({
						title: "请选择上报人员"
					})
					return
				}
				
				if (!this.taskInfo.desc) {
					uni.showToast({
						title: "请简单描述故障问题"
					})
					return
				}
				
				
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;

				//(files);

				var imgUrl = files.map(item => {
					return item.response.data;
				})
				if (imgUrl.length==0) {
					uni.showToast({
						title: "请拍照上传现场照片"
					})
					return
				}
				//(imgUrl);
				this.taskInfo.images = imgUrl.join(',');



				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.addErr(this.taskInfo).then((res) => {

					uni.showModal({
						title: '提示',
						showCancel: false,
						content: "上报成功",
						success: res1 => {
							if (res1.confirm) {
								uni.navigateBack()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})

					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})


			},
			findByCatalogName(obj, listName) {

				API.findByCatalogName(obj).then((res) => {

					var arr = res.data.dataDictionaryList

					this[listName] = arr


				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},

			getteamMembers() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.teamMembers().then((res) => {

					var arr = res.data.memberList

					this.memberList = arr

					this.memberList.forEach(item => {
						if (item.id == this.jphelp.getPersonInfo().id) {
							item.checked = true
						} else {
							item.checked = false
						}
					})
					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},

			selectTaskInfoCodeConfirm(e) {
				console.log(e)
				this.codeN = e[0].label
				this.taskInfo.code = e[0].value
			},
			selectTaskInfoCodeBtn() {
				if (this.taskInfo.code) {
					//this.selectTaskInfoCodeValue=[parseInt(this.bindInfo.type)-1]
					var i = this.codeList.findIndex(item => {
						return item.value == this.taskInfo.code
					})
					this.selectTaskInfoCodeValue = [i]
				}
				this.selectTaskInfoCode = true;
			},
			gotoSelectStation() {
				uni.navigateTo({
					url: '/pages/task/selectStation',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenerPage: (item) => {
							console.log(item)
							this.taskInfo.stationId = item.item.id
							this.stationName = item.item.stationName
							
							this.$forceUpdate()

						},

					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.jpmain {
		padding-bottom: 120rpx;
	}

	.list {
		background-color: rgba(255, 255, 255, 1);

		border-radius: 8px;

		margin: 20rpx;

		.item:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}

		.item {
			padding: 24rpx;
			display: flex;
			justify-content: space-between;

			.name {
				width: 40%;
				font-size: 32rpx;
				color: #777777;

				span {
					color: red
				}

				white-space: pre;
			}

			.value {
				font-size: 32rpx;
				width: 60%;
				display: flex;
				justify-content: space-between;

				input::placeholder {
					color: #AAAAAA;
				}

				.img {
					width: 40rpx;
					height: 40rpx;

				}

				.textarea {
					background-color: rgba(241, 242, 245, 1);
					width: 100%;
					border-radius: 8rpx;
				}

			}
		}

		.item-plus {
			flex-direction: column;

			.value,
			.name {
				width: 100%;
			}

			.name {
				padding-bottom: 32rpx;
			}
		}
	}

	.floating-button {
		z-index: 999;
		position: fixed;
		bottom: 0;
		/* 距离底部 20px */
		width: 100%;
		display: flex;
		height: 120rpx;
		justify-content: center;
		background-color: rgba(255, 255, 255, 1);

		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
	}

	.textareaclass {
		padding: 16rpx
	}
</style>