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