LSM_OIL_SITE/pages/staff/List/List.vue

<template>
	<view class="page-content my-bg">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">员工管理</block>
		</cu-custom>
		<view class="cu-bar  search">
			<view class="search-form  radius bg-white">
				<text class="cuIcon-search"></text>
				<input class="" v-model="value" @confirm="onSearch" @focus="InputFocus" @blur="InputBlur" :adjust-position="false"
				 type="text" placeholder="搜索员工姓名或手机号" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-white shadow-blur" @tap="toAddUser">添加员工</button>
			</view>
		</view>
		<view>
			<staff-item class="cu-list menu-avatar" v-for="item in staffList" :key="item.cUserId" :staff="item" :admin="item.cType==1" />
		</view>
		<view v-if="staffList.length<1">
			<Empty />
		</view>
		<view v-show="isLoadMore">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import staffApi from '@/api/staff.js'
	import Empty from '@/components/Empty'
	import StaffItem from '@/components/staff-item'
	export default {
		components: {
			Empty,
			StaffItem,
			UniLoadMore
		},
		data() {
			return {
				searchCondition: '',
				staff: {
					data: 'lalall'
				},
				pageSize: 10,
				currentPage: 1,
				oilSite: uni.getStorageSync('oilSite'),
				staffList: [],
				value: '',
				isLoadMore: false,
				loadStatus: 'loading',
			};
		},
		onShow() {
			this.staffList = []
			this.currentPage = 1
			this.getList()
		},
		onPullDownRefresh() {
			this.staffList = []
			this.currentPage = 1
			this.getList()
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.getList()
			}
		},
		methods: {
			toAddUser() {
				uni.setStorageSync('tempUid', {
					id: '',
					type: 'add'
				})
				uni.navigateTo({
					url: '/pages/staff/editStaff/addUser'
				})
			},
			InputBlur() {
				console.log(this.searchCondition)
			},
			InputFocus() {
				console.log(this.searchCondition)
				// uni.getClipboardData({
				// 	success: (res)=> {
				// 		console.log(res.data)
				// 	}
				// })
			},
			onSearch() {
				this.staffList = []
				this.currentPage = 1
				this.getList()
			},
			getList() {
				const data3 = {
					pageSize: this.pageSize,
					currentPage: this.currentPage,
					sorted: { // 排序方式
						createTime: 'desc'
					},
					params: {
						netPoint: this.oilSite.oilSiteCode, // 油站编号
						siteType: '1',
						value: this.value
					},
					columns: {

					}
				}
				staffApi.getByPage(data3).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 20000) {
						this.staffList = this.staffList.concat(res.data.list)
						if (res.data.list.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.currentPage++
							this.isLoadMore = false
						}
						console.log(this.isLoadMore, this.loadStatus, this.currentPage)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		min-height: 100%;
	}

	.cu-bar .search-form {
		background-color: #fff;
	}
</style>