jeecgBootUniapp/src/pages/operate/file/index.vue

<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '公文/通知公告/法律法规/上级制度/厂级制度',
	},
	}
</route>

<template>
	<view :class="['fixed-header', { 'gray': appStore.isGray == 1 }]">
		<wd-navbar left-text="返回" left-arrow
			custom-style="padding-top: var(--status-bar-height, 0); background-image: linear-gradient(to right, #1890ff, #096dd9); color: #fff;"
			@click-left="handleClickLeft">
			<template #title>
				<view class="search-box">
					<wd-search v-model="keyword" hide-cancel placeholder-left placeholder="搜索" shape="round"
						@change="onChange"></wd-search>
				</view>
			</template>
		</wd-navbar>
	</view>
	<view class="container">
		<!-- 加载提示 -->
		<wd-loading v-if="loading && pageNo === 1" class="loading-tip">加载中...</wd-loading>
		<!-- 列表内容 -->
		<view v-for="(item, i) in list" :key="i">
			<wd-card :title="item.title" title-bold border-radius="8" use-footer-slot>
				<view class="card-content">
					<view class="meta-info">
						<wd-icon name="time" size="14px" color="#999"></wd-icon>
						<text class="meta-text">{{item.time}}</text>
						<wd-icon name="usergroup" size="14px" color="#999" style="margin-left: auto;"></wd-icon>
						<text class="meta-text">{{item.depart}}</text>
					</view>
				</view>
			</wd-card>
		</view>
		<view class="load-more" v-if="loading && pageNo > 1">
			<wd-loading size="16px">正在加载...</wd-loading>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		queryDocumentApi,
		queryNoticeApi,
		querySuperiorSystemApi,
		queryFactorySystemApi,
		queryRegulationsApi
	} from '@/api/pages/file'
	import {
		useAppStore
	} from '@/store'
	const appStore = useAppStore()
	let pageNo = 1
	let pageSize = 10
	let loading = false
	const list = ref([]) //文件列表
	const keyword = ref('') //查询绑定值
	const type = ref('') //绑定查询文件种类


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

	const getList = () => {
		loading = true
		if (type.value == '公文') getDocumentList()
		if (type.value == '通知公告') getNoticeList()
		if (type.value == '上级制度') getSuperiorSystemList()
		if (type.value == '厂级制度') getFactorySystemList()
		if (type.value == '法律法规') getRegulationsList()
	}

	/*公文*/
	const getDocumentList = () => {
		queryDocumentApi({
			pageNo,
			pageSize,
			fwbt: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'fwbt', 'fwtime', 'wjlb')]
			}
			loading = false
		}).catch((err) => {
			loading = false
		})
	}

	/*通知公告*/
	const getNoticeList = () => {
		queryNoticeApi({
			pageNo,
			pageSize,
			neirong: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'neirong', 'createTime', 'fbdw')]
			}
			loading = false
		}).catch((err) => {
			loading = false
		})
	}

	/*上级制度*/
	const getSuperiorSystemList = () => {
		querySuperiorSystemApi({
			pageNo,
			pageSize,
			zdmc: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'zdmc', 'updateTime2', 'zbbm')]
			}
			loading = false
		}).catch((err) => {
			loading = false
		})
	}

	/*厂级制度*/
	const getFactorySystemList = () => {
		queryFactorySystemApi({
			pageNo,
			pageSize,
			zdmc: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'zdmc', 'fatime',
					'zbbm_dictText')]
			}
			loading = false
		}).catch((err) => {
			loading = false
		})
	}

	/*法律法规*/
	const getRegulationsList = () => {
		queryRegulationsApi({
			pageNo,
			pageSize,
			flfgmc: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'flfgmc', 'updateTime2',
					'fabubumen')]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}

	const formatObj = (arr, title, time, depart) => {
		return arr.map((item) => ({
			...item,
			title: item[title],
			time: item[time],
			depart: item[depart]
		}))
	}

	const formatSearchkey = () => {
		if (keyword.value.trim()) {
			return '*' + keyword.value + '*'
		}
	}

	const onChange = () => {
		pageNo = 1
		list.value = []
		getList()
	}

	onReachBottom(() => {
		if (loading) return
		pageNo++
		getList()
	})

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

	onLoad((options) => {
		type.value = options.title
		getList()
	});
</script>

<style lang="scss">
	/* 固定顶部区域 */
	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.container {
		 padding: calc(60px + var(--status-bar-height, 0)) 5px 0 5px; /* 确保顶部 padding 包含状态栏高度 */
		/* 顶部padding要大于固定头高度 */
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.search-box {
		display: flex;
		height: 100%;
		align-items: center;
		width: 100%;
		padding: 0 10px;

		:deep() {
			.wd-search {
				background: rgba(255, 255, 255, 0.2);
				border-radius: 18px;
				width: 100%;

				.wd-search__input {
					color: #fff;
				}

				.wd-search__placeholder {
					color: rgba(255, 255, 255, 0.7);
				}
			}
		}
	}

	.card-content {
		padding: 8px 0;

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

			.meta-text {
				margin-left: 4px;
			}
		}
	}

	.loading-tip {
		padding: 20px 0;
		text-align: center;
	}

	.load-more {
		padding: 16px 0;
		text-align: center;
		font-size: 14px;
		color: #999;
	}
</style>