yos_web/src/views/message/index.vue

<template>
  <div class="message">
    <el-row>
      <el-col :span="12">
        <div class="left">
          <div class="select">
            <div class="select_left">
              <div @click="selectFun('应用')"
                :style="currentItem==1 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">应用消息</div>
              <div @click="selectFun('系统')"
                :style="currentItem==0 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">系统消息</div>
            </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="12">
        <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: 1,
      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
      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 .left {
  min-height: calc(100vh - 99px);
  position: relative;
  padding: 20px 0 60px 0;
  box-shadow: 1px 0px 0px 1px #DDDDDD;
  background: #ffffff;
}
.message .select {
  width: 100%;
  height: 36px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}
.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>