iot-front-ui/src/components/notice/noticeList.vue

<template>
  <div class="ioc-notice-list">
    <div class="ioc-notice-list-header">
      <span v-if="type==='unReadNotice'">未读通知</span>
      <span v-else-if="type==='readNotice'">已读通知</span>
      <span v-else-if="type==='allNotice'">全部通知</span>
      <span v-else></span>
    </div>
    <div class="ioc-notice-list-query">
      <div style="display: inline-block;vertical-align: middle">
        <a-button type="link" @click="setRead" v-if="type!='readNotice'">设为已读</a-button>
        <a-popconfirm
            title="确定要删除吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="del"
        >
          <a-button type="link">删除</a-button>
        </a-popconfirm>
      </div>

      <div style="display: inline-block;vertical-align: middle;float: right;">
        <a-form layout="inline" :form="formData">
          <a-form-item>
            <a-select v-model="formData.noticeType" style="width: 120px" placeholder="消息类别">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">系统通知</a-select-option>
              <a-select-option value="2">提醒消息</a-select-option>
              <a-select-option value="3">设备告警</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <TimeRange :time-range.sync="formData.timeRange" ref="timeRange" style="width: 250px"></TimeRange>
          </a-form-item>
          <a-form-item>
            <a-button size="small" @click="refresh">重置</a-button>
            <a-button size="small" type="primary" @click="getNotice">查询</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="ioc-notice-list-content">
      <a-table :rowKey="(record, index) => record.id"
               style="height: 100%"
               :columns="columns"
               :data-source="tableData"
               :pagination="false"
               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <template #operation="text">
          <a-button type="link">删除</a-button>
          <a-button type="link">查看</a-button>
        </template>
        <template #type="text, record">
          <span v-if="record.status==0" style="color: red;padding-right: 5px">•</span>
          <span>{{text}}</span>
        </template>
      </a-table>
      <a-pagination
          show-size-changer
          v-model="page.current"
          :page-size="page.pageSize"
          :total="page.total"
          style="float: right"
      />
      <br/>
    </div>
  </div>
</template>

<script>
import TimeRange from "@/components/common/timeRange.vue";
import ApiNotice from "@/api/dashboard/apiNotice";

export default {
  components: {TimeRange},
  watch: {
    type: function (val) {
      this.refresh();
    },
    'page': {
      handler: function (val) {
        this.getNotice();
      },
      deep: true,
    }
  },
  data() {
    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
    return {
      formData: {
        noticeType: '',
        timeRange: timeRange
      },
      selectedRowKeys: [],
      page: {
        current: 1,
        pageSize: 10,
        total: 20
      },
      columns: [
        {
          title: '消息类别',
          dataIndex: 'type',
          align: 'center',
          width: 150,
          key: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '事件内容',
          dataIndex: 'content',
          align: 'center',
          key: 'content'
        },
        {
          title: '地点',
          dataIndex: 'area',
          align: 'center',
          minWidth: 240,
          key: 'area'
        },
        {
          title: '通知时间',
          dataIndex: 'time',
          align: 'center',
          width: 240,
          key: 'time'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'operation'},
        }
      ],
      tableData: [],
    }
  },
  props: {
    type: String,
    data: Array,
  },
  mounted() {
    this.getNotice();
  },
  methods: {
    refresh() {
      this.formData = {};
      this.selectedRowKeys = [];
      this.getNotice();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    getNotice() {
      let status = this.type == 'unReadNotice' ? '0' : this.type == 'readNotice' ? '1' : '';
      let param = {
        type: this.formData.noticeType,
        status: status,
        pageStart: (this.page.current-1)*this.page.pageSize,
        pageSize: this.page.pageSize,
      }
      Object.assign(param, this.formData.timeRange)
      ApiNotice.getNoticeList(param).then(res => {
        this.tableData = res.data;
        this.page.total = res.total;
      })
    },
    del() {
      let param = this.selectedRowKeys;
      ApiNotice.delNotice(param).then(res=>{
        this.$message.success('删除成功');
        this.getNotice();
        this.selectedRowKeys = []
      })
    },
    setRead() {
      let param = this.selectedRowKeys;
      ApiNotice.readNotice(param).then(res=>{
        this.$message.success('操作成功');
        this.getNotice();
        this.selectedRowKeys = []
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ioc-notice-list {
  width: 100%;
  height: 100%;

  .ioc-notice-list-header {
    font-size: 16px;
  }

  .ioc-notice-list-query {
    margin: 12px 0;
  }
  .ioc-notice-list-content {
    height: 600px;
  }
}
</style>