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="taskfilling">
				提交
			</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">
						<!-- <image :src="" 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"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="report">
			<view class="title">
				任务汇报
			</view>
			<view class="textareainput" v-if="taskshow">
				<u--textarea v-model="textareavalue" placeholder="请输入内容"></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">
					设备登记
				</view>
				<view class="title_r" v-if="taskinfo.trap_record_list.length>5">
					更多
				</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"></u-icon>
							<u-icon name="edit-pen-fill" color="#2979ff" size="20" v-else></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="false" :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 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
			};
		},
		props: { //此处定义传入的参数
			taskshow: {
				type: Boolean
			},
			istask: {
				type: Number
			}
		},
		methods: {
			gainimg() { //添加图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', '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
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=control_center.task.task_info',
					data: {
						task_id: id,
					}
				})
				this.taskinfo = res
				this.taskinfo.img_list = JSON.parse(this.taskinfo.img_list)
				if (this.taskinfo.task_type == "有害生物监测") {
					this.task_type = true
				} else {
					this.task_type = false
				}
				this.loading = false
				console.log(res)
			},
			async taskfilling() { //任务填报接口
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=app.task.task_filling',
					data: {
						// task_id:id,
					}
				})
			},
			skip() { //跳转
				// uni.redirectTo({
				// 	url:"../pages/supervise/submitsupe?id"+ this.taskinfo.task_id
				// });
				// console.log(this.$parent)
				// this.$parent.tosubm();
				this.$emit('tosubm')
			}
		},
	}
</script>

<style lang="less" scoped>
	.taskbtn {
		position: absolute;
		top: -60rpx;
		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;

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

		.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 {
						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>