jp-housekeep-electric/pages/workOrderManagement/workOrderManagement.vue

<template>
	<view>

		<view class="navbar-c">
			<view class="back" @click="toWorkOrderMap">
				<image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>
			</view>
			<view class="title">
				工单管理
			</view>
			<view class="right" @click="gotoUrl('/pages/workOrderManagement/faultReport')">
				故障上报
			</view>
		</view>

		<!-- 搜索 -->
		<view class="search-box">
			<u-search placeholder="搜索" bg-color="#fff" height="80" :show-action="true" v-model="queryForm.qkey"
				@custom="searchWorkOrder">


			</u-search>

		</view>
		<!-- 我的工单 -->
		<view class="my-work-order">
			<view class="title">
				<view class="name">
					<view class="icon">
						<image class="img" src="@/assets/img/riFill-bar-chart-fill.svg" mode=""></image>
					</view>
					我的工单
				</view>
				<view class="more" @click="toWorkOrderStatistics">
					工单统计<u-icon name="arrow-right" color="#777777"></u-icon>
				</view>
			</view>
			<!-- 分类 -->
			<view class="classify">
				<view class="item" v-for="(item,index) in classificationList" :key="index"
					:class="classificationIndex==index ? 'item-checked' : ''" @click="classificationClick(item,index)">
					{{item.name}}18
					<view class="checked-circle" v-if="classificationIndex==index">

					</view>
				</view>
			</view>
			<!-- 工单详情 -->
			<view class="work-order" v-for="(item,index) in workOrderList" :key="index">
				<!-- 紧急 -->
				<view @click="gotoUrl('/pages/workOrderManagement/workOrderDetails?id='+item.id)">
					<view class="urgency" v-if="item.urgentIf">
						紧急
					</view>
					<view class="order-item">
						<view class="item-icon">
							<image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
						</view>
						<view class="item-value value-bold">
							{{item.ownerOrgName}}-{{item.deviceName}}
						</view>
					</view>
					<view class="order-item">
						<view class="item-icon">
							<image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
						</view>
						<view class="item-value value-bold">
							{{item.faultTypeName}}
						</view>
					</view>
					<view class="order-item">
						<view class="item-icon">
							<image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
						</view>
						<view class="item-value">
							{{item.deviceAddress}}
						</view>
					</view>
					<view class="order-item">
						<view class="item-icon">
							<image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
						</view>
						<view class="item-value">
							{{item.createTime}}
						</view>
					</view>
				</view>

				<view class="button">
					<view class="state" v-if="item.status == 'created'">
						待指派
					</view>
					<view class="state state2" v-if="item.status == 'dispatched'">
						进行中
					</view>
					<view class="state state3" v-if="item.status == 'ended'">
						已解决
					</view>
					<view class="state state4" v-if="item.status == 'closed'">
						已关闭
					</view>
					<view class="btn">
						<button class="close" @click="closePopupShow(item)" v-if="item.status == 'created'">关闭</button>
						<button class="reminder" @click="reminderShow=true" v-if="item.status == 'created'">催单</button>
						<button class="resolved" v-if="item.status == 'dispatched'"
							@click="gotoUrl('/pages/workOrderManagement/workOrderDetails?id='+item.id)">确认解决</button>
						<button class="view" v-if="item.status == 'ended' || item.status == 'closed'"
							@click="gotoUrl('/pages/workOrderManagement/workOrderDetails?id='+item.id)">查看详情</button>
					</view>
				</view>
			</view>
			
			<u-divider :isnone="workOrderList.length==0" nonetext="暂无工单" border-color="#CFD2D5"></u-divider>
		</view>

		<!-- 关闭原因 -->
		<u-popup v-model="closeShow" mode="bottom" closeable close-icon-size="24" close-icon-color="#101010"
			border-radius="24">
			<view class="close-reason">
				<view class="title">
					请选择关闭原因：
				</view>
				<view class="reason-content">
					<view class="reason-item" v-for="(item,index) in reasonList" :key="index">
						<view class="item-title">
							{{item}}
						</view>
						<view class="item-value" @click="reasonClick(item,index)">
							<label class="radio">
								<radio name="reason" :checked="index === current" /><text></text>
							</label>
						</view>
					</view>
				</view>
				<view class="button-box">
					<button class="think" @click="closeShow=false">我在想想</button>
					<button class="confirm" @click="closeWorkOrder">确认关闭</button>
				</view>
			</view>
		</u-popup>
		<!-- 催单 -->

		<u-popup v-model="reminderShow" mode="bottom" closeable close-icon-size="24" close-icon-color="#101010"
			border-radius="24">
			<view class="reminder-content">
				<view class="title">
					催单
				</view>
				<view class="content">
					我们已催促平台尽快指派工程师处理工单。
				</view>
				<button class="know" @click="reminderClick">知道了</button>
			</view>
		</u-popup>

		<energyCenterTabbar :current="1"></energyCenterTabbar>
	</view>
