front/src/views/career/zhiyuan/components/zhiyuan-list.vue

<template>
  <dynamic-table v-loading="loading" ref="table" height="800px" :rows="tableList" :columns="columns"
                 @expand-change="expand">
    <template #t0="{row}">
      <!--    录取概率 -->
      <div>
        <!--          <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>-->
        <!--          <p class="mb10 f-9b f12">{{ row.enrollRatioText }}</p>-->
        <p>
          <el-tag type="danger" v-if="row.pickType == 0">冲</el-tag>
          <el-tag type="warning" v-if="row.pickType == 1">稳</el-tag>
          <el-tag type="success" v-if="row.pickType == 2">保</el-tag>
        </p>
      </div>
    </template>
    <template #t1="{row}">
      <!-- 院校 -->
      <div>
        <p class="mb10"><span class="pointer">{{ `${row.university.name}(${row.recruitPlan.collegeCode})` || '' }}</span></p>
        <p class="mb5 f-9b f12">{{ row.university.features.split(',').join(' ') }}</p>
        <p class="mb5 f-9b f12">{{ row.university.location }} {{ row.university.cityName }}
          排名{{ row.university.ranking }}</p>
        <p class="f-9b f12">代码 {{ row.recruitPlan.collegeCode }}</p>
      </div>
    </template>
    <template #t2="{row}">
      <!-- 招生计划 -->
      <div>
        <p><span class="f18">{{ row.recruitPlan.planCount }}</span>人</p>
        <p class="f-9b f12">{{ row.recruitPlan.course }}</p>
      </div>
    </template>
    <template #t3="{row}">
      <!--   历年 -->
      <div class="f14">
        <p>{{ row.history ? row.history.year || '-' : '-' }}</p>
        <p>{{row.history.type || ''}}</p>
      </div>
    </template>
    <template #t4="{row}">
      <div class="f14">
        <p>{{ row.history ? row.history.numReal || '-' : '-' }}</p>
      </div>
    </template>
    <template #t5="{row}">
      <div class="f14">
        <p>{{ row.history ? row.history.score || '-' : '-' }}</p>
      </div>
    </template>
    <template #t6="{row}">
      <div class="f14">
        <p>{{ row.history ? row.history.seat || '-' : '-' }}</p>
      </div>
    </template>
    <template #t7="{row}">
      <p type="primary" v-if="row.recruitPlan.majorCount"> 专业({{ row.recruitPlan.majorCount }}个)</p>
      <p class="f12 f-primary" v-show="row.majors.filter(major => {return major.selected}).length"> 已填 <span>{{
          row.majors.filter(major => {
            return major.selected
          }).length
        }}</span></p>
    </template>
    <template #expand="{row: recommend,$index}">
      <div>
        <dynamic-table :columns="majorCol" :show-header="false" :rows="recommend.majors">
          <template #t0="{row}">
            <!--    录取概率 -->
            <div>
            </div>
          </template>
          <template #t1="{row}">
            <div>
              <p class="mb10"><span class="pointer">{{ row.marjorName }}</span></p>
              <p class="f-9b f12">代码 {{ row.marjorBelongs }}</p>
            </div>
          </template>
          <template #t2="{row}">
            <div>
              <p><span class="f18">{{ row.planCount || '-' }}</span>人</p>
              <p class="f-9b f12">{{ `${row.xuezhi || ''} ￥${row.xuefei}` }}</p>
            </div>
          </template>
          <template #t3="{row}">
            <div class="f14">
              <p>{{ row.history ? row.history.year || '-' : '-' }}</p>
            </div>
          </template>
          <template #t4="{row}">
            <div class="f14">
              <p>{{ row.history ? row.history.numReal || '-' : '-' }}</p>
            </div>
          </template>
          <template #t5="{row}">
            <div class="f14">
              <p>{{ row.history ? row.history.score || '-' : '-' }}</p>
            </div>
          </template>
          <template #t6="{row}">
            <div class="f14">
              <p>{{ row.history ? row.history.seat || '-' : '-' }}</p>
            </div>
          </template>
          <template #t7="{row}" v-if="!readonly">
            <el-button :type="row.selected ? 'danger' : 'primary'" @click="apply(row,recommend)">
              {{ row.selected ? '取消' : '填报' }}
            </el-button>
          </template>
        </dynamic-table>
      </div>
    </template>
  </dynamic-table>
</template>
<script>
import DynamicTable from '@/components/dynamic-table'

export default {
  components: {
    DynamicTable
  },
  props: {
    tableList: {
      type: Array,
      default: []
    },
    cols: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: []
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      input: '',
      selectedList: []
    }
  },
  computed: {
    columns() {
      if (!this.cols.length) return []
      const columns = [
        //   {
        //   type: 'expand',
        //   slotBody: 'expand'
        // }
      ]
      this.cols.map((item, index) => {
        columns.push({
          label: item,
          slotBody: 't' + index,
          width: index >= 3 || index ==  0 ?  '100px' : ''
        })
      })
      columns.push({
        type: 'expand',
        slotBody: 'expand',
        label: '查看'
      })
      return columns
    },
    majorCol() {
      return this.cols.map((item, index) => {
        return {
          label: item,
          slotBody: 't' + index,
          width: index >= 3 || index == 0 ? 100 + 'px' : ''
        }
      })
    }
  },
  methods: {
    expand(item) {
      this.$emit('expand', item)
    },
    scrollTop() {
      this.$refs.table.toScrollTop()
    },
    apply(item, parent) {
      this.$emit('apply', item, parent)
    }
  }
}
</script>
<style scoped lang="scss">
.f-9b {
  color: #9b9b9b;
}

::v-deep .el-table__expanded-cell {
  padding-top: 0;
  //padding-right: 50;
  padding-bottom: 0;
  padding-left: 0;
}

::v-deep .el-table__expand-icon {
  font-size: 18px;
  color: #666;

  .el-icon-arrow-right {
    font-weight: bold;
  }
}
</style>