boss/pages/main/index/freework_level.vue

<template>
  <div class="container">
    <div>
      <el-row>
        <el-form :inline="true" class="filter-form" :label-position="labelPosition">
          <el-row>
            <el-form-item label="状态" style="margin-bottom: 5px">
              <el-radio-group v-model="form.order_status" size="mini" @change="searchList()">
                <el-radio-button :label="0">全部({{form.order_status_val.order_status_all}})</el-radio-button>
                <el-radio-button :label="1">待支付({{form.order_status_val.order_status_1}})</el-radio-button>
                <el-radio-button :label="2">待完善({{form.order_status_val.order_status_2}})</el-radio-button>
                <el-radio-button :label="3">审核中({{form.order_status_val.order_status_3}})</el-radio-button>
                <el-radio-button :label="4">联系成功({{form.order_status_val.order_status_4}})</el-radio-button>
                <el-radio-button :label="5">面试中({{form.order_status_val.order_status_5}})</el-radio-button>
                <el-radio-button :label="6">已拒绝({{form.order_status_val.order_status_6}})</el-radio-button>
                <el-radio-button :label="8">待打款({{form.order_status_val.order_status_8}})</el-radio-button>
                <el-radio-button :label="7">已完成({{form.order_status_val.order_status_7}})</el-radio-button>
                <el-radio-button :label="9">暂停认证</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item  label="领域" prop="uid">
              <el-select
                size="small"
                v-model="form.item_type"
                placeholder="领域类型"
                @change="getList_ly"
                clearable
                :style="{ width: '100px' }"
              >
                <el-option
                  v-for="(item, index) in item_type"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item  style="margin-bottom: 5px">
              <el-radio-group v-model="form.item_id" size="mini" @change="searchList()">
                <el-radio-button :label="1101">F1({{form.item_id_val.item_id_1101}})</el-radio-button>
                <el-radio-button :label="1102">F2({{form.item_id_val.item_id_1102}})</el-radio-button>
                <el-radio-button :label="1103">F3({{form.item_id_val.item_id_1103}})</el-radio-button>
                <el-radio-button :label="1104">F4({{form.item_id_val.item_id_1104}})</el-radio-button>
                <el-radio-button :label="1105">F5({{form.item_id_val.item_id_1105}})</el-radio-button>
                <el-radio-button :label="1106">F6({{form.item_id_val.item_id_1106}})</el-radio-button>
                <el-radio-button :label="0">全部({{form.item_id_val.item_id_0}})</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label-width="40px" label="uid" prop="uid">
              <el-input size="small" v-model="form.uid" placeholder="请输入uid"></el-input>
            </el-form-item>
            <el-form-item label-width="60px" label="技术栈" prop="uid">
              <el-cascader
                v-model="form.direction_id_obj"
                :options="direction_data"
                size="small"
                placeholder="请选择技术栈"
                :style="{ width: '170px' }"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item  label-width="60px" label="来源" prop="uid">
              <el-select
                size="small"
                v-model="form.cert_type"
                placeholder="请选择先认证后付款"
                clearable
                :style="{ width: '170px' }"
              >
                <el-option
                  v-for="(item, index) in cert_typeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item  label-width="60px" label="排序" prop="uid">
              <el-select
                size="small"
                v-model="form.orderby"
                placeholder="请选择排序方式"
                clearable
                :style="{ width: '170px' }"
              >
                <el-option
                  v-for="(item, index) in orderby"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="0">
              <el-button size="small" type="primary" @click="submitForm">提交</el-button>
              <el-button :type="show_admin_memo_val" size="small" @click="show_admin_memo">仅显示有备注</el-button>
              <el-button :type="show_interview_val" size="small" @click="show_interview">已安排面试</el-button>
               <el-button size="small" @click="reset">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
    </div>

    <div class="clear"></div>

    <el-table :data="tableData" :span-method="objectSpanMethod" border>
      <el-table-column fixed="left" prop="uid" label="开发者UID" width="100px"/>
      <el-table-column fixed="left" prop="user_info.realname" label="姓名" width="100px"/>
      <el-table-column fixed="left" prop="item_id" label="目标等级" width="100px" />
      <el-table-column prop="user_info.mobile" label="电话" width="130px">
        <template slot-scope="scope">
          {{scope.row.extend_memo.weixin || scope.row.user_info.mobile}}
        </template>
      </el-table-column>
      <el-table-column prop="user_info.direction_name" label="申请技术栈" width="150px"/>
      <el-table-column prop="interview.realname" label="面试官姓名" width="100px">
        <template slot-scope="scope">
          {{scope.row.interview.realname?scope.row.interview.realname:scope.row.interview.uid}}
        </template>
      </el-table-column>
      <el-table-column prop="interview.interview_time" label="面试时间" width="160px">
         <template slot-scope="scope">
          {{scope.row.interview.interview_time ? scope.row.interview.interview_time:'待分配'}}
        </template>
      </el-table-column>
      <el-table-column prop="confirm_item_id" label="最终定级" width="100px"/>


      <el-table-column prop="admin_memo" label="备注" width="200px"/>
      <el-table-column prop="cert_type_text" label="来源" width="160px">
         <template slot-scope="scope">
          {{scope.row.cert_type_text}} - {{scope.row.pay_money}}元
        </template>
      </el-table-column>
      <!-- <el-table-column prop="order_status_text" label="状态" width="100px"/> -->
      <!-- <el-table-column prop="pay_money" label="支付金额" width="100px"/> -->
      <!-- <el-table-column prop="interview.pay_money" label="面试工资" width="100px"/> -->
      <el-table-column prop="addtime" label="申请时间"  width="160px"/>
      <el-table-column prop="pay_time" label="支付时间"  width="160px"/>
      <el-table-column prop="buy_memo" label="备注"  width="160px"/>
      <el-table-column prop="ctrontorl"  fixed="right" label="操作" width="220px">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.cert_status == 0"  @click="setCertStatus(1,scope.row.id)">暂停认证</el-button>
          <el-button type="text" v-else  @click="setCertStatus(0,scope.row.id)">恢复认证</el-button>
          <el-button type="text"  @click="drawer(scope.row.id)">查看详情</el-button>
          <el-button type="text"  @click="set_admin_memo(scope.row)">备注</el-button>
          <el-button v-if="scope.row.order_status<4 && scope.row.pay_status==2" type="text" @click="change_order_status_4(scope.row)">联系成功</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mainPageBox">
      <el-pagination
        @current-change="changePagination"
        :page-size="10"
        :total="Number(total)"
        layout="total, prev, pager, next"
        background
      ></el-pagination>
    </div>

    <freework_level :id="id" :drawer="drawer_bool"/>

  </div>
