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

<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<uni-card>
			<!-- <view style="maring: 0 30rpx;"> -->
			<!-- 				<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"> -->
			<!-- <tree-select :dataSource="dataSource" v-model="type" dataValue="name" /> -->
			<!-- <uni-easyinput v-model="ldhth" suffixIcon="search" clearable 
							@change="Search" @iconClick="Search" /> -->
			<!-- 					</uni-col>
				</uni-row>
			</view> -->
			<view style="maring: 0 30rpx;">
				<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="orgCode" returnCodeOrID="orgCode"
							@change="departChange"></trq-depart-select>
					</uni-col>
				</uni-row>
			</view>
		</uni-card>
		<view class="list">
			<view class="item" v-for="item,i in list" :key="i" @click="">
				<view class="title">
					{{item._sysOrgCode}}的{{item._username}}{{item._type}}申请
				</view>
				<view class="time_box f-row aic">
					<view class="time">
						{{item._begintime}}至{{item._endtime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		queryLeaveListApi
	} from '@/api/leaveApi.js';
	import {
		getCategoryItemsApi
	} from '@/api/api.js';
	import {
		useStore
	} from '@/store';
	// import treeSelect from "@/components/treeSelect/treeSelect.vue"
	import {
		beforeJump,
		opendocument
	} from '@/utils/index.js';
	const orgCode = ref("") //部门树选中的orgCode
	const store = useStore();
	const list = ref([])
	const dataSource = ref([])
	const type = ref([])
	let pageNo = 1
	let pageSize = 15
	let loading = false

	onLoad(() => {
		queryLeaveList()
	})

	const queryLeaveList = (params = {}) => {
		list.value = []
		loading = true
		queryLeaveListApi({
			...params,
			pageNo,
			pageSize
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'username_dictText', 'type',
					'begintime', 'endtime', 'sysOrgCode_dictText')]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}
	const formatObj = (arr, username, type, begintime, endtime, sysOrgCode) => {
		arr.map((item) => {
			item['_username'] = item[username]
			item['_type'] = item[type]
			item['_begintime'] = item[begintime]
			item['_endtime'] = item[endtime]
			item['_sysOrgCode'] = item[sysOrgCode]
		})
		return arr
	}

	function departChange(e) {
		let params = {
			sysOrgCode: e
		}

		queryLeaveList(params)
	}

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

	onPullDownRefresh(() => {
		pageNo = 1
		loading = false
		list.value = []
		queryLeaveList()
		uni.stopPullDownRefresh()
	})

	onReachBottom(() => {
		if (loading) return
		pageNo++
		queryLeaveList()
	})
</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 {
				font-size: 24rpx;
				color: #888888;
			}

			image {
				width: 28rpx;
				height: 22rpx;
				margin-left: 62rpx;
				margin-right: 8rpx;
			}
		}
	}


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