keysass_portal/src/page/personalpage/home/messagelist.vue

<template>
  <div class="container" style="padding: 10px!important;">
    <el-row style="margin-bottom:20px;">
      <el-col>  
        <el-button style="background-color:#0066EB;color:#FFFFFF"  plain icon="el-icon-plus" size="mini" class="btn-blue"  @click="handleAdd">
          新增
        </el-button>
      </el-col>
    </el-row>

      <el-table v-loading="loading" :data="this.messages" style="height: 100%"  border>
        <el-table-column label="发送时间" align="center" key="sendTime" prop="sendTime" width="200">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sendTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送对象姓名" align="center" key="userName" prop="userName" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.userId == 0 ? "全体":scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发送对象昵称" align="center" key="nickName" prop="nickName" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.userId == 0 ? "全体":scope.row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="消息内容" align="center" key="message" prop="message" >
          <template slot-scope="scope">
            <span>{{scope.row.message}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="操作" align="center" key="applyId" prop="applyId" width="200">-->
<!--          <template slot-scope="scope">-->
<!--              <span><el-button  size="mini"  type="text"-->
<!--                                icon="el-icon-edit" @click="auditTask(scope.row.applyId)">审核</el-button></span>-->
<!--          </template>-->
<!--        </el-table-column>  :current-page="queryParams.currentPage"    -->
      </el-table>
      <div v-if="total>10"  style='width:100%;margin-top:30px;text-align: center;'>
          <el-pagination background                 
              @current-change="handleCurrentChange"
                      
              :page-size="queryParams.pageSize"
              layout="total,  prev, pager, next, jumper"
              :total="total">
          </el-pagination>
      </div>
    <el-dialog title="发送系统消息" :visible.sync="open" :close-on-click-modal="false" width="700px" height="700px"
               append-to-body>
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="发送对象" prop="userId">
          <el-select v-model="form.userId" filterable  clearable  placeholder="请选择" :style="{width:'100%'}">
            <el-option v-for="item in users" :key="item.userId" :label="item.nickName + ',' + item.phonenumber" :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容" prop="message">
          <el-input type="textarea" :rows="5" v-model="form.message"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" style="background-color:#0066EB;color:#FFFFFF">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listMessage,sendMessage} from "@/api/system/message";
  import {list} from "@/api/system/user";
  export default {
    name: "MessageManage",
    data() {
      return {
        open:false,
        // 遮罩层
        loading: true,
        title: '消息列表',
        messages: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId:''
        },
        form:{
          userId:''
        },
        rules:{  userId: [
            {required: true, message: "发送对象不能为空", trigger: "blur"}
          ],
          message: [
            {required: true, message: "消息内容不能为空", trigger: "change"}
          ]},
        users:[]
      }
    },
    computed: {},
    created() {
      this.list();
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        this.list();
      },
      list() {
        listMessage(this.queryParams).then(response => {
            this.messages = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        )
      },
      handleAdd(){
        list().then(response=>{
          let  userslist = response.user;
          this.users=userslist.reverse();
          this.users.unshift({
            userId: 0,
            userName:'全体',
            nickName:'全体',
            phonenumber: ''
          })
        })
        this.open = true;
      },
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            sendMessage(this.form).then(response => {
              this.$notify({
                title: '发送成功',
                message: '',
                align: 'center',
                type: 'success'
              });
              this.resetForm("form");
              this.open = false;
              this.getList();
            });
          }
        });
      },
      cancel(){
        this.open = false;
      },
      //当前页码
      handleCurrentChange(val) {
          this.queryParams.pageNum=val;
          this.getList();
      }
    },

  }
</script>

<style scoped>
  .type {
    color: #1890FF;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
  }

  .tip {
    font-size: 13px;
    color: gray;
  }

  .el-link {
    margin-right: 10px;
    font-size: 13px;
  }

  .active {
    color: #1890FF;
  }

  .el-row {
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap
  }

  .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }
  .container>>>.el-table th{
       background-color:#F7F7F7;
       color:#0e0c0c;
       text-align:center;
  }
  .container>>>.el-table td{
      /* text-align:center; */
      background-color:#FAF9F9;
      height:60px;
      color:#666666;
  }
  .container>>>.el-table--border th{
      border-right:#F7F7F7
  }
</style>