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 ? '工单待办' : '工单已办'"
			right-icon="scan" @clickLeft="back">
			<view slot="right">
				<view @click="HandlScanCode" class="scan_btn"></view>
			</view>
		</uni-nav-bar>

		<view class="top-wrapper">
			<view class="tab_box rx-sc">
				<view class="tab_item" :class="{active: activeIndex == item.index}" v-for="(item,index) in tabList"
					:key="index">
					<view @click="handleTabChange(item)" class="badge-c">
						{{item.name}}
							<u-badge max="99" :value="item.badge.value" absolute v-show="orderType==1"></u-badge>
					</view>


				</view>
			</view>


			<view class="more_search">
				<image src="~@/static/moreSearch.svg" mode="" @click="searchShow = true"></image>
			</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>

		<SearchPopup mode="top" v-if="searchShow">
			<template v-slot:list>
				<view class="search_list">
					<u-form labelPosition="left" :model="formData" labelWidth="180" labelAlign="left" class="baseForm">
						<u-form-item v-if="orderType == 1" label="类型:" class="required-form" borderBottom
							prop="assetType">
							<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>
						</u-form-item>
						<u-form-item label="编号:" class="required-form" borderBottom prop="assetType">
							<input type="text" placeholder="请输入编号" v-model="searchFrom.code" />
						</u-form-item>
					</u-form>
				</view>
			</template>
			<template v-slot:operate>
				<view class="operate_box rx-bc">
					<u-button size="small" class="u-reset-button mg-20" @click="searchShow = false">取消</u-button>
					<u-button type="warning" size="small" class="u-reset-button mg-20" @click="reset">重置</u-button>
					<u-button type="success" size="small" class="u-reset-button" @click="doSearch">确定</u-button>
				</view>
			</template>
		</SearchPopup>
	</view>
</template>

<script>
	import SearchPopup from '@/pages/pda/components/searchPopup.vue'
	import {
		getWorkOrderList,
		statistics,
		deviceListQrCode
	} from '@/api/myTicket'
	import KdCard from '../components/KdCard/index.vue'
	import CardTime from '../components/CardTime.vue'
	import {
		getByFixCode
	} from '@/api/repair'
	import {
		nextTick
	} from 'vue'


	// import { postJ } from '@/utils/api'
	let [isEnd] = [false]
	export default {
		components: {
			KdCard,
			CardTime,
			SearchPopup
		},
		data() {
			return {
				formData: {},
				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: [],
				searchShow: 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,
				codeData: [],
			}
		},
		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])
				})
			})
		},
		onShow(e) {
			console.log(this.orderType);
			if (this.isInstall) return
			this.dataList = []
			this.getList()
			this.getCount()
		},
		methods: {
			// 相机扫码
			HandlScanCode() {
				// uni.scanCode({
				// 	success: res => {
				// 		let obj = {}
				// 		if (res.result.includes('&')) {
				// 			this.dataArray = res.result.split('&')
				// 			console.log(this.dataArray, 'this.dataArray')
				// 			obj = {
				// 				fixCode: this.dataArray[0],
				// 				code: ''
				// 			}
				// 		} else {
				// 			obj = {
				// 				fixCode: '',
				// 				code: res.result
				// 			}
				// 		}
				// 		console.log(obj,'obj')
				// 		getByFixCode(obj).then(res => {
				// 			uni.navigateTo({
				// 				url: `/pages/home/myTicket/detail?deviceId=${res.id}&type=${this.tabList[this.activeIndex].workOrderType}&codes=${this.dataArray[1]}`
				// 			})
				// 		})
				// 	}
				// })

				uni.scanCode({
					success: res => {
						console.log(res.result)
						let obj = {}
						if (res.result.includes('&')) {
							this.codeData = res.result.split('&')
							obj = {
								fixCode: '',
								code: this.codeData[0]
							}
						} else if (res.result.includes('/')) {
							let dataArray = res.result.split('/')
							obj = {
								fixCode: dataArray[0],
								code: ''
							}
						} else {
							obj = {
								fixCode: '',
								code: res.result
							}
						}

						getByFixCode(obj).then(res => {
							let params = {
								type: this.tabList[this.activeIndex].workOrderType,
								deviceId: res.id
							}
							deviceListQrCode(params).then(data => {
								if (data.length > 1) {
									uni.navigateTo({
										url: `/pages/home/myTicket/detail?deviceId=${res.id}&type=${this.tabList[this.activeIndex].workOrderType}`
									})
								} else {
									uni.navigateTo({
										url: `/pages/tour_tally/check/index?id=${data[0].id}&codes=${this.codeData[1]}`
									})
								}
							})
						})
					}
				})
			},

			// 紧急度选择
			doneChange(id) {},
			doSearch() {
				this.dataList = []
				this.page = 1
				this.getList()
				this.searchShow = false
			},
			reset() {
				this.searchFrom = {
					code: '',
					orderStatus: []
				}
				if (this.orderType == 1) {
					// 待办 执行中
					this.searchFrom.orderStatus = [0, 2]
				} 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, 'mmmmm')
				console.log(item)
				this.activeType = item.type
				this.activeIndex = item.index
				this.dataList = []
				this.page = 1
				this.reset()
				this.searchShow = 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: 10,
					...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
				console.log(params);
				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 = this.dataList.concat(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;
	}

	.scan_btn {
		background: url('../../../static/scan.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 50rpx;
		height: 50rpx;
	}

	.kd-work-container {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.work-list {
			flex: 1;
			overflow: hidden;
			padding: 0 24rpx 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;

		.tab_box {
			width: 100%;
			height: 68rpx;


			.tab_item {
				height: 68rpx;
				line-height: 68rpx;
				padding: 0 20rpx;
				font-size: 32rpx;
				// color: #979C9E;

			}

			.active {
				box-sizing: border-box;
				border-bottom: 6rpx solid $theme-color;
				color: $theme-color;
			}


		}

		.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;
		}

		.more_search {
			padding: 0 20rpx;
		}

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

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

		image {
			width: 52rpx;
			height: 52rpx;
			margin-left: 10rpx;
		}
	}

	.search_list {
		min-height: 100rpx;

		/deep/ .baseForm {
			padding: 10rpx 20rpx;
		}
	}

	.operate_box {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.mg-20 {
		margin-right: 20rpx;
	}

	.badge-c {
		position: relative;
	}

	.badge {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(100%, -20%);
		font-size: 24rpx;


		// position: absolute;
		// top: -8rpx;
		// left: 100rpx;
		// font-size: 24rpx;
		padding: 0rpx 10rpx;
		border-radius: 38rpx;
		background-color: #ff4949;
		color: #fff;
		font-style: normal;
	}

	/deep/.u-badge {
		top: 0;
		right: 0;
		transform: translate(90%, 20%);
	}
</style>