guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 【消息通知】点击查看更多按钮，即加载所有数据，滚动显示。此时查看更多按钮隐藏，无需再次点击

Browse Source
pull/7/head
刘释隆 1 year ago
parent 34937aeabf
commit 9c137112f2
1 changed files with 145 additions and 115 deletions
Show Stats Download Patch File Download Diff File

186
src/views/message/content/List.vue
Unescape View File

@ -1,32 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue' import { reactive, ref, toRefs } from "vue";
import { format } from 'date-fns' import { format } from "date-fns";
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { getMessageList, readAllMsg, readMsg } from '@/api/message/message' import { getMessageList, readAllMsg, readMsg } from "@/api/message/message";
import iconApproveActive from '@/assets/images/message/approve-active.png' import iconApproveActive from "@/assets/images/message/approve-active.png";
import iconApprove from '@/assets/images/message/approve.png' import iconApprove from "@/assets/images/message/approve.png";
import iconSystemActive from '@/assets/images/message/system-active.png' import iconSystemActive from "@/assets/images/message/system-active.png";
import iconSystem from '@/assets/images/message/system.png' import iconSystem from "@/assets/images/message/system.png";
import iconArrowActive from '@/assets/images/message/arrow-active.png' import iconArrowActive from "@/assets/images/message/arrow-active.png";
import iconArrow from '@/assets/images/message/arrow.png' import iconArrow from "@/assets/images/message/arrow.png";
import iconClear from '@/assets/images/message/clear.png' import iconClear from "@/assets/images/message/clear.png";
import iconArrowDown from '@/assets/images/message/arrow-down.png' import iconArrowDown from "@/assets/images/message/arrow-down.png";
const emit = defineEmits(['goDetail']) const emit = defineEmits(["goDetail"]);
const router = useRouter() const router = useRouter();
const route = useRoute() const route = useRoute();
const hasNextPage = ref(false) const hasNextPage = ref(false);
const state = reactive({ const state = reactive({
tabList: [ tabList: [
{ {
name: '审批通知', name: "审批通知",
icon: iconApprove, icon: iconApprove,
activeIcon: iconApproveActive, activeIcon: iconApproveActive,
value: 1, value: 1,
}, },
{ {
name: '系统消息', name: "系统消息",
icon: iconSystem, icon: iconSystem,
activeIcon: iconSystemActive, activeIcon: iconSystemActive,
value: 2, value: 2,
@ -34,112 +34,147 @@ const state = reactive({
], ],
list: [] as any, list: [] as any,
pageNo: 1, pageNo: 1,
}) });
const { list, tabList } = toRefs(state) const { list, tabList } = toRefs(state);
const tab = ref(1) const tab = ref(1);
async function getList() { async function getList(type = "") {
const res = await getMessageList({ let res = await getMessageList({
pageNo: state.pageNo, pageNo: state.pageNo,
pageSize: '7', pageSize: "7",
msgCategory: tab.value, msgCategory: tab.value,
}) });
if (res.code === 'OK') { if (type == "more") {
hasNextPage.value = res.data.hasNextPage while (res.data.endRow > 0) {
if (res.code == "OK") {
if (tab.value === 1) { if (tab.value === 1) {
res.data.list.forEach((item) => { res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson) item.tag = JSON.parse(item.busJson);
}) });
}
state.list = state.list.concat(res.data.list);
state.pageNo++;
res = await getMessageList({
pageNo: state.pageNo,
pageSize: "7",
msgCategory: tab.value,
});
}
}
hasNextPage.value = res.data.hasNextPage;
} else {
if (res.code === "OK") {
hasNextPage.value = res.data.hasNextPage;
if (tab.value === 1) {
res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson);
});
}
state.list = state.list.concat(res.data.list);
} }
console.log(res.data.list)
state.list = state.list.concat(res.data.list)
} }
} }
getList() getList();
async function clearMsg() { async function clearMsg() {
const res = await readAllMsg({ msgCategory: tab.value }) const res = await readAllMsg({ msgCategory: tab.value });
if (res.code === 'OK') { if (res.code === "OK") {
state.list = [] state.list = [];
state.pageNo = 1 state.pageNo = 1;
getList() getList();
} }
} }
function switchTab(type: number) { function switchTab(type: number) {
tab.value = type tab.value = type;
state.list = [] state.list = [];
state.pageNo = 1 state.pageNo = 1;
getList() getList();
} }
function goFinalDetail(row) { function goFinalDetail(row) {
console.log(row) console.log(row);
router.push({ name: 'final-detail', query: { id: row.tag.taskId, packageid: row.packageid } }) router.push({
name: "final-detail",
query: { id: row.tag.taskId, packageid: row.packageid },
});
} }
function goDetail(item) { function goDetail(item) {
if (tab.value === 1) { if (tab.value === 1) {
clearMsgOne(item.id) clearMsgOne(item.id);
goFinalDetail(item) goFinalDetail(item);
} }
else
// emit('goDetail', item.id) // emit('goDetail', item.id)
{ router.push({ name: 'message-detail', query: { id: item.id } }) } else {
router.push({ name: "message-detail", query: { id: item.id } });
}
} }
async function clearMsgOne(id) { async function clearMsgOne(id) {
const res = await readMsg({ msgid: id }) const res = await readMsg({ msgid: id });
} }
function getMore() { function getMore() {
state.pageNo += 1 state.pageNo += 1;
getList() getList("more");
} }
</script> </script>
<template> <template>
<div class="wrapper-message"> <div class="wrapper-message">
<div class="flex justify-between header"> <div class="flex justify-between header">
<div class="header-title"> <div class="header-title">消息通知</div>
消息通知
</div>
<div class="clear" @click="clearMsg"> <div class="clear" @click="clearMsg">
<img class="icon-clear" :src="iconClear" alt=""> <img class="icon-clear" :src="iconClear" alt="" />
清除未读 清除未读
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="slider"> <div class="slider">
<div <div
v-for="(item) in tabList" v-for="item in tabList"
:key="item.value" :key="item.value"
:class="{ 'item-active': tab === item.value }" :class="{ 'item-active': tab === item.value }"
class="flex item" class="flex item"
@click="switchTab(item.value)" @click="switchTab(item.value)"
> >
<div class="flex item-left align-center"> <div class="flex item-left align-center">
<img class="icon" :src="tab === item.value ? item.activeIcon : item.icon" alt=""> <img
class="icon"
:src="tab === item.value ? item.activeIcon : item.icon"
alt=""
/>
<div :class="{ 'text-active': tab === item.value }" class="text"> <div :class="{ 'text-active': tab === item.value }" class="text">
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<img class="icon-arrow" :src="tab === item.value ? iconArrowActive : iconArrow" alt=""> <img
class="icon-arrow"
:src="tab === item.value ? iconArrowActive : iconArrow"
alt=""
/>
<div v-if="tab === item.value" class="line" /> <div v-if="tab === item.value" class="line" />
</div> </div>
</div> </div>
<div class="list"> <div class="list">
<div v-for="(item, index) in list" :key="item.id" :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }" class="item" @click="goDetail(item)"> <div
v-for="(item, index) in list"
:key="item.id"
:class="{ pt0: index === 0, 'item-disabled': item.readFlag }"
class="item"
@click="goDetail(item)"
>
<div class="left"> <div class="left">
<div class="num"> <div class="num">
{{ format(item.sendTime, 'dd') }} {{ format(item.sendTime, "dd") }}
<div v-if="!item.readFlag" class="point" /> <div v-if="!item.readFlag" class="point" />
</div> </div>
<div class="date"> <div class="date">
{{ format(item.sendTime, 'yyyy-MM') }} {{ format(item.sendTime, "yyyy-MM") }}
</div> </div>
</div> </div>
<div class="middle"> <div class="middle">
@ -150,29 +185,25 @@ function getMore() {
{{ item.titile }} {{ item.titile }}
</div> </div>
<div v-if="tab === 1" class="status"> <div v-if="tab === 1" class="status">
<div class="tag tag-blue"> <div class="tag tag-blue">审批节点：{{ item.tag.nodeName }}</div>
审批节点：{{ item.tag.nodeName }}
</div>
<div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag"> <div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag">
审批状态：{{ item.tag.states }} 审批状态：{{ item.tag.states }}
</div> </div>
</div> </div>
<div v-if="tab === 1" class="subtitle"> <div v-if="tab === 1" class="subtitle">
<span class="name">{{ item.tag.sendUserName }}</span> <span class="name">{{ item.tag.sendUserName }}</span>
<span class="time">{{ format(item.sendTime, 'yyyy-MM-dd HH:mm:ss') }}</span> <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
</div> </div>
<div v-else class="subtitle"> <div v-else class="subtitle">
<span class="name">{{ item.userName }}</span> <span class="name">{{ item.userName }}</span>
<span class="time">{{ format(item.sendTime, 'yyyy-MM-dd HH:mm:ss') }}</span> <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
</div> </div>
</div> </div>
<div class="look"> <div class="look">查看</div>
查看
</div>
</div> </div>
<div v-if="hasNextPage" class="more" @click="getMore"> <div v-if="hasNextPage" class="more" @click="getMore">
查看更多<img class="icon-more" :src="iconArrowDown" alt=""> 查看更多<img class="icon-more" :src="iconArrowDown" alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -185,7 +216,7 @@ function getMore() {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
background: #FFF; background: #fff;
border-radius: 3px; border-radius: 3px;
height: calc(100vh - 88px); height: calc(100vh - 88px);
position: relative; position: relative;
@ -241,7 +272,7 @@ function getMore() {
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
&-active { &-active {
background: rgba(80,122,253,.1); background: rgba(80, 122, 253, 0.1);
} }
} }
@ -256,7 +287,7 @@ function getMore() {
color: #333333; color: #333333;
margin-left: 12px; margin-left: 12px;
&-active { &-active {
color: #507AFD; color: #507afd;
} }
} }
@ -385,18 +416,18 @@ function getMore() {
} }
.tag-blue { .tag-blue {
background: rgba(80,122,253,0.10); background: rgba(80, 122, 253, 0.1);
color: #507afd; color: #507afd;
} }
.tag-red { .tag-red {
color: #ff4e4f; color: #ff4e4f;
background: rgba(255,78,79,0.10); background: rgba(255, 78, 79, 0.1);
} }
.tag-green { .tag-green {
color: #3EE199; color: #3ee199;
background: rgba(62,225,153,0.10); background: rgba(62, 225, 153, 0.1);
} }
.title { .title {
@ -430,7 +461,6 @@ function getMore() {
cursor: pointer; cursor: pointer;
} }
} }
} }
} }

Write Preview
Loading…
Cancel
Save