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

<template>
  <div class="u-page">
    <Remark>
      <ul>
        <li>点击标题跳转到问答详情页怎么传参合适，试着用open传参但是是打开的窗口不是想要的</li>
        <li>这里的分页存在问题，还需要再想想</li>
      </ul>
    </Remark>
    <div style="padding: 0px 0px 10px 0px;">
      <div style="display: flex;justify-content:flex-start;align-items: center;">
        <!-- <div style="padding: 0px 5px;"> -->
          <!-- <el-select v-model="queryObj.orderField" placeholder="排序" clearable style="width: 110px;">
            <el-option label="最新" value="id"></el-option>
            <el-option label="最热" value="views"></el-option>
          </el-select> -->
        <!-- </div> -->
        <div style="padding: 0px 0px;">
          <!-- 审核状态： style="width: 110px;"-->
          <el-select v-model="queryObj.status" placeholder="审核状态" clearable >
            <el-option label="全部" :value="null"></el-option>
            <el-option label="已通过" :value="1"></el-option>
            <el-option label="未通过" :value="2"></el-option>
            <el-option label="待审核" :value="0"></el-option>
          </el-select>
        </div>
        <div style="padding-left:10px">
          <!-- 问题状态： -->
          <el-select v-model="queryObj.isResolve" placeholder="解决情况" clearable >
            <el-option label="全部" :value="null"></el-option>
            <el-option label="待解决" :value="false"></el-option>
            <el-option label="已解决" :value="true"></el-option>
          </el-select>
        </div>
        <div style="padding: 0px 10px;"><el-input placeholder="请输入标题" v-model="queryObj.keyword" clearable></el-input></div>
        <el-button icon="el-icon-search" @click="search" type="primary" >搜索</el-button>
          <el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button>
      </div>
        <div style="display: flex;justify-content:flex-start;align-items: center;margin-top:10px">
        <!-- <div style="padding: 0px 5px;"><el-button icon="el-icon-search" @click="getQaList" type="primary" >搜索</el-button></div>
          <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button></div> -->
        <div style="display: flex;justify-content: flex-start;align-items: center;">

          <el-button style="margin-left:0px" type="success" @click="setEssence('set')" >设置精华</el-button>
          <el-button type="warning" @click="setEssence('cancel')" >取消精华</el-button>
         <div style="padding-left:10px"><el-checkbox v-model="queryObj.isEssence" @change="isEssenceChange()">精华问题</el-checkbox></div>

        </div>
        </div>
    </div>
    <el-table style="overflow:auto;" class="infinite-list"
     :data="qaList"
     border stripe
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="标题" width="200px" show-overflow-tooltip prop="title">
        <template slot-scope="scope">
          <span @click="viewTopic(scope.row)" :class="scope.row.isEssence ? 'isSelect' : 'previewStyle'">{{ scope.row.title }}</span>
          <!-- <a :style="cursor:pointer;" target="_blank" :href="`${webBaseUrl}/qa/answer`">{{scope.row.name}}</a> -->
        </template>
      </el-table-column>
      <el-table-column label="浏览" width="60px" prop="views"></el-table-column>
      <el-table-column label="点赞" width="60px" prop="praises"></el-table-column>
      <el-table-column label="收藏" width="60px" prop="favorites"></el-table-column>
      <el-table-column label="回复" width="60px" prop="answers"></el-table-column>
      <el-table-column width="100px" label="发布时间" prop="sysCreateTime">
        <template slot-scope="scope">
          {{ scope.row.sysCreateTime | sysCreateTimeFilter }}
        </template>
      </el-table-column>
      <el-table-column label="作者" prop="sysCreateBy"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.isResolve ? '已解决' : '待解决' }}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '待审核' : scope.row.status === 1 ? '已通过' : scope.row.status === 2 ? '未通过' : '已撤销' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120px">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="text" v-if="scope.row.status==0"  icon="el-icon-s-check" @click="aduit(scope.row)" size="small">审核</el-button>
            <!-- <el-button type="text"  icon="el-icon-top">设置精华</el-button> -->
            <el-button type="text"  icon="el-icon-delete" @click="delItem(scope.row)" size="small">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="qaList.length > 0" style="text-align: center;margin-top: 50px;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryObj.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        ref="multipleSelection"
        :reserve-selection="true"


      ></el-pagination>
    </div>
    <div style="height: 100px;"></div>
    <el-dialog custom-class="g-dialog" title="审核问答" :visible.sync="dialogVisible">
      <div></div>
      <el-form :model="form" label-width="80px">
        <el-form-item label="标题">{{ form.title }}</el-form-item>
        <el-form-item label="作者">{{ form.sysCreateBy }}</el-form-item>
        <el-form-item label="内容">{{ form.content }}</el-form-item>
        <el-form-item label="审核结果">
          <el-radio-group v-model="form.status">
            <el-radio :label="true">通过</el-radio>
            <el-radio :label="false">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见"><el-input type="textarea" placeholder="请输入0-200个字" maxlength="200" v-model="form.auditRemark"></el-input></el-form-item>
        <!-- <el-form-item label="人数"><el-input v-model="form.num"></el-input></el-form-item> -->
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="enSure">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import apiQa from '@/api/modules/qa.js';
import { mapGetters } from 'vuex';
export default {
  name: 'articleItems',
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
    getRowKeys(row) {
        return row.id;
},
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        orderField: 'id',
        orderAsc: false,
      }, //查询对象
      qaList: [], //数据列表
      selectList: [], //被勾选的列表
      total: 0,
      auditData:{},
      dialogVisible: false,
      form: {},
    };
  },
  mounted() {
    this.getQaList();
  },
  filters: {
    sysCreateTimeFilter: function(value) {
      if (value) {
        return value.split(' ')[0];
      }
    }
  },
  methods: {
    isEssenceChange(){
      this.getQaList();
    },
  search(){
    this.queryObj.pageIndex = 1;
    this.getQaList();
  },
    reset(){
      this.queryObj.orderField = ''
      this.queryObj.status = ''
      this.queryObj.isResolve = ''
      this.queryObj.keyword = ''
      this.queryObj.isEssence = ''
    this.queryObj.pageIndex = 1;
	  this.getQaList();
    },
    //查询问答列表数据
    getQaList() {
      let queryData={...this.queryObj}
      if(!queryData.isEssence){
        queryData.isEssence=null
      }
      apiQa
        .pageList(queryData)
        .then(res => {
          if (res.status == 200) {
            this.total = res.result.count;
            res = res.result.list;
            this.qaList = res;
          }
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: '数据搜索失败'
          });
        });
    },
    //接口删除问答单条数据
    delQaList(data) {
      const { id } = data;
      apiQa.del(id).then(res => {
          if (res.status == 200) {
            this.$message({ type: 'success',  message: '删除成功' });
            let event = {
              key: "QuestionDelete",//被管理员删除
              title: '被管理员删除问题',//事件的标题
              parameters:"author:"+data.sysCreateAid,//用户自定义参数 name:value,name:value
              content: '被管理员删除问题',//事件的内容
              objId: data.id,//关联的id
              objType: "3",//关联的类型
              objInfo:data.title,
              aid: this.userInfo.aid, //当前登录人的id
              aname: this.userInfo.name,//当前人的姓名
              status: 1 //状态，直接写1
            }
            this.$store.dispatch("userTrigger", event);
            this.getQaList();
          }
        })
        .catch(err => {
          console.log(err,'err');
          this.$message({
            type: 'error',
            message: '删除失败'
          });
        });
    },
    //删除单条数据
    delItem(item) {
      this.$confirm('您确定要删除所选问答吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delQaList(item);

      });
    },
    //设置单挑数据
    handleSelectionChange(val){
      this.selectList = val;
    },
    //设置精华
    setEssence(type) {
      let isEssence;
      let message;
      if (type == 'cancel') {
        isEssence = false;
        message = '取消精华';
      } else {
        isEssence = true;
        message = '设置精华';
      }
      if (this.selectList.length == 0) {
        return this.$message({
          type: 'warning',
          message: '请勾选问答'
        });
      }
      const ids = this.selectList.map(item => item.id);
      apiQa
        .isEssence({ ids, isEssence })
        .then(res => {
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: `${message}成功`
            });
            this.getQaList();
          } else {
            this.$message({
              type: 'error',
              message: `${message}失败`
            });
          }
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: `${message}失败`
          });
        });
    },
    handleSizeChange(item) {
      this.queryObj.pageSize = item;
      this.getQaList();
       for( var i=0;i<this.qaList.length;i++){

  this.$refs.multipleTable.toggleRowSelection(this.qalist[index])

       }
    },
    handleCurrentChange(item) {
      this.queryObj.pageIndex = item;
      this.getQaList();

    },
    viewTopic(data) {
     // window.open(this.webBaseUrl+'/qa/answer?id='+data.id, '_blank');
       this.$router.push({path:'/qa/answer',query:{id:data.id}})
    },
    aduit(row) {
      this.form={...row};
      this.form.status=true;
      this.dialogVisible = true;
    },
    enSure() {
      let {id,status:auditState,auditRemark}=this.form
      if(!auditState&&!auditRemark){
        return this.$message.warning('如果审核未通过要填写拒绝理由')
      }
      apiQa.savaAudit({id,auditState,auditRemark}).then(res=>{
        if(res.status==200){
          this.$message.success("操作成功");
          this.dialogVisible = false;
          this.getQaList();
        }else{
          this.$message.error("操作失败")
        }
      }).catch(err=>{
        this.$message.error("操作失败")
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.article-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}
.article-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}
.article-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}
.article-list {
  margin: 5px 0;
  border: 1px solid #dddddd;
  padding: 10px;
}

.article-info {
  .article-info-title {
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    .article-info-date {
      width: 150px;
      height: 40px;
      line-height: 40px;
      float: right;
      font-weight: 200;
      color: #999999;
      i {
        margin-right: 5px;
      }
    }
  }
  .article-info-summary {
    height: 65px;
    color: #999999;
  }
  .article-info-tools {
    height: 30px;
    .article-info-tools-auth {
      float: left;
      font-size: 13px;
      color: #999999;
      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;
      }
    }
  }
}
.case-row-btn {
  line-height: 25px;

  button {
    height: 20px;
    padding: 3px 20px;
  }
}
.isSelect {
  color: #67c23a;
  cursor: pointer;
}
.unSelect {
  cursor: pointer;
}
</style>