Files
income_payments_enterprise_…/src/views/system/UserAnnouncementList.vue
T
2021-09-28 15:41:08 +08:00

282 lines
7.7 KiB
Vue

<template>
<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="提醒类型">
<j-dict-select-tag dict-code="notice_type" placeholder="请选择提醒类型"
v-model="queryParam.titile"></j-dict-select-tag>
</a-form-item>
</a-col>
<a-col :xl="7" :lg="8" :md="8" :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">
<a-tooltip>
<template slot="title">
<span v-html="text" class="ellipsis-span"></span>
</template>
<span v-html="myEllipsis(text,20)" 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>
<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"/>
</a-card>
</template>
<script>
import {getAction, putAction} from '@/api/manage'
import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
import {JeroListMixin} from '@/mixins/JeroListMixin'
import {RangeDateMixin} from '@/mixins/RangeDateMixin'
import DynamicNotice from '../../components/tools/DynamicNotice'
import JDictSelectTag from '@comp/dict/JDictSelectTag'
import JDate from '@comp/tools/JDate'
import {Bus} from '@comp/tools/Bus'
export default {
name: 'UserAnnouncementList',
mixins: [JeroListMixin, RangeDateMixin],
components: {
DynamicNotice,
ShowAnnouncement,
JDictSelectTag,
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: 'text'},
width: 160
},
{
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/getMyAnnouncementSend',
editCementSend: 'sys/sysAnnouncementSend/editByAnntIdAndUserId',
readAllMsg: 'sys/sysAnnouncementSend/readAll',
},
loading: false,
openPath: '',
formData: ''
}
},
created() {
Bus.$on('header-notice-change', () => {
this.loadData()
})
},
destroyed: function () { // 离开页面生命周期函数
Bus.$off('header-notice-change')
},
methods: {
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')
}
})
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 {
this.$refs.ShowAnnouncement.detail(record)
}
},
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) {
putAction(this.url.editCementSend, {anntId: record.anntId}).then((res) => {
if (res.success) {
this.loadData()
this.syncHeadNotic(record.anntId)
Bus.$emit('notice-change')
}
})
},
meetingDetail(){
this.$refs.meetingDetailModal.open({id:'1442374989698080770'})
},
uploadMeeting(){
this.$refs.upload.open()
}
}
}
</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
}
z
.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
}
</style>