</template>

<script>
	import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	import * as API_workOrder from '@/apis/pagejs/workOrder.js'
	
	export default {
		components: {
			energyCenterTabbar
		},
		data() {
			return {
				workOrderId: '', //工单id
				classificationIndex: 0, //分类
				classificationList: [
					{value: '', name: '全部'},
					{value: 'created', name: '待指派'},
					{value: 'dispatched', name: '进行中'},
					{value: 'ended', name: '已解决'}
				],
				workOrderList: [], //工单列表
				recordsTotal: 0,
				queryForm: {
					pageIndex: 1,
					pageSize: 5,
					qkey: '', //关键字(工单编号/设备名/故障信息)
					startDate: '', //开始日期	
					endDate: '', //截止日期
					status: '' //工单状态
				},
				keyword: '',
				closeShow: false,
				reminderShow: false,
				reasonList: ['错误告警','设备已自动恢复','不需要上门解决','平台移桩，可忽视','其他'],
				current: 0
			}
		},
		onLoad() {
			this.getQueryMy();
		},
		onReachBottom() {
			if (this.workOrderList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			//打开关闭原因
			closePopupShow(item) {
				this.closeShow = true;
				this.workOrderId = item.id;
			},
			//催单
			reminderClick() {
				this.reminderShow = false;
			},
			//搜索
			searchWorkOrder() {
				this.getQueryMy(true);
			},
			//分类
			classificationClick(item,index) {
				this.classificationIndex = index;
				this.queryForm.status = item.value;
				
				this.getQueryMy(true);
			},
			myLoadmore() {
				this.queryForm.pageIndex += 1;
				this.getAbnormalAlarmRecord();
			},
			getQueryMy(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.workOrderList = [];
					this.queryForm.pageIndex = 1;
				}
				API_workOrder.queryMy(this.queryForm).then((res) => {
					uni.hideLoading();
					this.workOrderList = [
						...this.workOrderList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//选择关闭原因
			reasonClick(item,index) {
				this.current = index;
				this.closeReason = item;
			},
			//关闭工单
			closeWorkOrder() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_workOrder.usClose({
					id: this.workOrderId,
					closeReason: this.closeReason
				}).then((res) => {
					uni.hideLoading();
					this.closeShow = false;
					uni.navigateTo({
						url: '/pages/workOrderManagement/workOrderDetails?id='+this.workOrderId
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toWorkOrderMap() {
				uni.navigateTo({
					url: '/pages/workOrderManagement/workOrderMap'
				})
			},
			toWorkOrderStatistics() {
				uni.navigateTo({
					url: '/pages/workOrderManagement/workOrderStatistics'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-c {
		.back {
			z-index: 999;
			width: 200rpx;
		}
		.right {
			z-index: 999;
			// width: 200rpx;
		}
	}

	page {
		padding-bottom: 100px;
	}

	// 搜索
	.search-box {
		padding: 16rpx 32rpx;
		position: sticky;
		top: 88rpx;
		z-index: 999;
		background-color: #F2F4F6;

		::v-deep.u-content {
			border-radius: 8px !important;
		}

		;

		::v-deep.u-search {
			position: relative
		}

		;

		::v-deep.u-action {
			width: 96rpx;
			line-height: 56rpx;
			border-radius: 4px;
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			text-align: center;
			z-index: 9999;
			position: absolute;
			right: 12rpx;
		}
	}

	// 我的工单
	.my-work-order {

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 32rpx;

			.name {
				display: flex;
				align-items: center;
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				font-weight: bold;

				.icon {
					width: 36rpx;
					height: 36rpx;
					border-radius: 4px;
					background-color: rgba(22, 119, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 12rpx;

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

					}
				}
			}

			.more {
				color: #777777;
				font-size: 32rpx;
			}
		}

		// 分类
		.classify {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			margin-top: 8rpx;

			.item {
				width: 160rpx;
				line-height: 72rpx;
				border-radius: 8px;
				background-color: rgba(255, 255, 255, 1);
				border: 1px solid rgba(22, 119, 255, 1);
				text-align: center;
				color: rgba(22, 119, 255, 1);
				font-weight: bold;
				overflow: hidden;
			}

			.item-checked {
				background: linear-gradient(180deg, rgba(78, 141, 246, 1) 0%, rgba(22, 119, 255, 1) 100%);
				color: #fff;
				position: relative;

				.checked-circle {
					width: 20rpx;
					height: 20rpx;
					background-color: rgba(255, 150, 0, 1);
					border-radius: 999px;
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		// 工单详情
		.work-order {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			margin: 24rpx 32rpx;
			padding: 32rpx 24rpx 0;
			position: relative;

			// 紧急
			.urgency {
				width: 120rpx;
				line-height: 56rpx;
				border-radius: 0px 8px 0px 8px;
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
				text-align: center;
				background: linear-gradient(180deg, rgba(255, 79, 63, 1) 0%, rgba(255, 124, 112, 1) 100%);
				position: absolute;
				top: 0;
				right: 0;

			}

			.order-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.item-icon {
					.img {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
					}
				}

				.item-value {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					margin-left: 16rpx;
				}

				.value-bold {
					font-weight: bold;
				}
			}
		}

		// 按钮
		.button {
			margin-top: 32rpx;
			border-top: 1px solid rgba(232, 232, 232, 1);
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.state {
				color: rgba(255, 123, 0, 1);
			}

			.state2 {
				color: rgba(22, 119, 255, 1);
			}

			.state3 {
				color: rgba(0, 185, 98, 1);
			}

			.state4 {
				color: rgba(119, 119, 119, 1);
			}

			.btn {
				display: flex;

				.close {
					border: 1px solid rgba(187, 187, 187, 1);
					width: 144rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 4px;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(119, 119, 119, 1);
					margin-right: 24rpx;
					font-size: 28rpx
				}

				.reminder,
				.resolved {
					width: 144rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 4px;
					color: rgba(255, 255, 255, 1);
					background-color: rgba(22, 119, 255, 1);
					font-size: 28rpx
				}

				.resolved {
					width: 176rpx;
				}

				.view {
					width: 176rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 4px;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(119, 119, 119, 1);
					font-size: 28rpx;
					border: 1px solid rgba(187, 187, 187, 1);
				}
			}
		}

	}

	//关闭原因
	.close-reason {
		padding: 32rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			font-weight: bold;
		}

		.reason-content {
			margin-top: 60rpx;

			.reason-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 56rpx;

				.item-title {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}
			}
		}

		.button-box {
			display: flex;

			.think {
				width: 328rpx;

				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 4px;
				background-color: rgba(222, 225, 228, 1);
				color: rgba(51, 51, 51, 1);

			}

			.confirm {
				width: 328rpx;

				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 4px;
				background-color: rgba(255, 68, 68, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	// 催单
	.reminder-content {
		padding: 32rpx;
		text-align: center;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			font-weight: bold;
		}

		.content {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			margin-top: 40rpx;
		}

		.know {
			width: 100%;
			line-height: 80rpx;
			border-radius: 4px;
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			margin-top: 84rpx;
		}
	}
</style>