cxc-szcx-uniapp/pages/views/renliziyuan/qingjiaxinxi/index.vue

<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<uni-card>
			<view>
				<uni-row v-show="!username">
					<uni-col :span="12"><uni-title title="所属单位" align="left" type="h5"></uni-title></uni-col>
					<uni-col :span="12"><uni-title title="重置" align="right" type="h5" color="#666666"
							@click="reset"></uni-title></uni-col>
				</uni-row>
				<uni-row v-show="!username">
					<uni-col :span="24">
						<trq-depart-select v-model="orgCode" returnCodeOrID="orgCode"
							@change="departChange"></trq-depart-select>
					</uni-col>
				</uni-row>
				<uni-row v-show="!username">
					<uni-col :span="12"><uni-title title="姓名" align="left" type="h5"></uni-title></uni-col>
					<uni-col :span="12"><uni-title title="劳动合同号" align="left" type="h5"></uni-title></uni-col>
				</uni-row>
				<uni-row v-show="!username">
					<uni-col :span="12">
						<uni-easyinput v-model="realname" placeholder="姓名模糊查询" @change="Search" @clear="Search"/>
					</uni-col>
					<uni-col :span="12">
						<uni-easyinput v-model="contractNumber" placeholder="劳动合同号查询" @change="Search" @clear="Search"/>
					</uni-col>
				</uni-row>
				<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">
						<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" @input="handleInput" />
					</uni-col>
				</uni-row>
				<!-- ECharts图表 -->
				<view class="chart-container">
					<l-echart ref="chart" />
				</view>
			</view>
		</uni-card>
		<view class="list">
			<view class="item" v-for="item,i in list" :key="i"
				@click="jump(`/pages/views/renliziyuan/qingjiaxinxi/detail?id=${item.id}`)">
				<view class="title">
					{{item.username_dictText}}的{{item.type}}申请
				</view>
				<view class="time_box f-row aic">
					<view class="time">
						{{item.sysOrgCode_dictText}}
					</view>
					<view class="f-row aic no-wrap-right">
						{{item.begintime}}至{{item.endtime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReachBottom,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		queryLeaveListApi,
		countByOrgApi
	} from '@/api/leaveApi.js';
	import {
		getCategoryItemsApi
	} from '@/api/api.js';
	import {
		useStore
	} from '@/store';

	import * as echarts from 'echarts';
	const chart = ref(null);
	const chartOption = ref({});
	const orgCode = ref('') //部门树选中的orgCode
	const range = ref('') //日期查询
	const type = ref('') //图表点击事件
	const username = ref('') //用户名
	const realname = ref('') //姓名查询
	const contractNumber = ref('') //劳动合同号查询
	const timeout = ref(null)
	const store = useStore();
	const list = ref([])
	let pageNo = 1
	let pageSize = 15
	let loading = false

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

	function departChange(e) {
		orgCode.value = e
		queryLeave()
	}

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

	function handleInput(e) {
		queryLeave()
	}

	function Search() {
		if (timeout.value) {
			clearTimeout(timeout.value);
		}
		timeout.value = setTimeout(() => {
			queryLeave()
		}, 300); // 300ms 防抖时间
	}
	
	function clearSearch() {
		console.log('-----',realname.value)
		console.log('-----',contractNumber.value)
		
	}

	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);
			}
		}
		// 更新数据
		queryLeaveList(param);
	}

	const queryLeaveList = (params = {}) => {
		loading = true
		queryLeaveListApi({
			...params,
			pageNo,
			pageSize
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...res.result.records]
			}

			loading = false
		}).catch((err) => {})
	}

	// 初始化图表
	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);
	};

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

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

	const back = () => {
		uni.navigateBack()
	}

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

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding-top: v-bind(cusnavbarheight);
		padding-bottom: 24rpx;

	}

	.list {
		padding: 0 30rpx;

		.item {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx;
			padding: 30rpx;
			margin-top: 24rpx;
			position: relative;

			.dot {
				width: 12rpx;
				height: 12rpx;
				background: #ED361D;
				position: absolute;
				border-radius: 50%;
				left: 9rpx;
				top: 44rpx;
			}

			.title {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.time_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				/* 均匀分布子元素 */
				font-size: 24rpx;
				color: #888888;

				.time {
					margin-right: 62rpx;
					width: 50%;
				}

				.no-wrap-right {
					white-space: nowrap;
					text-align: right;
				}
			}
		}
	}

	.back {
		padding: 0 30rpx;
	}
</style>