refactor(message): 下拉刷新改为单独执行，而不是整个页面下拉刷新

feat(message): 公告列表上拉加载
fix(components/messageList): 切换分段器时页数未重置

components/ygoa/messageList.vue

@@ -1,20 +1,22 @@
 <template>
 	<view class="msg_list_content">
 		<uni-collapse>
-			<uni-collapse-item title-border="show" :border="true" :show-animation="true" :open="true">
+			<uni-collapse-item title-border="show" :border="true" :show-animation="anime" :open="open">
 				<template v-slot:title>
 					<uni-section :title="title" type="line" titleFontSize="1.5rem"></uni-section>
 				</template>
 				<View style="height: 85vh">
-					<z-paging :fixed="false" :auto="false" @query="queryPage" :value="messages" :default-page-size="pSize" :default-page-no="page" ref="paging">
+					<z-paging :fixed="false" @query="queryData" :value="messages" :default-page-size="pSize"
+						:default-page-no="pageNo" ref="paging">
 						<template #top>
-							<view class="segmented_control_container">
-								<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
+							<view v-if="props.segments" class="segmented_control_container">
+								<uni-segmented-control :current="current" :values="segmentKeys" @clickItem="onClickItem"
 									styleType="text" activeColor="#409eff"></uni-segmented-control>
 							</view>
 						</template>
 						<view @click="handleToDetail(message)" v-for="(message, index) in messages" :key="index"
-							:class="message.isread == 'Y' ? ' ' : 'message_container_unread'" class="message_container">
+							:class="message.isread == 'Y' || message.if_read ? ' ' : 'message_container_unread'"
+							class="message_container">
 							<uni-card :is-full="true">
 								<template v-slot:title>
 									<uni-row>
@@ -35,17 +37,15 @@
 												</text>
 											</uni-col>
 											<uni-col :span="5">
-												<!-- <text class="message_time">
-													{{ message.sendtime }}
-												</text> -->
-												<view class="message_time" v-for="(item, index) in message.sendtime.split(' ')" :key="index">
+												<view class="message_time"
+													v-for="(item, index) in message.sendtime.split(' ')" :key="index">
 													{{ item }}
 												</view>
 											</uni-col>
 										</view>
 									</uni-row>
 								</template>
-								<view class="message_bottom_container">
+								<view v-if="message.content" class="message_bottom_container">
 									<text class="message_content hidden_over">
 										{{ message.content }}
 									</text>
@@ -60,48 +60,143 @@
 </template>
 
 <script setup lang="ts">
-/* 
-	message: {
-		messageid,
-		universalid
-	}
-*/
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 const current = ref(0)
+
 const props = defineProps({
-	type: Number,
-	title: String,
-	items: Array,
-	messages: Array,
-	pSize: Number,
-	page: Number
+	anime: Boolean, // 是否开启动画
+	open: Boolean, // 是否默认打开
+	title: String, // 标题
+	segments: Array, // 分段器数据
+	messages: Array, // 消息数据
+	pSize: Number, // 分页大小
+	pageNo: Number // 默认页
+})
+const emits = defineEmits([
+	'clickSegment', // 点击分段器
+	'clickItem', // 点击内容项
+	'scrollToBottom' // 到达底部
+])
+// 分段器 键值
+const segmentKeys = ref({})
+const segmentValues = ref({})
+onMounted(() => {
+	if (props.segments !== undefined) {
+		segmentKeys.value = Object.keys(props.segments)
+		segmentValues.value = Object.values(props.segments)
+	}
 })
-const emit = defineEmits(['clickSegment', 'clickItem', 'scrollToBottom'])
+
 const paging = ref(null)
 // 加载完成 更新数据
