learning-system-portal/src/views/qa/TeacherList.vue

<template>
  <div style="padding:10px 12px 0 22px">
    <Remark :fixed="false">
      <ul>
        <li>菜单与功能意义不一至，一期临时处理</li>
      </ul>
    </Remark>
    <el-input style="width: 200px;margin-right: 10px" v-model="dataList.send" clearable placeholder="人员姓名"></el-input>
    <!-- 提问人：
    <el-input style="width: 200px;margin-right: 10px"></el-input> -->
    <el-button type="primary" @click="getList" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" icon="el-icon-refresh-right" @click="reset">重置</el-button>
    <div class="article-list" v-for="(item, idx) in dataList.list" :key="idx">
      <div class="article-info" style="height:100%">
        <div class="article-info-title" style="height:100%">
          <div class="arttit">
            <div class="arttit-tit ">
                 <span class="one-line-ellipsis">来源{{ filterObjType(item.objType) }}：{{item.title}}</span>
            </div>
           <div class="art-text two-line-ellipsis">
             <span> {{item.sysCreateBy}}@我 {{item.content}}</span>
           </div>
            <div class="art-huida" v-for="(re,reIdx) in item.replys" :key="re.id">
            <span class="one-line-ellipsis">我的回答：{{ re.content }}</span>
            <div class="art-time"  style="display: flex;justify-content: space-between;">
              <div>
                 回复于：{{ item.sysCreateTime }}
              </div> 
              <div>
                <span><el-button type="text" icon="el-icon-delete" size="mini" @click="deleteMyReply(item,re,reIdx)" style=" color:#8590A6;font-size:14px">删除回复</el-button></span>
              </div>
            </div>
          </div>
          </div>

        </div>

      </div>
    </div>




    <el-dialog :title="replyName" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
      <div style="height: 200px;padding-right: 30px;">
        <el-form label-width="80px">
          <el-form-item label="回复内容:">
            <el-input v-model="replayContent.content" :autosize="{ minRows: 9, maxRows: 9 }" type="textarea" placeholder="请输入回复内容(限800字以内)"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shareShow = false">取 消</el-button>
        <el-button type="primary" @click="enSure">确认</el-button>
      </span>
    </el-dialog>
    <div v-if="dataList.list.length > 0" style="text-align: center;margin-top:60px">
      <el-pagination
      background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dataList.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="dataList.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataList.count"
      ></el-pagination>
    </div>
    <div v-else>
        <div v-if="dataList.list.length == 0">
            <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
              <div v-else class="zan-wu">暂无数据</div>
            </div>
        </div>
  </div>
</template>

