admin_home/src/views/chat - 副本/topic.vue

<template>
  <div class="mainBox">
    <!--搜索功能 start------------------------------------------------------------>
    <div class="layerBox_search">
      <div class="layerBoxLine">
        <el-row>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">课题标题：</div>
              <el-input placeholder="请输入课题标题" autocomplete="off" v-model="getApiData.title"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">课题分类：</div>
              <el-select v-model="getApiData.type" placeholder="请选择课题分类..">
                <!-- <el-option label="科研" value="1"></el-option>
                <el-option label="维权" value="2"></el-option> -->
                <el-option :label="item.label" :value="item.value" v-for="item in topicType"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">作者：</div>
              <el-input placeholder="请输入作者姓名" autocomplete="off" v-model="getApiData.nickname"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="layerBoxLineTwo">
        <el-row>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">审核状态：</div>
              <el-select v-model="getApiData.status" placeholder="请选择审核状态..">
                <!-- <el-option label="待审核" value="1"></el-option>
                <el-option label="已通过" value="2"></el-option>
                <el-option label="已拒绝" value="3"></el-option> -->
                <el-option :label="item.label" :value="item.value" v-for="item in topicStatus"></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="layerBoxNoBg">
      <div>
        <el-button type="primary" @click="goCreat">发布课题</el-button>
      </div>
      <div>
        <el-button @click="clearSearchList">重置</el-button>
        <el-button type="primary" @click="getData('search')">搜索</el-button>
      </div>
    </div>
    <!--搜索功能 end------------------------------------------------------------>

    <!--表格内容 start------------------------------------------------------------>
    <div class="layerBox">
      <tableTitle :name="tableDivTitle"/>
      <el-row>
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
            <el-table-column prop="title" label="课题标题" width=""></el-table-column>
            <el-table-column prop="type" label="课题分类" width="">
              <!-- <template slot-scope="scope">
                <div v-if="scope.row.type==1">科研</div>
                <div v-if="scope.row.type==2">维权</div>
                <div v-if="scope.row.type==3">讨论</div>
              </template> -->
            </el-table-column>
            <el-table-column prop="author" label="作者" width=""></el-table-column>
            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
            <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
            <el-table-column prop="status" label="状态" width="">
              <template slot-scope="scope">
                <div v-if="scope.row.status==1" class="status1">待审核</div>
                <div v-if="scope.row.status==2" class="status2">已通过</div>
                <div v-if="scope.row.status==3" class="status3">已拒绝</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="280" header-align="center">
              <template slot-scope="scope">
                <div class="listBtnBox">
                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-delete"></i>删除</div>
                  <div class="listEditBtn" @click="goEdit(scope.row.id)"><i class="el-icon-edit-outline"></i>编辑</div>
                  <div class="listMainBtn" @click="openEditWindow(scope.row.id)" v-if="$store.state.user.role_id==1||$store.state.user.role_id==21||$store.state.user.role_id==23"><i class="el-icon-edit-outline"></i>审核</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
    </div>
    <!--分页 start------------------------------------------------------------>
    <div class="alignBox">
      <el-row>
        <el-col :span="24">
          <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
        </el-col>
      </el-row>
    </div>
    <!--分页 end------------------------------------------------------------>
    <!--表格内容 end------------------------------------------------------------>

    <!--审核状态弹出框 start------------------------------------------------------------>
    <el-dialog :visible.sync="auditStatus" title="审核状态" :close-on-click-modal="false" width="420px">
      <div>
        <div class="contentBox">
          <el-radio-group v-model="form.radio">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">拒绝</el-radio>
          </el-radio-group>
        </div>
        <div class="footerButtonBox">
          <el-button type="info" @click="auditStatus = false">取消</el-button>
          <el-button type="primary" @click="editStatus">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--审核状态弹出框 end------------------------------------------------------------>
  </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle';
//引入公用样式
import '@/styles/global.less';

