kd-aiot-frontend-wt/src/views/bpm/message/index.vue

<template>
  <div class="ele-body">

    <el-card shadow="never">
      <div class="filter-container">
        <el-form
          label-width="100px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <el-form-item label="状态：" prop="readStatus">
                <el-select
                  style="width: 100%"
                  v-model="params.readStatus"
                  placeholder="请选择状态"
                  clearable
                >
                  <el-option :value="1" label="已读"></el-option>
                  <el-option :value="0" label="未读"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col
              v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <el-form-item label="发送时间：" prop="createTime">
                <el-date-picker
                  v-model="params.createTime"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload('search')"
                >
                  查询
                </el-button>
                <el-button @click="reload('reset')">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
        <!-- 操作列 -->
        <template v-slot:action="{ row }">

          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            v-if="!row.readStatus"
            @click="handleAddOrEdit(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>
  </div>
</template>
<script>

import {notifyMessagePageAPI, updateNotifyMessageReadByIdAPI} from "@/api/bpm/task";
import {mapGetters} from "vuex";


export default {
  data() {
    return {
      addOrEditDialogFlag: false,
      params: {
        createTime: null,
        readStatus: null,
      },
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'templateContent',
          label: '消息',
          minWidth: '250',
        },
        {
          prop: 'readStatus',
          label: '状态',
          width: '80',
          align: "center",
          slot:'readStatus',
        },
        {
          prop: 'readTime',
          label: '阅读时间',
          width: '180',
          align: "center",
          showOverflowTooltip: true,
        },
        {
          prop: 'templateNickname',
          label: '发送人',
          width: '80',
          align: "center",
        },
        {
          prop: 'createTime',
          label: '发送时间',
         width: '180',
          align: "center",
          showOverflowTooltip: true,
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 100,
          align: 'center',
          slot: 'action',
          fixed: 'right'
        }
      ],
      searchForm: {},
      tableData: [],
      size: 10,
      page: 1,
      total: 0
    };
  },
  computed: {
    ...mapGetters(['user']),
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    //新增或修改模板
    async handleAddOrEdit(row) {
      await updateNotifyMessageReadByIdAPI([row.id]);
      this.$refs.table.reload()
    },
    reload(type) {
      if (type == 'reset') {
        this.params = {
          createTime: null,
          readStatus: null,

        }
      }
      this.$refs.table.reload({pageNum: 1, where: this.params});
    },
    datasource({page, where, limit, ...row}) {
      return notifyMessagePageAPI({
        ...where,
        pageNum: page,
        size: limit,
        userId: this.user.info.userId
      });
    },
  }
};
</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>