msgList.vue 6.23 KB
<template>
  <div class="message-list-page page-wrap">
    <dee-search-server
      v-model="searchFormData"
      :form-data="seachForm"
      class="mpb0"
      @search="getTableData"
    />

    <dee-table
      ref="messageTable"
      :columns="tableColums"
      :index-row="indexRow"
      :data="tableData"
      :options="tableOption"
      :pagination="pagination"
      :selection-row="selectionRow"
      @pagination-current-change="paginationCurrentChange"
      @pagination-size-change="handleSizeChange"
      @selection-change="selectionChange"
    >
      <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
    </dee-table>
  </div>
</template>

<script>
import { getMessage, deleteMsgs, setMsgStatus } from '@/api/message/message'
export default {
  name: 'MagList',
  components: {},
  props: {},
  data() {
    return {
      tools: [
        {
          name: '删除',
          icon: '/icons/c-creatbackups.png',
          handler: {
            click: () => {
              if (this.selectionRow.length) {
                this.delMessage()
              } else {
                this.$utils.showMessageError('请先选择数据项')
              }
            }
          }
        }],
      seachForm: [
        {
          key: 'title',
          title: '标题',
          component: {
            name: 'el-input',
            placeholder: '',
            clearable: true
          }
        },
        {
          key: 'state',
          title: '状态',
          component: {
            name: 'el-select',
            options: [{
              label: '未读',
              value: 0
            }, {
              label: '已读',
              value: 1
            }]
          }
        },
        {
          key: 'time',
          title: '发送时间',
          component: {
            name: 'el-date-picker',
            clearable: true,
            rangeSeparator: '至',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
          },
          type: 'datetimerange'
        }
      ],
      searchFormData: {
        title: '',
        state: '',
        time: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 20, 50]
      },
      tableOption: {
        height: 'calc(100vh - 240px)'
      },
      indexRow: {
        title: '序号',
        align: 'center',
        width: '70'
      },
      tableColums: [
        {
          title: '消息类型',
          minWidth: '100',
          key: 'type',
          align: 'center',
          formatter(row, column) {
            return '系统消息'
          }
        },
        { title: '标题', key: '', align: 'center', component: {
          render: (h, params) => {
            return h('div', [
              h('span', {
                class: 'link-style',
                on: {
                  click: () => {
                    this.linkToMsgDetail(params)
                  }
                }
              }, params.title || '/')
            ])
          }
        }},
        { title: '读取状态', key: 'state', align: 'center', formatter(row, column) {
          return row.state === 0 ? '未读' : '已读'
        }
        },
        { title: '发送时间', key: 'sendTime', align: 'center' },
        { title: '发送人', key: 'sender', align: 'center' }
      ],
      selectionRow: []
    }
  },
  watch: {
  },
  created() {
    this.getTableData()
  },
  mounted: function() {
    this.$nextTick(function() {
    })
  },
  methods: {
    linkToMsgDetail(item) {
      setMsgStatus(item).then(res => {
        this.$router.push({
          path: '/message/msgDetail',
          query: {
            id: item.id
          }
        })
      })
    },
    delMessage() {
      this.$utils.showConfirm(
        `你是否确定删除选中的数据项`,
        '提示',
        'warning',
        '确定',
        '取消',
        () => {
          const idArr = this.selectionRow.map(r => r.id)
          deleteMsgs({ data: idArr }).then(res => {
            this.$utils.showMessageSuccess(res.message)
            this.getTableData()
          })
        }
      )
    },
    getTableData() {
      const searchParams = {
        'items': [
          {
            fieldName: 'receiver',
            operator: 'EQ',
            value: localStorage.getItem('userId')
          }
          // 暂时取消过滤条件,因为 工作空间/系统消息 也用此接口,包含此提交导致两边查询结果条数不一致
          // {
          //   fieldName: 'type',
          //   operator: 'EQ',
          //   value: 'MESSAGE'
          // }
        ],
        'operator': 'AND' }
      this.searchFormData.title && searchParams.items.push({
        'fieldName': 'title',
        'operator': 'LIKE',
        'value': this.searchFormData.title
      })
      this.searchFormData.state !== '' && searchParams.items.push({
        'fieldName': 'state',
        'operator': 'EQ',
        'value': this.searchFormData.state
      })
      this.searchFormData.time && searchParams.items.push({
        'fieldName': 'sendTime',
        'operator': 'BTWN',
        'value': this.searchFormData.time[0],
        'value1': this.searchFormData.time[1]
      })
      const params = {
        pageFrom: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        searchItems: searchParams,
        'sortItem': [{ 'fieldName': 'sendTime', 'sortOrder': 'desc' }]
      }
      getMessage(params).then(res => {
        this.tableData = res.items.content.map(item => {
          item.show = true
          return item
        })
        this.pagination.total = res.items.totalElements
      })
    },
    selectionChange(val) {
      this.selectionRow = val
    },
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getTableData()
    },
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.currentPage = 1
      this.getTableData()
    }
  }
}
</script>

<style lang="scss">
@import "../../styles/variables.scss";
.message-list-page{
  a{
    color: blue
  }
  .link-style{
    color: $link-color;
    cursor:pointer;
  }
}
</style>