kd-aiot-frontend/src/views/notifyManage/notifyRecord/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 条件区 -->
      <search @search="reload"/>
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :pageSize="this.$store.state.tablePageSize" @filter-change="selectType">
        <!-- 操作列 -->
        <template v-slot:action="{ row }">

          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="handleAddOrEdit('view',row)"
          >
            详情
          </el-link>
        </template>
        <template v-slot:readStatus="{row}">
          <el-tag v-if="row.readStatus" type="success">{{ '已读' }}</el-tag>
          <el-tag v-else type="danger">{{ '未读' }}</el-tag>

        </template>
      </ele-pro-table>
    </el-card>
    <!--新增、修改-->
    <add-or-edit-dialog v-if="addOrEditDialogFlag" :addOrEditDialogFlag.sync="addOrEditDialogFlag"
                        ref="addOrEditDialogRef" @done="reload"></add-or-edit-dialog>
  </div>
</template>
<script>

import search from './index-search.vue';
import addOrEditDialog from "@/views/notifyManage/templateManage/components/addOrEditDialog.vue";
import {notifyMessagePageAPI} from "@/api/notifyRecord";

export default {
  components: {addOrEditDialog, search},
  data() {
    return {
      addOrEditDialogFlag: false,
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'templateContent',
          label: '消息',
          minWidth: '150',
        },
        {
          prop: 'templateCode',
          label: '模板编码',
          minWidth: '120',
          align: "center",
        },
        {
          prop: 'userName',
          label: '接收人',
          minWidth: '60',
          align: "center",
        },
        {//修改此prop名称时，请同步修改columnKey属性和下方selectType方法
          prop: 'readStatus',
          label: '状态',
          width: '90',
          slot:'readStatus',
          align: "center",
          filters: [
              { value: 1, text: '已读' },
              { value: 0, text: '未读' },
            ],
          filterMultiple: false,
          columnKey: 'readStatus'
        },
        {
          prop: 'readTime',
          label: '阅读时间',
          width: '170',
          align: "center",
          showOverflowTooltip: true,
        },
        {
          prop: 'templateNickname',
          label: '发送人',
          width: '100',
          align: "center",
        },
        {
          prop: 'createTime',
          label: '创建时间',
          width: '170',
          align: "center",
          showOverflowTooltip: true,
        },
        // {
        //   columnKey: 'action',
        //   label: '操作',
        //   width: 100,
        //   align: 'center',
        //   slot: 'action',
        //   fixed: 'right'
        // }
      ],
      searchForm: {},
      tableData: [],
      size: 10,
      page: 1,
      total: 0
    };
  },
  methods: {
    selectType(value) {
      let where = {}
      if (value.readStatus.length > 0) {
        where['readStatus'] = value.readStatus[0]
      }
      this.reload(where)
    },
    //新增或修改模板
    handleAddOrEdit(type, row) {
      this.addOrEditDialogFlag = true
      this.$nextTick(() => {
        this.$refs.addOrEditDialogRef.init(type, row)
      })
    },
    reload(params) {
      this.$refs.table.reload({pageNum: 1, where: params});
    },
    datasource({page, where, limit,...row}) {
      return notifyMessagePageAPI({
        ...where,
        pageNum: page,
        size: limit
      });
    },
    reset() {
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  background: #f0f3f3;
  min-height: calc(100vh - 84px);
}

.zw-page-table {
  background: #ffffff;
  padding-top: 20px;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

.table {
  width: 100%;
  margin-top: 10px;
}
</style>