|
|
@@ -0,0 +1,432 @@
|
|
|
+<template>
|
|
|
+ <div class="message">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="2">
|
|
|
+ <div class="left">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="selects" @click="selectFun('系统')"
|
|
|
+ :style="currentItem==0 ? 'background:#ffffff;color:#3874F6;border:1px solid #DDDDDD' : 'color:#000000;border:1px solid #DDDDDD'">
|
|
|
+ <el-row style="width: 100%;">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="font">系统消息</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="fontCount">总数:32</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="selects" @click="selectFun('通用')"
|
|
|
+ :style="currentItem==1 ? 'background:#ffffff;color:#3874F6;border:1px solid #DDDDDD' : 'color:#000000;border:1px solid #DDDDDD'">
|
|
|
+ <el-row style="width: 100%;">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="font">通用消息</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="fontCount">总数:32</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="selects" @click="selectFun('营销工具')"
|
|
|
+ :style="currentItem==2 ? 'background:#ffffff;color:#3874F6;border:1px solid #DDDDDD' : 'color:#000000;border:1px solid #DDDDDD'">
|
|
|
+ <el-row style="width: 100%;">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="font">营销工具消息</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="fontCount">总数:32</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="selects" @click="selectFun('CRM')"
|
|
|
+ :style="currentItem==3 ? 'background:#ffffff;color:#3874F6;border:1px solid #DDDDDD' : 'color:#000000;border:1px solid #DDDDDD'">
|
|
|
+ <el-row style="width: 100%;">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="font">CRM消息</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="fontCount">总数:32</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="selects" @click="selectFun('E-订单')"
|
|
|
+ :style="currentItem==4 ? 'background:#ffffff;color:#3874F6;border:1px solid #DDDDDD' : 'color:#000000;border:1px solid #DDDDDD'">
|
|
|
+ <el-row style="width: 100%;">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="font">E-订单消息</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="fontCount">总数:32</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="selects" @click="selectFun('E-服务')"
|
|
|
+ :style="currentItem==5 ? 'background:#ffffff;color:#3874F6;border:1px solid #DDDDDD' : 'color:#000000;border:1px solid #DDDDDD'">
|
|
|
+ <el-row style="width: 100%;">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="font">E-服务消息</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="fontCount">总数:32</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <div class="left1">
|
|
|
+ <div class="select">
|
|
|
+ <div class="select_left">
|
|
|
+ </div>
|
|
|
+ <div class="select_right">
|
|
|
+ <el-button @click="allRead" size="small">全部阅读</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <list :list="list" @messageItemClick="messageItemClick"></list>
|
|
|
+ <pagination :total="total" :pageSize="param.content.pageSize" :currentPage="param.content.pageNumber"
|
|
|
+ @pageChange="pageChange">
|
|
|
+ </pagination>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <div class="right" v-if="message">
|
|
|
+ <p class="title">{{message.title}}</p>
|
|
|
+ <p class="info">
|
|
|
+ <span>发布于:{{message.createdate}} | {{message.name || message.type}}</span>
|
|
|
+ </p>
|
|
|
+ <div class="content-txt">
|
|
|
+ <p class="txt">{{message.message}}</p>
|
|
|
+ <p class="link" @click="goDetail" v-if="currentItem == 1 && message.link">请前往 {{message.name}}>></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import list from '@/views/message/components/list'
|
|
|
+
|
|
|
+import pagination from '@/components/pagination/Pagination'
|
|
|
+import { log } from '@antv/g2plot/lib/utils';
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ currentItem: 0,
|
|
|
+ param: {
|
|
|
+ "classname": "system.message.Message",
|
|
|
+ "method": "queryMessage",
|
|
|
+ "content": {
|
|
|
+ "nocache": true,
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 10,
|
|
|
+ "type": '',
|
|
|
+ "where": {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list: '',
|
|
|
+ total: 0,
|
|
|
+ message:'',
|
|
|
+ isAllClick: true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: { list, pagination },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getMessageList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getMessageList () {
|
|
|
+ this.param.content.type = this.currentItem == 0 ? '系统' : '应用'
|
|
|
+ let res = await this.$api.requested(this.param)
|
|
|
+ this.list = res.data
|
|
|
+ if(this.currentItem == 1) {
|
|
|
+ this.list.forEach(item => {
|
|
|
+ this.isCategory(item)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(this.list[0]) this.messageItemClick(this.list[0])
|
|
|
+ this.total = res.total
|
|
|
+ },
|
|
|
+ selectFun (data) {
|
|
|
+ this.message = ''
|
|
|
+ this.param.content.pageNumber = 1
|
|
|
+ /*this.currentItem = data == '系统' ? 0 : 1*/
|
|
|
+ switch (data){
|
|
|
+ case '系统':
|
|
|
+ this.currentItem = 0
|
|
|
+ break
|
|
|
+ case '通用':
|
|
|
+ this.currentItem = 1
|
|
|
+ break
|
|
|
+ case '营销工具':
|
|
|
+ this.currentItem = 2
|
|
|
+ break
|
|
|
+ case 'CRM':
|
|
|
+ this.currentItem = 3
|
|
|
+ break
|
|
|
+ case 'E-订单':
|
|
|
+ this.currentItem = 4
|
|
|
+ break
|
|
|
+ case 'E-服务':
|
|
|
+ this.currentItem = 5
|
|
|
+ break
|
|
|
+ }
|
|
|
+ this.getMessageList()
|
|
|
+ },
|
|
|
+ pageChange (n) {
|
|
|
+ this.param.content.pageNumber = n
|
|
|
+ this.getMessageList()
|
|
|
+ },
|
|
|
+ async messageItemClick(data) {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "classname": "system.message.Message",
|
|
|
+ "method": "readMessage",
|
|
|
+ "content": {
|
|
|
+ "nocache":true,
|
|
|
+ "messageid":data.messageid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ data.isread = 1
|
|
|
+ res.data.name = data.name
|
|
|
+ res.data.link = data.link
|
|
|
+ res.data.modules = data.modules
|
|
|
+ this.message = res.data
|
|
|
+ },
|
|
|
+ async allRead() {
|
|
|
+ if(!this.isAllClick) return
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "classname": "system.message.Message",
|
|
|
+ "method": "readAllMessage",
|
|
|
+ "content": {
|
|
|
+ "nocache":true,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.tool.showMessage(res,() => {
|
|
|
+ this.list.forEach(item => {
|
|
|
+ item.isread = 1
|
|
|
+ })
|
|
|
+ this.isAllClick = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isAllClick = true
|
|
|
+ },5000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //跳转到消息具体页面
|
|
|
+ goDetail() {
|
|
|
+ sessionStorage.setItem('active_modules',JSON.stringify(this.message.modules))
|
|
|
+ this.$router.push(this.message.link)
|
|
|
+ },
|
|
|
+ isCategory(data) {
|
|
|
+ switch (data.objectname) {
|
|
|
+ case 'sat_courseware':
|
|
|
+ data.name = '商学院'
|
|
|
+ JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
|
|
|
+ item1.modules.forEach(item2 => {
|
|
|
+ if(item2.systemmodulename == data.name) {
|
|
|
+ data.modules = item2
|
|
|
+ data.link = item2.apps[0].path
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'sat_sharematerial':
|
|
|
+ data.name = '推广素材'
|
|
|
+ JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
|
|
|
+ item1.modules.forEach(item2 => {
|
|
|
+ if(item2.systemmodulename == data.name) {
|
|
|
+ data.modules = item2
|
|
|
+ data.link = item2.apps[0].path
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'sat_notice':
|
|
|
+ data.name = '通告'
|
|
|
+ JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
|
|
|
+ item1.modules.forEach(item2 => {
|
|
|
+ if(item2.systemmodulename == data.name) {
|
|
|
+ data.modules = item2
|
|
|
+ data.link = item2.apps[0].path
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'sat_submitedit':
|
|
|
+ data.name = '提报'
|
|
|
+ JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
|
|
|
+ item1.modules.forEach(item2 => {
|
|
|
+ if(item2.systemmodulename == data.name) {
|
|
|
+ data.modules = item2
|
|
|
+ data.link = item2.apps[0].path
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'sat_orderclue':
|
|
|
+ data.name = '销售线索'
|
|
|
+ JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
|
|
|
+ item1.modules.forEach(item2 => {
|
|
|
+ if(item2.systemmodulename == data.name) {
|
|
|
+ data.modules = item2
|
|
|
+ data.link = item2.apps[0].path
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'sys_attachment':
|
|
|
+ data.name = '营销物料'
|
|
|
+ JSON.parse(sessionStorage.getItem('module_info')).forEach(item1 => {
|
|
|
+ item1.modules.forEach(item2 => {
|
|
|
+ if(item2.systemmodulename == data.name) {
|
|
|
+ data.modules = item2
|
|
|
+ data.link = item2.apps[0].path
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.message {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.message .left1 {
|
|
|
+ min-height: calc(100vh - 99px);
|
|
|
+ position: relative;
|
|
|
+ padding: 20px 0 60px 0;
|
|
|
+ box-shadow: 1px 0px 0px 1px #DDDDDD;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.message .left {
|
|
|
+ min-height: calc(100vh - 99px);
|
|
|
+ position: relative;
|
|
|
+ padding: 0px 0 0px 0;
|
|
|
+ box-shadow:inset -1px 1px 0px 1px #DDDDDD;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.message .select {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 16px;
|
|
|
+}
|
|
|
+.message .selects {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 10px;
|
|
|
+}
|
|
|
+.message .selects .font{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.message .selects .fontCount{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #d3d2d2;
|
|
|
+}
|
|
|
+.message .select .select_left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 16px;
|
|
|
+}
|
|
|
+.message .select .select_left div {
|
|
|
+ height: 34px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 8px 22px;
|
|
|
+ transition: background 0.2s ease-in-out;
|
|
|
+}
|
|
|
+.message .select .select_left div:first-child {
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+}
|
|
|
+.message .select .select_left div:last-child {
|
|
|
+ border-top-right-radius: 4px;
|
|
|
+ border-bottom-right-radius: 4px;
|
|
|
+}
|
|
|
+.message .right {
|
|
|
+ padding: 20px 16px;
|
|
|
+}
|
|
|
+.message .right .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.message .right .info {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ margin: 16px 0;
|
|
|
+}
|
|
|
+.message .right .content-txt {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.message .right .content-txt .txt {
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.message .right .content-txt .link {
|
|
|
+ margin-top:16px;
|
|
|
+ color:#3874F6;
|
|
|
+ font-size:14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+/* .message .right .content-txt p:last-child {
|
|
|
+ color: #3874F6;
|
|
|
+} */
|
|
|
+/deep/.el-pagination {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+/deep/.el-empty {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+}
|
|
|
+</style>
|
qymljy