boss/pages/main/index/cloud_job.vue

<template>
  <div id="cloud-job">
    <div class="top">
      <h3>云端工作</h3>
      <div class="top-info">
        <div class="top-info-left">
          <span>
            审核中:
            <b>{{totalFee}}</b>
          </span>
          <span>
            对接面试中:
            <b>{{totalFee}}</b>
          </span>
          <span>
            待托管费用:
            <b>{{totalFee}}</b>
          </span>
          <span>
            开发中:
            <b>{{totalFee}}</b>
          </span>
        </div>
        <div class="top-info-right">
          <span>生成20天内的账单</span>
          <span>生成待结薪的账单</span>
        </div>
      </div>
    </div>
    <div class="form">
      <div class="left">
        <el-select v-model="selectedStatus" placeholder="工作状态">
          <el-option
            v-for="(item, index) of statuses"
            :key="index"
            :label="item.name"
            :value="index"
          >
            <div>
              {{item.name}}
              <span class="num" :style="`background: ${item.color};`">{{item.num}}</span>
            </div>
          </el-option>
        </el-select>
        <el-select v-model="selectedDirection" placeholder="职位方向">
          <el-option
            v-for="(item, index) of directions"
            :key="index"
            :label="item.direction_name"
            :value="item.direction_id"
          ></el-option>
        </el-select>
        <el-input placeholder="企业方ID"></el-input>
        <el-input placeholder="开发者ID"></el-input>
        <el-input placeholder="审核人员ID"></el-input>
        <el-checkbox></el-checkbox>本期未托管
        <el-button @change="changeSelect">筛选</el-button>
      </div>
      <div class="right">
        <el-button>结算管理</el-button>
        <el-button>导出报表</el-button>
      </div>
    </div>

    <div class="table">
      <el-table
        v-if="tableData.length"
        height="100%"
        border
        style="width: 100%"
        :data="tableData"
        :row-class-name="tableRowClassName"
      >
        <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="clickDetail(scope.row['id'])"
            >{{scope.row[prop]}}</el-button>
            <span v-else-if="prop === 'status'">{{scope.row['statusName']}}</span>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="changePagination"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
const tableHeaders = [
  "工作ID",
  "方向",
  "企业方",
  "开发者",
  "状态",
  "基本薪资",
  "每周工时",
  "用户来源",
  "审核人员",
  "发布时间",
  "本期托管",
  "下期托管",
  "开始时间",
  "结薪时间",
  "发薪时间",
  "试用期",
  "开票",
  "纳税",
  "企业方费用",
  "开发者工资",

]
const tableProps = [
  "id",
  "direction",
  "nickname",
  "devNickname",
  "status",
  "salary",
  "workHours",
  "remark_user_from",
  "remark_checked_user",
  "createTime",
  "createTime",
  "createTime",
  "start_time",
  "end_time",
  "send_salary_time",
]

export default {
  data() {
    return {
      totalFee: 11,
      // 工作状态
      statuses: [],
      // 职位方向
      directions: [],
      selectedDirection: "",
      selectedStatus: "",
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: []
    }
  },
  mounted() {
    // this.getNums()
    this.getJobStatus()
    this.getDirection()
    this.getCloudJob()
  },
  methods: {
    /**
     * 获取顶部数据
     */
    async getNums() {
      let res = {
        "data": {
          "userinvite": 0,
          "outsourcecoder": 1,
          "project_progress": 7,
          "suggestion": 3,
          "projectmanage": 581,
          "hiremanage": "116",
          "coderverify": "9",
          "companyverify": "0",
          "realnameverify": "8",
          "experience_audit": "4",
          "take_big_coins_audit": 4,
          "rooter_notify": 0,
          "cloudjob": 523,
          "cloudjobArr": {
            "all": {
              "num": 523
            },
            "waitCheckNum": {
              "status": 2,
              "num": 170
            },
            "selectDeveloperNum": {
              "status": 4,
              "num": 25
            },
            "waitInterviewNum": {
              "status": 5,
              "num": 13
            },
            "waitSettNum": {
              "status": 7,
              "num": "315"
            }
          }
        },
        "info": "返回统计数据",
        "status": "yes"
      }// await this.$post('https://dev.test.proginn.com/rooter/ajaxrooternums')
      if(res) {
        console.log(res.data)
      }
    },
    /**
     * 获取主列表数据
     */
    async getCloudJob() {
      let res = await this.$post('/api/admin/job/cloud_job')
      // let res = await this.$post('/api/admin/job/cloud_job', {
      //   uid: '企业方ID',
      //   developer_id: '开发者ID',
      //   direction_id: '方向ID',
      //   status: '状态',
      //   not_deposit: '本期未托管，选中则为1',
      //   page: '页数',
      // })
      if(res) {
        this.tableData = []
        const p = this.currentPage
        const res = await this.$post("/api/admin/job/jobs", { p, status })
        // console.log(res)
        const data = res.data
        const list = data.list
        this.tableData = this.formatTableData(list)
        this.totalCount = Number(data.total)
        this.totalPage = data.totalPage
      }
    },
    /**
     * 获取全部工作方向和ID
     */
    async getDirection() {
      let res = await this.$post('/api/admin/job/get_direction')
      if(res) {
        this.directions = res.data
      }
    },
    /**
     * 获取云端工作的全部状态以及对应状态的个数
     */
    async getJobStatus() {
      let res = await this.$post('/api/admin/job/getJobStatus')
      if(res) {
        let numObj = res.data.status_num
        this.statuses = res.data.status_name.map(name => {
          let item = { name }
          if(name === '全部') item.num = numObj.all.num
          else if(name === '对接开发者') {
            item.num = numObj.selectDeveloperNum.num
            item.color = '#F0F9EB'
          }
          else if(name === '待审核') {
            item.num = numObj.waitCheckNum.num
            item.color = '#e1f3d8'
          }
          else if(name === '面试中') {
            item.num = numObj.waitInterviewNum.num
            item.color = '#F0F9EB'
          }
          else if(name === '开发中') {
            item.num = numObj.waitSettNum.num
            item.color = '#FAECD8'
          }
          return item
        })
        console.log(this.statuses)
      }
    },
    // 筛选框变动
    changeSelect(index) {
      this.currentPage = 1
      this.getTableData(index)
    },
    // 点击详情
    clickDetail(id) {
      window.open(`/rooter/cloudjobitem/${id}`)
    },
    // 根据状态显示图表样式
    tableRowClassName({ row, rowIndex }) {
      // console.log({row, rowIndex})
      let className = ""
      if(row.status === "1") className = "success-row"
      return className
    },
    // 格式化列表数据
    formatTableData(data) {
      return data.map(i => ({
        ...i,
        nickname: i.companyUser.nickname,
        devNickname: i.developerUser ? i.developerUser.nickname : '',
        direction: i.developerUser ? i.developerUser.direction_name : '',
        workHours: i.workHours ? i.workHours.name : ''
      }))
    },
    // 页码变动
    changePagination(page) {
      this.getTableData()
    },
  }
}
</script>

<style scoped>
.table {
  height: 100%;
  height: calc(100% - 80px);
}
.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;
}
.top-info {
  display: flex;
  justify-content: space-between;
}
.top-info-right {
  color: var(--mainColor);
}
.top-info-right span {
  cursor: pointer;
}
.form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form .el-input,
.form .el-select {
  width: 120px;
}
.num {
  padding: 4px 8px;
}
</style>