aiot-app/pages/maintenance/service/order.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="检修工单" @clickLeft="back"></uni-nav-bar>

		<view class="search-box">
			<uni-section>
				<uni-easyinput @clear="clearSearch" prefixIcon="search" style="width: 460rpx" v-model="searchForm.code"
					placeholder="工单编号">
				</uni-easyinput>
			</uni-section>
			<button class="search_btn" @click="doSearch">搜索</button>
			<!-- <image class="menu_icon" @click="showSearch" src="~@/static/pda/menu.svg"></image> -->
		</view>


		<view v-show="showTab">
			<view class="top-wrapper">
				<view class="tab_box rx-sc">
					<view class="tab_item" v-for="(item,index) in tabList" :key="index"
						:class="{active: pickTabIndex == index}">
						<view @click="changeChartsTab(index)" class="badge-c">
							{{item.label}}
							<u-badge max="99" :value="item.number" absolute></u-badge>

						</view>
					</view>
				</view>
			</view>
		</view>
        <OrderTask v-for="(item, index) in tabList" :key="index" v-show="index === pickTabIndex" :list="item.list"
            :type="tabList.value" :groupId="groupId" @changeGroup="onChangeGroup"></OrderTask>

		<u-toast ref="uToast"></u-toast>

		<MySearch :show.sync="searchShow" :formItems="formItems" @search="confirmSearch" ref="mySearchRef"></MySearch>
	</view>
</template>

<script>
	import {
		isObjectEmpty
	} from '@/utils/utils.js'
	import {
		getWorkOrderList,
		getRuleList,
		workPage
	} from '@/api/myTicket'
	import OrderTask from './OrderTask.vue'
	import {
		post,
		postJ
	} from '@/utils/api.js'

	export default {
		components: {
			OrderTask
		},
		computed: {

		},
		data() {
			return {
				showTab: true,
				page: 1,
				size: 10,
				isEnd: false,
				tabList: [{
						value: 0,
						label: '待接收',
						list: [],
						number: 0
					},
					{
						value: 2,
						label: '执行中',
						list: [],
						number: 0
					},
					{
						value: 3,
						label: '已完成',
						list: [],
						number: 0
					},
					{
						value: 4,
						label: '全部',
						list: [],
						isNone: !this.$isAuthorities('eam:maintenance:listAll'),
						number: 0
					}
				].filter(item => !item.isNone),

				pickTabIndex: 0,
				qrContent: null,
				barType: 0,
                searchShow: false,
                searchForm: {
                    code: ''
                },
                groupId: null,
				formItems: [{
						label: '规则名称：',
						prop: 'ruleId',
						component: 'MySelect',
						props: {
							localdata: [],
							dataKey: 'name',
							dataValue: 'id'
						}
					},
					{
						label: '时间：',
						prop: 'startEndTime',
						component: 'MyDateRange',
						props: {
							type: 'daterange',
						}
					}
				]
			}
		},
		onLoad() {
			this.getRuleList()
		},
		onShow() {
			this.getFirstList()
			this.getStatus()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			getStatus() {
				getWorkOrderList({
					orderStatus: [0],
					type: 7,
					pageNum: 1,
					size: 1
				}).then(res => {
					this.tabList[0].number = res.count
				})
				getWorkOrderList({
					orderStatus: [2],
					type: 7,
					pageNum: 1,
					size: 1
				}).then(res => {
					this.tabList[1].number = res.count
				})

			},

			getFirstList: function() {
				this.page = 1
				this.isEnd = false
				this.getList()
			},

			getList() {
				if (this.isEnd) {
					this.$refs.uToast.show({
						message: "暂无更多数据",
						duration: 1000
					})
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
                let params = {
                    orderStatus: [this.tabList[this.pickTabIndex].value],
                    type: 7,
                    pageNum: this.page,
                    size: this.size,
                    ...this.searchForm
                }
                if (this.groupId) {
                    params.postId = this.groupId
                }
				if (!this.showTab || this.pickTabIndex == 3) {
					delete params.orderStatus
				}
				let api = this.pickTabIndex == 3 ? workPage : getWorkOrderList
				api(params)
					.then(res => {

						if (this.page == 1) {
							this.$set(this.tabList[this.pickTabIndex], 'list', res.list)
							// this.tabList[this.pickTabIndex].list = res.list
						} else {
							this.tabList[this.pickTabIndex].list.push(...res.list);
						}
						console.log(this.tabList[this.pickTabIndex])
						this.page += 1
						this.isEnd = this.tabList[this.pickTabIndex].list.length >= res.count
						uni.hideLoading()
					})
					.catch(() => {
						uni.hideLoading()
					})
			},
            changeChartsTab(index) {
                this.pickTabIndex = index
                this.groupId = null
                this.getFirstList()
            },
            onChangeGroup(groupId) {
                this.groupId = groupId
                this.getFirstList()
            },
			async getRuleList() {
				let params = {
					status: 1,
					type: 7,
					pageNum: 1,
					size: -1
				}
				const res = await getRuleList(params)
				this.formItems.find(item => item.prop === 'ruleId').props.localdata = res
			},
			clearSearch() {
				this.searchForm.code = ''
				this.doSearch()
			},
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.showTab = isObjectEmpty(this.searchForm)
				this.getList();
			},
			showSearch() {
				this.searchShow = true
			},
			confirmSearch(e) {
				console.log(e);
				let data = JSON.parse(JSON.stringify(e))
				this.searchForm = {
					...this.searchForm,
					...data
				}
				console.log(this.searchForm);
				this.doSearch()
			},


		}
	}
