|
|
@ -8,53 +8,187 @@ |
|
|
</ul> |
|
|
</ul> |
|
|
<div class="process-right"> |
|
|
<div class="process-right"> |
|
|
<div class="head-container"> |
|
|
<div class="head-container"> |
|
|
<!-- <el-button icon="el-icon-delete" :disabled="!(selections.length)" size="mini" @click="delVisible=true">删除</el-button> |
|
|
|
|
|
<el-button class="iconfont icon-biaojiyidu-fanbai" :disabled="!(selections.length)" size="mini" @click="handleRead">标记已读</el-button> --> |
|
|
|
|
|
<el-input v-model="query.keyword" clearable size="small" placeholder="输入标题关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" /> |
|
|
|
|
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
|
|
|
|
|
<!-- @click="getTableData" --> |
|
|
|
|
|
|
|
|
<el-input v-model="search" clearable size="small" placeholder="输入标题关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" /> |
|
|
|
|
|
<date-range-picker v-model="blurryTime" class="date-item" /> |
|
|
<el-button icon="el-icon-search" size="mini" class="user-search-btn">搜索</el-button> |
|
|
<el-button icon="el-icon-search" size="mini" class="user-search-btn">搜索</el-button> |
|
|
<el-button class="iconfont icon-quanbuyidu" size="mini" @click="handleAllRead">全部已读</el-button> |
|
|
<el-button class="iconfont icon-quanbuyidu" size="mini" @click="handleAllRead">全部已读</el-button> |
|
|
</div> |
|
|
</div> |
|
|
<MessageList :list-index="listIndex" /> |
|
|
|
|
|
|
|
|
<!-- <MessageList :list-index="listIndex" :items="items" /> --> |
|
|
|
|
|
<div v-loading="loading" class="message-center-list"> |
|
|
|
|
|
<div v-if="hasMore" class="more-btn" @click="loadMore"><i class="iconfont icon-jiazaigengduo" />点击加载更多</div> |
|
|
|
|
|
<div v-for="(item,index) in items" :key="index" class="message-item" @click="handleDetail(item)"> |
|
|
|
|
|
<div class="message-date">{{ item.createTime | parseTime }}</div> |
|
|
|
|
|
<div class="message-cont"> |
|
|
|
|
|
<div class="message-cont-info"> |
|
|
|
|
|
<span :class="['message-type-title',{'type-title1': listIndex === 0 },{'type-title2': listIndex === 1 },{'type-title3': listIndex === 2 },{'type-title4': listIndex === 3 }]">{{ titleType }}</span> |
|
|
|
|
|
<span class="is-read-tip">{{ item.isRead === 0 ? '未读' : '已读' }}</span> |
|
|
|
|
|
<div class="message-title">{{ item.noticeTitle }}</div> |
|
|
|
|
|
<ul class="message-list-info"> |
|
|
|
|
|
<li>创建人：{{ item.createBy }}</li> |
|
|
|
|
|
<li>创建时间：{{ item.createTime | parseTime }}</li> |
|
|
|
|
|
</ul> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="message-more">查看详情<i class="iconfont icon-chakan" /></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<el-dialog :visible.sync="messageVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="消息详情"> |
|
|
|
|
|
<div class="setting-dialog"> |
|
|
|
|
|
<div class="message-detail"> |
|
|
|
|
|
<span :class="['message-type-title',{'type-title1': listIndex === 0 },{'type-title2': listIndex === 1 },{'type-title3': listIndex === 2 },{'type-title4': listIndex === 3 }]">{{ titleType }}</span> |
|
|
|
|
|
<span class="detail-date">【{{ detailInfo && detailInfo.create_by }}】 {{ detailInfo && detailInfo.create_time | parseTime }}</span> |
|
|
|
|
|
<div class="message-title">{{ detailInfo && detailInfo.noticeTitle }}</div> |
|
|
|
|
|
<el-input v-model="detailInfo.noticeContext" placeholder="请输入" type="textarea" :rows="10" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
|
|
<el-button v-if="detailInfo.noticeType === 1" @click="dealWithCont">流程处理</el-button> |
|
|
|
|
|
<el-button type="primary" @click="messageVisible=false">确定</el-button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
<detail ref="detail" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
|
|
import { FetchMySystemNotice, FetchInitNoticeDetails } from '@/api/system/new' |
|
|
import { getUserNotice, isread } from '@/api/system/logs' |
|
|
import { getUserNotice, isread } from '@/api/system/logs' |
|
|
import CRUD, { presenter, header, crud } from '@crud/crud' |
|
|
|
|
|
import MessageList from './module/list.vue' |
|
|
|
|
|
|
|
|
// import CRUD, { presenter, header, crud } from '@crud/crud' |
|
|
|
|
|
// import MessageList from './module/list.vue' |
|
|
|
|
|
import detail from '../processCenter/module/form' |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'MessageCenter', |
|
|
name: 'MessageCenter', |
|
|
inject: ['reload'], |
|
|
inject: ['reload'], |
|
|
components: { DateRangePicker, MessageList }, |
|
|
|
|
|
mixins: [presenter(), crud(), header()], |
|
|
|
|
|
cruds() { |
|
|
|
|
|
return CRUD({ |
|
|
|
|
|
url: 'api/users/notice', |
|
|
|
|
|
sort: ['createTime,desc'], |
|
|
|
|
|
optShow: {} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
components: { DateRangePicker, detail }, |
|
|
|
|
|
// mixins: [presenter(), crud(), header()], |
|
|
|
|
|
// cruds() { |
|
|
|
|
|
// return CRUD({ |
|
|
|
|
|
// url: 'api/news/mySystemNotice', |
|
|
|
|
|
// sort: ['createTime,desc'], |
|
|
|
|
|
// optShow: {} |
|
|
|
|
|
// }) |
|
|
|
|
|
// }, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
selections: [], |
|
|
selections: [], |
|
|
query: { |
|
|
|
|
|
createTime: [], |
|
|
|
|
|
keyword: null |
|
|
|
|
|
|
|
|
blurryTime: [], |
|
|
|
|
|
search: null, |
|
|
|
|
|
listIndex: 0, |
|
|
|
|
|
titleType: '系统通知', |
|
|
|
|
|
items: [], |
|
|
|
|
|
page: { |
|
|
|
|
|
total: 0, |
|
|
|
|
|
size: 10, |
|
|
|
|
|
page: 1, |
|
|
|
|
|
totalPages: 0 |
|
|
}, |
|
|
}, |
|
|
listIndex: 0 |
|
|
|
|
|
|
|
|
loading: false, |
|
|
|
|
|
messageVisible: false, |
|
|
|
|
|
detailInfo: {}, |
|
|
|
|
|
opinionTxt: '', |
|
|
|
|
|
hasMore: true // 是否还有更多数据 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
|
|
|
this.loadData() |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
handleClick(index) { |
|
|
handleClick(index) { |
|
|
this.listIndex = index |
|
|
this.listIndex = index |
|
|
|
|
|
this.getIndex() |
|
|
}, |
|
|
}, |
|
|
|
|
|
getParams() { |
|
|
|
|
|
const params = { |
|
|
|
|
|
search: this.search, |
|
|
|
|
|
page: this.page.page - 1, |
|
|
|
|
|
size: this.page.size, |
|
|
|
|
|
startTime: this.blurryTime[0], |
|
|
|
|
|
endTime: this.blurryTime[1], |
|
|
|
|
|
sort: 'createTime,desc' |
|
|
|
|
|
} |
|
|
|
|
|
return params |
|
|
|
|
|
}, |
|
|
|
|
|
getTableData() { |
|
|
|
|
|
this.loading = true |
|
|
|
|
|
FetchMySystemNotice(this.getParams()).then(res => { |
|
|
|
|
|
this.page.total = res.totalElements |
|
|
|
|
|
this.page.totalPages = res.totalPages |
|
|
|
|
|
const table = res.content |
|
|
|
|
|
// table.forEach(item => { |
|
|
|
|
|
// item.pushUserName = item.noticeUsers[0].pushUserName |
|
|
|
|
|
// item.isRead = item.noticeUsers[0].isRead |
|
|
|
|
|
// }) |
|
|
|
|
|
this.items = table.concat(table) |
|
|
|
|
|
this.loading = false |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
loadData() { |
|
|
|
|
|
this.loading = true |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.getTableData() |
|
|
|
|
|
this.page.page++ |
|
|
|
|
|
this.loading = false |
|
|
|
|
|
if (this.page.page >= this.page.totalPages) { |
|
|
|
|
|
this.hasMore = false |
|
|
|
|
|
} |
|
|
|
|
|
}, 1000) |
|
|
|
|
|
}, |
|
|
|
|
|
loadMore() { |
|
|
|
|
|
if (this.loading) { |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
this.loadData() |
|
|
|
|
|
}, |
|
|
|
|
|
handleDetail(item) { |
|
|
|
|
|
switch (item.noticaType) { |
|
|
|
|
|
case 0: |
|
|
|
|
|
this.opinionTxt = '这是一条系统通知' |
|
|
|
|
|
break |
|
|
|
|
|
case 1: |
|
|
|
|
|
this.opinionTxt = '这是一条有流程达到提醒' |
|
|
|
|
|
break |
|
|
|
|
|
case 2: |
|
|
|
|
|
this.opinionTxt = '这是一条流程完成提醒' |
|
|
|
|
|
break |
|
|
|
|
|
case 3: |
|
|
|
|
|
this.opinionTxt = '这是一条赋权到期提醒' |
|
|
|
|
|
break |
|
|
|
|
|
} |
|
|
|
|
|
FetchInitNoticeDetails({ 'noticeId': item.noticeId }).then((res) => { |
|
|
|
|
|
console.log(res) |
|
|
|
|
|
this.detailInfo = res |
|
|
|
|
|
this.messageVisible = true |
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
console.log(err) |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
getIndex() { |
|
|
|
|
|
switch (this.listIndex) { |
|
|
|
|
|
case 0: |
|
|
|
|
|
this.titleType = '系统通知' |
|
|
|
|
|
this.opinionTxt = '这是一条系统通知' |
|
|
|
|
|
break |
|
|
|
|
|
case 1: |
|
|
|
|
|
this.titleType = '有流程达到' |
|
|
|
|
|
this.opinionTxt = '这是一条有流程达到提醒' |
|
|
|
|
|
break |
|
|
|
|
|
case 2: |
|
|
|
|
|
this.titleType = '流程完成提醒' |
|
|
|
|
|
this.opinionTxt = '这是一条流程完成提醒' |
|
|
|
|
|
break |
|
|
|
|
|
case 3: |
|
|
|
|
|
this.titleType = '赋权到期提醒' |
|
|
|
|
|
this.opinionTxt = '这是一条赋权到期提醒' |
|
|
|
|
|
break |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
// 标记已读 |
|
|
// 标记已读 |
|
|
handleRead() { |
|
|
handleRead() { |
|
|
isread(this.getUserMsgId(this.selections)).then(res => { |
|
|
isread(this.getUserMsgId(this.selections)).then(res => { |
|
|
@ -69,7 +203,6 @@ export default { |
|
|
const params = { |
|
|
const params = { |
|
|
page: 0, |
|
|
page: 0, |
|
|
size: 10, |
|
|
size: 10, |
|
|
// createTime: [], |
|
|
|
|
|
sort: 'createTime,desc' |
|
|
sort: 'createTime,desc' |
|
|
} |
|
|
} |
|
|
const list = [] |
|
|
const list = [] |
|
|
@ -99,4 +232,145 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
|
|
|
[data-theme=dark] .message-center-list{ |
|
|
|
|
|
background-color: transparent; |
|
|
|
|
|
.more-btn{ |
|
|
|
|
|
color: #339cff; |
|
|
|
|
|
} |
|
|
|
|
|
.message-item{ |
|
|
|
|
|
.message-cont{ |
|
|
|
|
|
background-color: #02255f; |
|
|
|
|
|
.message-cont-info{ |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
.is-read-tip{ |
|
|
|
|
|
color: #1890ff; |
|
|
|
|
|
border: 1px solid #339cff; |
|
|
|
|
|
background-color: #02255f; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message-more{ |
|
|
|
|
|
color: #3a99fd; |
|
|
|
|
|
border-top: 1px solid #113d72; |
|
|
|
|
|
i{ |
|
|
|
|
|
color: #3a99fd; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message-title{ |
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
color: #3a99fd; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.message-center-list{ |
|
|
|
|
|
height: calc(100% - 90px); |
|
|
|
|
|
padding: 16px 30px; |
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
background-color: #F5F5F5; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
overflow-y: scroll; |
|
|
|
|
|
.more-btn{ |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
line-height: 30px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
color: #0348F3; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
i{ |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message-item{ |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
.message-date{ |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
color: #A6ADB6; |
|
|
|
|
|
} |
|
|
|
|
|
.message-cont{ |
|
|
|
|
|
margin: 12px 0 16px 0; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
.message-cont-info{ |
|
|
|
|
|
position: relative; |
|
|
|
|
|
padding: 16px 20px; |
|
|
|
|
|
color: #545B65; |
|
|
|
|
|
|
|
|
|
|
|
.is-read-tip{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 20px; |
|
|
|
|
|
top: 16px; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
line-height: 20px; |
|
|
|
|
|
padding: 0 7px; |
|
|
|
|
|
color: #ED4A41; |
|
|
|
|
|
background-color: #FDEFEE; |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.message-list-info{ |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
line-height: 24px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message-more{ |
|
|
|
|
|
position: relative; |
|
|
|
|
|
padding: 0 20px; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
color: #545B65; |
|
|
|
|
|
border-top: 1px solid #E6E8ED; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
i{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 10px; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
color: #888D94; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message-type-title{ |
|
|
|
|
|
display: block; |
|
|
|
|
|
padding-left: 33px; |
|
|
|
|
|
height: 33px; |
|
|
|
|
|
line-height: 33px; |
|
|
|
|
|
&.type-title1{ |
|
|
|
|
|
background: url('~@/assets/images/icon/xttz.png') no-repeat left center; |
|
|
|
|
|
background-size: 23px 23px; |
|
|
|
|
|
} |
|
|
|
|
|
&.type-title2{ |
|
|
|
|
|
background: url('~@/assets/images/icon/lcdd.png') no-repeat left center; |
|
|
|
|
|
background-size: 23px 23px; |
|
|
|
|
|
} |
|
|
|
|
|
&.type-title3{ |
|
|
|
|
|
background: url('~@/assets/images/icon/lcwc.png') no-repeat left center; |
|
|
|
|
|
background-size: 23px 23px; |
|
|
|
|
|
} |
|
|
|
|
|
&.type-title4{ |
|
|
|
|
|
background: url('~@/assets/images/icon/fqdq.png') no-repeat left center; |
|
|
|
|
|
background-size: 23px 23px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message-title{ |
|
|
|
|
|
margin: 8px 0 20px 0; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #0C0E1E; |
|
|
|
|
|
} |
|
|
|
|
|
.message-detail{ |
|
|
|
|
|
position: relative; |
|
|
|
|
|
.detail-date{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: 0; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
line-height: 32px; |
|
|
|
|
|
color: #A6ADB6; |
|
|
|
|
|
} |
|
|
|
|
|
.message-title{ |
|
|
|
|
|
margin: 10px 0 20px 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
