post-ui/src/views/message/messageList.vue

<template>
  <div class="right">
    <div class="up">
      <div>
        <div class="up-title"><i class="el-icon-search"></i>筛选搜索</div>
        <div class="btn">
          <el-button plain @click="empty">重置</el-button>
          <el-button type="primary" plain @click="check">查询列表</el-button>
        </div>
      </div>
      <div class="left-up">
        <div class="up-input-title">
          消息标题:<el-input v-model="input.value1" class="up-input" placeholder="请输入内容"></el-input>
        </div>
        <div class="up-input-title-right">
          <span class="demonstration">发布时间:</span>
          <el-date-picker v-model="input.value2" type="datetimerange" class="up-input-right" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="down">
      <div class="down-add">
        <el-row :gutter="24">
          <el-col :span="22" class="down-title"> <i class="el-icon-tickets">消息列表</i> </el-col>
          <el-col :span="2"> <el-button id="addBtn" size="small" @click="addNoticce">添加</el-button> </el-col>
        </el-row>
      </div>
      <div class="down-table">
        <el-table height="300" :data="tableData" order style="width: 100%" class="messagetable">
          <el-table-column prop="newsId" label="ID" align="center">
          </el-table-column>
          <el-table-column :formatter="stateFormat" prop="newsTitle" label="消息标题" align="center">
          </el-table-column>
          <el-table-column prop="newsTime" label="发布时间" align="center">
          </el-table-column>
          <el-table-column prop="operate" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="viewDetails(scope.row)">查看详情</el-button>
              <el-popconfirm title="你确定删除本条消息吗？" @confirm="deleteM(scope.row)">
                <el-button class="btn-delete" size="mini" type="text" icon="el-icon-delete"
                  slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
      id="page">
    </el-pagination>
  </div>
</template>
<script>
import { getMessage, searchMessage, deleteMessage } from '../../api/message/message'
export default {
  data() {
    return {
      tableData: [],  // 数据内容
      total: 1, // 数据个数
      input: {
        value1: '', // 搜索姓名
        value2: ''  // 搜索时间
      },
      pageInfo: { // 分页信息
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.getMessageList();
  },
  methods: {
    // 获取消息列表
    getMessageList() {
      getMessage(this.pageInfo).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      })
    },
    // 分页跳转
    handleCurrentChange(newPage) {
      this.pageInfo.pageNum = newPage;
      this.getMessageList();
    },
    // 搜索消息
    check() {
      if (this.input.value1 || this.input.value2) {
        let startTime = this.$formatDate(this.input.value2[0], 'yyyy-MM-dd hh:mm:ss');
        let endTime = this.$formatDate(this.input.value2[1], 'yyyy-MM-dd hh:mm:ss');
        let searchCon = {
          newsTitle: this.input.value1,
          newsTimeStart: startTime,
          newsTimeEnd: endTime
        }
        searchMessage(searchCon).then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
      } else {
        this.getMessageList();
      }
    },
    // 重置搜索
    empty() {
      this.input.value1 = "";
      this.input.value2 = "";
      this.getMessageList();
    },
    //  删除列表
    deleteM(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMessage(row.newsId).then(() => {
          this.getMessageList();
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 查看详情
    viewDetails(row) {
      this.$router.push({
        name: "messageDetails",
        query: {
          publishTime: row.newsTime,
          title: row.newsTitle,
          content: row.newsContent
        }
      });
    },
    // 添加跳转
    addNoticce() {
      this.$router.push("/messageList/addMessage");
    },
    // 标题省略
    stateFormat(row, column, cellValue) {
      if (!cellValue) return ''
      if (cellValue.length > 15) {       //最长固定显示10个字符
        return cellValue.slice(0, 15) + '...'
      }
      return cellValue
    },
  }
}
</script>

<style scoped>
.up {
  width: 96%;
  height: 170px;
  margin-top: 20px;
  margin-left: 2%;
  border: 1px solid #ccc;
  border-radius: 4px;

}

.up-title {
  font-size: 20px;
  width: 20%;
  margin-left: 20px;
  margin-top: 20px;
  float: left;
}

.btn {
  float: right;
  padding-right: 3%;
  margin-top: 2.5%;
}

.up-input {
  width: 250px;
  margin-left: 15px;
}

.up-input-title {

  margin-left: 40px;

  float: left;
}

.up-input-right {
  margin-left: 15px;
  width: 500px;
}

.up-input-title-right {
  width: 800px;
  margin-left: 450px;


}

.left-up {
  width: 80%;
  float: left;
  height: 37px;
  margin-top: 50px;
}

.right-up {
  width: 16%;
  margin-top: 2%;
  float: right;

}

.anniu {
  padding-right: 5%;
}

.down {
  margin-top: 40px;
}

.down-add {
  padding: 10px;
  margin: 0 27px;
  border: 1px solid #ccc;
  border-radius: 2px
}

.down-title {
  padding-top: 10px;
  color: #303133;
}

.down-table {
  margin-top: 15px;
  text-align: center;
  margin: 35px 27px;
}

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  word-break: break-word;
  /* background-color: #f8f8f9; */
  color: #515a6e;
  height: 40px;
  font-size: 13px;
  text-align: center;
}

.bottom-number {
  padding-top: 5px;
  color: #303133;
  float: right;
}

.bottom-page {
  float: right;
}

.el-icon-search {
  padding-right: 10px;
}

.btn-delete {
  margin-left: 20px;
}

/**
自适应
*/
/* .demonstration{
  width: 50%;
} */
.right {
  float: none;
  width: 100%;
  height: 100%;
  /* background-color: #9dc3e6; */
}

.bottom {
  float: right;
}

#page {
  float: right;
  margin-right: 20px;
}
</style>