607 lines
17 KiB
Vue
607 lines
17 KiB
Vue
<template>
|
||
<div class="main-box">
|
||
<!-- 2023-07变更：首页添加公告面板 -->
|
||
<a-card
|
||
:bordered="false"
|
||
:tab-list="tabListTitle"
|
||
:active-tab-key="titleKey"
|
||
@tabChange="key => onTabChange(key, 'titleKey')"
|
||
>
|
||
<a-table
|
||
v-if="titleKey === 'message'"
|
||
ref="table"
|
||
size="middle"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:scroll="{x: 1000}"
|
||
:dataSource="dataSource"
|
||
:pagination="ipagination"
|
||
:loading="loading"
|
||
@change="handleTableChange"
|
||
class="j-table-force-nowrap">
|
||
|
||
<template slot="text" slot-scope="text,record">
|
||
<a-tooltip>
|
||
<template slot="title">
|
||
<span v-html="text" class="ellipsis-span"></span>
|
||
</template>
|
||
<span v-html="myEllipsis(text,35)"
|
||
:class="{'color-meeting':record.titile === '3','color-system':record.titile === '12' }"
|
||
class="ellipsis-span"></span>
|
||
</a-tooltip>
|
||
</template>
|
||
|
||
<template slot="color-text" slot-scope="text,record">
|
||
<!-- 会议通知-->
|
||
<span :class="{'color-meeting':record.titile === '3','color-system':record.titile === '12' }">{{
|
||
text
|
||
}}</span>
|
||
|
||
</template>
|
||
|
||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||
<a @click="showAnnouncement(record)" style="margin-right: 8px">查看</a>
|
||
<a @click="haveRead(record)" v-if="record.readFlag === '0' ">已读</a>
|
||
<a class="readed" v-if="record.readFlag === '1' ">已读</a>
|
||
</span>
|
||
</a-table>
|
||
|
||
<a-table
|
||
v-else-if="titleKey === 'notice'"
|
||
ref="table"
|
||
size="middle"
|
||
rowKey="id"
|
||
:columns="noticeColumns"
|
||
:scroll="{x: 1000}"
|
||
:dataSource="dataSource"
|
||
:pagination="ipagination"
|
||
:loading="loading"
|
||
@change="handleTableChange"
|
||
class="j-table-force-nowrap">
|
||
|
||
<template slot="text" slot-scope="text">
|
||
<a-tooltip>
|
||
<template slot="title">
|
||
<span v-html="text" class="ellipsis-span"></span>
|
||
</template>
|
||
<span v-html="myEllipsis(text,35)"
|
||
class="ellipsis-span"></span>
|
||
</a-tooltip>
|
||
</template>
|
||
|
||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||
<a @click="showNotice(record)" style="margin-right: 8px">查看</a>
|
||
</span>
|
||
</a-table>
|
||
</a-card>
|
||
<div class="download">
|
||
|
||
<div>
|
||
点击下载<span class="primary-color" @click="downloadManual('PC')">企业PC端使用手册</span>
|
||
</div>
|
||
<div style="margin-left: 8px;">
|
||
<span class="primary-color" @click="downloadManual('applet')">企业小程序使用手册</span>
|
||
</div>
|
||
<span style="margin-left: 10px">技术支持电话：022-84379290</span>
|
||
</div>
|
||
<show-announcement ref="ShowAnnouncement"></show-announcement>
|
||
<dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
|
||
<show-notice-modal ref="showNoticeModal"></show-notice-modal>
|
||
</div>
|
||
<!-- <div class="index-home">-->
|
||
<!-- <img class="index-bgimg" src="../../assets/indexImgs/index-bg.png"/>-->
|
||
|
||
<!-- <div class="content">-->
|
||
<!-- <div class="router-list">-->
|
||
<!-- <div @click="toRouterPath(item)" v-for="(item,index) of IndexRouter" :key="index" class="router-list-item">-->
|
||
<!-- <div class="center">-->
|
||
<!-- <img :src="item.meta.icon"/>-->
|
||
<!-- <p class="router-list-title">{{ item.meta.title }}</p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="message-list">-->
|
||
<!-- <div class="message-list-content">-->
|
||
<!-- <div class="message-list-title" style="margin-bottom: 10px;">-->
|
||
<!-- <img src="../../assets/indexImgs/file.png"/>-->
|
||
<!-- <span class="my-notice">我的消息</span>-->
|
||
<!-- <span class="query-list" @click="toUserAnnouncementList">查看更多></span>-->
|
||
<!-- </div>-->
|
||
<!-- <div>-->
|
||
<!-- <div class="message-list-item" v-for="item of dataMessageList" :key="item.id">-->
|
||
<!-- <div class="message-list-item-name">-->
|
||
<!-- <div class="message-list-item-name-title">【{{ item.titile_dictText }}】</div>-->
|
||
<!-- <a-tooltip>-->
|
||
<!-- <template slot="title">-->
|
||
<!-- <span v-html="item.msgContent" class="ellipsis-span"></span>-->
|
||
<!-- </template>-->
|
||
<!-- <span v-html="myEllipsis(item.msgContent,35)" class="ellipsis-span"></span>-->
|
||
<!-- </a-tooltip>-->
|
||
<!-- </div>-->
|
||
<!-- <!– <span v-html="item.msgContent"></span>–>-->
|
||
<!-- <span class="message-list-item-time">{{ item.sendTime }}</span>-->
|
||
<!-- <span class="operate">-->
|
||
<!-- <a @click="showAnnouncement(item)" style="margin-right: 8px">查看</a>-->
|
||
<!-- <a @click="haveRead(item)" v-if="item.readFlag === '0' ">已读</a>-->
|
||
<!-- <a class="readed" v-if="item.readFlag === '1' ">已读</a>-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- </div>-->
|
||
</template>
|
||
|
||
<script>
|
||
import IndexRouter from '@views/dashboard/indexRouter'
|
||
import {getAction, putAction} from '@api/manage'
|
||
import {Bus} from '@comp/tools/Bus'
|
||
import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
|
||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||
import DynamicNotice from '@comp/tools/DynamicNotice'
|
||
// 查看公告详情
|
||
import ShowNoticeModal from './components/ShowNoticeModal'
|
||
|
||
|
||
export default {
|
||
name: 'Analysis',
|
||
components: {
|
||
DynamicNotice,
|
||
ShowAnnouncement,
|
||
ShowNoticeModal
|
||
},
|
||
mixins: [JeroListMixin],
|
||
data() {
|
||
return {
|
||
IndexRouter,
|
||
columns: [
|
||
{
|
||
title: '提醒类型',
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'titile_dictText',
|
||
scopedSlots: {customRender: 'color-text'}
|
||
}, {
|
||
title: '内容',
|
||
align: 'center',
|
||
dataIndex: 'msgContent',
|
||
scopedSlots: {customRender: 'text'}
|
||
}, {
|
||
title: '提醒时间',
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'sendTime',
|
||
scopedSlots: {customRender: 'text'}
|
||
}, {
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
align: 'center',
|
||
width: 160,
|
||
scopedSlots: {customRender: 'action'}
|
||
}
|
||
],
|
||
noticeColumns: [
|
||
{
|
||
title: '名称',
|
||
align: 'center',
|
||
dataIndex: 'noticeName',
|
||
scopedSlots: {customRender: 'text'}
|
||
}, {
|
||
title: '内容',
|
||
align: 'center',
|
||
dataIndex: 'noticeContent',
|
||
scopedSlots: {customRender: 'text'}
|
||
}, {
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
align: 'center',
|
||
width: 160,
|
||
scopedSlots: {customRender: 'action'}
|
||
}
|
||
],
|
||
tabListTitle: [
|
||
{ key: 'message', tab: '消息' },
|
||
{ key: 'notice', tab: '公告'}
|
||
],
|
||
titleKey: 'message',
|
||
url: {
|
||
list: '/sys/sysAnnouncementSend/getCompanyMyAnnouncementSend',
|
||
editCementSend: 'sys/sysAnnouncementSend/editCompanyByAnntIdAndUserId',
|
||
getUnreadMessage: '/sys/sysAnnouncementSend/getDeadlineUnreadSend',
|
||
overtimeMessageRead: '/sys/sysAnnouncementSend/allReadDeadlineUnreadSend' // 超时未读信息变已读
|
||
},
|
||
// 消息数据
|
||
dataMessageList: [],
|
||
openPath: '',
|
||
formData: '',
|
||
disableMixinCreated: true
|
||
}
|
||
},
|
||
created() {
|
||
// this.loadData()
|
||
// Bus.$on('header-notice-change', () => {
|
||
// this.loadData()
|
||
// })
|
||
this.filters.readFlag = '0'
|
||
this.loadData(1)
|
||
},
|
||
mounted () {
|
||
// 2023-07变更：调接口看有没有没到提醒截止时间未读的，如果有则弹框提示
|
||
getAction(this.url.getUnreadMessage, {}).then(res => {
|
||
if (res.success) {
|
||
if (res.result && res.result.length > 0) {
|
||
const messageArr = res.result.map(item => item.msgContent)
|
||
const anntIds = res.result.map(item => item.anntId).join(',')
|
||
// 说明有未读的消息
|
||
this.$warning({
|
||
title: '未读提醒',
|
||
content: h => h(
|
||
'div',
|
||
messageArr.map((item, index) => { return h('p', { key: index }, item)})
|
||
),
|
||
onOk: () => {
|
||
// 点击知道了，调接口把这些消息全部已读
|
||
getAction(this.url.overtimeMessageRead, {anntIds: anntIds}).then(res => {
|
||
if (res.success) {
|
||
this.loadData()
|
||
this.syncHeadNotic()
|
||
Bus.$emit('notice-change')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
/*
|
||
* 跳转相应的路径
|
||
* */
|
||
toRouterPath(record) {
|
||
this.$router.push({
|
||
path: record.path
|
||
})
|
||
},
|
||
// 下载用户使用手册
|
||
downloadManual(type) {
|
||
switch (type) {
|
||
case 'PC':
|
||
window.open('https://cwp.catarc.org.cn/企业pc端使用手册.docx', '_self')
|
||
break
|
||
case 'applet':
|
||
window.open('http://cwp.catarc.org.cn/企业小程序使用手册.docx', '_self')
|
||
break
|
||
}
|
||
},
|
||
|
||
// loadData
|
||
// loadData() {
|
||
// const param = {
|
||
// readFlag: '0',
|
||
// }
|
||
// getAction(this.url.list, param).then(res => {
|
||
// this.dataMessageList = []
|
||
// if (res.success) {
|
||
// this.dataMessageList = [...res.result.records]
|
||
// }
|
||
// })
|
||
// },
|
||
/*
|
||
* 跳转我的消息
|
||
* */
|
||
toUserAnnouncementList() {
|
||
this.$router.push({
|
||
path: '/system/userAnnouncementList'
|
||
})
|
||
},
|
||
/*
|
||
* 字符串截取
|
||
* * */
|
||
myEllipsis(value, vlength = 25) {
|
||
if (!value) {
|
||
return value
|
||
}
|
||
if (value.length > vlength) {
|
||
return value.slice(0, vlength) + '...'
|
||
}
|
||
return value
|
||
},
|
||
showAnnouncement(record) {
|
||
putAction(this.url.editCementSend, {anntId: record.anntId}).then((res) => {
|
||
if (res.success) {
|
||
this.loadData()
|
||
this.syncHeadNotic(record.anntId)
|
||
Bus.$emit('notice-change')
|
||
}
|
||
})
|
||
const param = JSON.parse(record.busId)
|
||
if (record.openType === 'component') {
|
||
this.openPath = record.openPage
|
||
// 将参数传入
|
||
this.formData = param
|
||
this.$refs.showDynamNotice.detail()
|
||
} else if (record.openType === 'url') {
|
||
console.log(record.openPage, 'url')
|
||
const param = JSON.parse(record.busId)
|
||
// 如果是url 跳转页面
|
||
this.$router.push({
|
||
path: record.openPage,
|
||
query: param
|
||
})
|
||
} else if (record.openType === 'href') {
|
||
let url = `${record.openPage}=${param.id}`
|
||
// 返回的是报名页面的链接 打开网址
|
||
window.open(url, '_blank')
|
||
} else if (record.openType === 'project') {
|
||
const param = JSON.parse(record.busId)
|
||
// 1 普通项目 2 工作组项目 4 资料网员 7分标委 8理事会
|
||
switch (param.type) {
|
||
case '1':
|
||
this.openPath = param.path
|
||
// 将参数传入
|
||
// delete param.path
|
||
this.formData = param
|
||
this.$refs.showDynamNotice.detail()
|
||
break
|
||
case '4':
|
||
this.openPath = param.path
|
||
// 将参数传入
|
||
// delete param.path
|
||
this.formData = param
|
||
this.$refs.showDynamNotice.detail()
|
||
break
|
||
case '2':
|
||
|
||
// 如果是url 跳转页面
|
||
this.$router.push({
|
||
path: param.path,
|
||
query: {
|
||
projectId: param.projectId,
|
||
workingGroupId: param.workingGroupId
|
||
}
|
||
})
|
||
break
|
||
case '7':
|
||
|
||
// 如果是url 跳转页面
|
||
this.$router.push({
|
||
path: param.path,
|
||
query: {
|
||
id: param.id,
|
||
abbreviation: param.abbreviation
|
||
}
|
||
})
|
||
break
|
||
case '8':
|
||
// 如果是url 跳转页面
|
||
this.$router.push({
|
||
path: param.path,
|
||
query: {
|
||
id: param.id
|
||
}
|
||
})
|
||
break
|
||
}
|
||
|
||
} else {
|
||
this.$refs.ShowAnnouncement.detail(record)
|
||
}
|
||
},
|
||
haveRead(record) {
|
||
const that = this
|
||
this.$confirm({
|
||
title: '确认已读',
|
||
content: '是否确认将消息改为已读状态?',
|
||
onOk: function () {
|
||
putAction(that.url.editCementSend, {anntId: record.anntId}).then((res) => {
|
||
if (res.success) {
|
||
that.loadData()
|
||
that.syncHeadNotic(record.anntId)
|
||
Bus.$emit('notice-change')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
syncHeadNotic(anntId) {
|
||
getAction('sys/annountCement/syncNotic', {anntId: anntId})
|
||
},
|
||
// 2023-07变更：首页添加公告面板
|
||
onTabChange(key, type) {
|
||
this[type] = key
|
||
this.ipagination = {
|
||
current: 1,
|
||
pageSize: 10,
|
||
pageSizeOptions: ['10', '20', '30', '50', '100'],
|
||
showTotal: (total, range) => {
|
||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||
},
|
||
showQuickJumper: true,
|
||
showSizeChanger: true,
|
||
total: 0
|
||
}
|
||
this.dataSource = []
|
||
if (key === 'message') {
|
||
this.url.list = '/sys/sysAnnouncementSend/getCompanyMyAnnouncementSend'
|
||
} else if (key === 'notice') {
|
||
this.url.list = '/sysNotice/page'
|
||
this.filters.noticeStatus = 1
|
||
}
|
||
this.loadData(1)
|
||
},
|
||
// 查看公告
|
||
showNotice (record) {
|
||
this.$refs.showNoticeModal.look(record)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.ellipsis-span /deep/ * {
|
||
display: inline;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.index-home {
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 1100px;
|
||
height: 100vh;
|
||
min-height: 617px;
|
||
}
|
||
|
||
.index-bgimg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
width: 75%;
|
||
min-width: 1028px;
|
||
height: 80%;
|
||
min-height: 617px;
|
||
|
||
.router-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 14%;
|
||
min-width: 140px;
|
||
height: 100%;
|
||
|
||
&-item {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 17%;
|
||
background-image: url("../../assets/indexImgs/router-item.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 100% 102%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
&-title {
|
||
margin: 4px 0 0 0;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #eee;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.message-list {
|
||
flex: 1;
|
||
background-image: url("../../assets/indexImgs/index-message.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 100% 102%;
|
||
|
||
&-content {
|
||
padding: 40px;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.my-notice {
|
||
margin-left: 8px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #eee;
|
||
}
|
||
|
||
.query-list {
|
||
float: right;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
opacity: .7;
|
||
color: #eee;
|
||
}
|
||
}
|
||
|
||
&-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
color: #FFF;
|
||
font-weight: 500;
|
||
margin-bottom: 1.5%;
|
||
}
|
||
|
||
&-item-name {
|
||
display: flex;
|
||
width: 35rem;
|
||
}
|
||
|
||
//防止【】的内容换行
|
||
&-item-name-title {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ellipsis-span {
|
||
/deep/ p {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
&-item-time {
|
||
width: 10rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
|
||
.operate {
|
||
a {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
//width: 150px;
|
||
}
|
||
|
||
/*会议通知的颜色*/
|
||
.color-meeting {
|
||
color: #FF7200 !important;
|
||
}
|
||
|
||
/*系统通知的消息*/
|
||
.color-system {
|
||
color: #690AF7 !important;
|
||
}
|
||
|
||
.download {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.primary-color {
|
||
color: #069F99;
|
||
cursor: pointer;
|
||
}
|
||
|
||
</style>
|