X-web/src/views/modules/msg-center/notice.vue

<!-- 订单 -->
<template>
  <div class="msg">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()">
      <el-form-item label="消息类型">
        <el-select v-model="dataForm.type" clearable>
          <el-option
            v-for="item in optionsType"
            :key="item.code"
            :label="item.value"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="dataForm.title" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button @click="queryData()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="title"
        header-align="center"
        align="center"
        width="300"
        :show-tooltip-when-overflow="true"
        label="消息标题">
      </el-table-column>
      <el-table-column
        prop="content"
        header-align="center"
        align="center"
        width="400"
        :show-tooltip-when-overflow="true"
        label="消息内容">
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="消息类型">
        <template slot-scope="scope">
          <span>{{ optionsType[scope.row.type].value }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="publisherId"
        header-align="center"
        align="center"
        label="发布人">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        width="160"
        :show-tooltip-when-overflow="true"
        label="发布时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="checkNotice(scope.row.noticeId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'notice',
    created () {
      this.queryData()
    },
    data () {
      return {
        checkedVisible: false,
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        dataListSelections: [],
        optionsType: [
          {
            code: null, value: '全部'
          },
          {
            code: 1, value: '公告消息'
          },
          {
            code: 2, value: '审批消息'
          }
        ]
      }
    },
    methods: {
      // 查询
      queryData () {
        this.pageIndex = 1
        this.getNoticeList()
      },
      // 获取数据列表
      getNoticeList () {
        let msg = JSON.parse(this.$store.state.websocket.message)
        if (!msg) return
        this.dataList = msg
        if (this.dataForm.title) {
          this.dataList = this.dataList.filter(item => item.title && item.title.indexOf(this.dataForm.title) !== -1)
        }
        if (this.dataForm.type) {
          this.dataList = this.dataList.filter(item => item.type && item.type === this.dataForm.type)
        }
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 查看消息
      checkNotice (id) {
        // 获取记录
        let notice = this.dataList.find(item => item.noticeId === id)
        console.log('notice = ' + JSON.stringify(notice))
        // this.checkedVisible = true
        // this.$nextTick(() => {
        //   this.$refs.check.init(id)
        // })
      }
    }
  }
</script>

<style scoped>

</style>