boss/pages/main/index/cert_check.vue

<template>
  <section id="cert-check">
    <div class="table">
      <el-table v-if="tableData.length" 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) {
      window.open(
        this.$store.state.domainConfig.rooterUrl +
          `/main/dev_check_detail?uid=${item.uid}&cert_id=${item.cert_id}`
      );
    },
    // 格式化列表数据
    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>