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=" 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 class="navbut" type="text" @click="isReadChooseList">设置已读</el-button>
          <el-button class="navbut" type="text" @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">
          <a href="javascript:void(0);">
          <div class="msg-top">
            <div>
              <span style="padding-right: 10px;"><el-checkbox disabled></el-checkbox></span>
              <span @click="showGuideDialog()">系统消息</span>
            </div>
          </div>
          <div class="msg-body" @click="showGuideDialog()">
            <div class="msg-body-content">新版本上线！点击此处查看功能介绍</div>
          </div>
          <div class="msg-time">2022-10-20 10:21:50</div>
          </a>
        </div>
        <!-- 临时增加，上线一段时间后删除   结束 -->


        <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(item)"></el-checkbox></span>
              <span v-if="!item.isRead" style="font-size:12px;padding:5px 7px; border-radius: 2px;background: #FF6562;color: #fff;margin-right: 5px">未读</span>
              <span v-else style="font-size:14px;padding:5px 7px; background: #eee;  border-radius: 2px; color: #666666;margin-right: 5px">已读</span>
              <a :href="returnRouter(item)">
				<span>{{ item.title }}</span>
			  </a>
            </div>
          </div>
          <div class="msg-body">
			<a :href="returnRouter(item)">
				<div class="msg-body-content" v-if="item.content">{{item.tip}}-{{ item.content }}</div>
        <div class="msg-body-content" v-else>{{item.tip}}</div>
			</a>
            <div class="msg-body-but">
                <el-button type="danger" plain   @click="delItem(item)">删除</el-button>
            </div>
          </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> -->
    <guide-box ref="guide"></guide-box> <!-- 引导页 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import portalHeader from '@/components/PortalHeader.vue';
import portalFooter from '@/components/PortalFooter.vue';
import GuideBox from '@/components/Portal/guideBox.vue'
import apiMessage from '@/api/system/message.js';
export default {
  name: 'answer',
  components: {
    portalHeader,
    portalFooter,
    GuideBox
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      queryData: {
        pageIndex: 1,
        pageSize: 6,
        isRead: null
      },
      total: 0,
      checkAll: false,
      data: [],
      totalPages: '',
      checkedIds:[],
      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(item) {
      if(item.checked){
        this.checkedIds.push(item.id);
      }else{
        let obj = this.checkedIds.indexOf(item.id);
        this.checkedIds.splice(obj, 1)
      }
      let flag = !item.checked;
      let has = this.data.some(msg => {
        return msg.checked == flag;
      });

      if (has) {
        this.isIndeterminate = true;
      } else {
        this.isIndeterminate = false;
        this.checkAll = item.checked;
      }
    },
    //改变已读状态的操作
    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(this.checkedIds.length>0){
          apiMessage.updateIsRead(this.checkedIds).then(res => {
          if (res.status == 200) {
            this.$store.dispatch('refrashMsg');
            this.queryMessage(true)
          }
        });
        this.checkedIds = [];
        return;
      }

      if(this.checkAll){
        apiMessage.updateIsRead(ids).then(res => {
          if (res.status == 200) {
            this.$store.dispatch('refrashMsg');
            this.queryMessage(true)
          }
        });
        return;
      }
    },
    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('-');
    },

    // 弹出新功能引导页弹窗事件(临时)
    showGuideDialog(){
      this.$refs.guide.guideCollection = true;
    },


    // 跳转详情事件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>
.navbut{
  width: 110px;
  height: 30px;
  border-radius: 2px;
  margin-left: 25px;
  text-align: center;
  border: 1px solid #0078FC;
  padding: 0;
  color: #0078FC ;
}
.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;
    display: flex;
    width: 100%;
    .msg-body-content{
      flex: 1;
      word-break:break-all;
      color: #727272;
      a:hover {
        color: #409eff;
      }
    }
    .msg-body-but{
      margin-left: auto;

      button{
         width: 88px;
         height: 32px;
         background-color: #fff;
         border-radius: 16px;
         padding: 0;
         color: #F52F3E;
         line-height: 32px;
         text-align: center;
         border: 1px solid #F52F3E;
      }
      button:hover{
         background-color: rgba(255,101,98,0.13);
         color: #F52F3E;


      }
    }
  }
  .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>