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

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

<template>
	<view :class="{'gray': appStore.isGray == 1 }">
		<view class="fixed-header">
			<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 @click="getList(item.path)">
					<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.length > 19 ? item.depart.substring(0, 18) + '...': 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>
	</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('') //绑定查询文件种类
	var ifH5 = false;

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

	const getList = (e) => {
		loading = true;
		const handlers = {
			'公文': getDocumentList,
			'通知公告': getNoticeList,
			'上级制度': getSuperiorSystemList,
			'厂级制度': getFactorySystemList,
			'法律法规': getRegulationsList
		};

		if (e === 1) {
			handlers[type.value]?.();
		} else if (type.value == '厂级制度') {
			uni.navigateTo({
				url: `./detail?data=${e}`
			})
		} else if (type.value !== '通知公告') {
			// 非通知公告类型执行预览
			onlinePreView(e);
		}
	}

	/*公文*/
	const getDocumentList = () => {
		queryDocumentApi({
			pageNo,
			pageSize,
			fwbt: formatSearchkey()
		}).then((res) => {
			if (res.success) {
				list.value = [...list.value, ...formatObj(res.result.records, 'fwbt', 'fwtime', 'wjlb', 'wjbt')]
			}
			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', 'sszd')]
			}
			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', 'id')]
			}
			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', 'mingcheng')]
			}
			loading = false
		}).catch((err) => {
			console.log('err', err);
		})
	}

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

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

	const onlinePreView = (e) => {
		console.log(e)
		uni.navigateTo({
			url: `/pages/onlinePreview/detail?data=${e}`
		});
	};

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

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

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

	onLoad((options) => {
		type.value = options.title
		getList(1)
		//#ifdef H5 || MP-WEIXIN
		ifH5 = true;
		//#endif
	});
</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;
		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>