export default {
  components: {
    tableTitle,//表格标题
  },
  data() {
    return {
      //1.列表和分页相关 start ------------------------------------------------------------>
      tableDivTitle:"课题列表",
      tableData:[],//内容
      editId:0,//要修改的网站id
      topicType:[],//课题分类
      topicStatus:[],//课题状态
      getApiData:{
        title:"",//标题
        type:"",//课题分类
        nickname:"",//作者
        status:"",//审核状态
        page:1,//当前是第几页
        page_size:10,//一共多少条
      },
      allCount:0,//总条数
      auditStatus:false,//审核状态弹出框
      form:{
        radio:2 //1=通过 2=拒绝
      }
      //分页相关 end ------------------------------------------------------------>
    }
  },
  methods: {
    //1.列表和分页相关 start ------------------------------------------------------------>
    //1.1 开始请求商圈列表
    getData(type){
      if(type=="search"){
        this.getApiData.page = 1;
      }
      this.$store.dispatch('chat/getTopicsList',this.getApiData).then(res=> {
        this.tableData = res.data.data; //给与内容
        this.allCount = res.data.total; //给与总条数
        //把数字转换为汉字
        for(let item of res.data.data){
          for(let item2 of this.topicType){
            if(item.type == item2.value){
              item.type = item2.label;
            }
          }
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '网络错误，请重试！'
        });
      })
    },
    //1.2 删除商圈
    deleteRow(id){
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("当前删除：" + id)
        let data = {
          id:id+""
        }
        this.$store.dispatch('chat/delTopic',data).then(res=> {
          this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '网络错误，请重试！'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    //1.4 列表内容分页
    //直接跳转
    handleSizeChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.5 点击分页
    handleCurrentChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.6 重置按钮
    clearSearchList(){
      this.tableData = [];
      this.getApiData.title = "";
      this.getApiData.type = "";
      this.getApiData.nickname = "";
      this.getApiData.status = "";
      this.getApiData.page = 1;
      this.getApiData.pageSize = 10;
      this.getData();
    },
    //1.7 查询商圈分类
    getTopicType(){
      this.$store.dispatch('chat/topicType',this.getApiData).then(res=> {
        this.topicType = res.data;
        console.log(this.topicType)
      }).catch(() => {
        this.$message.error("查询商圈分类失败！");
      })
    },
    //1.8 查询商圈状态
    getTopicStatus(){
      this.$store.dispatch('chat/topicStatus',this.getApiData).then(res=> {
        this.topicStatus = res.data;
        console.log(res)
      }).catch(() => {
        this.$message.error("查询商圈状态失败！");
      })
    },
    //列表和分页相关 end ------------------------------------------------------------>

    //2.添加商圈 start ------------------------------------------------------------>
    //跳转到资讯发布页面
    goCreat(){
      this.$router.push({
        path: '/creatTopic',
      });
    },
    goEdit(id){
      let data = {
        id:id
      }
      this.$router.push({
        path: '/creatTopic',
        query: data
      });
    },
    //添加商圈 end ------------------------------------------------------------>

    //3.审核 start ------------------------------------------------------------>
    openEditWindow(id){
      this.editId = id;
      this.auditStatus = true;
    },
    editStatus(){
      let data = {
        id:this.editId + "",
        status:this.form.radio + ""
      }
      this.$store.dispatch('chat/applyTopic',data).then(res=> {
        console.log(res)
        this.getData();
        this.auditStatus = false;
      });
    },
    //3.审核 end ------------------------------------------------------------>
  },
  mounted(){
    //1.获得初始数据
    this.getData();
    //2.查询课题分类
    this.getTopicType();
    // //3.查询课题状态
    this.getTopicStatus();
  }
}
</script>

<style scoped lang="less">
  .contentBox {
    padding: 0 0 20px 0;
  }
  .footerButtonBox {
    text-align: right;
  }
  .status1 {
    color: #F19655;
  }
  .status2 {
    color: #519C66;
  }
  .status3 {
    color: #CC5F5F;
  }
</style>