boss/pages/main/index/cert_check.vue

<template>
  <section id="cert-check">
    <div class="table">
      <el-table v-if="tableData.length" height="100%" border style="width: 100%" :data="tableData">
        <el-table-column v-for="(prop, index) of tableProps" :key="index" :prop="prop" :label="tableHeaders[index]">
          <template slot-scope="scope">
            <el-button type="text" v-if="prop === 'ctrl'" @click="clickCheck(scope.row)">{{scope.row[prop]}}</el-button>
            <el-button type="text" v-else-if="prop === 'nickname'" @click="clickDetail(scope.row['uid'])">{{scope.row[prop]}}</el-button>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      @current-change="changePagination"
      @size-change="changePageSize"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </section>
</template>

<script>
import dayjs from 'dayjs'
const tableHeaders = [
  "ID",
  "昵称",
  "认证类型",
  "证书状态",
  "工作",
  "职业方向",
  "技能",
  "城市",
  "工龄",
  "接单数量",
  "自由职业",
  "开始时间",
  "过期时间",
  "操作"
]

const tableProps = [
  "uid",
  "nickname",
  "name",
  "cert_status_name",
  "work_status_name",
  "direction_name",
  "skills",
  "city_name",
  "work_year_op",
  "projectCountInfoStr",
  "freelancer_name",
  "startDate",
  "endDate",
  "ctrl"
]

const apis = {
  dataList: `/api/admin/cert/getUserList`,
}

let env = 'test'

// 获取当前状态
const getOnProjectShow = i => {
  let str = ''
  if(i.on_project === 0 && i.on_hire === 0 & i.on_job === 0 && i.work_status === 1) str = '空闲'
  else {
    if(i.on_project) str = '项目'
    else if(i.on_hire) str = '雇佣'
    else if(i.on_job) str = '云端'
    else if(!i.work_status) str = '不接单'
  }
  return str
}

export default {
  data() {
    return {
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      currentPageSize: 20,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: []
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    clickDetail(uid) {
      window.open(`/rooter/user/${uid}`)
    },
    clickCheck(item) {
      if(env === 'test') window.open(`https://dev.test.proginn.com/rooter/developerVerifyAuditList?uid=${item.uid}&audit_type=1`)
      else window.open(`https://www.proginn.com/rooter/developerVerifyAuditList?uid=${item.uid}&audit_type=1`)
    },
    // 格式化列表数据
    formatTableData(data, resData) {
      const userSkills = resData.userSkills
      return data.map(i => {
        const projectCountInfo = i.project_count_info
          , countDevelopProject = projectCountInfo.project
          , countHire = projectCountInfo.hire
          , countJob = projectCountInfo.job
        return {
          ...i,
          projectCountInfoStr: `项目:${countDevelopProject},雇佣:${countHire},云端:${countJob}`,
          startDate: i.start_date, //dayjs(i.start_time * 1000).format('YYYY-MM-DD'),
          endDate: i.end_date, //dayjs(i.end_time * 1000).format('YYYY-MM-DD'),
          ctrl: "审核"
        }
      })
    },
    // 页码变动
    changePagination(page) {
      this.currentPage = page
      this.getTableData()
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize
      this.getTableData()
    },
    // 获取列表数据
    async getTableData(status = 0) {
      this.tableData = []
      let body = { page: this.currentPage,page_size:this.currentPageSize}
      const res = await this.$post('/api/admin/cert/getUserList', body)
        , data = res.data
        , list = data.list
      env = data.current_env
      this.tableData = this.formatTableData(list, data)
      this.totalCount = Number(data.total)
      this.totalPage = data.totalPage
    }
  }
}
</script>

<style scoped>
.table {
  height: calc(100% - 40px);
}
</style>