TSYWXT-CLOUD-APP/pages/equipment-inspection/inspection-list.vue

<!--
 * @Title: 
 * @Description: 巡检上报列表
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container">
<!-- 			<uni-section title="任务统计" type="circle">
			</uni-section> -->
			<uni-section title="查询条件" type="circle">
				<view class="search-block">
					<view style="margin-top: 10px;padding-left: 10px;padding-right: 10px;margin-bottom: 10px;">
						<view class="select-checkbox">
							<uni-data-checkbox v-model="inspectionStatusOption" :localdata="inspectionStatusItems">
							</uni-data-checkbox>
						</view>
					</view>
					<view class="submit-btn">
						<button type="default" @click="search">查 询</button>
					</view>
				</view>
			</uni-section>
			<uni-section title="巡检任务信息" type="circle">
				<uni-list>
					<uni-list-item v-for="(item,index) in list" :key="item.id">
						<template v-slot:body>
							<uni-collapse v-if="index ==0" @change="change">
								<uni-collapse-item :open="true" :show-animation="true" title-border="none"
									:border="false">
									<template v-slot:title>
										<view class="list-item-block">
											<view class="items-line">
												<!-- 					<image class="item-title-run-status-icon"
													style="box-shadow:0 0 2px 2px lightblue"
													src="/static/images/list/inspection_item.png" mode="widthFix">
												</image> -->
												<uni-icons class="input-uni-icon" type="compose" size="18"
													color="lightblue" />
												<text class="item-title-rtu-name">{{item.inspectionTitle}}</text>
											</view>
											<view v-if="item.inspectionStatus==0" class="items-line"
												style="padding-left: 0px;">
												<uni-icons class="input-uni-icon" type="gear" size="18"
													color="lightblue" />
												<!-- <text class="item-text-lable">巡检状态：</text> -->
												<text class="item-text-content" style="color:red;">待巡检</text>
											</view>
											<view v-else-if="item.inspectionStatus==2" class="items-line"
												style="padding-left: 0px;">
												<!-- <text class="item-text-lable">巡检状态：</text> -->
												<uni-icons class="input-uni-icon" type="gear" size="18"
													color="lightblue" />
												<text class="item-text-content" style="color:orange;">待审批</text>
											</view>
											<view v-else-if="item.inspectionStatus==3" class="items-line"
												style="padding-left: 0px;">
												<!-- <text class="item-text-lable">巡检状态：</text> -->
												<uni-icons class="input-uni-icon" type="gear" size="18"
													color="lightblue" />
												<text class="item-text-content" style="color:green;">已完结</text>
											</view>
										</view>
									</template>
									<view class="list-item-block">
										<view v-if="item.inspectionStatus==0" class="items-line" style="height: 50px;">

											<view v-if="item.planScheduledType ==1" class="items-line">
												<text class="item-text-lable">完成时限：</text>
												<text class="item-text-content"
													style="color:gray;">{{item.inspectionCompleteTime}}</text>
											</view>
											<view v-else-if="item.planScheduledType ==2" class="items-line">
												<text class="item-text-lable">巡检日期：</text>
												<text class="item-text-content"
													style="color:gray;">{{item.inspectionDate}}</text>
											</view>
										</view>
										<view v-else-if="item.inspectionStatus==2" class="items-line">
											<uni-list style="width: 100%;">
												<uni-list-item v-for="reportItem in item.reportList"
													:key="reportItem.id" showArrow clickable
													@click="toReportDetail(reportItem)">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="items-line">
																<text class="item-text-lable">处理人：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.servicePersonName}}</text>
															</view>

															<view class="items-line">
																<text class="item-text-lable">处理时间：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.createTime}}</text>
															</view>
															<view class="items-line">
																<text class="item-text-lable">巡检内容：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.inspectionDesc}}</text>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
										<view v-else-if="item.inspectionStatus==3" class="items-line">
											<uni-list style="width: 100%;">
												<uni-list-item v-for="reportItem in item.reportList"
													:key="reportItem.id" showArrow clickable
													@click="toReportDetail(reportItem)">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="items-line">
																<text class="item-text-lable">处理人：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.servicePersonName}}</text>
															</view>

															<view class="items-line">
																<text class="item-text-lable">处理时间：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.createTime}}</text>
															</view>
															<view class="items-line">
																<text class="item-text-lable">巡检内容：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.inspectionDesc}}</text>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
							<uni-collapse v-else @change="change">
								<uni-collapse-item :title="item.inspectionTitle" :show-animation="true"
									title-border="none" :border="false">
									<template v-slot:title>
										<view class="list-item-block">
											<view class="items-line">
												<!-- 			<image class="item-title-run-status-icon"
													style="box-shadow:0 0 2px 2px lightblue"
													src="/static/images/list/inspection_item.png" mode="widthFix">
												</image> -->
												<uni-icons class="input-uni-icon" type="compose" size="18"
													color="lightblue" />
												<text class="item-title-rtu-name">{{item.inspectionTitle}}</text>
											</view>
											<view v-if="item.inspectionStatus==0" class="items-line"
												style="padding-left: 0px;">
												<!-- <text class="item-text-lable">巡检状态：</text> -->
												<uni-icons class="input-uni-icon" type="gear" size="18"
													color="lightblue" />
												<text class="item-text-content" style="color:red;">待巡检</text>
											</view>
											<view v-else-if="item.inspectionStatus==2" class="items-line"
												style="padding-left: 0px;">
												<!-- <text class="item-text-lable">巡检状态：</text> -->
												<uni-icons class="input-uni-icon" type="gear" size="18"
													color="lightblue" />
												<text class="item-text-content" style="color:orange;">待审批</text>
											</view>
											<view v-else-if="item.inspectionStatus==3" class="items-line"
												style="padding-left: 0px;">
												<!-- <text class="item-text-lable">巡检状态：</text> -->
												<uni-icons class="input-uni-icon" type="gear" size="18"
													color="lightblue" />
												<text class="item-text-content" style="color:green;">已完结</text>
											</view>
										</view>
									</template>

									<view class="list-item-block">
										<view v-if="item.inspectionStatus==0" class="items-line" style="height: 50px;">
											<view v-if="item.planScheduledType ==1" class="items-line">
												<text class="item-text-lable">完成时限：</text>
												<text class="item-text-content"
													style="color:gray;">{{item.inspectionCompleteTime}}</text>
											</view>
											<view v-else-if="item.planScheduledType ==2" class="items-line">
												<text class="item-text-lable">巡检日期：</text>
												<text class="item-text-content"
													style="color:gray;">{{item.inspectionDate}}</text>
											</view>
										</view>
										<view v-else-if="item.inspectionStatus==2" class="items-line">
											<uni-list style="width: 100%;">
												<uni-list-item v-for="reportItem in item.reportList"
													:key="reportItem.id" showArrow clickable
													@click="toReportDetail(reportItem)">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="items-line">
																<text class="item-text-lable">处理人：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.servicePersonName}}</text>
															</view>

															<view class="items-line">
																<text class="item-text-lable">处理时间：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.createTime}}</text>
															</view>
															<view class="items-line">
																<text class="item-text-lable">巡检内容：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.inspectionDesc}}</text>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
										<view v-else-if="item.inspectionStatus==3" class="items-line">
											<uni-list style="width: 100%;">
												<uni-list-item v-for="reportItem in item.reportList"
													:key="reportItem.id" showArrow clickable
													@click="toReportDetail(reportItem)">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="items-line">
																<text class="item-text-lable">处理人：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.servicePersonName}}</text>
															</view>

															<view class="items-line">
																<text class="item-text-lable">处理时间：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.createTime}}</text>
															</view>
															<view class="items-line">
																<text class="item-text-lable">巡检内容：</text>
																<text
																	class="item-text-content-ellipsis">{{reportItem.inspectionDesc}}</text>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
			<uni-group>
				<view class="pagination-block">
					<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
						@change="pageChange" />
				</view>
			</uni-group>
		</view>
	</view>
