boss/pages/main/index/cloud_job.vue

<template>
  <div id="cloud-job">
    <el-select v-model="selected" @change="changeSelect" placeholder="筛选">
      <el-option v-for="(item, index) of statuses" :key="index" :label="item" :value="index">
        <span>{{item}}</span>
      </el-option>
    </el-select>
    <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 = [
  "企业方",
  "名称",
  "地点",
  "简介",
  "核定价格/预算区间",
  "已完成月数",
  "用户来源",
  "审核人员",
  "创建时间",
  "状态",
  "操作"
]
const tableProps = [
  "nickname",
  "title",
  "address",
  "description",
  "salary",
  "work_hours",
  "remark_user_from",
  "remark_checked_user",
  "createTime",
  "status",
  "ctrl"
]

export default {
  data() {
    return {
      // 筛选状态
      statuses: [],
      selected: "",
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: []
    }
  },
  mounted() {
    this.getFilters()
  },
  methods: {
    // 筛选框变动
    changeSelect(index) {
      this.currentPage = 1
      this.getTableData(index)
    },
    // 获取筛选
    async getFilters() {
      const res = await this.$post("/api/admin/job/job_status_map")
      const data = res.data
      this.statuses = data || []
      if(data.length) this.selected = data[0]
      this.getTableData()
    },
    // 点击详情
    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,
        ctrl: "详情"
      }))
    },
    // 页码变动
    changePagination(page) {
      this.getTableData()
    },
    // 获取列表数据
    async getTableData(status = 0) {
      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
    }
  }
}
</script>

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