cxc-szcx-uniapp/pages/views/renliziyuan/renyuanxinxi/taizhang.vue

<template>
	<view class="container" id="top1">
		<uni-card>
			<view>
				<uni-row>
					<uni-col :span="11"><uni-title title="姓名 " align="left" type="h5"></uni-title></uni-col>
					<uni-col :span="11" :push="2"><uni-title title="劳动合同号" align="left" type="h5"></uni-title></uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="11"><uni-easyinput v-model="xm" suffixIcon="search" clearable placeholder="姓名模糊查询"
							@change="Search" @iconClick="Search" /></uni-col>
					<uni-col :span="11" :push="2">
						<uni-easyinput v-model="ldhth" suffixIcon="search" clearable placeholder="劳动合同号模糊查询"
							@change="Search" @iconClick="Search" />
					</uni-col>
				</uni-row>
			</view>
			<view style="margin-bottom: 10rpx">
				<uni-row>
					<uni-col :span="24"><uni-title title="所属单位" align="left" type="h5"></uni-title></uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="24">
						<trq-depart-select v-model="departID" returnCodeOrID="orgCode"
							@change="departChange"></trq-depart-select>
					</uni-col>
				</uni-row>
			</view>
		</uni-card>
	</view>
	<uni-card>
		<!-- 数据表格 -->

		<uni-row>
			<uni-col :span="3">
				<view class="titleStyle">序号</view>
			</uni-col>
			<uni-col :span="5">
				<view class="titleStyle">姓名</view>
			</uni-col>
			<uni-col :span="5">
				<view class="titleStyle">性别</view>
			</uni-col>
			<uni-col :span="5">
				<view class="titleStyle">年龄</view>
			</uni-col>
			<uni-col :span="6">
				<view class="titleStyle">操作</view>
			</uni-col>
		</uni-row>

		<scroll-view scroll-y :style="{ height: bottomHeight + 'px' }">
			<uni-row v-if="ryDataList.length > 0">
				<view v-for="(item, index) in ryDataList">
					<uni-col :span="3">
						<view class="dataStyle">
							{{ index + 1 }}
						</view>
					</uni-col>
					<uni-col :span="5">
						<view class="dataStyle">
							{{ item.xm }}
						</view>
					</uni-col>
					<uni-col :span="5">
						<view class="dataStyle">
							{{ item.xb_dictText }}
						</view>
					</uni-col>
					<uni-col :span="5">
						<view class="dataStyle">
							{{ item.nl }}
						</view>
					</uni-col>
					<uni-col :span="6">
						<view class="dataStyle">
							<span @click="detail(item)" style="color: red;">详情</span>
							<!-- <button size="mini" type="primary" @click="detail(item)">详情</button> -->
						</view>
					</uni-col>
				</view>
			</uni-row>

			<view class="pagination">
				<uni-pagination :current="current" :pagerCount="5" :total="total" prev-text="前一页" next-text="后一页"
					:show-icon="false" @change="pagechange" />
			</view>
		</scroll-view>
	</uni-card>
</template>