</template>

<script>
	import {
		role
	} from "@/api/role.js";
	import http from '@/http/api.js';

	export default {
		components: {

		},
		onLoad(option) {
			this.planId = option.planId;
			this.query['inspectionPlanId'] = this.planId;
			this.getPage();
		},
		data() {
			return {
				title: '巡检任务信息',
				planId: '',
				inspectionStatusItems: [{
					'value': 0,
					'text': '全部'
				}, {
					'value': 1,
					'text': '待巡检'
				}, {
					'value': 2,
					'text': '待审批'
				}, {
					'value': 3,
					'text': '已完结'
				}],
				inspectionStatusOption: 0,
				list: [],
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				query: {},
				inputStyles: {
					color: '#808080',
					borderColor: '#d3d3d3'
				},
				value: ['0'],
			}
		},
		computed: {},
		onShow() {},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
			change(e) {
				console.log(e);
			},
			// 分页触发
			pageChange(e) {
				this.pageCurrent = e.current;
				this.getPage()
			},
			//录入查询
			search() {
				this.pageCurrent = 1;
				let params = {};
				this.getPage(params);
			},
			getPage(params = {}) {
				let that = this;
				const current = this.pageCurrent;
				const size = this.pageSize;
				params['inspectionStatusOption'] = this.inspectionStatusOption;
				let postData = Object.assign(params, this.query);
				http.request({
					url: '/galaxy-business/equipment/inspection/page',
					method: 'GET',
					params: {
						current,
						size,
					},
					data: postData,
				}).then(res => {
					if (res.data != null) {
						if (res.data.records != null) {
							that.list = res.data.records;
						}
						this.total = res.data.total;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toReportDetail(reportItem){
				let url = '/pages/equipment-inspection/inspection-report-detail?id=' + reportItem.id;
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.line {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.line .lineText {
		margin-left: 10px;
		margin-right: 0px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.line .lineText .inspectionCount {
		color: dodgerblue;
		font-size: 0.7rem;
	}

	.line .lineText .content {
		margin-left: 10px;
		color: gray;
		font-size: 0.7rem;
	}
</style>