aiot-app/pages/home/myTicket/myTicket.vue

<template>
	<view class="kd-work-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="orderType == 1 ? '工单待办' : '工单已办'" @clickLeft="back"></uni-nav-bar>
		<view class="top-wrapper">
			<view class="top-tabs">
				<u-tabs
					:list="tabList"
					:current="tabsCurrent"
					@change="handleTabChange"
					lineWidth="0"
					:activeStyle="{
						color: '#157a2c',
						fontWeight: 'bold'
					}"></u-tabs>
			</view>
			<image src="~@/static/moreSearch.svg" mode="" @click="moreSearch = !moreSearch"></image>
			<view class="slide-search">
				<view class="more-search" v-show="moreSearch">
					<view class="cell">
						<view class="label">编号</view>
						<input type="text" placeholder="请输入" v-model="searchFrom.code" />
					</view>
					<view v-if="orderType == 1" class="cell">
						<view class="label">状态</view>
						<!-- <uni-data-select :key="activeType" :localdata="statusRange[activeType]" v-model="searchFrom.orderStatus"></uni-data-select> -->
						<u-checkbox-group v-model="searchFrom.orderStatus" placement="row" size="30" @change="statusChange">
							<u-checkbox
								v-for="(item, index) in statusRange[activeType]"
								:customStyle="{ marginRight: '8px' }"
								:label="item.text"
								:name="item.value"
								labelSize="30"
								iconSize="30"
								activeColor="#157A2C"></u-checkbox>
						</u-checkbox-group>
					</view>
					<!-- <view class="cell">
						<view class="label">紧急程度</view>
						<uni-data-select :localdata="doneRange" @change="doneChange" v-model="searchFrom.urgent" :clear="false"></uni-data-select>
					</view> -->
					<view class="btn-search">
						<button @click="reset">重置</button>
						<button class="primary" @click="doSearch">搜索</button>
					</view>
				</view>
			</view>
		</view>
		<view class="work-list">
			<u-list @scrolltolower="scrolltolower" :key="activeType" :preLoadScreen="page * 10">
				<u-list-item v-for="(item, index) in dataList" :key="index">
					<CardTime :time="item.createTime" />
					<KdCard :orderTitle="orderTitle" :title="item.code" @handleDetail="handleDetail" :status="true" :item="item" :type="activeType" />
				</u-list-item>
				<u-list-item v-if="dataList.length === 0">
					<view class="nodata">暂无数据</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import { getWorkOrderList, statistics } from '@/api/myTicket'
	import KdCard from '../components/KdCard/index.vue'
	import CardTime from '../components/CardTime.vue'
	import { nextTick } from 'vue'
	// import { postJ } from '@/utils/api'
	let [isEnd] = [false]
	export default {
		components: {
			KdCard,
			CardTime
		},
		data() {
			return {
				orderTitle: '',
				tabsCurrent: 0, // tabs初始位置
				doneRange: [
					{
						value: 1,
						text: '普通'
					},
					{
						value: 2,
						text: '紧急'
					},
					{
						value: 3,
						text: '重要'
					}
				],
				tabList: [
					// {
					// 	name: '计划维修工单',
					// 	type: 'repair',
					// 	workOrderType: 4,
					// 	url: `/pages/maintain_service/detail/detail?`,
					// 	badge: {
					// 		value: 0
					// 	}
					// },
					{
						name: '保养工单',
						type: 'maintenance',
						workOrderType: 2,
						index: 0,
						url: `/pages/maintenance/detail/detail?`,
						badge: {
							value: 0
						}
					},
					{
						name: '巡点检工单',
						type: 'patrol',
						workOrderType: 1,
						index: 1,
						url: `/pages/tour_tally/detail/detail?`,
						badge: {
							value: 0
						}
					},
					// {
					// 	name: '量具送检工单',
					// 	type: 'quantity',
					// 	workOrderType: 5,
					// 	index: 2,
					// 	url: `/pages/quantity/detail/detail?`,
					// 	badge: {
					// 		value: 0
					// 	}
					// },
					{
						name: '维修工单',
						type: 'repair',
						workOrderType: 3,
						index: 2,
						// url: `/pages/maintain_service/detail/detail?`,
						url: `/pages/maintenanceWorkorder/detail/detail?`,
						badge: {
							value: 0
						}
					}
				],
				activeType: 'maintenance',
				activeIndex: 0,
				dataList: [],
				moreSearch: false,
				statusRange: {
					repair: [
						{
							value: 0,
							text: '待接收'
						},
						{
							value: 2,
							text: '执行中'
						}
						// {
						// 	value: 0,
						// 	text: '待接收'
						// },

						// {
						// 	value: 2,
						// 	text: '待审核'
						// },
						// {
						// 	value: 4,
						// 	text: '已撤回'
						// },

						// {
						// 	value: 6,
						// 	text: '已驳回'
						// },
						// {
						// 	value: 8,
						// 	text: '已派单'
						// },
						// {
						// 	value: 1,
						// 	text: '执行中'
						// },
						// {
						// 	value: 5,
						// 	text: '待验收'
						// },
						// {
						// 	value: 3,
						// 	text: '已完成'
						// },
						// {
						// 	value: 7,
						// 	text: '未修复'
						// }
					],
					maintenance: [
						{
							value: 0,
							text: '待接收'
						},
						{
							value: 2,
							text: '执行中'
						}
						// {
						// 	value: 3,
						// 	text: '完成'
						// }
					],
					patrol: [
						{
							value: 0,
							text: '待接收'
						},
						{
							value: 2,
							text: '执行中'
						}
						// {
						// 	value: 3,
						// 	text: '完成'
						// }
					],
					quantity: [
						{
							value: 0,
							text: '待接收'
						},
						{
							value: 2,
							text: '执行中'
						},
						{
							value: 3,
							text: '完成'
						}
					],
					check: [
						{
							value: 0,
							text: '待接收'
						},
						{
							value: 1,
							text: '执行中'
						},
						{
							value: 2,
							text: '待审核'
						},
						{
							value: 3,
							text: '完成'
						},
						{
							value: 4,
							text: '已撤回'
						},
						{
							value: 5,
							text: '待验收'
						},
						{
							value: 6,
							text: '已驳回'
						},
						{
							value: 7,
							text: '未修复'
						},
						{
							value: 8,
							text: '已派单'
						}
					]
				},
				searchFrom: {
					code: '',
					orderStatus: []
				},
				page: 1,
				isInstall: true, // 是否首次进入页面
				orderType: 1
			}
		},
		onLoad(e) {
			this.$nextTick(() => {
				console.log(this)
				this.isInstall = false
				this.orderType = e.orderType // 1待办 2完成
				this.tabsCurrent = Number(e.index) ? Number(e.index) : 0
				this.$nextTick(async () => {
					if (this.orderType == 1) {
						await this.getCount()
					}
					this.handleTabChange(this.tabList[this.tabsCurrent])
					// console.log(this.tabList[this.tabsCurrent],5656)
				})
			})
		},
		onShow(e) {
			if (this.isInstall) return
			this.getList()
			this.getCount()
		},
		methods: {
			// 紧急度选择
			doneChange(id) {},
			doSearch() {
				this.page = 1
				this.getList()
				this.moreSearch = false
			},
			reset() {
				this.searchFrom = {
					code: '',
					orderStatus: []
				}
				if (this.orderType == 1) {
					// 待办 执行中
					this.searchFrom.orderStatus = [0, 2, 3]
				} else {
					// 已完成
					this.searchFrom.orderStatus = [4]
				}
				this.doSearch()
			},
			statusChange(value) {
				console.log(value)
				this.searchFrom.orderStatus = value
			},
			handleDetail(item) {
				let url = this.tabList[this.activeIndex]?.url
				if (!url) return
				// url += `id=${item.id}&workOrderCode=${item.workOrderCode}&BizType=${item.bizType}`
				url += `id=${item.id}&planId=${item.planId}&code=${item.code}&&orderType=${this.orderType}`
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			scrolltolower() {
				if (isEnd) return
				this.page++
				this.getList()
			},
			handleTabChange(item) {
				console.log(item)
				this.activeType = item.type
				this.activeIndex = item.index
				this.page = 1
				this.reset()
				this.moreSearch = false
			},
			getCount() {
				statistics().then(data => {
					console.log('onsole.log(data)-----------')
					console.log(data)
					this.tabList = this.tabList.map(item => {
						switch (item.type) {
							case 'maintenance':
								return { ...item, badge: { value: data.maintenanceNum } }
							case 'patrol':
								return { ...item, badge: { value: data.patrolInspection } }
							case 'quantity':
								return { ...item, badge: { value: data.quantityNum } }
							case 'repair':
								return { ...item, badge: { value: data.repairsNum } }
						}
					})
				})
				// Promise.all(
				// 	this.tabList.map(item =>
				// 		getWorkOrderList(
				// 			{
				// 				type: item.workOrderType
				// 			},
				// 			false
				// 		)
				// 	)
				// ).then(res => {
				// 	res.forEach((item, index) => {
				// 		console.log(item)
				// 		// if (item?.success) {
				// 		// 	this.tabList[index].badge.value = item.data.count
				// 		// }
				// 	})
				// })
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				console.log('this.searchFrom-----------------')
				console.log(this.searchFrom)
				const params = {
					type: this.tabList[this.activeIndex].workOrderType,
					pageNum: this.page,
					size: 8,
					...this.searchFrom
				}
				// 维修
				if (this.tabList[this.activeIndex].workOrderType == 3) {
					let userInfo = uni.getStorageSync('userInfo')
					params.executeUserId = userInfo.userId
					if (this.orderType == 1) {
						if (!params.orderStatus.includes(3)) {
							params.orderStatus.push(3)
						}
					}
				} else {
					if (this.orderType == 1) {
						if (params.orderStatus.includes(3)) {
							let index = params.orderStatus.indexOf(3)
							params.orderStatus.splice(index, 1)
						}
					} else {
						params.orderStatus = [3]
					}
				}

				isEnd = false
				getWorkOrderList(params)
					.then(res => {
						if (res.list?.length > 0 && params.type === this.tabList[this.activeIndex].workOrderType) {
							// if (params.page === 1) {
							// 	this.dataList = []
							// }
							// this.dataList.push(...res.data.list.records)
							this.dataList = res.list
							isEnd = this.dataList.length >= res.count
						} else {
							this.dataList = []
						}
						console.log(this.dataList)
						uni.hideLoading()
					})
					.catch(() => {
						uni.hideLoading()
					})
			}
			//(1:巡点检;2:保养;3:维修;4:盘点)
			// _getMyWorkOrderList(params, loading = true) {
			// 	let str = ''
			// 	for (let key in params) {
			// 		str += '&' + key + '=' + params[key]
			// 	}
			// 	return postJ(this.apiUrl + `/eam/PdaWorkOrder/list?${str.substr(1)}`, {}, loading)
			// }
		}
	}
</script>

<style lang="scss" scoped>
	scroll-view ::v-deep ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	.kd-work-container {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.work-list {
			flex: 1;
			overflow: hidden;
			padding: 16rpx 24rpx;
			background-color: $page-bg;

			.u-list {
				height: 100% !important;
			}
		}

		.nodata {
			font-size: 40rpx;
			text-align: center;
			padding-top: 30rpx;
		}
	}

	.top-wrapper {
		display: flex;
		align-items: center;
		background-color: #fff;
		position: relative;

		.slide-search {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			z-index: 10;
			background-color: #fff;

			.timerange {
				width: 90%;
				margin: 0 auto 10rpx;
			}

			.select-box {
				display: flex;
				padding: 0 10rpx;

				.uni-stat__select + .uni-stat__select {
					margin-left: 10rpx;
				}
			}

			.more-search {
				padding-bottom: 20rpx;

				.cell {
					display: flex;
					align-items: center;
					padding-right: 20rpx;

					& + .cell {
						margin-top: 10rpx;
					}

					/deep/uni-input {
						flex: 1;
						height: 70rpx;
						border: 1rpx solid #e5e5e5;
						border-radius: 8rpx;
						font-size: 28rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
					}

					.label {
						width: 180rpx;
						text-align: right;
						padding-right: 20rpx;
					}
				}

				/deep/.uni-date__x-input {
					height: 70rpx !important;
				}

				.btn-search {
					text-align: right;
					padding: 10rpx 10rpx 0;

					button {
						display: inline-block;
						width: 200rpx;
						height: 60rpx;
						line-height: 58rpx;
						font-size: 28rpx;
						margin-left: 20rpx;

						&.primary {
							background-color: $j-primary-border-green;
							color: #fff;
						}
					}
				}
			}
		}

		.top-tabs {
			flex: 1;
		}

		/deep/.u-input {
			border: 1rpx solid #ccc;

			.u-input__content__field-wrapper__field {
				height: 40rpx !important;
			}
		}

		image {
			width: 52rpx;
			height: 52rpx;
			margin-left: 10rpx;
		}
	}
</style>