portal-vue/src/views/home/Message.vue

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>消息提醒</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showList">更多<i class="el-icon-arrow-right" /></el-button>
      </div>
      <el-tabs v-model="curTab" class="message-content" @tab-click="getTablelist">
        <el-tab-pane :label="'待办（'+ messageCount.todo + '）'" name="Todo">
          <div class="message-filter_box">
            <span>筛选条件：</span>
            <el-radio-group v-model="todoType" size="mini" @input="getTablelist">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="item in typeData" :key="item.id" :label="item.id">{{ item.label }}</el-radio-button>
            </el-radio-group>
          </div>
          <el-table v-loading="loading" :data="todoData" :show-header="false" :cell-style="cellStyle" height="calc(100% - 30px)">
            <el-table-column width="50">
              <template slot-scope="scope">
                <el-avatar :size="40" shape="square" class="msg-icon"><svg-icon :icon-class="formatTypeIcon(scope.row.messageType)" /></el-avatar>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{ scope.row.title }} <span v-if="scope.row.messageLevel + '' === '1'" class="priority-box priority-level1">{{ formatDictData('', scope.row.messageLevel) }}</span> </div>
                <div>{{ scope.row.createOrgName }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" width="150" />
            <el-table-column prop="createUser" width="100" show-overflow-tooltip />
            <el-table-column width="105">
              <template slot-scope="scope">
                <el-button size="small" @click="markRead(scope.$index, scope.row)">不再提醒</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="'已办（'+ messageCount.done + '）'" name="Done">
          <div class="message-filter_box">
            <span>筛选条件：</span>
            <el-radio-group v-model="doneType" size="mini" @input="getTablelist">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="item in typeData" :key="item.id" :label="item.id">{{ item.label }}</el-radio-button>
            </el-radio-group>
          </div>
          <el-table v-loading="loading" :data="doneData" :show-header="false" height="calc(100% - 30px)">
            <el-table-column width="50">
              <template slot-scope="scope">
                <el-avatar :size="40" shape="square" class="msg-icon"><svg-icon :icon-class="formatTypeIcon(scope.row.messageType)" /></el-avatar>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{ scope.row.title }} <span v-if="scope.row.messageLevel + '' === '1'" class="priority-box priority-level1">{{ formatDictData('', scope.row.messageLevel) }}</span> </div>
                <div>{{ scope.row.systemName }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" width="150" />
            <el-table-column prop="createUser" width="100" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <message-list ref="messageList" :type-data="typeData" @refreshData="updateMessage" />
  </div>
</template>

<script>
import MessageList from './components/MessageList'

// import { fetchDictData } from '@/api/dict'
import { fetchTableList, pushMarkRead } from '@/api/message'
import { hasValidRecords, formatDictData } from '@/utils/convert'

export default {
  name: 'HomeMessage',
  components: {
    MessageList
  },
  data() {
    return {
      cellStyle: {
        color: 'rgba(0,0,0, 0.85)'
      },
      msgDictType: 'notice_type',
      typeData: [],
      messageLevelData: [{ 'id': 0, 'label': '正常' }, { 'id': 1, 'label': '紧急' }],
      curTab: 'Todo',
      todoType: '',
      doneType: '',
      todoData: [],
      doneData: [],
      loading: false
    }
  },
  computed: {
    messageCount() {
      return this.$store.getters.messageCount
    },
    newMessage() {
      return this.$store.state.message.newMessage
    }
  },
  watch: {
    newMessage(message) {
      if (this.curTab === 'Todo') {
        // this.getTablelist()
        if (this.todoType === '' || (message.messageType + '') === this.todoType) {
          this.todoData.unshift(message)
        }
      }
    }
  },
  // activated() {
  //   this.getTablelist()
  // },
  created() {
    this.getTablelist()
    this.getTypeData()
  },
  methods: {
    showList() {
      this.$refs.messageList.open()
    },
    updateMessage() {
      this.getTablelist()
    },
    // 获取table数据
    getTablelist() {
      this.loading = true
      const params = {
        current: 1,
        size: 50,
        delFlag: 0,
        readStatus: this.curTab === 'Done' ? 1 : 0,
        messageType: this.curTab === 'Done' ? this.doneType : this.todoType
      }
      fetchTableList(params).then(response => {
        this.loading = false
        if (hasValidRecords(response)) {
          if (this.curTab === 'Done') {
            this.doneData = response.data.records
          } else {
            this.todoData = response.data.records
          }
        } else {
          if (this.curTab === 'Done') {
            this.doneData = []
          } else {
            this.todoData = []
          }
        }
      }).catch(error => {
        console.log(error)
        this.loading = false
        this.$message({
          type: 'error',
          duration: 0,
          showClose: true,
          message: '获取消息列表出错: ' + error.message
        })
      })
    },
    markRead(index, data) {
      pushMarkRead(data.targetId).then(res => {
        this.$store.dispatch('message/readMessage', data.deptCode)
        this.todoData.splice(index, 1)
      }).catch(error => {
        console.log(error)
        this.$message({
          type: 'error',
          duration: 0,
          showClose: true,
          message: '不再提醒操作出错: ' + error.message
        })
      })
    },
    formatTypeIcon(type) {
      const typeStr = type + ''
      if (typeStr === '4') {
        return 'zhiliang'
      } else if (typeStr === '5') {
        return 'anjian'
      } else {
        return 'yujing'
      }
    },
    getTypeData() {
      this.typeData = [{ 'id': 4, 'label': '任务类' }, { 'id': 5, 'label': '通知类' }, { 'id': 6, 'label': '超期提醒类' }]
      // fetchDictData(this.msgDictType).then(response => {
      //   if (!isNull(response.data)) {
      //     this.typeData = response.data
      //   } else {
      //     this.typeData = []
      //   }
      // }).catch(error => {
      //   console.log(error)
      //   this.$message({
      //     type: 'error',
      //     duration: 0,
      //     showClose: true,
      //     message: '获取消息类型错误: ' + error.message
      //   })
      // })
    },
    formatDictData(type, value) {
      const data = this.messageLevelData
      return formatDictData(data, value)
    }
  }
}
</script>

<style lang="scss" scoped>
.message-content  {
  .message-filter_box {
    height: 30px;
    &>span {
      display: inline-block;
      font-size: 14px;
    }
  }

  .msg-icon {
    color: #0056dd;
    background: rgba(0,86,221,0.1);
  }

  ::v-deep {
    .el-tabs__header {
      height: 40px;
    }
    .el-tabs__item {
      font-size: 18px !important;
    }
    .el-tabs__content {
      height: calc(100% - 55px);

      .el-tab-pane{
        height: 100%;
      }
    }
    .el-table .cell {
      padding-left: 0 !important;
    }
  }
}

.priority-box{
  display: inline-block;
  padding: 0 5px;
  color: #ffffff;
}
.priority-level0{
  background: none;
}
.priority-level1{
  background: #F85252;
}
</style>