<script>
import apiComment from '@/api/modules/comments.js'
import { mapGetters } from 'vuex';
export default {
  name: 'articleItems',
  data() {
    return {
      isSearh: false,
      dataList: {
        pageIndex:1,
        type:1,
        send:'',
        pageSize:10,
        count:0,
        list:[]
      },
      replyName:'',
      shareShow: false,
      replyItem:{},//记录当前要回复的哪一条
      replayContent: {

      },
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getData()
  },
  components: {},
  methods: {
    getList(){
    this.dataList.pageIndex = 1;
     this.isSearh = true;
     this.getData();
    },
    reset(){
      this.dataList.pageIndex = 1;
      this.dataList.send = ''
      this.getData();
      this.isSearh = false;
    },
    getData(){
      this.dataList.list=[]
      let {pageIndex,pageSize}=this.dataList;
      let query={pageIndex,pageSize};
      if(this.dataList.type){
        query.type=this.dataList.type
      }
      if(this.dataList.send){
        query.send=this.dataList.send
      }
      query.isread=true;
      apiComment.pagelist(query).then(res=>{
        if(res.status==200){
          if(res.result.list.length!=0){
            this.dataList.count=res.result.count;
            this.dataList.list=res.result.list;
            this.loadReplys();
          }
        }else{
          this.$message.error("数据搜索失败")
        }
      }).catch(err=>{
        this.$message.error("数据搜索失败")
      })
    },
    loadReplys(){ //加载回复的内容
      let idArray=[];
      this.dataList.list.forEach(item=>{
         idArray.push(item.id);
      });
      let params={
        num:1,
        ids:idArray.join(),
        type:this.dataList.type
      }

      apiComment.userReplyList(params).then(rs=>{
        if(rs.status==200){
          this.dataList.list.forEach(comm=>{
            comm.replys=[];
            rs.result.forEach(re=>{
              if(comm.id==re.parentId){
                 comm.replys.push(re);
              }
            })
          })
        }
      });
    },
    handleSizeChange(val){
      this.dataList.pageSize=val
    },
    handleCurrentChange(val){
      this.dataList.pageIndex=val
    },
    filterObjType(objType){
      switch(objType){
        case 1:{
          return '课程'
        }
        case 2:{
          return '文章'
        }
        case 3:{
          return '案例'
        }
        case 4:{
          return '问答'
        }
      }
    },

    replay(item) {
      this.replyItem=item;
      this.replyName = '回复给' + item.replyName;
      this.replayContent={...item};
      this.replayContent.parentId=item.id,
      this.replayContent.content=''
      this.shareShow = true;
    },
    enSure() {
      let {id:commentId,parentId,content,objType,objId}=this.replayContent
      let replayInfo={
        commentId:this.replayContent.id,
        parentId:this.replayContent.parentId,
        content:this.replayContent.content,
        objType:this.replayContent.objType,
        objId:this.replayContent.objId,
        replyAid:this.replayContent.sysCreateAid,
        toAid:this.replayContent.sysCreateAid,
        toAname:this.replayContent.sysCreateBy,
        parentRead:true
      }

      apiComment.reply({commentId,parentId,content,objType,objId}).then(res=>{
        if(res.status==200){
          this.$message.success("回复成功");
          this.shareShow = false;
          //this.getData();
          if(!this.replyItem.replys){
            this.replyItem.replys=[];
          }
           this.replyItem.replys.push(res.result);
        }else{
          this.$message.error("回复失败:"+res.message);
        }
      }).catch(err=>{
        this.$message.error("回复失败");
      })
    },
    deleteMyReply(item,reply,reIdx) {
      this.$confirm('您确定要删除自己的回复吗？?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          let delParam={
            id:reply.id,
            pid:reply.parentId,
            user:this.userInfo.aid
          }
          apiComment.delReply(delParam).then(rs=>{
             if(rs.status==200){
                this.$message({type: 'success',message: '删除成功!'});
                item.replys.splice(reIdx,1);
             }
          })

      })
    }
  },
};
</script>

<style lang="scss" scoped>
.list-wu{
  text-align: center;
  margin: 40px;
  color: #333;
}
.one-line-ellipsis {
  display: -webkit-box;
  white-space:pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break:break-all;
}
.two-line-ellipsis{
  word-break:break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
}
.arttit{
  width: 100%;
  height: 100%;
  .arttit-tit{
    font-size: 18px;
    color: #333;
    padding-bottom: 10px;
  }
  .art-text{
    font-size: 14px;
    color: #666;
    line-height: 25px;
  }
  .art-huida{
    font-size: 16px;
    color: #444;
    padding-top: 10px;
  }
  .art-time{
    font-size: 12px;
    color: #999;
  }
}
.el-pagination {
  text-align: center;
}
.text-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}
.text-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}
.text-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}
.article-list {
  margin: 5px 0;
  border-bottom: 1px solid #E8E8E8;
  padding-top: 10px;
  padding-bottom: 10px;
  // height: 184px;
}

.article-info {
  .article-info-title {
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: 30px;
    .article-info-date {
      height: 40px;
      line-height: 40px;
      float: right;
      font-weight: 600;

      font-size: 14px;
      i {
        margin-right: 5px;
      }
    }
  }
  .article-info-summary {
    margin-right: 60px;
    height: 65px;
    color: #999999;
  }
  .article-info-tools {
    height: 30px;
    .article-info-tools-auth {
      // float: left;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 13px;
      color: #999999;
      span {
        margin-right: 10px;
      }
      img {
        margin-right: 10px;
        width: 30px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .article-info-tools-btns {
      float: right;
      .article-info-tools-btn {
        margin: 0 0 0 15px;
      }
    }
  }
}
</style>