|
|
|
@ -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,105 +34,102 @@ 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(type = '') {
|
|
|
|
async function getList(type = "") {
|
|
|
|
let res = await getMessageList({
|
|
|
|
let res = await getMessageList({
|
|
|
|
pageNo: state.pageNo,
|
|
|
|
pageNo: state.pageNo,
|
|
|
|
pageSize: '7',
|
|
|
|
pageSize: "7",
|
|
|
|
msgCategory: tab.value,
|
|
|
|
msgCategory: tab.value,
|
|
|
|
})
|
|
|
|
});
|
|
|
|
if (type == 'more') {
|
|
|
|
if (type == "more") {
|
|
|
|
while (res.data.endRow > 0) {
|
|
|
|
while (res.data.endRow > 0) {
|
|
|
|
if (res.code == 'OK') {
|
|
|
|
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.list = state.list.concat(res.data.list);
|
|
|
|
state.pageNo++
|
|
|
|
state.pageNo++;
|
|
|
|
res = await getMessageList({
|
|
|
|
res = await getMessageList({
|
|
|
|
pageNo: state.pageNo,
|
|
|
|
pageNo: state.pageNo,
|
|
|
|
pageSize: '7',
|
|
|
|
pageSize: "7",
|
|
|
|
msgCategory: tab.value,
|
|
|
|
msgCategory: tab.value,
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
hasNextPage.value = res.data.hasNextPage
|
|
|
|
hasNextPage.value = res.data.hasNextPage;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
else {
|
|
|
|
if (res.code === "OK") {
|
|
|
|
if (res.code === 'OK') {
|
|
|
|
hasNextPage.value = res.data.hasNextPage;
|
|
|
|
hasNextPage.value = res.data.hasNextPage
|
|
|
|
|
|
|
|
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.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({
|
|
|
|
router.push({
|
|
|
|
name: 'final-detail',
|
|
|
|
name: "final-detail",
|
|
|
|
query: { id: row.tag.fromId, packageid: row.packageid },
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// emit('goDetail', item.id)
|
|
|
|
// emit('goDetail', item.id)
|
|
|
|
else {
|
|
|
|
else {
|
|
|
|
router.push({ name: 'message-detail', query: { id: item.id } })
|
|
|
|
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('more')
|
|
|
|
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>
|
|
|
|
@ -150,7 +147,7 @@ function getMore() {
|
|
|
|
class="icon"
|
|
|
|
class="icon"
|
|
|
|
:src="tab === item.value ? item.activeIcon : item.icon"
|
|
|
|
:src="tab === item.value ? item.activeIcon : item.icon"
|
|
|
|
alt=""
|
|
|
|
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>
|
|
|
|
@ -159,7 +156,7 @@ function getMore() {
|
|
|
|
class="icon-arrow"
|
|
|
|
class="icon-arrow"
|
|
|
|
:src="tab === item.value ? iconArrowActive : iconArrow"
|
|
|
|
:src="tab === item.value ? iconArrowActive : iconArrow"
|
|
|
|
alt=""
|
|
|
|
alt=""
|
|
|
|
>
|
|
|
|
/>
|
|
|
|
<div v-if="tab === item.value" class="line" />
|
|
|
|
<div v-if="tab === item.value" class="line" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -167,7 +164,7 @@ function getMore() {
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="(item, index) in list"
|
|
|
|
v-for="(item, index) in list"
|
|
|
|
:key="item.id"
|
|
|
|
:key="item.id"
|
|
|
|
:class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }"
|
|
|
|
:class="{ pt0: index === 0, 'item-disabled': item.readFlag }"
|
|
|
|
class="item"
|
|
|
|
class="item"
|
|
|
|
@click="goDetail(item)"
|
|
|
|
@click="goDetail(item)"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
@ -188,9 +185,7 @@ 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>
|
|
|
|
@ -204,13 +199,11 @@ function getMore() {
|
|
|
|
<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>
|
|
|
|
|