</script>

<style lang="scss" scoped>
	.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;
			}


		}
	}

	.badge-c {
		position: relative;
	}

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


	// .tab-title {
	// 	position: fixed;
	// 	z-index: 99;
	// 	width: 100%;
	// 	padding: 10rpx;
	// 	// display: flex;
	// 	// justify-content: space-between;
	// 	height: $tab-height;
	// 	line-height: $tab-height;
	// 	background-color: #ffffff;
	// 	border-bottom: 1px solid #f2f2f2;
	// 	// box-sizing: border-box;
	// 	white-space: nowrap;
	// 	overflow: auto hidden;
	// 	display: flex;

	// 	&::-webkit-scrollbar {
	// 		/*滚动条整体样式*/
	// 		width: 10px;
	// 		/*高宽分别对应横竖滚动条的尺寸*/
	// 		height: 1px;
	// 	}

	// 	&::-webkit-scrollbar-thumb {
	// 		/*滚动条里面小方块*/
	// 		border-radius: 10px;
	// 		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	// 		background: #535353;
	// 	}

	// 	&::-webkit-scrollbar-track {
	// 		/*滚动条里面轨道*/
	// 		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	// 		border-radius: 10px;
	// 		background: #ededed;
	// 	}

	// 	.tab-item {
	// 		flex: 1;
	// 		text-align: center;
	// 		display: inline-block;
	// 		font-size: 32rpx;
	// 		color: $uni-text-color-grey;
	// 	}

	// 	.tab-item.active {
	// 		color: $j-primary-border-green;
	// 		border-bottom: 1px solid $j-primary-border-green;
	// 	}

	// 	.title-num {
	// 		font-size: 26rpx;
	// 	}


	// }

	// .title-red {
	// 	display: inline-block;
	// 	font-size: 22rpx;
	// 	padding: 0 10rpx;
	// 	border-radius: 50rpx;
	// 	color: #ffffff;
	// 	background: red;
	// 	line-height: 38rpx;
	// 	position: absolute;
	// 	top: 10rpx;
	// 	min-width: 18rpx;
	// }

	.search-box {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		gap: 16rpx;
		justify-content: space-between;

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;

		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}
</style>