boss/uni/module/main/components/cloud_job.vue

<template>
  <view 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> -->
    <z-table :data="tableData" :keys="tableProps" :labels="tableHeaders" />
    <!-- <el-pagination
      @current-change="changePagination"
      :current-page.sync="currentPage"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="totalCount"
      :pager-count="7"
    ></el-pagination> -->
  </view>
</template>

<script>
import tableMixin from '../mixins/table'

const tableHeaders = [
  '企业方',
  '名称',
  '地点',
  '简介',
  '核定价格/预算区间',
  '已完成月数',
  '用户来源',
  '审核人员',
  '创建时间',
  '状态',
  '操作'
]
const tableProps = [
  'nickname',
  'title',
  'address',
  'description',
  'salary',
  'work_hours',
  'remark_user_from',
  'remark_checked_user',
  'create_time',
  'status',
  'ctrl'
]

export default {
  mixins: [tableMixin],
  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) {
      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 lang='less' scoped>
#cloud-job {
  .table {
    height: 100%;
    height: calc(100% - 80px);
  }
}
</style>