通知对接，解决引入tailwindcss后，侧边栏菜单折叠后不显示logo的问题，角色用户分配增加卡片加载，首页去除多余元素，页面切换动画
This commit is contained in:
parent
34c9676e4c
commit
b160f34d70
@ -7,54 +7,145 @@
|
||||
</el-badge>
|
||||
</template>
|
||||
<div class="layout-navbars-breadcrumb-user-news">
|
||||
<div class="head-box">
|
||||
<div class="head-box-title">通知</div>
|
||||
<div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<template v-if="noticeList.length > 0">
|
||||
<div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
|
||||
<div>{{ v.noticeTitle }}</div>
|
||||
<div class="content-box-msg" v-html="v.noticeContent"></div>
|
||||
<div class="content-box-time">{{ v.updateTime }}</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane name="notice">
|
||||
<template #label>
|
||||
<el-badge :value="unreadNoticeList.length" style="line-height: 18px" :hidden="unreadNoticeList.length === 0"> 通知公告 </el-badge>
|
||||
</template>
|
||||
<div class="content-box">
|
||||
<template v-if="unreadNoticeList.length > 0">
|
||||
<div class="content-box-item" v-for="(v, k) in unreadNoticeList" :key="k">
|
||||
<el-link :type="v.isRead ? 'primary' : 'danger'" @click="viewNoticeDetail(v.noticeId, v.isRead, v.noticeContent)">{{
|
||||
v.noticeTitle
|
||||
}}</el-link>
|
||||
<el-divider />
|
||||
<div class="content-box-time">{{ v.updateTime }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content-box-empty" v-if="unreadNoticeList.length === 0">
|
||||
<div class="content-box-empty-margin">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
<div class="mt15">全部已读</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></el-tab-pane
|
||||
>
|
||||
<el-tab-pane name="aimMsg">
|
||||
<template #label>
|
||||
<el-badge :value="unreadAimList.length" style="line-height: 18px" :hidden="unreadAimList.length === 0"> 业务信息 </el-badge>
|
||||
</template>
|
||||
<div class="content-box">
|
||||
<template v-if="unreadAimList.length > 0">
|
||||
<div class="content-box-item" v-for="(v, k) in unreadAimList" :key="k">
|
||||
<el-link :type="v.isRead ? 'primary' : 'danger'" @click="viewAimMsgDetail(v.noticeId, v.isRead, v.noticeContent)">{{
|
||||
v.noticeTitle
|
||||
}}</el-link>
|
||||
<el-divider />
|
||||
<div class="content-box-time">{{ v.updateTime }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content-box-empty" v-if="unreadAimList.length === 0">
|
||||
<div class="content-box-empty-margin">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
<div class="mt15">全部已读</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content-box-empty" v-else>
|
||||
<div class="content-box-empty-margin">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
<div class="mt15">全部已读</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="foot-box">
|
||||
<el-popconfirm title="是否确定把全部内容消息设为已读？" :teleported="false" :width="300" @confirm="onAllReadClick">
|
||||
<template #reference>
|
||||
<el-button type="primary" link>全部标为已读</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-link type="primary" @click="viewMoreNotice">
|
||||
查看更多<el-icon class="el-icon--right"><ArrowRight /></el-icon>
|
||||
</el-link>
|
||||
</div>
|
||||
<div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-dialog v-model="noticeDialogOpen" title="查看通知详情" draggable :close-on-click-modal="false">
|
||||
<noticeDialog v-model="form.noticeContent" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="noticeIndex">
|
||||
import useSocketStore from '@/store/modules/socket'
|
||||
import signalR from '@/utils/signalR'
|
||||
import noticeDialog from './noticeDialog/index.vue'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
|
||||
const router = useRouter()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const activeTab = ref('notice')
|
||||
// 小红点
|
||||
const newsDot = ref(false)
|
||||
|
||||
const noticeList = computed(() => {
|
||||
return useSocketStore().noticeList
|
||||
})
|
||||
const noticeDot = computed(() => {
|
||||
return useSocketStore().noticeDot
|
||||
})
|
||||
const readNoticeList = computed(() => {
|
||||
return useSocketStore().readNoticeList
|
||||
})
|
||||
const unreadNoticeList = computed(() => {
|
||||
return useSocketStore().unreadNoticeList
|
||||
})
|
||||
const noticeList = computed(() => {
|
||||
return readNoticeList.value
|
||||
.map((item) => ({
|
||||
...item,
|
||||
isRead: true
|
||||
}))
|
||||
.concat(unreadNoticeList.value.map((item) => ({ ...item, isRead: false })))
|
||||
})
|
||||
const readAimList = computed(() => {
|
||||
return useSocketStore().readAimList
|
||||
})
|
||||
const unreadAimList = computed(() => {
|
||||
return useSocketStore().unreadAimList
|
||||
})
|
||||
const aimList = computed(() => {
|
||||
return readAimList.value
|
||||
.map((item) => ({
|
||||
...item,
|
||||
isRead: true
|
||||
}))
|
||||
.concat(unreadAimList.value.map((item) => ({ ...item, isRead: false })))
|
||||
})
|
||||
// console.log(noticeList.value)
|
||||
// 全部已读点击
|
||||
function onAllReadClick() {
|
||||
newsDot.value = false
|
||||
proxy.$modal.msg('请自行实现！！！')
|
||||
// newsDot.value = false
|
||||
if (activeTab.value === 'notice') {
|
||||
signalR.AllReadNotice()
|
||||
} else {
|
||||
signalR.AllReadAimMsg()
|
||||
}
|
||||
}
|
||||
// 前往通知中心点击
|
||||
function onGoToGiteeClick() {
|
||||
window.open('https://gitee.com/izory/ZrAdminNetCore')
|
||||
}
|
||||
const form = ref({
|
||||
noticeContent: ''
|
||||
})
|
||||
const noticeDialogOpen = ref(false)
|
||||
const viewNoticeDetail = (noticeId, isRead, noticeContent) => {
|
||||
if (!isRead) signalR.ReadNotice(noticeId)
|
||||
noticeDialogOpen.value = true
|
||||
form.value.noticeContent = noticeContent
|
||||
}
|
||||
const viewAimMsgDetail = (noticeId, isRead, noticeContent) => {
|
||||
if (!isRead) signalR.ReadAimMsg(noticeId)
|
||||
noticeDialogOpen.value = true
|
||||
form.value.noticeContent = noticeContent
|
||||
}
|
||||
const viewMoreNotice = () => {
|
||||
router.push({ path: '/notice/center' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -79,7 +170,7 @@ function onGoToGiteeClick() {
|
||||
.content-box {
|
||||
font-size: 13px;
|
||||
.content-box-item {
|
||||
padding-top: 12px;
|
||||
//padding-top: 12px;
|
||||
&:last-of-type {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
@ -104,19 +195,23 @@ function onGoToGiteeClick() {
|
||||
}
|
||||
}
|
||||
}
|
||||
//.foot-box {
|
||||
// height: 35px;
|
||||
// color: #1890ff;
|
||||
// font-size: 13px;
|
||||
// cursor: pointer;
|
||||
// opacity: 0.8;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// border-top: 1px solid #ebeef5;
|
||||
// &:hover {
|
||||
// opacity: 1;
|
||||
// }
|
||||
//}
|
||||
.foot-box {
|
||||
height: 35px;
|
||||
color: #1890ff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #ebeef5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
:deep(.el-empty__description p) {
|
||||
font-size: 13px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sidebar-logo-container" :class="{ collapse: collapse }">
|
||||
<div class="sidebar-logo-container" :class="{ 'collapse-logo': collapse }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
@ -71,7 +71,7 @@ const sideTheme = computed(() => settingsStore.sideTheme)
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
&.collapse-logo {
|
||||
.sidebar-logo {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@ -21,9 +21,11 @@
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<!-- <transition name="fade-transform" mode="out-in"> -->
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
<transition name="scale" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<!-- </transition> -->
|
||||
</router-view>
|
||||
<iframe-toggle />
|
||||
@ -174,4 +176,15 @@ function close() {
|
||||
--el-header-height: var(--el-header-height) + var(--el-tags-height) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -98,8 +98,8 @@ export const constantRoutes = [
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'title',
|
||||
name: 'Title',
|
||||
path: 'center',
|
||||
name: 'Center',
|
||||
component: () => import('@/views/noticecenter/index'),
|
||||
meta: { title: '通知中心', icon: 'Bell' }
|
||||
}
|
||||
|
||||
@ -3,7 +3,11 @@ const useSocketStore = defineStore('socket', {
|
||||
onlineNum: 0,
|
||||
onlineUsers: [],
|
||||
noticeList: [],
|
||||
noticeDot: false
|
||||
noticeDot: false,
|
||||
readNoticeList: [],
|
||||
unreadNoticeList: [],
|
||||
readAimList: [],
|
||||
unreadAimList: []
|
||||
}),
|
||||
actions: {
|
||||
//更新在线人数
|
||||
@ -15,6 +19,20 @@ const useSocketStore = defineStore('socket', {
|
||||
this.noticeList = data
|
||||
this.noticeDot = data.length > 0
|
||||
},
|
||||
setReadNoticeList(data) {
|
||||
this.readNoticeList = data
|
||||
},
|
||||
setUnreadNoticeList(data) {
|
||||
this.unreadNoticeList = data
|
||||
this.noticeDot = data.length > 0 || this.unreadAimList.length > 0
|
||||
},
|
||||
setReadAimList(data) {
|
||||
this.readAimList = data
|
||||
},
|
||||
setUnreadAimList(data) {
|
||||
this.unreadAimList = data
|
||||
this.noticeDot = data.length > 0 || this.unreadNoticeList.length > 0
|
||||
},
|
||||
// setOnlineUsers(data) {
|
||||
// const { onlineNum, users } = data
|
||||
// this.onlineUsers = users
|
||||
|
||||
@ -92,10 +92,12 @@ export default {
|
||||
webNotify({ title: title, body: data })
|
||||
})
|
||||
// 接收系统通知/公告
|
||||
connection.on('moreNotice', (data) => {
|
||||
if (data.code == 200) {
|
||||
useSocketStore().setNoticeList(data.data)
|
||||
}
|
||||
connection.on('moreNotice', (data1, data2) => {
|
||||
// if (data.code == 200) {
|
||||
// useSocketStore().setNoticeList(data.data)
|
||||
// }
|
||||
useSocketStore().setUnreadNoticeList(data1)
|
||||
useSocketStore().setReadNoticeList(data2)
|
||||
})
|
||||
|
||||
// 接收在线用户
|
||||
@ -115,5 +117,21 @@ export default {
|
||||
|
||||
webNotify({ title: title, body: data.message })
|
||||
})
|
||||
},
|
||||
AllReadNotice() {
|
||||
const connection = this.SR
|
||||
connection.invoke('AllReadNotice')
|
||||
},
|
||||
ReadNotice(noticeId) {
|
||||
const connection = this.SR
|
||||
connection.invoke('ReadNotice', noticeId)
|
||||
}
|
||||
// AllReadAimMsg() {
|
||||
// const connection = this.SR
|
||||
// connection.invoke('AllReadAimMsg')
|
||||
// },
|
||||
// ReadAimMsg(msgId) {
|
||||
// const connection = this.SR
|
||||
// connection.invoke('ReadAimMsg', msgId)
|
||||
// }
|
||||
}
|
||||
|
||||
@ -1,46 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="16">
|
||||
<blockquote class="text-warning" style="font-size: 14px">
|
||||
【阿里云特惠专区】
|
||||
<el-link href="https://www.aliyun.com/minisite/goods?userCode=uotn5vt1&share_source=copy_link" type="primary" target="_black">
|
||||
☛☛点我进入☚☚
|
||||
</el-link>
|
||||
<br />
|
||||
【领取腾讯云通用云产品新用户专属大礼包2860优惠券，每种代金券限量500张，先到先得。】
|
||||
<el-link href="https://curl.qcloud.com/5J4nag8D" type="primary" target="_blank"> ☛☛点我进入☚☚ </el-link>
|
||||
<br />
|
||||
|
||||
【腾讯云限时秒杀活动】
|
||||
<el-link href="https://curl.qcloud.com/4yEoRquq" type="primary" target="_blank">☛☛点我进入☚☚ </el-link>
|
||||
<br />
|
||||
|
||||
【华为特惠专区，多款产品限时特价】
|
||||
<el-link
|
||||
href="https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=a53709d1-149d-49f4-9b89-bf62bd96ef65&utm_source=aGlkX3N0dnZkMWNxejBnOTJ5OA===&utm_medium=cps&utm_campaign=201905"
|
||||
type="primary"
|
||||
target="_blank">
|
||||
☛☛点我进入☚☚
|
||||
</el-link>
|
||||
<br />
|
||||
【领取七牛云通用云产品优惠券】
|
||||
<el-link href="https://s.qiniu.com/FzEfay" type="primary" target="_blank"> ☛☛点我进入☚☚ </el-link>
|
||||
<br />
|
||||
【Gitee 企业版优惠专区】
|
||||
<el-link href="https://gitee.com/enterprises?invite_code=Z2l0ZWUtMTI1NzM1OQ%3D%3D" type="primary" target="_blank"> ☛☛点我进入☚☚ </el-link>
|
||||
<br />
|
||||
<h4 class="text-danger">云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)</h4>
|
||||
</blockquote>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<el-carousel :interval="4000" height="220px">
|
||||
<el-carousel-item v-for="item in promoteList" :key="item.id">
|
||||
<img :src="item.imgUrl" :title="item.title" style="cursor: pointer; width: 100%" width="100%" @click="goTarget(item.link)" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="16" :sm="24">
|
||||
<h2>ZRAdmin.NET {{ $t('layout.backstageManagement') }}</h2>
|
||||
@ -91,7 +50,7 @@
|
||||
<h4>{{ $t('layout.frontendTechnology') }}</h4>
|
||||
<ul>
|
||||
<li>Vue3</li>
|
||||
<li>Vuex</li>
|
||||
<li>Pinia</li>
|
||||
<li>Element plus</li>
|
||||
<li>Axios</li>
|
||||
<li>Sass</li>
|
||||
@ -106,30 +65,6 @@
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="20" class="mt10">
|
||||
<el-col :sm="24" :lg="8">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>{{ $t('layout.donationSupport') }}</span>
|
||||
</template>
|
||||
|
||||
<div class="body">
|
||||
<div style="color: red">{{ $t('layout.rewardUser') }}</div>
|
||||
<img src="@/assets/images/reward.jpg" alt="donate" style="width: 100%" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :sm="24" :lg="6">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>扫码领红包</span>
|
||||
</template>
|
||||
|
||||
<div class="body">
|
||||
<div style="color: red"></div>
|
||||
<img src="@/assets/images/q123.png" alt="donate" style="width: 100%" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :sm="24" :lg="8">
|
||||
<el-card>
|
||||
<template #header>
|
||||
@ -164,60 +99,6 @@ const version = defaultSettings.version
|
||||
function goTarget(url) {
|
||||
window.open(url, '__blank')
|
||||
}
|
||||
const promoteList2 = ref([
|
||||
{
|
||||
id: 1,
|
||||
content: '<h3>【阿里云特惠专区】</h3>',
|
||||
tip: '2核2G ￥426.00/年起，更多优惠券快来领取',
|
||||
link: 'https://www.aliyun.com/minisite/goods?userCode=uotn5vt1&share_source=copy_link'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: '领取<h3>【腾讯云通用云产品优惠券】</h3>',
|
||||
tip: '新用户专属大礼包￥2860优惠券',
|
||||
link: 'https://curl.qcloud.com/5J4nag8D'
|
||||
},
|
||||
{ id: 3, content: '【<h3>腾讯云</h3>限时秒杀活动】', tip: '2核2G4M 45元/年', link: 'https://curl.qcloud.com/4yEoRquq' },
|
||||
{
|
||||
id: 4,
|
||||
content: '【华为特惠专区，多款产品限时特价】',
|
||||
link: 'https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=a53709d1-149d-49f4-9b89-bf62bd96ef65&utm_source=aGlkX3N0dnZkMWNxejBnOTJ5OA===&utm_medium=cps&utm_campaign=201905'
|
||||
},
|
||||
{ id: 5, content: '【领取七牛云通用云产品优惠券】', link: 'https://s.qiniu.com/FzEfay' },
|
||||
{ id: 6, content: '【Gitee 企业版优惠专区】', link: 'https://gitee.com/enterprises?invite_code=Z2l0ZWUtMTI1NzM1OQ%3D%3D' }
|
||||
])
|
||||
const promoteList = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '【腾讯云】推广者专属福利，新客户无门槛领取总价值高达2860元代金券，每种代金券限量500张，先到先得。',
|
||||
imgUrl: 'http://www.izhaorui.cn/images/banner/新用户专享470x250.jpg',
|
||||
link: 'https://curl.qcloud.com/5J4nag8D'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '',
|
||||
imgUrl: 'http://www.izhaorui.cn/images/banner/banner3.jpg',
|
||||
link: 'https://curl.qcloud.com/4yEoRquq'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '【腾讯云】买云服务器，参与礼品兑换、抽奖，最高送价值8000元IPad，还有Bose耳机、千元京东卡等您来！',
|
||||
imgUrl: 'http://www.izhaorui.cn/images/banner/企业盛夏有礼-470x250.jpg',
|
||||
link: 'https://curl.qcloud.com/CAX9v1Vn'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '【腾讯云】DNSPod解析套餐全面升配降价，更高的套餐配置规格，更优的价格方案，全面提升可用性及响应率，专业版限时99元/年！',
|
||||
imgUrl: 'http://www.izhaorui.cn/images/banner/DNS470x250.jpg',
|
||||
link: 'https://curl.qcloud.com/tJlixb8E'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '【腾讯云】中小企业福利专场，多款刚需产品，满足企业通用场景需求，云服务器2.5折起',
|
||||
imgUrl: 'http://www.izhaorui.cn/images/banner/企业福利470x250.jpg',
|
||||
link: 'https://curl.qcloud.com/TnaLauo5'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -246,7 +127,7 @@ const promoteList = ref([
|
||||
}
|
||||
|
||||
font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
//font-size: 13px;
|
||||
color: #676a6c;
|
||||
overflow-x: hidden;
|
||||
|
||||
@ -284,10 +165,4 @@ const promoteList = ref([
|
||||
}
|
||||
}
|
||||
}
|
||||
.promo {
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -178,8 +178,9 @@ proxy.getDicts('sys_normal_disable').then((response) => {
|
||||
const role_id = route.query.roleId
|
||||
roleUserQueryParams.roleId = role_id
|
||||
userQueryParams.roleId = role_id
|
||||
|
||||
const cardLoading = ref(false)
|
||||
function init() {
|
||||
cardLoading.value = true
|
||||
searchRoleUser()
|
||||
|
||||
getRole(roleUserQueryParams.roleId).then((response) => {
|
||||
@ -189,6 +190,7 @@ function init() {
|
||||
roleUserQueryParams.roleKey = data.roleKey
|
||||
}
|
||||
})
|
||||
cardLoading.value = false
|
||||
}
|
||||
|
||||
function searchRoleUser() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user