MingGaoApp_vue/MingGaoApp/components/task-details.vue

<!-- taskshow  true 编辑模式 false 展示模式-->
<!-- istask  0 完成任务模块 1 任务模块 2 监督模块 3监督记录模块-->
<template name="task-details">
	<view class="" style="padding-bottom: 40rpx;">
		
		<!-- <view class="taskbtn">
			<view class="taskbtn_item" v-if="istask==1" @click="taskfillingcom">
				提交
			</view>
			<view class="taskbtn_item" v-if="istask==2" @click="skip">
				监督
			</view>
		</view> -->
		<view class="taskbox">
			<view class="taskbox_item">
				<view class="taskbox_item_l">
					任务派发人
				</view>
				<view class="taskbox_item_r">
					{{taskinfo.owner_user}}
				</view>
			</view>
			<view class="taskbox_item">
				<view class="taskbox_item_l">
					任务监督人
				</view>
				<view class="taskbox_item_r">
					{{taskinfo.supervisor_user}}
				</view>
			</view>
			<view class="taskbox_item">
				<view class="taskbox_item_l">
					任务处理人
				</view>
				<view class="taskbox_item_r">
					{{taskinfo.operator_user}}
				</view>
			</view>
			<view class="taskbox_item">
				<view class="taskbox_item_l">
					任务时间
				</view>
				<view class="taskbox_item_r">
					{{taskinfo.start_time}} ~ {{taskinfo.last_time}}
				</view>
			</view>
			<view class="taskbox_item2">
				<view class="taskbox_item_l">
					任务描述
				</view>
				<view class="taskbox_item_r">
					{{taskinfo.tesk_msg}}
				</view>
			</view>
		</view>
		<view class="imgshow">
			<view class="imgshow_compile" v-if="taskshow">
				<view class="title">
					签到
				</view>
				<view class="imgbox_box">
					<view class="addimg" @click="gainimg">
						<u-icon size="20" name="plus" color="#409eff"></u-icon>
					</view>
					<view class="imgitem" v-for="item,index in urllist" :key="index">
						<view class="icon" @click="deleimg(index)">
							<u-icon name="close" color="#fff"></u-icon>
						</view>
						<image :src="baseUrl+item" mode="" class="img"></image>
						<!-- <u--image :src="baseUrl+item" class="img">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image> -->
					</view>
				</view>
			</view>
			<view class="imgshow_show" v-else>
				<view class="title">
					<view class="title_l">
						签到<span v-if="taskinfo.img_list.length == 0" style="font-size: 24rpx;">(暂无图片)</span>
					</view>
					<view class="title_r">
						{{taskinfo.end_time}}
					</view>
				</view>
				<view class="imgbox_box">
					<view class="imgitem" v-for="item,index in taskinfo.img_list" :key="index">
						<image :src="baseUrl+item" mode="" class="img" @click="examine(index)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="report">
			<view class="title">
				任务汇报
			</view>
			<view class="textareainput" v-if="taskshow">
				<u--textarea v-model="textareavalue" placeholder="请输入内容" :maxlength="200" autoHeight count></u--textarea>
			</view>
			<view class="textarea" v-else>
				{{taskinfo.report_msg || "暂无描述"}}
			</view>
		</view>
		<view class="basebox" v-if="task_type">
			<view class="title">
				<view class="title_l">
					设备登记<span v-if="taskinfo.trap_record_list.length == 0" style="font-size: 24rpx;">(暂无设备)</span>
				</view>
				<view class="title_r" v-if="taskinfo.trap_record_list.length>5" @click="tolist">
					更多
				</view>
			</view>
			<view class="basebox_info">
				<view class="basebox_info_item" v-for="item,index in taskinfo.trap_record_list" :key="index">
					<view class="box" v-if="index<5">
						<view class="basebox_info_item_l">
							{{item.trap_number}}
						</view>
						<view class="basebox_info_item_c">
							{{item.report_status}}
						</view>
						<view class="basebox_info_item_r">
							<u-icon name="search" color="#2979ff" size="20" v-if="!taskshow" @click="searchworn(item)">
							</u-icon>
							<u-icon name="edit-pen-fill" color="#2979ff" size="20" v-else @click="compile(item)">
							</u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="recordbox" v-if="istask==3">
			<view class="title">
				监督信息
			</view>
			<view class="recordbox_info">
				<view class="recordbox_info_item">
					<view class="recordbox_info_item_l">
						监督形式
					</view>
					<view class="recordbox_info_item_r">
						{{taskinfo.supervisor_type}}
					</view>
				</view>
				<view class="recordbox_info_item">
					<view class="recordbox_info_item_l">
						监督单位
					</view>
					<view class="recordbox_info_item_r">
						{{taskinfo.supervisor_depa}}
					</view>
				</view>
				<view class="recordbox_info_item">
					<view class="recordbox_info_item_l">
						监督时间
					</view>
					<view class="recordbox_info_item_r">
						{{taskinfo.supervisor_time}}
					</view>
				</view>
				<view class="recordbox_info_item">
					<view class="recordbox_info_item_l">
						监督情况
					</view>
					<view class="recordbox_info_item_r">
						{{taskinfo.supervisor_msg}}
					</view>
				</view>
			</view>
		</view>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="kpsurlL" :fixed="true" :blob="false" :maxWidth="500"
			:maxHeight="500"></kps-image-cutter>
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
		
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		name: "task-details",
		components: {
			kpsImageCutter
		},
		data() {
			return {
				kpsurlL: "",
				urllist: [],
				textareavalue: "",
				taskinfo: {
					img_list: [],
					trap_record_list: []
				},
				task_type: false,
				loading: false,
				task_id: "",
				draft: {}
			};
		},
		props: { //此处定义传入的参数
			taskshow: {
				type: Boolean
			},
			istask: {
				type: Number
			}
		},
		watch: {
			wornlist(news, old) {
				console.log(this.taskinfo.trap_record_list)
				console.log(news)
				this.draft = news
				for (var i = 0; i < this.taskinfo.trap_record_list.length; i++) {
					if (this.taskinfo.trap_record_list[i].id == news.record_id) {
						this.taskinfo.trap_record_list[i].report_status = news.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
					}
				}

			}
		},
		computed: {
			wornlist() {
				return this.$store.state.wornlist
			},
		},

		methods: {
			deleimg(index) {
				// console.log(this.urllist)
				this.urllist.splice(index, 1)
			},
			gainimg() { //添加图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: (res) => {
						console.log(res)
						// this.urllist.push(res.tempFilePaths[0])
						this.kpsurlL = res.tempFilePaths[0]
					}
				});
			},
			oncancle() {
				this.kpsurlL = ""
			},
			onok(ev) {
				uni.uploadFile({
					url: this.baseUrl +
						'/api/api_gateway?method=monitor_manage.cbd_manage.add_img', //仅为示例，非真实的接口地址
					filePath: ev.path,
					name: 'img_file',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data.src)
						this.urllist.push(JSON.parse(uploadFileRes.data).data.src)
						this.kpsurlL = ""
					}
				});
			},
			async gettaskinfo(id) {
				this.loading = true
				this.task_id = id
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=control_center.task.task_info',
					data: {
						task_id: id,
					}
				})
				console.log(res)
				this.taskinfo = res
				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)
				}

				if (this.taskinfo.task_type == "有害生物监测") {
					this.task_type = true
				} else {
					this.task_type = false
				}
				uni.setNavigationBarTitle({
					title: this.taskinfo.task_type //这是修改后的导航栏文字
				})
				this.loading = false
				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 != ""
				})
				// console.log(tf)
				if (this.urllist.length == 0) {
					uni.$u.toast('请拍摄图片进行签到')
				} else if (this.textareavalue == "") {
					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() { //任务填报接口
				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.textareavalue, //            是       任务汇报内容
						img_list: JSON.stringify(this
						.urllist), //            是       图片列表					['http://www.c.com']
					}
				})
				console.log(res)
				this.$emit('returnpage')
			},
			async taskfillingdraft() { //任务填报接口
				console.log(this.draft)
				var arr = []
				for (var i = 0; i < this.taskinfo.trap_record_list.length; i++) {
					if (this.taskinfo.trap_record_list[i].report_status != "" && this.taskinfo.trap_record_list[i]
						.id != this.draft.record_id) {
						// arr.push()
						var obj = {
							record_id: this.taskinfo.trap_record_list[i].id, //      			填报记录id
							report_status: this.taskinfo.trap_record_list[i].report_status, //			填报记录状态
							pest_list: this.taskinfo.trap_record_list[i].pest_list
						}
						arr.push(obj)
					}
				}
				console.log(this.draft)
				arr.push(this.draft)
				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(arr),
					}
				} 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)
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=app.task.task_filling_draft',
					data: data,
				})
				console.log(res)
				// this.$store.state.wornlist = {}
				// this.taskfilling()
			},
			skip() { //跳转
				this.$emit('tosubm')
			},
			searchworn(item) {
				// console.log(item)
				var obj = {
					id: item.id,
					trap_number: item.trap_number,
					comtype: false
				}
				this.$emit('toinsect', JSON.stringify(obj))
			},
			compile(item) {
				var obj = {
					id: item.id,
					trap_number: item.trap_number,
					comtype: true
				}
				this.$emit('toinsect', JSON.stringify(obj))
			},
			tolist() {
				this.$emit('tolist', this.task_id)
			},
			examine(index) {
				var imgarr = []
				for (var i = 0; i < this.taskinfo.img_list.length; i++) {
					imgarr.push(this.baseUrl + this.taskinfo.img_list[i])
				}
				console.log(imgarr)
				uni.previewImage({
					urls: imgarr,
					current: index
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	.taskbtn {
		position: fixed;
		top: 22rpx;
		right: 20rpx;
		z-index: 9999;
		color: #409eff;
		font-size: 28rpx;
	}

	.taskbox {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.taskbox_item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #F6F6F6;

			.taskbox_item_l {
				width: 30%;
				font-size: 28rpx;

			}

			.taskbox_item_r {
				width: 70%;
				text-align: right;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.taskbox_item2 {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #F6F6F6;

			.taskbox_item_l {
				margin-bottom: 20rpx;
				font-size: 28rpx;
			}

			.taskbox_item_r {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}

	.imgshow {
		width: 90%;
		margin: 0 auto;

		.imgshow_compile {
			.title {
				margin-bottom: 30rpx;
				font-weight: 700;
			}

			.imgbox_box {
				display: flex;
				flex-wrap: wrap;
				width: 80%;

				// justify-content: space-around;
				.addimg {
					width: 140rpx;
					height: 140rpx;
					border: 1px dashed #409eff;
					// text-align: center;
					display: flex;
					justify-content: space-around;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}

				.imgitem {
					width: 140rpx;
					height: 140rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					position: relative;

					.img {
						width: 100%;
						height: 100%;
					}

					.icon {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						z-index: 9;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						display: flex;
						justify-content: space-around;
						background-color: red;
					}
				}
			}
		}

		.imgshow_show {
			.title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.title_l {
					font-weight: 700;
				}

				.title_r {
					font-size: 28rpx;
					color: #999999;
				}
			}

			.imgbox_box {
				display: flex;
				flex-wrap: wrap;
				width: 80%;

				.imgitem {
					width: 140rpx;
					height: 140rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.report {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.title {
			margin-bottom: 30rpx;
			font-weight: 700;
		}
	}

	.basebox {
		width: 90%;
		margin: 0 auto;

		.title {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.title_l {
				font-weight: 700;
			}

			.title_r {
				font-size: 26rpx;
				color: #409eff;
			}
		}

		.basebox_info {
			width: 100%;

			.basebox_info_item {
				width: 100%;

				.box {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					border-bottom: 1px solid #F6F6F6;

					.basebox_info_item_l {
						width: 350rpx;
						font-size: 28rpx;
					}

					.basebox_info_item_c {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.recordbox {
		width: 90%;
		margin: 20rpx auto 0;

		.title {
			font-weight: 700;
			// margin-bottom: 20rpx;
		}

		.recordbox_info {
			width: 100%;

			.recordbox_info_item {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1px solid #F6F6F6;
				width: 100%;

				.recordbox_info_item_l {
					width: 30%;
					font-size: 28rpx;
				}

				.recordbox_info_item_r {
					width: 70%;
					text-align: right;
					font-size: 28rpx;
				}
			}
		}
	}
</style>