472 lines
14 KiB
Vue
472 lines
14 KiB
Vue
<template>
|
||
<div class="main-box">
|
||
<a-card :bordered="false">
|
||
<!-- 查询区域 -->
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||
<a-row :gutter="24">
|
||
|
||
<a-col :xl="7" :lg="8" :md="8" :sm="24">
|
||
<a-form-item label="提醒类型">
|
||
<a-select
|
||
v-model="queryParam.titile"
|
||
show-search
|
||
allowClear
|
||
option-filter-prop="children"
|
||
:filter-option="filterOption"
|
||
placeholder="请选择提醒类型"
|
||
>
|
||
<a-select-option v-for="(item,index) in noticeTypeList" :key="index" :value="item.value">{{
|
||
item.name
|
||
}}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xxl="7" :xl="10" :md="10" :sm="24">
|
||
<a-form-item label="提醒时间">
|
||
<j-date
|
||
placeholder="请选择开始日期"
|
||
class="query-group-cust"
|
||
v-model="queryParam.startTime"
|
||
:disabled-date="disabledStartDate">
|
||
</j-date>
|
||
<span class="query-group-split-cust"></span>
|
||
<j-date
|
||
placeholder="请选择结束日期"
|
||
class="query-group-cust"
|
||
v-model="queryParam.endTime"
|
||
:disabled-date="disabledEndDate">
|
||
</j-date>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<a-col :xl="6" :lg="8" :md="8" :sm="24">
|
||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||
<a-button class="reset-button" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||
</span>
|
||
</a-col>
|
||
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
|
||
<a-table
|
||
ref="table"
|
||
size="default"
|
||
bordered
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:pagination="ipagination"
|
||
:loading="loading"
|
||
@change="handleTableChange">
|
||
<span slot="templateContent" slot-scope="text,record">
|
||
<a-tooltip>
|
||
<template slot="title">
|
||
<span v-html="text" class="ellipsis-span"></span>
|
||
</template>
|
||
<span v-html="myEllipsis(text,40)" :class="{'color-meeting':record.titile === '3','color-system':record.titile === '12' }" class="ellipsis-span"></span>
|
||
</a-tooltip>
|
||
</span>
|
||
|
||
<template slot="text" slot-scope="text">
|
||
<j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
|
||
<span v-else></span>
|
||
</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)">查看</a>
|
||
<a @click="haveRead(record)" v-if="record.readFlag === '0' ">已读</a>
|
||
<a class="readed" v-if="record.readFlag === '1' ">已读</a>
|
||
</span>
|
||
</a-table>
|
||
<show-announcement ref="ShowAnnouncement"></show-announcement>
|
||
<dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
|
||
<member-dynamic-notice ref="memberDynamNotice" :path="openPath" :formData="formData"/>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAction, putAction } from '@/api/manage'
|
||
import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
|
||
// 会员系统的消息组件
|
||
import MemberDynamicNotice from '../standardsAssociation/announce/MemberDynamicNotice'
|
||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||
import { RangeDateMixin } from '@/mixins/RangeDateMixin'
|
||
import DynamicNotice from '../../components/tools/DynamicNotice'
|
||
import JDate from '@comp/tools/JDate'
|
||
import { Bus } from '@comp/tools/Bus'
|
||
import { parseJumpParameter, OpenTypeEnum } from '../standardsAssociation/announce/announceUtil'
|
||
|
||
export default {
|
||
name: 'UserAnnouncementList',
|
||
mixins: [JeroListMixin, RangeDateMixin],
|
||
components: {
|
||
DynamicNotice,
|
||
ShowAnnouncement,
|
||
MemberDynamicNotice,
|
||
JDate
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
description: '系统通告表管理页面',
|
||
queryParam: {},
|
||
columns: [
|
||
{
|
||
title: '序号',
|
||
dataIndex: '',
|
||
key: 'rowIndex',
|
||
width: 80,
|
||
align: 'center',
|
||
customRender: function (t, r, index) {
|
||
return parseInt(index) + 1
|
||
}
|
||
},
|
||
{
|
||
title: '提醒类型',
|
||
align: 'center',
|
||
dataIndex: 'titile_dictText',
|
||
scopedSlots: { customRender: 'color-text' },
|
||
width: 200
|
||
},
|
||
{
|
||
title: '提醒内容',
|
||
align: 'center',
|
||
dataIndex: 'msgContent',
|
||
scopedSlots: { customRender: 'templateContent' }
|
||
},
|
||
{
|
||
title: '提醒时间',
|
||
align: 'center',
|
||
dataIndex: 'sendTime',
|
||
scopedSlots: { customRender: 'text' },
|
||
width: 240
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
align: 'center',
|
||
scopedSlots: { customRender: 'action' },
|
||
width: 160
|
||
}
|
||
],
|
||
url: {
|
||
list: '/sys/sysAnnouncementSend/getCompanyMyAnnouncementSend',
|
||
editCementSend: 'sys/sysAnnouncementSend/editCompanyByAnntIdAndUserId',
|
||
readAllMsg: 'sys/sysAnnouncementSend/readAll'
|
||
},
|
||
// eeditCompanyByAnntIdAndUserId
|
||
loading: false,
|
||
openPath: '',
|
||
formData: '',
|
||
// 企业短消息提醒类型
|
||
noticeTypeList: [
|
||
{
|
||
name: '项目通知',
|
||
value: '1'
|
||
},
|
||
{
|
||
name: '会议通知',
|
||
value: '3'
|
||
},
|
||
{
|
||
name: '邮寄通知',
|
||
value: '7'
|
||
},
|
||
{
|
||
name: '文件通知',
|
||
value: '6'
|
||
},
|
||
{
|
||
name: '催款通知',
|
||
value: '8'
|
||
},
|
||
{
|
||
name: '开票通知',
|
||
value: '10'
|
||
},
|
||
{
|
||
name: '缴费通知',
|
||
value: '11'
|
||
},
|
||
{
|
||
name:'系统通知',
|
||
value: '12'
|
||
},
|
||
{
|
||
name:'缴费提醒（会员）',
|
||
value: '13'
|
||
},
|
||
{
|
||
name:'证书缴费（会员）',
|
||
value: '14'
|
||
},
|
||
{
|
||
name:'会员到期提醒（会员）',
|
||
value: '15'
|
||
},
|
||
{
|
||
name:'证书（会员）',
|
||
value: '16'
|
||
},
|
||
{
|
||
name:'开票信息（会员）',
|
||
value: '17'
|
||
},
|
||
{
|
||
name:'会员注册（会员）',
|
||
value: '18'
|
||
},
|
||
{
|
||
name:'变更联系人（会员）',
|
||
value: '19'
|
||
},
|
||
{
|
||
name:'单位名称变更（会员）',
|
||
value: '20'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
Bus.$on('header-notice-change', () => {
|
||
this.loadData()
|
||
})
|
||
},
|
||
destroyed: function () { // 离开页面生命周期函数
|
||
Bus.$off('header-notice-change')
|
||
},
|
||
methods: {
|
||
filterOption(input, option) {
|
||
return (
|
||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
)
|
||
},
|
||
handleDetail: function (record) {
|
||
this.$refs.sysAnnouncementModal.detail(record)
|
||
this.$refs.sysAnnouncementModal.title = '查看'
|
||
|
||
},
|
||
showAnnouncement(record) {
|
||
putAction(this.url.editCementSend, { anntId: record.anntId }).then((res) => {
|
||
if (res.success) {
|
||
this.loadData()
|
||
this.syncHeadNotic(record.anntId)
|
||
Bus.$emit('notice-change')
|
||
}
|
||
})
|
||
// 管理系统 进行相关消息的展示
|
||
if(this.isIncomePaySystem(record)) {
|
||
const param = record.busId ? 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)
|
||
}
|
||
} else {
|
||
// 会员系统相关的消息
|
||
|
||
// 2021-09-24 判断当前消息是否有 jumpParameter 参数，如果有的话需要跳转页面或者弹框；没有的话 就直接显示详情页
|
||
// jumpParameter示例 ：paymentInfoId:1441329411264643074,memberId:1413419593870872578,paymentType:0,window:PAYMENT_CHECK"
|
||
if (record.jumpParameter) {
|
||
// 对当前的jumpParameter 进行解析
|
||
const resultParams = parseJumpParameter(record.jumpParameter)
|
||
// 对jumpParam 中的window进行解析判断，组件-进行模态框的显示 页面-进行路由的跳转
|
||
if (resultParams.openType === OpenTypeEnum.COMPONENT.value) {
|
||
this.openPath = resultParams.openPage
|
||
this.formData = { ...resultParams }
|
||
this.$refs.memberDynamNotice.detail()
|
||
} else if (resultParams.openType === OpenTypeEnum.PAGE.value) {
|
||
this.$router.push(resultParams.openPage)
|
||
} else {
|
||
// 最后一种情况，特殊处理，单位名称变更通过
|
||
// this.handleLogout()
|
||
this.$refs.ShowAnnouncement.detail(record)
|
||
}
|
||
} else {
|
||
this.$refs.ShowAnnouncement.detail(record)
|
||
}
|
||
}
|
||
},
|
||
// 判断是否是来款系统 ； 通过titile字段进行判断，目前13-20是会员系统的消息；其他是来款系统的消息
|
||
isIncomePaySystem(record) {
|
||
const judgeNum = Number(record.titile)
|
||
if(judgeNum >= 13 && judgeNum <= 20) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
},
|
||
syncHeadNotic(anntId) {
|
||
getAction('sys/annountCement/syncNotic', { anntId: anntId })
|
||
},
|
||
readAll() {
|
||
var that = this
|
||
that.$confirm({
|
||
title: '确认操作',
|
||
content: '是否全部标注已读?',
|
||
onOk: function () {
|
||
putAction(that.url.readAllMsg).then((res) => {
|
||
if (res.success) {
|
||
that.$message.success(res.message)
|
||
that.loadData()
|
||
that.syncHeadNotic()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/*
|
||
* 字符串截取
|
||
* * */
|
||
myEllipsis(value, vlength = 25) {
|
||
if (!value) {
|
||
return value
|
||
}
|
||
if (value.length > vlength) {
|
||
return value.slice(0, vlength) + '...'
|
||
}
|
||
return value
|
||
},
|
||
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')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.ellipsis-span /deep/ * {
|
||
display: inline;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.readed {
|
||
user-select: none;
|
||
color: #999;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ant-card-body .table-operator {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.anty-row-operator button {
|
||
margin: 0 5px
|
||
}
|
||
|
||
.ant-btn-danger {
|
||
background-color: #ffffff
|
||
}
|
||
|
||
.ant-modal-cust-warp {
|
||
height: 100%
|
||
}
|
||
|
||
.ant-modal-cust-warp .ant-modal-body {
|
||
height: calc(100% - 110px) !important;
|
||
overflow-y: auto
|
||
}
|
||
|
||
.ant-modal-cust-warp .ant-modal-content {
|
||
height: 90% !important;
|
||
overflow-y: hidden
|
||
}
|
||
/*会议通知的颜色*/
|
||
.color-meeting {
|
||
color: #FF7200;
|
||
}
|
||
/*系统通知的消息*/
|
||
.color-system {
|
||
color: #690AF7;
|
||
}
|
||
</style>
|