learning-system-portal/src/views/portal/user/Message.vue

<template>
  <div>
    <Remark>
      <ul>
        <li>个人觉得以单选框的形式展现应该是勾选条件而不是查询条件</li>
      </ul>
    </Remark>
    <portal-header :goSearch="10"></portal-header>
    <div class="xcontent portal-content">
      <div class="msg-nav">
        <div style="display: flex;align-items: center;">
          <div><el-checkbox v-model="checkAll" :indeterminate="isIndeterminate">全选</el-checkbox></div>
          <!-- <el-radio-group style="padding-left: 20px;" @change="queryMessage(true)" v-model="queryData.isRead">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="false">未读</el-radio>
            <el-radio :label="true">已读</el-radio>
          </el-radio-group> -->
        </div>
        <div>
          <!-- <el-button type="text" icon="el-icon-remove" @click="isReadChooseList">设置已读</el-button> -->
          <el-button type="text" icon="el-icon-remove" @click="delChooseList">删除所选</el-button>
        </div>
      </div>
      <div style="background-color: #FFFFFF;min-height: 600px;">
        <p v-if="data.length == 0" style="line-height:30px;text-align: center;">暂无消息</p>
        <div class="msg-list" v-for="(item, index) in data" :key="index">
          <div class="msg-top">
            <div>
              <span style="padding-right: 10px;"><el-checkbox v-model="item.checked" @change="setCheckAll"></el-checkbox></span>
              <span v-if="!item.isRead" style="font-size:14px;padding:2px;border: 1px dotted #ff0000;color: #ff0000;margin-right: 5px">未读</span>
              <span v-else style="font-size:14px;padding:2px;border: 1px dotted #1EA0FA;color: #1EA0FA;margin-right: 5px">已读</span>
              <span>{{ item.title }}</span>
              <!-- <span class="msg-time"></span> -->
            </div>
            <div><el-button type="danger" size="small" @click="delItem(item)">删除</el-button></div>
          </div>
          <div class="msg-body">
            <!-- {{ filterContent(item.content)[0] }}- -->
            {{item.tip}}-
            <a :href="returnRouter(item)">{{ item.content }}</a>
          </div>
          <div class="msg-time">{{ item.msgTime }}</div>
        </div>
      </div>
      <div style="text-align: center;margin-top: 50px" v-if="total > queryData.pageSize">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.pageIndex"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- <div class="pagination-div" v-if="queryData.pageIndex < totalPages"><span class="pag-text" @click="loadMore()">加载更多</span></div> -->
    </div>
    <portal-footer></portal-footer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import portalHeader from '@/components/PortalHeader.vue';