-const complete = (list) => {
+function complete(list) {
 	paging.value.complete(list)
 }
-// 下拉加载
-function queryPage(page) {
-	let isRead = ''
-	if(current.value === 1) {
-		isRead = '1'
-	} else if(current.value === 2) {
-		isRead = '0'
-	}
-	const type = ''
-	emit('scrollToBottom', isRead, props.pSize, type, page, complete)
-}
-
+// 点击分段器
 function onClickItem({ currentIndex }) {
 	current.value = currentIndex
-	emit('clickSegment', { currentIndex })
+	// 重新加载数据 pageNo恢复为默认值
+	paging.value.reload()
 }
+// 刷新
+function queryData(pageNo, pSize, queryType) {
+	switch (queryType) {
+		case 0: // 下拉刷新
+		case 1: // 初始加载
+			reloadData()
+			break
+		case 3: // 上拉加载
+			scrollQuery(pageNo, pSize)
+			break
+		default: // 默认刷新
+			reloadData()
+			break
+	}
+}
+// 刷新数据
+function reloadData() {
+	const params = {
+		pSize: props.pSize,
+		pageNo: props.pageNo,
+		type: '',
+		segmentValue: segmentValues.value[current.value]
+	}
+	emits('clickSegment', params, complete)
+}
+// 上拉加载
+function scrollQuery(pageNo, pSize) {
+	const params = {
+		pSize,
+		pageNo,
+		type: '',
+		segmentValue: segmentValues.value[current.value]
+	}
+	emits('scrollToBottom', params, complete)
+}
+// 跳转详情
 function handleToDetail(message) {
-	emit('clickItem', { message, type: props.type })
+	emits('clickItem', message)
 }
 </script>
 
 <style lang="scss">
+.hidden_over {
+	white-space: nowrap; // 不换行
+	overflow: hidden; // 超出内容隐藏
+	text-overflow: ellipsis; // 超出部分显示省略号
+	display: inline-block;
+	max-width: 100%;
+}
+
+.msg_list_content {
+
+	.message_container {
+		border-left: #7b7b7b .4rem solid;
+
+		.message_top_container {
+			padding: 5px 5px 0;
+
+			.message_user {
+				color: #000000;
+			}
+		}
+
+		.message_mid_container {
+			padding: 5px;
+			height: 1.1rem;
+
+			.message_title {
+				font-size: 1.1rem;
+			}
+
+			.message_time {
+				font-size: 0.8rem;
+			}
+		}
+
+		.message_bottom_container {
+			.message_content {}
+		}
+	}
+
+	.message_container_unread {
+		// 未读样式
+		border-left-color: #0f6cbd;
+
+		.message_user {
+			color: #000000;
+			font-weight: bold;
+		}
+
+		.message_mid_container {
+			.message_title {
+				color: #0f6cbd;
+
+				.message_title_text {
+					font-weight: bold;
+				}
+			}
+		}
+	}
+}
 </style>

pages.json

@@ -12,14 +12,14 @@
 			"path": "pages/message/index",
 			"style": {
 				"navigationBarTitleText": "消息",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": false
 			}
 		},
 		{
 			"path": "pages/process/index",
 			"style": {
 				"navigationBarTitleText": "流程",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": false
 			}
 		},
 		{

pages/message/detail/index.vue

@@ -68,6 +68,15 @@ import attachmentList from '@/components/ygoa/attachmentList.vue'
 	const universalId = ref('');
 	const messageId = ref('');
 	onLoad((options) => {
+		console.log('options.noticeId', options.noticeId);
+		if(options.noticeId) {
+			type.value = 0
+			noticeId.value = options.noticeId;
+		} else {
+			type.value = 1
+			universalId.value = options.universalId;
+			messageId.value = options.messageId;
+		}
 		switch (options.type) {
 			case '0':
 				type.value = 0

pages/message/index.vue

@@ -9,112 +9,25 @@
 				</template>
 				<view class="process_container">
 					<view class="process_list">
-						<process-list :processes="processes"></process-list>
+						<process-list :processes="processes" :current="0"></process-list>
 					</view>
 				</view>
 			</uni-collapse-item>
 		</uni-collapse>
-		<uni-collapse>
-			<uni-collapse-item title-border="show" :border="true" :show-animation="true" :open="false">
-				<template v-slot:title>
-					<uni-section title="公告" type="line" titleFontSize="1.5rem"></uni-section>
-				</template>
-
-				<view class="segmented_control_container">
-					<uni-segmented-control :current="current2" :values="items" @clickItem="onClickItem2"
-						styleType="text" activeColor="#409eff"></uni-segmented-control>
-				</view>
-				<view class="content">
-					<view @click="handleToDetail({ message, type: 0 })" v-for="(message, index) in notices" :key="index"
-						:class="message.if_read ? ' ' : 'message_container_unread'" class="message_container">
-						<uni-card :is-full="true">
-							<template v-slot:title>
-								<uni-row>
-									<view class="message_top_container">
-										<uni-col :span="24">
-											<text class="message_user">
-												{{ message.name }}
-											</text>
-										</uni-col>
-									</view>
-								</uni-row>
-								<uni-row>
-									<view class="message_mid_container">
-										<uni-col :span="15">
-											<text class="message_title hidden_over">
-												<text :class="message.icon" class="ygoa-icon"></text>
-												<text class="message_title_text">{{ message.title }}</text>
-											</text>
-										</uni-col>
-										<uni-col :span="9">
-											<text class="message_time">
-												{{ message.sendtime }}
-											</text>
-										</uni-col>
-									</view>
-								</uni-row>
-							</template>
-						</uni-card>
-					</view>
-				</view>
-			</uni-collapse-item>
-		</uni-collapse>
-
-		<!-- <uni-collapse>
-			<uni-collapse-item title-border="show" :border="true" :show-animation="true" :open="true">
-				<template v-slot:title>
-					<uni-section title="消息" type="line" titleFontSize="1.5rem"></uni-section>
-				</template>
-
-				<view class="segmented_control_container">
-					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
-						activeColor="#409eff"></uni-segmented-control>
-				</view>
-				<view class="content">
-					<view @click="handleToDetail({ message, type: 1 })" v-for="(message, index) in messages"
-						:key="index" :class="message.isread == 'Y' ? ' ' : 'message_container_unread'"
-						class="message_container">
-						<uni-card :is-full="true">
-							<template v-slot:title>
-								<uni-row>
-									<view class="message_top_container">
-										<uni-col :span="24">
-											<text class="message_user">
-												{{ message.name }}
-											</text>
-										</uni-col>
-									</view>
-								</uni-row>
-								<uni-row>
-									<view class="message_mid_container">
-										<uni-col :span="15">
-											<text class="message_title hidden_over">
-												<text :class="message.icon" class="ygoa-icon"></text>
-												<text class="message_title_text">{{ message.title }}</text>
-											</text>
-										</uni-col>
-										<uni-col :span="9">
-											<text class="message_time">
-												{{ message.sendtime }}
-											</text>
-										</uni-col>
-									</view>
-								</uni-row>
-							</template>
-							<view class="message_bottom_container">
-								<text class="message_content hidden_over">
-									{{ message.content }}
-								</text>
-							</view>
-						</uni-card>
-					</view>
-				</view>
-			</uni-collapse-item>
-		</uni-collapse> -->
-
-		<message-list :messages="messages" @clickSegment="onClickItem" @clickItem="handleToDetail" :type="1" :pSize="10"
-			:items="['全部', '已读', '未读']" title="消息" @scrollToBottom="getMessagePage"></message-list>
 
+		<!-- 公告列表 type=0为公告 -->
+		<message-list :messages="notices" 
+		@clickSegment="getNoticeData" 
+		@clickItem="handleToNoticeDetail"
+			@scrollToBottom="getNoticePage" :pSize="10" :pageNo="1" :anime="true" :open="true"
+			title="公告"></message-list>
+
+		<!-- 消息列表 type=1为消息 -->
+		<message-list :messages="messages" @clickSegment="getMessageData" @clickItem="handleToMessageDetail"
+			@scrollToBottom="getMessagePage" :pSize="10" :pageNo="1" :anime="true" :open="false"
+			:segments="{ '全部': '', '未读': '0', '已读': '1' }" 
+			title="消息"></message-list>
+		<!-- AI咨询按钮 -->
 		<view class="fab_button">
 			<uni-fab :pattern="{ icon: 'headphones' }" :popMenu="false" horizontal="right"
 				@fabClick="clickFabButton"></uni-fab>
@@ -124,152 +37,130 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, toRaw } from 'vue';
-import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
+import { onMounted, ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app'
 import $tab from '@/plugins/tab.js';
 import $modal from '@/plugins/modal.js';
 import processList from '@/components/ygoa/processList.vue'
 import messageList from '@/components/ygoa/messageList.vue'
 import { useUserStore } from '@/store/user.js'
 import { getMessageList, getNoticeList } from '@/api/message.js';
+import { getUserProcess } from '@/api/process';
 onLoad((options) => {
+	// 是否跳转打卡页
 	if (options.to == 'clockIn') toClockIn()
 })
+// 跳转打卡页
 function toClockIn() {
+	// 确认是否跳转打卡页
 	$modal.confirm('当前未打卡，是否前往打卡').then(() => {
 		$tab.navigateTo('/pages/mine/clockIn/clockIn')
 	})
 }
-onPullDownRefresh(() => {
-	onClickItem({ currentIndex: 0 })
-	onClickItem2({ currentIndex: 0 })
-	uni.stopPullDownRefresh();
-})
 onMounted(() => { // TODO 初始化数据
-	onClickItem({ currentIndex: 0 })
-	onClickItem2({ currentIndex: 0 })
+	initData()
 })
+
 const userStore = useUserStore()
 
-// 分段器选项列表
-const items = reactive(['全部', '已读', '未读'])
-// 分段器选项
-const current = ref(-1)
-const current2 = ref(0)
-// 消息列表
-let messages = ref([])
-//公告列表
-let notices = ref([]);
 // 待办列表
-let processes = reactive([])
+let processes = ref([])
+function initData() {
+	const params = {
+		staffId: userStore.user.useId,
+		page: 1,
+		pageNum: 5,
+		modelId: "",
+		control: 1
+	}
+	getUserProcess(params).then(({ returnParams }) => {
+		if (returnParams == undefined) {
+			processes.value = []
+			return
+		}
+		processes.value = returnParams.list
+	});
+}
 
-function getMessageData({ isRead, pSize, type, p }) {
+// 消息列表
+let messages = ref([])
+// 获取消息列表数据
+function getMessageData({ pSize, pageNo, type, segmentValue }, callback) {
 	const params = {
 		currentUser: userStore.user.useId,
-		isRead: isRead,
+		isRead: segmentValue,
 		pSize: pSize,
 		type: type,
-		p: p,
+		p: pageNo,
 	}
 	getMessageList(params).then(({ returnParams }) => {
-		return returnParams.list;
+		messages.value = returnParams.list;
+		// 通知子组件加载完成
+		callback(returnParams.list)
 	})
 }
-
-function getMessagePage(isRead, pSize, type, page, callback) {
+// 分页获取消息数据
+function getMessagePage({ pSize, pageNo, type, segmentValue }, callback) {
 	const params = {
 		currentUser: userStore.user.useId,
-		isRead: isRead,
+		isRead: segmentValue,
 		pSize: pSize,
 		type: type,
-		p: page,
+		p: pageNo,
 	}
 	getMessageList(params).then(({ returnParams }) => {
+		// 更新数据
 		messages.value.push(...returnParams.list)
+		// 通知子组件加载完成
 		callback(returnParams.list)
 	})
 }
-
-// 点击消息分段器
-function onClickItem({ currentIndex }) {
-	current.value = currentIndex
-	let params = {};
-	switch (currentIndex) {
-		case 0:
-			params = {
-				currentUser: userStore.user.useId,
-				isRead: "",
-				pSize: 10,
-				type: "",
-				p: 1,
-			}
-			getMessageList(params).then(res => {
-				messages.value = res.returnParams.list;
-			})
-
-			break;
-		case 1:
-			params = {
-				currentUser: userStore.user.useId,
-				isRead: "1",
-				pSize: "5",
-				type: "",
-				p: "1",
-			}
-			getMessageList(params).then(res => {
-				messages.value = res.returnParams.list;
-			})
-			break;
-		case 2:
-			params = {
-				currentUser: userStore.user.useId,
-				isRead: "0",
-				pSize: "5",
-				type: "",
-				p: "1",
-			}
-			getMessageList(params).then(res => {
-				messages.value = res.returnParams.list;
-			})
-			break;
-	}
+// 点击消息列表项
+function handleToMessageDetail(message) {
+	// type = 1 为消息
+	$tab.navigateTo('/pages/message/detail/index?type=' + 1 + '&messageId=' + message.messageid + '&universalId=' + message.universalid)
 }
 
-// 点击公告分段器
-function onClickItem2({ currentIndex }) {
-	current2.value = currentIndex;
-	switch (currentIndex) {
-		case 0:
-			const params1 = {
-				notice_title: "",
-				p: "1",
-				pSize: "5",
-				userId: userStore.user.useId,
-				unitId: userStore.user.unitId,
-			}
-			getNoticeList(params1).then(res => {
-				notices.value = res.returnParams.noticelist.list;
-			})
-			break;
-		case 1:
-			notices.value = [];
-			break;
-		case 2:
-			notices.value = [];
-			break;
+// 公告列表
+let notices = ref([])
+// 获取公告列表数据
+function getNoticeData({ pSize, pageNo }, callback) {
+	const params = {
+		notice_title: "",
+		p: pageNo,
+		pSize,
+		userId: userStore.user.useId,
+		unitId: userStore.user.unitId,
 	}
+	getNoticeList(params).then(({ returnParams }) => {
+		notices.value = returnParams.noticelist.list
+		// 通知子组件加载完成
+		callback(returnParams.noticelist.list)
+	})
 }
-// 点击消息
-function handleToDetail({ message, type }) {
-	switch (type) {
-		case 0:
-			$tab.navigateTo('/pages/message/detail/index?type=' + type + '&noticeId=' + message.id)
-			break
-		case 1:
-			$tab.navigateTo('/pages/message/detail/index?type=' + type + '&messageId=' + message.messageid + '&universalId=' + message.universalid)
-			break
+// 分页获取公告数据
+function getNoticePage({ pSize, pageNo }, callback) {
+	const params = {
+		notice_title: "",
+		p: pageNo,
+		pSize,
+		userId: userStore.user.useId,
+		unitId: userStore.user.unitId,
 	}
+	getNoticeList(params).then(({ returnParams }) => {
+		// 更新数据
+		notices.value.push(...returnParams.noticelist.list)
+		// 通知子组件加载完成
+		callback(returnParams.noticelist.list)
+	})
+}
+// 点击公告列表项
+function handleToNoticeDetail(notice) {
+	// type = 0 为公告
+	$tab.navigateTo('/pages/message/detail/index?type=' + 0 + '&noticeId=' + notice.id)
 }
+
+// AI咨询按钮
 function clickFabButton() {
 	console.log('clickFabButton');
 	$tab.navigateTo('/pages/message/chat/index')
@@ -285,82 +176,4 @@ function clickFabButton() {
 	margin-top: 10rpx;
 }
 
-.grid-body {
-	.ygoa-icon {
-		font-size: 40px;
-	}
-
-	.grid-item-box {
-		flex: 1;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		border-top: 1px solid #ccc;
-		background-color: #ffffff;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 15px 0;
-	}
-}
-
-.segmented_control_container {
-	// margin-top: 10px;
-}
-
-.message_container {
-	border-left: #7b7b7b .4rem solid;
-
-	.message_top_container {
-		padding: 5px 5px 0;
-
-		.message_user {
-			color: #000000;
-		}
-	}
-
-	.message_mid_container {
-		padding: 5px;
-		height: 1.1rem;
-
-		.message_title {
-			font-size: 1.1rem;
-		}
-
-		.message_time {
-			font-size: 0.8rem;
-		}
-	}
-
-	.message_bottom_container {
-		.message_content {}
-	}
-}
-
-.message_container_unread {
-	// 未读样式
-	border-left-color: #0f6cbd;
-
-	.message_user {
-		color: #000000;
-		font-weight: bold;
-	}
-
-	.message_title {
-		color: #0f6cbd;
-
-		.message_title_text {
-			font-weight: bold;
-		}
-	}
-
-}
-
-.hidden_over {
-	white-space: nowrap; // 不换行
-	overflow: hidden; // 超出内容隐藏
-	text-overflow: ellipsis; // 超出部分显示省略号
-	display: inline-block;
-	max-width: 100%;
-}
 </style>