</template>

<script>
  import freework_level from "/components/drawer/freework_level.vue";
  export default {
    components: {
      freework_level,
    },
    props:[],
    data() {
      return {
        page: 1,
        drawer_bool:false,
        id:0,
        form:{
          timeRange:[],
          order_status:3,
          order_status_val:{
          },
          item_id_val:{},
          item_id:0,
          item_type:1,
          orderby:1,
          direction_id_obj:[],
        },
        show_admin_memo_val:"",
        show_interview_val:"",
        orderby: [
          {
            label: "申请时间顺序",
            value: 0
          },
          {
            label: "申请时间倒序",
            value: 1
          },
          {
            label: "已安排面试",
            value: 2
          },
        ],
        cert_typeOptions: [
          {
            label: "全部",
            value: 0
          },
          {
            label: "活动认证",
            value: 1
          },
          {
            label: "先用后付",
            value: 2
          },
          {
            label: "普通认证",
            value: 3
          }
          ,
          {
            label: "人工认证",
            value: 4
          }
        ],
        item_type: [
          {
            label: "全部",
            value: 0
          },
          {
            label: "申请",
            value: 1
          },
          {
            label: "认证",
            value: 2
          },
        ],
        returnData:{},
        total: 0,
        labelPosition: 'left',
        tableData: [],
        direction_data:[],
      }
    },
    computed: {

    },
    mounted() {
      this.getList();
      this.get_direction();
      this.get_order_status();
    },
    methods: {
      async getList_ly(){
        this.page=1;
        this.getList();
      },
      async drawer(id){
        this.id=id;
        this.drawer_bool=true;
      },
      async setDrawer(a){
        this.drawer_bool=a;
      },
      async getList(drawer_bool=false) {
        this.drawer_bool=drawer_bool;
        this.get_order_status();
        this.get_item_id();
        if(this.form.orderby==1)
        {
          this.form.pay_time_desc=true;
          this.form.interview_time_asc=false;
        }
        else if(this.form.orderby==2)
        {
          this.form.pay_time_desc=false;
          this.form.interview_time_asc=true;
        }
        else
        {
          this.form.pay_time_desc=false;
          this.form.interview_time_asc=false;
        }

        if (this.form.direction_id_obj[1]) {
          this.form.occupation_id = this.form.direction_id_obj[0];
          this.form.direction_id = this.form.direction_id_obj[1];
        }
        else
        {
          this.form.occupation_id = 0;
          this.form.direction_id = 0;
        }

        this.form.page=this.page;
        let data_temp = {...this.form};

        // 暂停认证处理
        if(this.form.order_status == 9){
          delete data_temp['order_status']
          data_temp['cert_status'] = 1
        }

        let res = await this.$post("/uapi/cert/order",data_temp);

        if (res && res.status === 1) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      },
      submitForm()
      {
        this.page=1;
        this.getList();
      },
      show_admin_memo() {
        this.page=1;
        if (this.show_admin_memo_val)
        {
          this.show_admin_memo_val="";
          this.form.admin_memo=false;
        }
        else
        {
          this.show_admin_memo_val="danger";
          this.form.admin_memo=true;
        }
        this.getList();
      },
      show_interview(){
        this.page=1;
        if (this.show_interview_val)
        {
          this.show_interview_val="";
          this.form.orderby=0;
        }
        else
        {
          this.show_interview_val="danger";
          this.form.orderby=2;
        }
        this.getList();
      },



      get_direction() {
        this.$post("/api/direction/get_all_data")
          .then(res => {
            if (res.status == 1) {
              let aa = directionDataParse(res.data);

              aa.splice(0, 1, {
                label: "全部",
                value: 0,
                children:[
                  {
                    label: "全部",
                    value: 0,
                  }
                ]
              });
              this.direction_data = [...aa];
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "操作失败"
            });
          });
      },
      async setCertStatus(status,id){
        let res = await this.$post("/uapi/cert/set_cert_status",{
          id,val:status
        });
        if (res && res.status === 1) {
          this.getList();
        }else{
          this.$message({
              type: "info",
              message: "操作失败"
            });
        }
      },
      async get_order_status() {
        let res = await this.$post("/uapi/cert/order_status");
        if (res && res.status === 1) {
          this.form.order_status_val = res.data.order_status;
        }
      },
      async get_item_id() {
        const data = this.form;
        let res = await this.$post("/uapi/cert/item_id",data);
        if (res && res.status === 1) {
          this.form.item_id_val = res.data.item_id;
        }
      },
      async change_order_status_4(row)
      {
        let res = await this.$post("/uapi/cert/change_order_status_4",row);
        if (res && res.status === 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getList();
        }
      },
      set_admin_memo(row)
      {
        this.$prompt('请输入备注', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue:row.admin_memo
        }).then(({ value }) => {
          row.val=value;
          this.set_admin_memo_url(row);
        }).catch(() => {

        });
      },
      async set_admin_memo_url(row)
      {
        let res =await this.$post("/uapi/cert/set_admin_memo",row);
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.getList();
      },
      changePagination(val) {
        this.page = val;
        this.getList();
      },
      searchList(type="") {
        if(type==1) this.returnData={};
        this.page=1;
        this.getList();
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let  count=row.interview.count;
        let  min=rowIndex+1-row.interview.index;
        let  max=count+min;
        if ((columnIndex!=6 && columnIndex!=5 && columnIndex!=7  && columnIndex!=13) && rowIndex<max-1 && rowIndex>=min-1 && count>1) {
          if (rowIndex === min-1) {
            return {
              rowspan: count,
              colspan: 1
            };
          } else {

            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      reset(){
        this.form = {
          timeRange:[],
          order_status:3,
          order_status_val:{
          },
          item_id_val:{},
          item_id:0,
          item_type:1,
          orderby:1,
          direction_id_obj:[],
        }
        this.show_admin_memo_val="";
        this.form.admin_memo=false;
        this.show_interview_val="";
        this.form.orderby=0;
        this.page=0;
        this.getList();
      }
    }
  };

  function directionDataParse(arr) {
    arr = arr.sort(function(a, b) {
      return Number(a.display_order) - Number(b.display_order) > 0;
    });
    let result = [];
    let len = arr.length;
    result.push({
      label:"全部",
      value:0,
    })
    for (let i = 0; i < len; i++) {
      let { children, ...other } = arr[i];
      let label = arr[i].occupation_name || arr[i].direction_name;
      let value = arr[i].occupation_id || arr[i].direction_id;
      let item;
      if (children) {
        children = directionDataParse(children);
        item = {
          ...other,
          label,
          value,
          children
        };
      } else {
        item = {
          ...other,
          label,
          value
        };
      }
      result.push(item);
    }
    return result;
  }
</script>

<style scoped>
  .container{
    display:grid !important;
  }
  .clear{clear: both}
</style>