web-portal/src/layout/detail/web-jobs.vue

<template>
  <div id="web-jobs">
    <el-row>
      <el-col :span="24" class="webMessage" v-if="title">
        {{ title }}
      </el-col>
    </el-row>
    <span v-if="list.length > 0">
      <el-row class="rowStyle" v-for="(item, index) in list" :key="index" :gutter="10">
        <el-col :span="16">
          <el-link class="job__name" :underline="false" @click="turnToJobs(item.id)">
            <span title="查看职位">{{ item.job_name ? item.job_name : '' }}</span>
          </el-link>
        </el-col>
        <el-col class="money" :span="4">
          {{ item.salary ? item.salary.text : '' }}
        </el-col>
        <el-col :span="4" style="text-align:center;">
          {{ item.job_number | jobNum }}
        </el-col>
        <el-col :span="16"> 招聘专业 : {{ item.zy_req ? item.zy_req : '' }} </el-col>
        <el-col :span="8"> {{ item.xl_req ? item.xl_req : '' }} | {{ item.city ? item.city : '' }} </el-col>
      </el-row>
      <el-row v-if="!type">
        <el-col :span="24" style="text-align:center">
          <el-pagination @current-change="search" :current-page="currentPage" :page-size="$limit" layout="slot, total, prev, pager, next" :total="totalRow">
            <span style="font-size:13px;margin-right: 10px;font-weight: 400;color: #606266;">共 {{ Math.ceil(totalRow / $limit) }} 页</span>
          </el-pagination>
        </el-col>
      </el-row>
    </span>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'web-jobs',
  props: {
    title: null,
    info: null,
    type: null,
    origin: null,
  },
  data: () => ({
    list: {},
    currentPage: 1,
    totalRow: 0,
  }),
  created() {
    if (!this.type) this.search();
  },
  watch: {
    info: {
      handler(val) {
        if (!this.type) this.dataPro();
        else this.$set(this, `list`, this.info);
      },
    },
  },
  methods: {
    turnToJobs(id) {
      let query = {};
      if (this.origin) query.origin = this.origin;
      if (this.type) query.type = this.type;
      query.id = id;
      this.$router.push({ path: '/jobs/detail', query: query });
    },
    search(page) {
      let skip = 0;
      if (page) {
        skip = (page - 1) * this.$limit;
      }
      let query = { skip: skip, limit: this.$limit };
      this.$emit('search', query);
    },
    dataPro() {
      this.$set(this, `totalRow`, this.info.total);
      this.$set(this, `list`, this.info.data);
    },
  },
  filters: {
    jobNum(num) {
      if (!num) return '';
      num = num.includes('人') ? num : `${num}人`;
      return num;
    },
  },
};
</script>

<style lang="less" scoped>
.webMessage {
  border-left: 3px solid #850000;
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  padding: 0 15px;
  margin: 0 0 0 -15px;
}
.rowStyle {
  border-bottom: 1px dashed #ddd;
  padding: 1rem 1.5rem;
  .el-col {
    font-size: 0.9rem;
    line-height: 2rem;
  }
  .job__name {
    font-size: 1rem;
    color: #850000;
  }
  .money {
    color: #ff9900;
  }
}
</style>