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 v-if="activeType == 'quality'">
			<InspectionWorkList pageName="myList" :way="orderType == 1 ? 'todo' : 'done'" ref="inspectionWorkListRef">
			</InspectionWorkList>
		</view>

		<view v-else class="work-list">
			<!-- 站号筛选  && -->
			<view v-if="activeType == 'patrol' && clientEnvironmentId == 10" class="group-tab-bar rx-sc">
				<view class="group-tab-item" v-for="(tab, idx) in groupTabs" :key="idx"
					:class="{ active: groupId === tab.groupId }" @click="switchGroup(tab.groupId)">
					{{ tab.label }}
				</view>
			</view>
			<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 && statusRange[activeType].length > 0" 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 {
		getByCode
	} from '@/api/pda/common.js'

	import {
		workorderMyPage
	} from '@/api/pda/workOrder'

	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 InspectionWorkList from '@/pages/qms/inspectionWork/list.vue'
	import {
		getPlanOrderList
	} from '@/api/warehouseManagement'

	// import { postJ } from '@/utils/api'
	let [isEnd] = [false]
	export default {
		components: {
			KdCard,
			CardTime,
			SearchPopup,
			InspectionWorkList
		},
		data() {
			return {
				clientEnvironmentId: uni.getStorageSync("userInfo") &&uni.getStorageSync("userInfo").clientEnvironmentId,
				groupId: null,
				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: 'service',
						workOrderType: 7,
						index: 2,
						url: `/pages/maintenance/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: 3,
						// url: `/pages/maintain_service/detail/detail?`,
						url: `/pages/maintenanceWorkorder/detail/detail?`,
						badge: {
							value: 0
						}
					},
					{
						name: '生产工单',
						type: 'production',
						workOrderType: 6,
						index:4,
						// url: `/pages/maintain_service/detail/detail?`,
						url: `/pages/pda/workOrder/extrusionMolding/index?`,
						badge: {
							value: 0
						}
					},
					{
						name: '质检工单',
						type: 'quality',
						workOrderType: 7,
						index: 5,
						// url: `/pages/maintain_service/detail/detail?`,
						url: ``,
						badge: {
							value: 0
						}
					},
					{
						name: '盘点工单',
						type: 'stocktaking',
						workOrderType: 8,
						index: 6,
						// url: `/pages/maintain_service/detail/detail?`,
						url: `/pages/warehouse/workOrder/inventory/inventory?`,
						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: '完成'
						// }
					],
					service: [{
							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: '已派单'
						}
					],
					quality: [],
					stocktaking: [],
					production: [],
					service: [],
				},
				searchFrom: {
					code: '',
					orderStatus: []
				},
				page: 1,
				isInstall: true, // 是否首次进入页面
				orderType: 1,
				codeData: [],
				groupTabs: [{
						label: '全部',
						groupId: null
					},
					{
						label: '5号站',
						groupId: '2008729845612720129'
					},
					{
						label: '6号站',
						groupId: '2008729929536548865'
					},
					{
						label: '7号站',
						groupId: '2008730320160468994'
					}
				],
			}
		},
		created() {
			uni.$off('successInit')
			uni.$on('successInit', (data) => {
				this.$nextTick(() => {
					this.$refs.inspectionWorkListRef.successInit()
				})
			})
		},
		async onLoad(e) {
			console.log('e~~~', 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()
					}
					const targetTab = this.tabList[this.tabsCurrent]
					if (targetTab) {
						this.handleTabChange(targetTab)
					}
				})
			})
		},
		onUnload() {
			uni.$off('successInit')
		},
		onShow(e) {
			console.log(this.orderType);
			if (this.isInstall) return
			this.dataList = []
			this.getList()
			this.getCount()
		},
		methods: {
			switchGroup(groupId) {
				// this.$emit('changeGroup', groupId)
				this.groupId = groupId;
				this.getList()
			},
			// 相机扫码
			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
				if (this.activeType == 'stocktaking') {
					url += `id=${item.id}&status=${item.status}`
				} else if (this.activeType == 'production') {
					url += `id=${item.id}&title=${item.taskName}&singleReport=${item.singleReport}`
				} else {
					// 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
				if (this.activeType == 'quality') {
					this.$nextTick(() => {
						this.$refs.inspectionWorkListRef.getList()
					})
				}
			},
			getCount() {
				statistics().then(data => {
					console.log('onsole.log(data)-----------')
					console.log(data)
					console.log('this.tabList~~~', this.tabList)
					this.tabList = this.tabList.map(item => {
						console.log('item~~~', item)
						let badgeValue = 0
						switch (item.type) {
							case 'maintenance':
								badgeValue = data.maintenanceNum
								break
							case 'patrol':
								badgeValue = data.patrolInspection
								break
							case 'quantity':
								badgeValue = data.quantityNum
								break
							case 'repair':
								badgeValue = data.repairsNum
								break
							case 'production':
								badgeValue = data.productionNum
								break
							case 'check':
								badgeValue = data.checkNum
								break
							case 'service':
								badgeValue = data.serviceNum
								break

						}
						return {
							...item,
							badge: {
								value: badgeValue
							}
						}
					})
				})
				// 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() {
				if (this.activeType == 'quality') {
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				console.log('this.searchFrom-----------------')
				console.log(this.searchFrom)
				isEnd = false

				const userInfo = uni.getStorageSync('userInfo')

				if (this.activeType == 'production') {
					let statusList = []
					if (this.orderType == 1) {
						statusList = [4, 5, 7]
					} else {
						statusList = [6, 10]
					}
					workorderMyPage({
							pageNum: this.page,
							size: 10,
							...this.searchFrom,
							statusList: statusList,
							workCenterIds: userInfo.workCenterIds
						})
						.then(res => {
							console.log('workorderMyPage~~~', res)

							if (res.list?.length > 0) {
								this.dataList = this.dataList.concat(res.list)
								isEnd = this.dataList.length >= res.count
							} else {
								this.dataList = []
							}
							console.log(this.dataList)
							uni.hideLoading()
						})

				} else if (this.activeType == 'stocktaking') {

					getPlanOrderList({
						pageNum: this.page,
						size: 10,
						status: this.orderType == 1 ? 0 : 2,
						...this.searchFrom,
						executorId: userInfo.userId
					}).then(res => {
						if (res.list?.length > 0) {
							// 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()
					})
				} else {
					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]
						}
					}


					if ((this.activeType == 'patrol' || this.activeType == 'service') && this.groupId) {
						params.teamId = this.groupId
					}

					console.log('params~~~', 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;
	}

	.group-tab-bar {
		background: #fff;
		padding: 16rpx 32rpx;
		border-bottom: 2rpx solid #e1e1e1;
		gap: 16rpx;
	}

	.group-tab-item {
		padding: 8rpx 24rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 32rpx;
		background: #f5f5f5;
		white-space: nowrap;

		&.active {
			background: $theme-color;
			color: #fff;
		}
	}

	.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 {
			flex: 1;
			height: 68rpx;
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			flex-shrink: 0;

			&::-webkit-scrollbar {
				display: none;
			}

			.tab_item {
				height: 68rpx;
				line-height: 68rpx;
				padding: 0 20rpx;
				font-size: 32rpx;
				flex-shrink: 0;
				// 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>