<script setup>
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		useStore
	} from '@/store';
	import {
		queryDepByCode,
		queryZbDepByLdhth
	} from '@/api/depart.js';
	import {
		queryRenyuanByDepartID
	} from '@/api/renyuan.js';
	let xm = ref('');
	let ldhth = ref('');
	let departID = ref(''); //部门树选中的ID
	const ryDataList = ref([]);

	const bottomHeight = ref(0);
	let status = ref('');
	let contentText = reactive({
		contentdown: '点击查看更多',
		contentrefresh: '加载中',
		contentnomore: '没有更多'
	});

	let pageNo = ref(1);
	let pageSize = ref(10);
	let total = ref(0);
	let pages = ref(0);
	let current = ref(0);
	let params = reactive({
		pageNo: pageNo,
		pageSize: pageSize
	});

	onLoad((e) => {});
	onMounted((e) => {

		getHeight();
		departID.value = '';
		getRenyuanByDepID();
	});
	const getHeight = () => {
		// 获取屏幕高度
		const systemInfo = uni.getSystemInfoSync();
		const screenHeight = systemInfo.screenHeight;
		// 创建选择器查询对象
		const query = uni.createSelectorQuery();
		// 获取上方组件的高度
		query
			.select('#top1')
			.boundingClientRect((rect1) => {
				// 计算上方组件高度总和
				const topComponentsHeight = rect1.height;
				// 计算下方组件的高度
				bottomHeight.value = screenHeight - topComponentsHeight;
			})
			.exec();
	};


	function detail(record) {
		// console.log(record)
		uni.navigateTo({
			url: '/pages/views/renliziyuan/renyuanxinxi/detail?data=' + encodeURIComponent(JSON.stringify(record))
		});
	}

	function pagechange(e) {
		current.value = e.current;
		pageNo.value = e.current;
		let params = {
			pageNo: pageNo.value,
			pageSize: pageSize.value,
			current: current.value
		};
		if (departID.value.length <= 9) {
			params.orgCode = departID.value;
		} else {
			params.jcxd_code = departID.value;
		}

		getRenyuanByDepID(params);
	}

	function departChange(e, data) {
		departID.value = e;
		let params = {
			pageNo: pageNo.value,
			pageSize: pageSize.value,
			current: current.value
		};
		console.log(e);
		if (e.length <= 9) {
			params.orgCode = departID.value;
		} else {
			params.jcxd_code = departID.value;
		}

		getRenyuanByDepID(params);

	}

	function getRenyuanByDepID(queryParm) {
		// ryDataList.value = [];
		console.log(queryParm);
		if (departID.value.length <= 6) {
			console.log(123242353);
			uni.showToast({
				title: '全厂数据较多，请选 下一层级...',
				icon: 'none',
				duration: 1000
			});

			return;
		}
		if (queryParm) {
			queryRenyuanByDepartID(queryParm)
				.then((res) => {
					console.log(res);
					if (res.success) {
						ryDataList.value = res.result.records;
						total.value = res.result.total;
						pages.value = res.result.pages;
						current.value = res.result.current;
					}
					getHeight();
				})
				.catch((err) => {
					console.log(err);
				});
		}
	}

	function Search() {
		ryDataList.value = [];
		let queryParm = {
			pageNo: pageNo.value,
			pageSize: pageSize.value
		};
		if ((ldhth.value == '') & (xm.value == '')) {
			return;
		}
		if (xm.value !== '') {
			queryParm.xm = '*' + xm.value + '*';
		}
		if (ldhth.value !== '') {
			queryParm.ldhth = '*' + ldhth.value + '*';
		}
		console.log(queryParm);
		queryRenyuanByDepartID(queryParm)
			.then((res) => {
				if (res.success) {
					ryDataList.value = res.result.records;
					total.value = res.result.total;
					pages.value = res.result.pages;
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
</script>

<style scoped>
	/* 全局容器 */
	.container {
		/* margin: 10rpx 10rpx; */
		/* padding: 10rpx; */
		background: linear-gradient(145deg, #ffaaff, var(--light-blue));
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(64, 158, 255, 0.15);
		border: 2rpx solid rgba(64, 158, 255, 0.1);
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.titleStyle {
		font-size: 12px;
		color: #747474;
		line-height: 30px;
		height: 30px;
		background: #f2f9fc;
		text-align: center;
		vertical-align: middle;
		border-left: 1px solid #919191;
		border-bottom: 1px solid #919191;
	}

	/* 内容样式 */
	.dataStyle {
		font-size: 12px;
		color: #00007f;
		line-height: 30px;
		height: 30px;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #919191;
		border-left: 1px solid #919191;
		text-overflow: ellipsis;
	}

	/* 内容样式 */
	.pagination {
		font-size: 16px;
		color: #00007f;
		line-height: 30px;
		height: 30px;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		text-overflow: ellipsis;
	}
</style>