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 + nums.waitInterviewNum.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="`color: ${STATUS_COLOR[item.name]};`"
              >{{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" v-model="jobID"></el-input>
        <el-input placeholder="企业方ID" v-model="comID"></el-input>
        <el-input placeholder="开发者ID" v-model="devID"></el-input>
        <el-input placeholder="客户经理" v-model="checkID"></el-input>
        <el-checkbox v-model="presentHire">驻场招聘</el-checkbox>
        <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 @click="doExport">导出报表</el-button>
      </div>
    </div>
    <div class="table" style>
      <el-table
        v-if="tableData.length"
        stripe
        style="width: 100%;"
        :data="tableData"
        @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'"
              :style="`color: ${STATUS_COLOR[scope.row['statusName']]};`"
            >{{scope.row['statusName']}}</span>
            <span v-else-if="prop === 'id'">
              {{scope.row['id']}}
              <span v-if="!scope.row.deposit_status" style="color: red;">(待托管)</span>
            </span>
            <span v-else-if="prop === 'source_type'">
                <span v-if="scope.row.source_type">
                    <el-tooltip class="item" effect="dark" :content="scope.row.version" placement="top">
                      <el-link type="primary">{{scope.row['source_type'] || '--'}}</el-link>
                    </el-tooltip>
                </span>
                <span v-else>
                 --
                </span>
            </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="20"
      layout="total, prev, pager, next"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
const tableHeaders = [
  "工作ID",
  "方向",
  "企业方",
  "开发者",
  "来源",
  "状态",
  "驻场",
  "基本薪资",
  "每周工时",
  "用户来源",
  "客户经理",
  "发布时间",
  "本期托管",
  "下期托管",
  "开始时间",
  "结薪时间",
  "发薪时间",
  "试用期",
  "开票",
  "纳税",
  "企业方费用",
  "开发者工资",
  "试用期",
  "开票",
  "纳税",
  "企业方费用",
  "开发者薪资"
];
const tableProps = [
  "id",
  "matchDirections",
  "nickname",
  "devNickname",
  "source_type",
  "status",
  "publish_present_hire",
  "salary",
  "workHours",
  "remark_user_from",
  "userManagerName",
  "createTime",
  "current_deposit_num",
  "next_deposit_num",
  "startTime",
  "endTime",
  "sendSalaryTime",
  "isNeedProbation",
  "isInvoice",
  "devIsInvoice",
  "companyTotalPrice",
  "personTotalPrice"
];
const STATUS_COLOR = {
  待审核: "#F56C6C",
  审核拒绝: "#909399",
  对接开发者: "#E6A23C",
  面试中: "#E6A23C",
  确认聘用: "#E6A23C",
  开发中: "#67C23A",
  结束合作: "#909399",
  取消: "#909399"
};
export default {
  data() {
    return {
      uid: "",
      // 开发者id
      devID: "",
      // 企业id
      comID: "",
      // 工作ID
      jobID: "",
      // 审核人员id
      checkID: "",
      unDeposit: false,
      presentHire: false,
      totalFee: 11,
      // 工作状态
      statuses: [],
      // 职位方向
      directions: [],
      selectedDirection: "",
      selectedStatus: "",
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 状态颜色
      STATUS_COLOR,
      // 列表数据
      tableData: [],
      nums: {}
    };
  },
  watch: {
    comID: function(val) {
      console.log(val);
    }
  },
  mounted() {
    // this.getNums()
    this.getJobStatus();
    this.getDirection();
    this.getCloudJob();
  },
  methods: {
    /**
     * 获取用户客户经理基本信息
     */
    getUserManager() {},
    /**
     * 获取顶部数据
     */
    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"
      };
      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,
        uid: this.comID,
        checker_id: this.checkID,
        job_id: this.jobID,
        direction_id: this.selectedDirection,
        status: this.selectedStatus,
        not_deposit: this.unDeposit ? "1" : "0",
        present_hire: this.presentHire ? "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 };
          switch (name) {
            case "全部":
              item.num = numObj.all.num;
              break;
            case "对接开发者":
              item.num = numObj.selectDeveloperNum.num;
              item.color = "#F0F9EB";
              break;
            case "待审核":
              item.num = numObj.waitCheckNum.num;
              item.color = "#e1f3d8";
              break;
            case "面试中":
              item.num = numObj.waitInterviewNum.num;
              item.color = "#F0F9EB";
              break;
            case "开发中":
              item.num = numObj.waitSettNum.num;
              item.color = "#FAECD8";
              break;
            case "待托管费用":
              item.num = numObj.waitPayNum.num;
              item.color = "#F0F9EB";
              break;
            case "确认聘用":
              item.num = numObj.interviewOkNum.num;
              item.color = "#F0F9EB";
              break;
            case "面试通过":
              item.num = numObj.interviewOkNum.num;
              item.color = "#F0F9EB";
              break;
            case "等待确定工资":
              item.num = numObj.interviewOkNum.num;
              item.color = "#F0F9EB";
              break;
          }
          return item;
        });
      }
    },
    // 筛选框变动
    changeSelect(index) {
      this.currentPage = 1;
      this.getCloudJob(index);
    },
    // 点击详情
    clickDetail(id) {
      window.open(`/rooter/cloudjobitem/${id}`);
    },
    // 根据状态显示图表样式
    tableRowClassName({ row, rowIndex }) {
      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;
        // case '待托管费用':
        //   className = 'background: #F0F9EB;'
        //   break
        // case '确认聘用':
        //   className = 'background: #F0F9EB;'
        //   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.hours === "0"
            ? i.workHours
              ? i.workHours.name.replace("小时", "")
              : ""
            : i.hours,
        endTime: `每月${i.end_time}号`,
        salary:
          i.salary !== "0"
            ? i.salary
            : `${i.match_salary_min}-${i.match_salary_max}`,
        sendSalaryTime: `每月${i.send_salary_time}号`,
        isNeedProbation: i.is_need_probation === "1" ? i.probation_days : "--",
        isInvoice: i.is_invoice === "1" ? "是" : "否",
        devIsInvoice: i.dev_is_invoice === "1" ? "是" : "否",
        userManagerName: i.user_manager ? i.user_manager.nickname : ""
      }));
    },
    // 页码变动
    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) {
      let id = row.id;
      // 前往老的后台
      window.open(
        this.$store.state.domainConfig.siteUrl + `/rooter/cloudjobitem/${id}`
      );
    },
    /**
     * 点击导出
     */
    doExport() {
      window.open("/api/admin/job/exportJobData");
    }
  }
};
</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>