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

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

<template>
	<PageLayout :navTitle="type">
		<view class="container">
			<wd-search v-model="keyword" hide-cancel placeholder-left placeholder="搜索" shape="round" @change="onChange"
				class="search-box"></wd-search>
			<!-- 加载提示 -->
			<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" @click="getList(item.path)">
					<view class="card-content meta-info">
						<view class="meta-info">
							<wd-icon name="time" size="14px" :style="{ color: item.color }"></wd-icon>
							<text :style="{ color: item.color, marginLeft: '4px' }">{{ item.time }}</text>
							<wd-icon name="usergroup" size="14px"
								:style="{ color: item.color, marginLeft: 'auto'}"></wd-icon>
							<text :style="{ color: item.color, marginLeft: '4px' }">
								{{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>
	</PageLayout>
</template>

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

	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) {
				const recordsWithColor = res.result.records.map(item => ({
					...item,
					color: DateDiff(item.updateTime2) // 假设 updateTime2 是时间字段
				}));
				list.value = [...list.value, ...formatObj(recordsWithColor, '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) {
				const recordsWithColor = res.result.records.map(item => ({
					...item,
					color: DateDiff(item.updateTime2) // 假设 updateTime2 是时间字段
				}));
				list.value = [...list.value, ...formatObj(recordsWithColor, '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) => {
		uni.navigateTo({
			url: `/pages/onlinePreview/detail?data=${e}`
		});
	};

	const onChange = () => {
		pageNo = 1
		list.value = []
		getList(1)
	}
	
	const DateDiff = (time) => {
		var today = new Date();
		time = new Date(time);
		var days = parseInt((today - time) / 1000 / 60 / 60 / 24); //当前时间-更新时间
		if (days < 90) { //三个月内
			return '#ff0000'; // red
		} else if (days > 90 && days < 180) {
			return '#aa00ff'; // purple
		} else if (days > 180 && days < 365) {
			return '#00c861'; // green
		} else {
			return ''; // black
		}
	}

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

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

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.search-box {
		margin: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		border-radius: 20px;

		// If you want to style the inner input
		::v-deep .wd-search__content {
			background-color: #fff;

			.wd-search__input {
				font-size: 14px;
				color: #333;
			}

			.wd-search__placeholder {
				color: #999;
			}
		}

		// If you want to style the search icon
		::v-deep .wd-search__search-icon {
			color: #999;
		}
	}

	.card-content {
		padding: 8px 0;

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

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

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