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>{{nums.waitCheckNum && nums.waitCheckNum.num}}</b>
          </span>
          <span>
            对接面试中:
            <b>{{nums.selectDeveloperNum && nums.selectDeveloperNum.num}}</b>
          </span>
          <span>
            待托管费用:
            <b>{{nums.waitPayNum && nums.waitPayNum.num}}</b>
          </span>
          <span>
            开发中:
            <b>{{nums.waitSettNum && nums.waitSettNum.num}}</b>
          </span>
        </div>
        <div class="top-info-right">
          <span @click="createPeriod">生成20天内的账单</span>
          <span @click="finishPeriod">生成待结薪的账单</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 v-model="unDeposit" @change="changeDeposit"></el-checkbox>本期未托管
        <el-button @click="getCloudJob">筛选</el-button>
      </div>
      <div class="right">
        <el-button @click="doManager">结算管理</el-button>
        <el-button>导出报表</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        v-if="tableData.length"
        width="100%"
        height="100%"
        border
        style="width: 100%"
        :data="tableData"
        :row-class-name="tableRowClassName"
        :row-style="tableRowClassName"
        @row-click="clickRow"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
          :fixed="index < 4"
          width="150px"
        >
          <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",
  "current_deposit_num",
  "next_deposit_num",
  "startTime",
  "endTime",
  "sendSalaryTime",
]

export default {
  data() {
    return {
      uid: '',
      devID: '',
      unDeposit: false,
      totalFee: 11,
      // 工作状态
      statuses: [],
      // 职位方向
      directions: [],
      selectedDirection: "",
      selectedStatus: "",
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: [],
      nums: {},
    }
  },
  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', {
        uid: this.uid,
        developer_id: this.devID,
        direction_id: this.selectedDirection,
        status: this.selectedStatus,
        not_deposit: this.unDeposit ? '1' : '0',
        page: this.currentPage,
      })
      if(res) {
        this.tableData = []
        const data = res.data.listData
        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.nums = numObj
        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
        })
      }
    },
    // 筛选框变动
    changeSelect(index) {
      this.currentPage = 1
      this.getCloudJob(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
      let className
      switch(row.statusName) {
        case '审核中':
        className = 'background: #E1F3D8;'
        break
        case '对接开发者':
        className = 'background: #F0F9EB;'
        break
        case '面试中':
        className = 'background: #F0F9EB;'
        break
        case '确认聘用':
        className = 'background: #F0F9EB;'
        break
        case '开发中':
        className = 'background: #FAECD8;'
        break
        case '结束合作':
        className = 'background: #F4F4F5;'
        break
      }
      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 : '',
        endTime: `每月${i.end_time}号`,
        sendSalaryTime: `每月${i.send_salary_time}号`,
      }))
    },
    // 页码变动
    changePagination(page) {
      this.getCloudJob()
    },
    /**
     * 修改未托管
     */
    changeDeposit(val) {
      // console.log(val)
      // this.unDeposit = !val
    },
    /**
     * 生成工作周期
     */
    async createPeriod() {
      let res = await this.$post('/api/admin/job/create_period')
      if(res) {
        this.$message({
          message: '生成成功',
          type: 'success'
        })
      }
    },
    /**
     * 更新工作周期
     */
    async finishPeriod() {
      let res = await this.$post('/api/admin/job/create_period')
      if(res) {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      }
    },
    /**
     * 结算管理
     */
    doManager() {
      window.open('/main/cloud_balance')
    },
    clickRow(row) {
      window.open('htpps://www.proginn.com/rooter/cloudjobitem/1347')
    }
  }
}
</script>

<style scoped>
#cloud-job {
  width: calc(100% - 144px);
}
.table {
  height: calc(100% - 150px);
}
.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;
  margin-bottom: 10px;
}
.form .el-input,
.form .el-select {
  width: 120px;
}
.num {
  padding: 4px 8px;
}
</style>