admin_home/src/views/job/checkjobRecruitingList.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.keyword"/>
              </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="100"></el-table-column>
              <el-table-column prop="title" label="职位名称" width=""></el-table-column>
              <el-table-column prop="website_name" label="网站名称" width=""></el-table-column>
              <el-table-column prop="user_name" 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="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==0">待审核</span>
                  <span v-if="scope.row.status==1">已审核</span>
                  <span v-if="scope.row.status==2">已拒绝</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="300" header-align="center">
                <template slot-scope="scope">
                  <div class="listBtnBox">
                    <div class="listMainBtn" @click="getUpRow(scope.row.id, tableData)" v-if="creatNews_user_type == '10000'"><i class="el-icon-check"></i>审核</div>
                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
                    <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><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------------------------------------------------------------>

      <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
    <el-dialog title="请输入驳回理由" :visible.sync="examineWindow" :close-on-click-modal="false">
      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
        <div class="formDiv">
          <el-form-item label="驳回原因：" :label-width="formLabelWidth" prop="refuse_reason" class="custom-align-right">
            <el-input type="textarea" v-model="form.refuse_reason" class="custom-textarea" placeholder="请输入驳回原因" :rows="3"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button type="info" @click="examineWindow=false">取消</el-button>
          <el-button type="primary" @click="examineToServe">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--弹出框1：外部表单弹出框 end------------------------------------------------------------>

    </div>
  </template>
  
  <script>
  //表格标题
  import tableTitle from './components/tableTitle';
  //引入公用样式
  import '@/styles/global.less';
  import { getUseType } from '@/utils/auth';
  export default {
    components: {
      tableTitle,//表格标题
    },
    data() {
      const validateEmpty = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('该项不能为空！'))
        } else {
          callback()
        }
      }
      return {
        //1.列表和分页相关 start ------------------------------------------------------------>
        tableDivTitle:"职位列表",
        tableData:[],//内容
        editId:0,//要修改的网站id
        examineWindow:false,//审核窗口
        formLabelWidth:"120px",//表单label宽度
        getApiData:{
          title:"",//职位名称
          website_name:"",//网站名称
          user_name:"",//发布人
          created_at:"",//创建时间
          updated_at:"",//修改时间
          page:1,//当前是第几页
          page_size:10,//一共多少条
          checkout:0,//是否审核 0 未审核 
          
        },
        //提交驳回
        form:{
          refuse_reason:""
        },
        formRules: {
          //导航池名称不能为空
          refuse_reason: [{ required: true, trigger: 'blur', validator: validateEmpty }],
        },
        creatNews_user_type:'0',//用户类型
        keyword:"",//搜索关键字
        allCount:0,//总条数
        //分页相关 end ------------------------------------------------------------>
      }
    },
    methods: {
      //1.列表和分页相关 start ------------------------------------------------------------>
      //1.1 开始请求列表信息方法
      getData(type){
        if(type=="search"){
          this.getApiData.page = 1;
        }
        this.getApiData.checkout = 0;
        // this.getApiData.keyword = this.keyword;
        this.$store.dispatch('news/getJobRecruitingList',this.getApiData).then(res=> {
          let data = [];
          console.log(res.data.rows)
          this.tableData = res.data.rows; //给与内容
          this.allCount = res.data.count; //给与总条数
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '网络错误，请重试！'
          });
        })
      },
      //1.2 删除内容
      deleteRow(id){
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("当前删除：" + id)
          this.$store.dispatch('news/delJobRecruiting',{id:id}).then(res=> {
            this.getData();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'warning',
              message: '网络错误，请重试！'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          });
        });
      },
      //1.4 审核温江
      getUpRow(id){
        //设置待审核的id
        this.editId = id;
        console.log(id)
        this.$confirm('将此职位通过审核吗?', '提示', {
          confirmButtonText: '通过',
          cancelButtonText: '拒绝',
          type: 'warning'
        }).then(() => {
          this.upRow(id,1)
        }).catch(() => {
        //输入驳回理由
        console.log("驳回")
        this.examineWindow = true;
        })
      },
      //1.5 修改文章状态
      upRow(id,status){
        let data = {
          id:id,
          status:status
        }
        this.$store.dispatch('news/checkJobRecruiting',data).then(res=> {
          if(res.code==200){
            this.$message({
              type: 'success',
              message: '操作成功！'
            });
            this.getData();
          }
        })
      },
      //提交驳回内容
      examineToServe(id){
        this.$refs.form.validate(valid => {
          if (valid) {
            let data = {
              id:this.editId,
              status:2,//驳回status
              refuse_reason:this.form.refuse_reason
            }
            this.$store.dispatch('news/checkJobRecruiting',data).then(res=> {
              if(res.code==200){
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                });
                this.getData();
                this.form.refuse_reason = "";//清空上一次的输入
                this.examineWindow = false;
              }
            })
          }else{
            this.$message.error("驳回理由不能为空！")
          }
        })
      },
      //1.4 列表内容分页
      //直接跳转
      handleSizeChange(val) {
        this.getApiData.page = val;
        this.getData();
      },
      //1.5 点击分页
      handleCurrentChange(val) {
        this.getApiData.page = val;
        this.getData();
      },
      //1.6 重置按钮
      clearSearchList(){
        this.getApiData.keyword = "";
        this.getApiData.page = 1;
        this.getApiData.page_size = 10;
        this.getData();
      },
      //列表和分页相关 end ------------------------------------------------------------>
  
      //2.添加新闻 start ------------------------------------------------------------>
      //跳转到职位发布页面
      goCreat(){
        this.$router.push({
          path: '/creatJob',
        });
      },
      goEdit(id){
        let data = {
          id:id,
          to:"checkjob"
        }
        this.$router.push({
          path: '/creatJob',
          query: data
        });
      }
      //添加新闻 end ------------------------------------------------------------>
    },
    mounted(){
      this.creatNews_user_type = getUseType()
      //1.获得初始数据
      this.getData();
    }
  }
  </script>
  
  <style scoped lang="less">
  
  </style>