MingGaoApp_vue/MingGaoApp/pages/index/taskEdit.vue

<template>
	<view class="task-details">
		<view class="task-details__header">
			<task-card type="show" :dataSource="taskDetail"></task-card>
		</view>
		<view class="panel">
			<view class="panel__header">
				<view class="panel__title">任务汇报</view>
			</view>
			<view class="panel__content">
				<view class="task-details__area">
					<view class="task-details__edit-icon" v-if="!isMessageEdit" @click="isMessageEdit=!isMessageEdit">
						<uni-icons type="compose" color="#1B76FF"></uni-icons>
					</view>
					<u--textarea :focus="true" v-else v-model="report_msg" placeholder="" :maxlength="200" autoHeight
						border="none">
					</u--textarea>
				</view>
			</view>
		</view>
		<view class="task-details__body" v-if="task_type">
			<!-- <u-sticky>
				<task-tabs @tabClick="handleTabClick" :tabList="tabList"></task-tabs>
			</u-sticky> -->
			<view class="task-details__content">
				<!-- <transition name="slide-fade" mode="out-in" appear>
					<component :is="currentComponent" :dataSource="taskDetail" :isEdit="isEdit"></component>
				</transition> -->
				<EntrapmentComponent :dataSource="taskDetail" :isEdit="true" :isShowHeader="true"></EntrapmentComponent>
			</view>
		</view>
		<view class="task-details__footer">
			<u-button text="提交" type="primary" size="small" @click="taskfillingcom"></u-button>
		</view>
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import ClockInRecordComponent from './components/ClockInRecord.vue';
	import EntrapmentComponent from './components/Entrapment.vue';
	import GisComponent from './components/Gis.vue';
	import * as taskService from '@/service/task.js';
	import HeartBeat from '@/util/HeartBeat.js'

	export default {
		components: {
			ClockInRecordComponent,
			EntrapmentComponent,
			GisComponent
		},
		computed: {
			...mapState({
				wornlist: state => state.wornlist
			}),
			tabList() {
				if (this.task_type) {
					return [{
						id: 1,
						name: '签到记录',
					}, {
						id: 2,
						name: '诱捕器',
					}, {
						id: 3,
						name: '行驶轨迹'
					}]
				} else {
					return [{
						id: 1,
						name: '签到记录',
					}, {
						id: 3,
						name: '行驶轨迹'
					}]
				}
			}
		},
		data() {
			return {
				currentComponent: ClockInRecordComponent,
				taskID: '',
				loading: false,
				taskDetail: {},
				draft: [],
				taskinfo: {},
				report_msg: '',
				task_type: false,
				isEdit: false,
				isMessageEdit: false,
				istask: 1 // 任务模块
			}
		},
		onShow() {
			this.report_msg = ''
		},
		onLoad(options) {
			console.warn(options, '------------- on load --------------')
			this.taskID = options.taskID;
			this.getTaskDetail()
		},
		watch: {
			wornlist(news, old) {
				// console.log(this.taskinfo.trap_record_list)
				console.warn(news, ' task edit watch')
				this.draft = []
				this.draft.push(news)
				for (var i = 0; i < this.taskinfo.trap_record_list.length; i++) {
					for (var j = 0; j < news; j++) {
						if (this.taskinfo.trap_record_list[i].id == news.record_id) {
							this.taskinfo.trap_record_list[i].report_status = news.report_status
						} else {
							this.taskinfo.trap_record_list[i].report_status = ""
						}
					}
				}
				this.taskfillingdraft()
			},
			// kpsurlL(news, old) {
			// 	if (this.istask == 1) {
			// 		if (news != "") {
			// 			let pages = getCurrentPages();
			// 			var page = pages[pages.length - 1];
			// 			var currentWebview = page.$getAppWebview();
			// 			currentWebview.setTitleNViewButtonStyle(0, {
			// 				text: " ",
			// 			});
			// 			this.$store.state.kpsurlL = 1
			// 		} else {
			// 			let pages = getCurrentPages();
			// 			var page = pages[pages.length - 1];
			// 			var currentWebview = page.$getAppWebview();
			// 			currentWebview.setTitleNViewButtonStyle(0, {
			// 				text: "提交",
			// 			});
			// 			this.$store.state.kpsurlL = 0
			// 		}
			// 	}

			// }
		},
		methods: {
			getTaskDetail() {
				console.warn('get task detail start')
				if (!this.taskID) {
					return
				}
				console.warn('get task detail fetch')
				this.loading = true;
				taskService.getTaskDetailByTaskID(this.taskID).then(res => {
					console.warn(res, 'get task detail')
					this.taskDetail = this.taskinfo = res;
					this.isEdit = res.task_status === '处理中';
					this.task_id = res.task_id;

					console.log(this.taskinfo, '------------------------------- task info', this.taskDetail)
					// if (this.taskinfo.img_list == "" || this.taskinfo.img_list.length == 0) {
					// 	this.taskinfo.img_list = []
					// } else {
					// 	this.taskinfo.img_list = JSON.parse(this.taskinfo.img_list)
					// }
					console.warn(this.taskinfo.task_type, 'get task detail --1213144')
					if (res.task_type == "有害生物监测") {
						this.task_type = true
					} else {
						this.task_type = false
					}

					this.$store.state.worndatabase = JSON.parse(JSON.stringify(this.taskinfo.trap_record_list))
				}).finally(() => {
					this.loading = false;
				})
			},
			handleTabClick(id) {
				switch (id) {
					case 1:
						this.currentComponent = ClockInRecordComponent;
						break;
					case 2:
						this.currentComponent = EntrapmentComponent;
						break;
					case 3:
						this.currentComponent = GisComponent;
						break;
				}
			},
			async taskfillingdraft() { //任务填报接口
				// this.gettaskinfo()

				var arr = JSON.parse(JSON.stringify(this.$store.state.worndatabase))
				console.warn(this.draft, 'draft')
				console.log(arr, 'arr draft')
				for (var i = 0; i < arr.length; i++) {
					for (var j = 0; j < this.draft.length; j++) {
						if (arr[i].id == this.draft[j].record_id || arr[i].record_id == this.draft[j].record_id) {
							arr.splice(i, 1)
							i--;
						}
					}
				}
				for (var i = 0; i < this.taskinfo.trap_record_list.length; i++) {
					for (var j = 0; j < this.draft.length; j++) {
						if (this.taskinfo.trap_record_list[i].id == this.draft[j].record_id) {
							// console.log(this.taskinfo.trap_record_list[i])
							this.taskinfo.trap_record_list[i].report_status = this.draft[j].report_status
						}
					}
				}
				this.draft = this.draft.concat(arr)

				this.$store.state.worndatabase = JSON.parse(JSON.stringify(this.draft))
				// console.log(arr)
				for (var i = 0; i < this.draft.length; i++) {
					if (this.draft[i].id) {
						this.draft[i]["record_id"] = this.draft[i].id
					}
				}
				console.warn(this.draft, "0000 草稿提交")
				var data = {}
				if (this.task_type) {
					data = {
						task_id: this.task_id, //            是       任务id
						// report_msg: this.textareavalue, //            是       任务汇报内容
						// img_list: JSON.stringify(this.urllist), //            是       图片列表					['http://www.c.com']
						trap_record_list: JSON.stringify(this.draft),
					}
					console.log("有数据", data)
				} else {
					data = {
						task_id: this.task_id, //            是       任务id
						report_msg: this.textareavalue, //            是       任务汇报内容
						img_list: JSON.stringify(this.urllist), //            是       图片列表					['http://www.c.com']
					}
					console.log("无数据", data)
				}
				console.log(data, 555)
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=app.task.task_filling_draft',
					data: data,
				})
				// console.log(res)
			},
			taskfillingcom() {
				console.log(this.taskinfo.trap_record_list)
				var tf = this.taskinfo.trap_record_list.every((item) => {
					console.log(item.report_status)
					return item.report_status != ""
				})
				if (!this.report_msg) {
					uni.$u.toast('请填写任务汇报')
				} else if (!tf) {
					if (this.task_type) {
						uni.$u.toast('请将所有设备全部登记后提交！')
					} else {
						// this.taskfillingdraft()+
						this.taskfilling()
					}
				} else {
					// this.taskfillingdraft()
					this.taskfilling()
				}

			},
			async taskfilling() { //任务填报接口
				this.loading = true;
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=app.task.task_filling',
					data: {
						// task_id:id,
						task_id: this.task_id, //            是       任务id
						report_msg: this.report_msg, //            是       任务汇报内容
						// img_list: JSON.stringify(this.urllist), //            是       图片列表
					}
				})
				console.log(res)
				uni.$u.toast('提交成功')
				HeartBeat.getInstance().clearByType('record_' + this.task_id);
				taskService.updateTaskWalkStatus({
					task_id: this.task_id,
					action: 'stop'
				})
				
				setTimeout(() => {
					this.loading = false;
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.task-details {
		padding: 24rpx 24rpx 100rpx;

		&__header {
			margin-bottom: 24rpx;
		}

		&__body {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			// padding: 32rpx 0;
			background-color: #fff;
			border-radius: 8rpx;
		}

		&__content {
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 10rpx 0;
		}

		&__area {
			font-size: 12px;
			line-height: 18px;
			color: #656565;
			font-weight: 400;
		}

		&__edit-icon {
			padding: 24rpx 0;
		}

		&__footer {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 40rpx;
		}
	}

	.panel {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 16rpx;
		margin-bottom: 24rpx;

		&__header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&__title {
			flex: 1 1 auto;
			font-size: 14px;
			color: #333;
			line-height: 40rpx;
			margin-right: 100rpx;
			padding-bottom: 10rpx;
			@include hairline-bottom(rgba(151, 151, 151, 0.09));
		}

		&__content {
			padding: 10rpx 0;
		}
	}
</style>
<style>
	page {
		background-color: #F7F8FB;
	}

	/* 可以设置不同的进入和离开动画 */
	/* 设置持续时间和动画函数 */
	.slide-fade-enter-active {
		transition: all .3s ease;
	}

	.slide-fade-leave-active {
		transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.slide-fade-enter,
	.slide-fade-leave-to

	/* .slide-fade-leave-active for below version 2.1.8 */
		{
		transform: translateX(10px);
		opacity: 0;
	}
</style>