jeecgBootUniapp/src/pages-humanResource/absence/index.vue

<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '请假信息',
	},
	}
</route>
<template>
	<PageLayout navTitle="请假信息">
		<wd-card style="margin-top: 10px;">
			<view v-show="!username">
				<wd-row>
					<wd-col :span="12"><uni-title title="所属单位" align="left" type="h5"></uni-title></wd-col>
					<wd-col :span="12"><uni-title title="重置" align="right" type="h5" color="#666666"
							@click="reset"></uni-title></wd-col>
				</wd-row>
				<wd-row>
					<wd-col :span="24">
						<SelectDept label="" v-model="orgCode" @change="queryLeave" rowKey="orgCode" :multiple="false">
						</SelectDept>
					</wd-col>
				</wd-row>
				<wd-row>
					<wd-col :span="12"><uni-title title="姓名" align="left" type="h5"></uni-title></wd-col>
					<wd-col :span="12"><uni-title title="劳动合同号" align="left" type="h5"></uni-title></wd-col>
				</wd-row>
				<wd-row>
					<wd-col :span="12">
						<uni-easyinput v-model="realname" placeholder="姓名模糊查询" @change="queryLeave"
							@clear="queryLeave" />
					</wd-col>
					<wd-col :span="12">
						<uni-easyinput v-model="contractNumber" placeholder="劳动合同号查询" @change="queryLeave"
							@clear="queryLeave" />
					</wd-col>
				</wd-row>
			</view>
			<wd-row>
				<wd-col :span="12"><uni-title title="请假时间" align="left" type="h5"></uni-title></wd-col>
				<wd-col :span="12"><uni-title title="重置" align="right" type="h5" color="#666666"
						@click="reset" v-show="username"></uni-title></wd-col>
			</wd-row>
			<wd-row>
				<wd-col :span="24">
					<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" @input="queryLeave" />
				</wd-col>
			</wd-row>
			<l-echart ref="chart" />
		</wd-card>
		<view v-for="(item, i) in list" :key="i" @click="jump(`./detail?id=${item.id}`)">
			<wd-card :title="item.username_dictText+'的'+item.type+'申请'">
				<view class="card-content">
					<view class="meta-info">
						<wd-icon name="usergroup" size="14px" color="#999"></wd-icon>
						<text class="meta-text">{{item.sysOrgCode_dictText}}</text>
						<wd-icon name="time" size="14px" color="#999" style="margin-left: auto;"></wd-icon>
						<text class="meta-text">
							{{item.begintime}}至{{item.endtime}}</text>
					</view>
				</view>
			</wd-card>
		</view>
	</PageLayout>
</template>
<script setup>
	import {
		listApi,
		countByOrgApi
	} from '@/api/humanResource/absence'
	import * as echarts from 'echarts';
	import SelectDept from '@/components/SelectDept/SelectDept'
	const chart = ref(null);
	const chartOption = ref({});
	const list = ref([]) //请假信息列表
	const realname = ref('') //姓名查询
	const contractNumber = ref('') //劳动合同号查询
	const orgCode = ref('') //单位查询
	const type = ref('') //图表点击事件 请假类别
	const range = ref([]) //日期查询
	const timeout = ref(null)
	const username = ref('') //用户名
	let pageNo = 1
	let pageSize = 10
	let loading = false

	const queryLeave = (e) => {
		let param = {
			sysOrgCode: orgCode.value,
			begin: range.value[0],
			end: range.value[1],
			type: type.value,
			username: username.value,
			realname: realname.value,
			contractNumbers: contractNumber.value
		}
		if (e == 1) { // 下拉刷新时，pageNo++
			pageNo++;
		} else { // list置空，pageNo置1
			list.value = [];
			pageNo = 1;
			if (e != 2) {
				// 如果不是图表点击事件，更新图表
				setChartOption(param);
			}
		}
		// 更新数据
		getList(param);
	}

	const getList = (params = {}) => {
		setChartOption(params)
		loading = true
		listApi({
			...params,
			pageNo,
			pageSize
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...res.result.records]
			}
			loading = false
		}).catch((err) => {})
	}

	const setChartOption = (e) => {
		countByOrgApi(e).then(res => {
			chartOption.value = {
				tooltip: {
					trigger: 'item'
				},
				series: [{
					type: 'pie',
					radius: '50%',
					data: res.result
				}]
			}
			initChart()
		})
	}

	// 初始化图表
	const initChart = () => {
		setTimeout(async () => {
			if (!chart.value) return;
			const myChart = await chart.value.init(echarts);
			myChart.setOption(chartOption.value);
			myChart.on('click', (params) => {
				// 根据 params 处理点击事件
				type.value = params.name
				queryLeave(2);
			});
		}, 300);
	};

	function reset() {
		orgCode.value = ''
		range.value = []
		type.value = ''
		realname.value = ''
		contractNumber.value = ''
		queryLeave()
	}

	const jump = (url) => {
		uni.navigateTo({
			url: url
		});
	}

	onLoad((options) => {
		if (options.username) {
			username.value = options.username
		}
		queryLeave()
	});

	onReachBottom(() => {
		if (loading) return
		queryLeave(1); //下拉刷新传1
	})
</script>

<style lang="scss">
	.card-content {
		padding: 8px 0;

		.meta-info {
			display: flex;
			align-items: center;
			font-size: 12px;
			color: #666;

			.meta-text {
				margin-left: 4px;
			}
		}
	}
</style>