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: 480rpx" 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="list_box">

			<u-list @scrolltolower="scrolltolower" key="list" :preLoadScreen="page * 10">
				<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 class="nodata"> 暂无数据 </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: 5,
				dataList: [],

				searchFrom: {
					keyWord: null
				},


			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getList() {
				let params = {
					pageNum: this.page,
					size: this.size,
					status: [4, 5, 6, 7],
					...this.searchFrom
				}

				isEnd = false
				const res = await workorderPage(params)
				console.log(res)

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

				this.dataList.push(...res.list)
				isEnd = this.dataList.length >= res.count

			},


			doSearch() {},


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



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


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

		.menu_icon {
			width: 44rpx;
			height: 44rpx;

		}
	}


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

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


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