aiot-app/pages/pda/workOrder/index/index.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="工单列表" background-color="#157A2C" color="#fff"
			@clickLeft="back"></uni-nav-bar>

		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="searchFrom.keyWord" placeholder="请输入">
				</uni-easyinput>
			</uni-section>

			<button class="search_btn" @click="doSearch">搜索</button>

			<image class="menu_icon" src="~@/static/pda/menu.svg"></image>

		</view>
		<view class="">
			<view class="tab_box rx-sc">
				<view class="tab_item" :class="{ active: tabType == 5 }" @click="handTab(5)">生产中</view>
				<view class="tab_item" :class="{ active: tabType == 4 }" @click="handTab(4)">待生产</view>
				<view class="tab_item" :class="{ active: tabType == 6 }" @click="handTab(6)">已完成</view>
				<view class="tab_item" :class="{ active: tabType == 7 }" @click="handTab(7)">已延期</view>
			</view>
		</view>

		<view class="list_box">

			<u-list @scrolltolower="scrolltolower" key="list" lowerThreshold="100" preLoadScreen="1.5">
				<u-list-item v-for="(item, index) in dataList" :key="index">
					<workCard :item="item" @handleDetail="handleDetail"></workCard>
				</u-list-item>


				<u-list-item v-if="dataList.length === 0">
					<view style='margin-top: 20vh;'>
						<u-empty iconSize='150' textSize='32' text='暂无工单'>
						</u-empty>
					</view>
				</u-list-item>

			</u-list>
		</view>

	</view>
</template>

<script>
import workCard from '../../components/workCard.vue'

import {
	workorderPage
} from '@/api/pda/workOrder.js'
let [isEnd] = [false]
export default {
	components: {
		workCard
	},
	data() {
		return {
			page: 1,
			size: 10,
			dataList: [],
			clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")
				.clientEnvironmentId,
			searchFrom: {
				keyWord: null
			},
			tabType:5


		}
	},
	onShow() {
		this.getList()
	},
	methods: {
		handTab(value){
			this.tabType=value
			this.page=1
			this.getList()
		},
		async getList() {
			let params = {
				pageNum: this.page,
				customerClient: 2,
				size: this.size,
				workOrderType: 1,
				statusList:[this.tabType],
				...this.searchFrom
			}

			isEnd = false
			const res = await workorderPage(params)

			if (params.pageNum === 1) {
				this.dataList = []
			}


			this.dataList.push(...res.list)
			console.log(this.dataList, 'dataList')
			isEnd = this.dataList.length >= res.count

		},


		doSearch() {
			this.page = 1
			this.getList()
		},


		scrolltolower() {
			if (isEnd) return
			this.page++
			this.getList()
		},



		handleDetail(item) {

			let url = '/pages/pda/workOrder/extrusionMolding/index'
			url += `?id=${item.id}&title=${item.taskName}&singleReport=${item.singleReport}`
			uni.navigateTo({
				url
			})
		},


	}
}
</script>

<style lang="scss" scoped>
.content-box {
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: $page-bg;
}

.top-wrapper {
	background-color: #fff;
	display: flex;
	width: 750rpx;
	height: 88rpx;
	padding: 16rpx 32rpx;
	align-items: center;
	gap: 16rpx;

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


.list_box {
	flex: 1;
	overflow: hidden;
	padding: 16rpx 0;

	.u-list {
		height: 100% !important;
	}
}
.tab_box {
	width: 100%;
	height: 68rpx;
    border-bottom: 1rpx solid #E1E1E1;

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


}
</style>