import portalFooter from '@/components/PortalFooter.vue';
import apiMessage from '@/api/system/message.js';
export default {
  name: 'answer',
  components: { portalHeader, portalFooter },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      queryData: {
        pageIndex: 1,
        pageSize: 6,
        isRead: null
      },
      total: 0,
      checkAll: false,
      data: [],
      totalPages: '',
      isIndeterminate: false,
      url: ''
    };
  },
  mounted() {
    this.queryMessage(true);
    this.isReadChooseList();
  },
  updated() {
    this.isReadChooseList();
  },
  watch: {
    checkAll(newVal) {
      this.data.forEach(msg => {
        msg.checked = newVal;
      });
    }
  },
  destroyed() {
    this.isReadChooseList();
  },
  methods: {
    queryMessage(flag) {
      if (flag) {
        this.data = [];
        this.checkAll = false;
        this.isIndeterminate = false;
      }
      apiMessage.list(this.queryData).then(res => {
        if (res.status == 200) {
          this.totalPages = res.result.totalPages;
          this.total = res.result.count;
          res.result.list.forEach(item => {
            let name = this.filterContent(item.content);
            let num = name.slice(1,name.length);
            item.tip = name[0];
            item.content = num.join('-');
            item.checked = false;
            this.data.push(item);
          });
        } else {
          this.$message.error('获取数据失败');
        }
      });
    },
    handleSizeChange(val) {
      this.isReadChooseList();
      this.queryData.pageSize = val;
      this.queryMessage(true);
    },
    handleCurrentChange(val) {
      this.isReadChooseList();
      this.queryData.pageIndex = val;
      this.queryMessage(true);
    },
    //存在问题，待解决
    // async loadMore() {
    //   await this.isReadChooseList()
    //   if(this.queryData.pageIndex<this.totalPages){
    //     console.log(this.data,"点击加载中未操作的data数据")
    //     this.data.splice((this.queryData.pageIndex-1)*this.queryData.pageSize,this.queryData.pageSize)
    //     console.log(this.data,"点击加载中删除操作的data数据")
    //     await this.queryMessage(false);
    //     console.log(this.data,"点击加载中添加操作的data数据")
    //     this.queryData.pageIndex++;
    //     await this.queryMessage(false)
    //     console.log(this.data,"点击加载中最后一次添加操作的data数据")
    //   }
    // },
    setCheckAll(e) {
      let flag = !e;
      let has = this.data.some(msg => {
        return msg.checked == flag;
      });

      if (has) {
        this.isIndeterminate = true;
      } else {
        this.isIndeterminate = false;
        this.checkAll = e;
      }
    },
    //改变已读状态的操作
    isReadChooseList() {
      if (this.data.length == 0) return;
      let ids = [];
      for (let i = 0; i < this.data.length; i++) {
        if (!this.data[i].isRead) {
          ids.push(this.data[i].id);
        }
      }
      if (ids.length !== 0) {
        apiMessage.updateIsRead(ids).then(res => {
          if (res.status == 200) {
            this.$store.dispatch('refrashMsg');
          }
        });
      }
    },
    delChooseList() {
      let list = this.data.filter(item => item.checked).map(v => v.id);
      if (list.length == 0) {
        this.$message.error('请先选择要删除的消息');
        return;
      }
      this.$confirm('您确定要删除所选消息吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiMessage.del(list).then(res => {
          if (res.status == 200) {
            this.$message.success('删除成功');
            this.queryData.pageIndex = 1;
            this.queryMessage(true);
          } else {
            this.$message.error('删除失败' + res.message);
          }
        });
      });
    },
    delItem(item) {
      this.$confirm('您确定要删除此消息吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiMessage.del([item.id]).then(res => {
          if (res.status == 200) {
            this.$message.success('删除成功');
            this.queryData.pageIndex = 1;
            this.queryMessage(true);
          } else {
            this.$message.error('删除失败' + res.message);
          }
        });
      });
    },
    filterContent(content) {
      return content.split('-');
    },
    // 跳转详情事件11
    returnRouter(item) {
      if (item.refType == 2) {
        return this.webBaseUrl + '/article/detail?id=' + item.refId;
      } else if (item.refType == 4||item.refType == 5) {
        return this.webBaseUrl + '/qa/answer?id=' + item.refId;
      } else {
        if (item.conType == 10) {
          return this.webBaseUrl + '/course/micro?id=' + item.refId;
        } else if (item.conType == 20) {
          return this.webBaseUrl + '/course/detail?id=' + item.refId;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.msg-nav {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  line-height: 40px;
  background-color: #ffffff;
  padding: 5px 10px;
}
.msg-list {
  border-bottom: 1px solid rgb(237, 237, 237);
  margin-top: 10px;
  line-height: 26px;
  background-color: #ffffff;
  padding: 5px 10px;
  &:first-of-type {
    padding-top: 15px;
  }
  .msg-top {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
  }
  .msg-body {
    padding: 10px 10px 10px 25px;
    color: #727272;
    a:hover {
      color: #409eff;
    }
  }
  .msg-time {
    color: #a5a5a5;
    font-size: 14px;
    padding-left: 25px;
  }
}
.messageList {
  > p {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(219, 219, 219);
    padding-bottom: 10px;
    margin: 0;
    align-items: center;
  }
  .messageItem:not(:first-child) {
    padding-top: 10px;
  }
  .messageItem {
    // width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(219, 219, 219);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-checkbox {
      margin-right: 5px;
    }
    .el-button {
      margin-left: auto;
    }
    // margin-bottom: 10px;
    p {
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    p:first-of-type {
      > span {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span:first-of-type {
          font-size: 12px;
        }
      }
      > span:last-of-type {
        font-size: 14px;
        color: #b7b7b7;
        margin-left: 5px;
      }
    }
    p:last-of-type {
      font-size: 14px;
      text-indent: 3em;
      span:last-of-type {
        font-size: 14px;
        color: #b7b7b7;
      }
    }
  }
}
.pagination-div {
  cursor: pointer;
}
</style>