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 v-if="ryDataList.length > 0">
			<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>
				<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">
							<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) => {
	// #ifdef APP
	getHeight();
	// #endif
	departID.value = '';
	getRenyuanByDepID();
});

// #ifdef APP

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 - 415;
		})
		.exec();
};
// #endif

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