front/src/views/career/PrevBatch/PrevShiftLine.vue

<template>
  <div v-loading="loading" class="fx-column">
    <mx-condition :query-params="queryParams" :require-fields="requireFields" use-alias-mapping tiny-margin-bottom label-width="80px" @query="handleQuery" />
    <div v-if="!pureMode" class="text-right mb8">
      <el-input v-model="query.keyword" placeholder="请输入院校/专业名称" suffix-icon="el-icon-search" style="width: 250px" clearable @keyup.enter.native="handleSearch" />
      <el-button type="primary" class="ml10" @click="handleSearch">搜索</el-button>
    </div>
    <template v-if="subMajorMode">
      <sub-major-table v-for="row in rows" :key="row.id" :row="row" :is-new-gaokao="isNewGaokao" :custom-cols-length="getShiftCols(row).length" @university="toDetail(row)">
        <template #default="scope">
          <el-descriptions-item v-for="c in getShiftCols(row)" :key="c.prop" :label="c.label">{{ scope[c.prop] || '-' }}</el-descriptions-item>
        </template>
      </sub-major-table>
    </template>
    <dynamic-table v-else :rows="rows" :columns="columns" border>
      <template #university="{row, display}">
        <div class="pointer hover-primary" @click="toDetail(row)">{{ display }}</div>
      </template>
      <template #groupsName="{row, display}">
        <div v-if="display">{{ display }}</div>
        <div>{{ row.premark }}</div>
      </template>
      <template #marjorDirection="{row, display}">
        <template v-if="row.marjorName">
          <div v-for="item in row.marjorName.split(',')" :key="item" class="f13 mb3">{{ item }}</div>
        </template>
        <el-tooltip :disabled="!display||display.length<100" placement="top">
          <div slot="content" style="max-width: 60vw">{{ display }}</div>
          <div class="text-ellipsis-5 f12 f-999">{{ display }}</div>
        </el-tooltip>
      </template>
      <template #tag="{display}">
        <div v-for="(item, idx) in display.split('>')" :key="idx" :style="{marginLeft: (idx*10)+'px'}" class="tag-item f13 rel">{{ item }}
        </div>
      </template>
    </dynamic-table>
    <evaluation-empty v-if="!rows.length&&subMajorMode" title="暂无数据" />
    <vip-guide-more v-if="total>1&&!isBind" />
    <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { getPreEnroll } from '@/api/webApi/prev-batch'
import DynamicTable from '@/components/dynamic-table/index.vue'
import transferMixin from '@/components/TransferMixin'
import { mapGetters } from 'vuex'
import MxCondition from '@/components/MxCondition/mx-condition.vue'
import GlobalVoluntaryDataMixin from '@/views/career/GlobalVoluntaryDataMixin'
import SubMajorTable from '@/views/career/PrevBatch/components/SubMajorTable.vue'
import PlanShiftColumns from '@/views/career/PrevBatch/components/PlanShiftColumns'

const formatter = (row, column, cellValue) => {
  return cellValue || '-'
}
export default {
  name: 'PrevShiftLine',
  components: { SubMajorTable, MxCondition, DynamicTable },
  mixins: [transferMixin, GlobalVoluntaryDataMixin, PlanShiftColumns],
  props: {
    category: {
      type: String | Number,
      default: ''
    },
    universityCode: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      subMajorMode: false,
      loading: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        keyword: ''
      },
      firedParams: null,
      requireFields: ['preEnrollYear'],
      total: 0,
      rows: []
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'isBind', 'isPreEnrollAsYzy']),
    pureMode() {
      return !!this.universityCode // now work in university detail page.
    },
    queryParams() {
      if (!this.isLogin) return null
      const category = this.category || this.$route.meta.category
      // 现在不需要 preCategory 了
      const categoryParams = { category }
      return this.pureMode || this.isPreEnrollAsYzy ? {
        ...categoryParams,
        preEnrollYear: '',
        universityCode: this.universityCode
      } : {
        ...categoryParams,
        preEnrollYear: '',
        preEnrollTag: '',
        preEnrollSubTag: '',
        preEnrollCourse0: '',
        preEnrollCourse1: '',
        universityCode: this.universityCode
      }
    },
    columns() {
      return [{
        label: '年份',
        prop: 'year',
        width: '60px'
      }, {
        label: '院校名称',
        prop: 'universityName',
        slotBody: 'university',
        width: '140px'
      }, {
        label: '招生代码',
        prop: 'collegeCode',
        width: '80px'
      }, {
        hidden: !this.isNewGaokao,
        label: '专业组',
        prop: 'groupsName',
        slotBody: 'groupsName',
        width: '120px'
      }, {
        label: '计划类别',
        prop: 'tags',
        align: 'left',
        slotBody: 'tag',
        width: '250px'
      }, {
        hidden: !this.isNewGaokao,
        label: '选考科目',
        prop: 'course',
        width: '140px',
        formatter
      }, {
        label: '录取人数',
        prop: 'numReal',
        width: '80px',
        formatter
      }, {
        label: '最低分',
        prop: 'score',
        width: '80px',
        formatter
      }, {
        label: '位次',
        prop: 'seat',
        width: '80px',
        formatter
      }, {
        label: '专业/备注',
        prop: 'marjorDirection',
        slotBody: 'marjorDirection',
        align: 'left',
        formatter
      }]
    }
  },
  watch: {
    'firedParams.year': function(val) {
      if (val) this.ensureVoluntaryData({ year: val })
    }
  },
  mounted() {
    this.loading = true // 防止页面闪烁
  },
  methods: {
    handleSearch() {
      this.query.pageNum = 1
      this.getList()
    },
    handleQuery(model) {
      this.firedParams = model
      this.handleSearch()
    },
    async getList() {
      this.loading = true
      try {
        const res = await getPreEnroll({ ...this.query, ...this.firedParams })
        // noinspection JSUnresolvedVariable
        res.rows.forEach(r => r.tags = r.subTag ? r.tag + '>' + r.subTag : r.tag)
        this.rows = res.rows
        this.total = res.total
      } finally {
        this.loading = false
      }
    },
    toDetail(row) {
      this.transferTo('/career/plan/UniversityDetail', { code: row.universityCode })
    }
  }
}
</script>

<style scoped>
.tag-item::before {
  /* a little dot before each item */
  content: '•';
  position: absolute;
  left: -10px;
}
</style>