front/src/views/career/plan/UniversitiesDetail.vue

<template>
  <div ref="universityDetail" id="universityDetail" class="app-container" v-loading="loading">
    <el-row :gutter="10" class="mt20 mb30">
      <el-col :span="12" class="fx-row ai-center">
        <div class="mr30">
          <img class="pointer" @click="toWindow(baseInfo.url)" width="72px" height="72px" :src="baseInfo.logo" alt=""/>
        </div>
        <div>
          <span class="f28 ">{{ baseInfo.name }}</span>
          <div class="mt5 mb5">
            <el-tag class="mr5" size="mini" v-for="item in baseInfo.features ? baseInfo.features.split(',') : []">
              {{ item }}
            </el-tag>
          </div>
          <span class="f14 f-666 "
          >{{ `${baseInfo.location} ${baseInfo.cityName} ${baseInfo.type} / ${baseInfo.natureTypeCN} / ${baseInfo.managerType} ` }}</span>
        </div>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button plain round @click="$router.go(-1)">返回</el-button>
      </el-col>
    </el-row>
    <div>
      <div class="tabs-wrap mb20">
        <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">院校概况</span>
        <span class="tabs-item" @click="tabActive = 1" :class="{'bg-primary':tabActive == 1}">招生简章</span>
        <span class="tabs-item" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">院校风采</span>
      </div>
      <div v-if="tabActive == 0">
        <el-row class="fx-row">
          <el-col :span="8">
            <img  :src="baseInfo.bannerUrl" width="100%" alt="">
          </el-col>
          <el-col :span="16">
            <div class="f14 f-666 text-center fx-row">
              <el-col :span="24" v-for="item in iconList" v-if="Array.isArray(item.value) ? item.value.length : item.value">
                  <div v-if="Array.isArray(item.value)">
                    <img width="50px" :src="item.img" :alt="item.desc">
                    <el-popover
                      placement="bottom"
                      trigger="hover"
                    >
                      <div>
                        <p v-for="i in item.value">
                          {{i.type}}  {{i.number}}个
                        </p>
                      </div>
                      <p class="mt10" slot="reference">
                        {{ `${item.value[0] ? item.value[0].number : ''} / ${item.value[1] ? item.value[1].number : ''} ` }}
                        <i class="el-icon-question"></i>
                      </p>
                    </el-popover>
                  </div>
                  <div v-else>
                    <img width="50px" :src="item.img" :alt="item.desc">
                    <p class="mt10">{{ item.value }}</p>
                  </div>
              </el-col>
            </div>
            <div class="mt10  pl10 f14">
                <span class="info-tips"> {{
                    baseInfo.introduction
                  }}</span>
              <p class="text-right mr10">
                <el-button type="text" @click="dialogVisible = true">全部</el-button>
              </p>
            </div>
          </el-col>
        </el-row>
        <div style="width:70%">
          <div class="mt20" v-if="formatProfessions.length">
            <p class="format-tit">特色专业</p>
            <mx-table border :propDefines="professionsProps" :rows="formatProfessions">
              <template #tmp="{row}">
                <p class="major-wrap">
                  <a v-for="item in row.majors" @click="toMajorDetail(item.code)">{{ item.name }}</a>
                </p>
              </template>
            </mx-table>
          </div>
          <div class="mt20" v-if="Object.keys(subjects).length">
            <p class="format-tit">重点学科</p>
            <mx-table border :prop-defines="keySubjectProp" :rows="subjects.keySubjects">
              <template #tmp="{row}">
                <p class="major-wrap">
                  <span v-for="item in row.subjects">{{ item }}</span>
                </p>
              </template>
            </mx-table>
          </div>
          <div class="mt20" v-if="Object.keys(activeSyl).length">
            <p class="format-tit">双一流学科</p>
            <el-select v-model="activeSylId" placeholder="placeholder">
              <el-option
                v-for="item in subjects.sylSubjectsGroup"
                :key="item.id"
                :label="item.evaluations"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <mx-table border class="mt10" :prop-defines="activeSyl.col" :rows="activeSyl.row">
              <template #tmp="{row}">
                <p class="major-wrap">
                  <span v-for="item in row.subjects">{{ item }}</span>
                </p>
              </template>
            </mx-table>
          </div>
          <div class="mt20" v-if="subjectevaluates.length">
            <p class="format-tit">学科评估</p>
            <el-select v-model="evaluate_type" placeholder="placeholder">
              <el-option
                v-for="item in evaluateTypes"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
            <mx-table border class="mt10" :prop-defines="activeEvaluate.col" :rows="activeEvaluate.row">
              <template #level="{row}">
                <p class="major-wrap" v-if="row.level.length">
                  <span v-for="item in row.level">{{ item.name }}{{ item.level }}</span>
                </p>
                <p v-else>
                  暂无数据
                </p>
              </template>
            </mx-table>
          </div>
          <div class="mt20">
            <p class="format-tit">院系设置</p>
            <mx-table border :propDefines="collegeProps" :rows="departments">
              <template #tmp="{row}">
                <p class="major-wrap">
                  <a @click="toMajorDetail(item.code)" v-for="item in row.departmentMajor">{{ item.name }}</a>
                </p>
              </template>
            </mx-table>
          </div>
          <div class="mt20" v-if="employmentreports.length">
            <p class="format-tit">就业报告</p>
            <div class="list f-333">
                <div class="list-item" v-for="item in employmentreports">
                  <span class="url pointer" @click="toWindow(item.webSite)">{{item.title}}</span>
                  <span class="url pointer" @click="toWindow(item.url)" v-if="item.url"><i class="el-icon-edit mr5" ></i>在线预览</span>
                  <span class="pointer" v-if="item.url"  @click="toWindow(item.url)">下载附件</span>
                </div>
            </div>
          </div>

        </div>

      </div>
      <!--  招生简章-->
      <keep-alive>
        <enroll-list :code="code" v-if="tabActive == 1"></enroll-list>
      </keep-alive>
      <!--  院校风采-->
      <keep-alive>
        <university-style :code="code" v-if="tabActive == 2"></university-style>
      </keep-alive>

    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="70%"
    >
      <span class="f20 f-666">{{ baseInfo.name }}院校介绍</span>
      <div>
        {{ baseInfo.introduction }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EnrollList from './compoents/EnrollList'
import UniversityStyle from './compoents/UniversityStyle'
import { evaluateType, selectUniversityDetail } from '@/api/webApi/career-course'
import transferMixin from '@/components/mx-transfer-mixin'

export default {
  name: 'UniversityDetail',
  mixins: [transferMixin],
  components: { EnrollList, UniversityStyle },
  data() {
    return {
      tabActive: 0,
      baseInfo: '',
      departments: [],
      dialogVisible: false,
      professions: {},
      subjectevaluates: [],
      evaluateTypes: [],
      evaluate_type: '',
      employmentreports:[],
      loading:false,
      professionsProps: {
        level: {
          label: '专业层次',
          width: '200'
        },
        count: {
          label: '数量',
          width: '100'
        },
        majors: {
          label: '专业',
          slot: 'tmp',
          align: 'left'
        }
      },
      subjects: '',
      code: '',
      activeSylId: '',
      collegeProps: {
        name: {
          label: '学院',
          width: '200'
        },
        departmentMajor: {
          label: '包含专业',
          slot: 'tmp',
          align: 'left'
        }
      },
      keySubjectProp: {
        typeName: {
          label: '类别',
          width: '100'
        },
        subjects: {
          label: '专业',
          slot: 'tmp',
          align: 'left'
        },
        category: {
          label: '学科类别',
          width: '100'
        }
      }
    }
  },
  created() {
    this.code = this.prevData.code
    // this.getHit()
    this.getDetail()
    this.getEvaluateType()
  },
  computed: {
    formatProfessions() {
      const arr = []
      for (const key in this.professions) {
        console.log(key)
        let item = {
          level: key == 'country' ? '国家级' : '省级(直辖市)',
          count: this.professions[key].length,
          majors: this.professions[key]
        }
        arr.push(item)
      }
      return arr
    },
    activeEvaluate() {
      const currentRow = this.subjectevaluates.filter(item => {
        return item.extTypeId == this.evaluate_type
      })
      const row = {
        count: currentRow.length || '-',
        level: currentRow
      }
      return {
        row: [row],
        col: {
          count: {
            label: '数量',
            width: '100'
          },
          level: {
            label: ' 专业评级',
            align: 'left',
            slot: 'level'
          }
        }
      }
    },
    activeSyl() {
      if (!this.subjects.hasOwnProperty('sylSubjectsGroup')) return {}
      // const col = this.
      const row = this.subjects.sylSubjectsGroup.find(item => {
        return item.id == this.activeSylId
      })
      return {
        col: {
          subjectCount: {
            label: '数量',
            width: 100
          },
          subjects: {
            label: '学科',
            slot: 'tmp',
            align: 'left'
          },
          typeName: {
            label: '类别',
            width: '100'
          }
        },
        row: [row]
      }
    },
    iconList() {
      const baseInfo = this.baseInfo
      return [
        {
          img: require('@/assets/images/career/year.png'),
          value: `${baseInfo.createdYear}年`,
          desc: '创办时间'
        },
        {
          img: require('@/assets/images/career/type.png'),
          value: baseInfo.natureTypeCN,
          desc: '办学类型'
        },
        {
          img: require('@/assets/images/career/xingzhi.png'),
          value: baseInfo.type,
          desc: '院校类型'
        },
        {
          img: require('@/assets/images/career/bumen.png'),
          value: baseInfo.managerType,
          desc: '所属部门'
        },
        {
          img: require('@/assets/images/career/xueli.png'),
          value: baseInfo.level,
          desc: '学历层次'
        },
        {
          img: require('@/assets/images/career/location.png'),
          value: `${baseInfo.location} ${baseInfo.cityName}`,
          desc: '所处地'
        },
        {
          img: require('@/assets/images/career/shuoshi.png'),
          value: baseInfo.pointsOfShuo,
          desc: '硕士点',
          type: 'arr'
        },
        {
          img: require('@/assets/images/career/boshi.png'),
          value: baseInfo.pointsOfBo,
          desc: '博士点',
          type: 'arr'
        }
      ]
    }
  },
  watch: {},
  methods: {
    toWindow(url) {
      window.open(url,'_blank')
    },
    getEvaluateType() {
      evaluateType({ code: this.code }).then(res => {
        this.evaluateTypes = res.data
        this.evaluate_type = res.data[0].dictValue
        console.log(res)
      })
    },
    toMajorDetail(code) {
      this.$router.push({ path: '/career/plan/MajorDetail', query: { code: code } })
    },
    // getHit() {
    //   saveUniversitiesHits({ code: this.code }).then(res => {
    //     console.log(res)
    //   })
    // },
    getDetail() {
      this.loading = true
      selectUniversityDetail({ code: this.code }).then(res => {
        this.baseInfo = res.data.baseInfo
        this.departments = res.data.departments
        this.professions = res.data.professions
        this.subjects = res.data.subjects
        this.subjectevaluates = res.data.subjectevaluates
        this.employmentreports =res.data.employmentreports
        this.activeSylId = this.subjects.sylSubjectsGroup ? this.subjects.sylSubjectsGroup[0].id : ''
        console.log(res)
      }).finally(_=>{
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#universityDetail {
  .tabs-wrap {
    border-bottom: 1px solid #42b983;
    height: 40px;

    .tabs-item {
      cursor: pointer;
      padding: 0 33px;
      border-radius: 4px 4px 0 0;
      display: inline-block;
      line-height: 40px;

      &:hover {
        color: #47C6A2;
      }

      &.bg-primary {
        background: #47C6A2;
        color: white;
      }
    }
  }

  .format-tit {
    border-left: 4px solid #47C6A2;
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 20px;
  }

  .info-tips {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
  }
  .list-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    padding-bottom: 10px;
    .url:hover{
      color: #42b983;
    }
  }
  .major-wrap {
    text-align: left;

    span {
      display: inline-block;
      margin-right: 20px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    a {
      display: inline-block;
      margin-right: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

      &:hover {
        color: #42b983;
      }
    }
  }
}
</style>