front/src/views/career/MultipleWay/index.vue

<template>
  <div class="app-container bg-page fx-column fx-cen-cen">
    <index-card class="width100" title="多元升学路径规划（Way）">
      <div slot="more" class="fx-row">
        <el-button size="small" round type="primary" @click="goForm()">进入评测</el-button>
        <el-button size="small" round plain @click="historyVisible=true,getList()">查看记录</el-button>
      </div>
      <div class="fx-row fx-bet-sta">
        <el-image style="width: 240px" :src="require('@/assets/images/career/img_way.png')" fit="contain" />
        <div class="ml20 fx-1 fx-column">
          <div class="text" style="display:flex;align-items: center;">
            <div>
              <span style="width:200px;display:inline-block">测评方向：学业规划</span>
              <span style="width:200px;display:inline-block">测评时间：3-5分钟</span>
            </div>
            <div />
          </div>
          <div class="tabBox">
            <template>
              <el-tabs v-model="activeName">
                <el-tab-pane label="测前说明" name="first">
                  <ul class="cp-rule">
                    <li>1、请确保在一个独立、安静的环境下一次性完成，勿受他人干扰。</li>
                    <li>2、如遇到无法确定内容，根据个人想法选择填写即可。</li>
                    <li>3、参加测试的人员请务必诚实、独立的回答问题，只有如此，才能得到有效的结果。</li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="测评介绍" name="second">
                  <ul class="cp-rule">
                    <li>随着新高考改革的推进，以“多元录取”为核心的升学方式替代了传统千军万马过独木桥的录取方式，国家鼓励更多的学生能够结合自身的情况选择合适的升学路径，本学业生涯路径测评会通过家庭环境、个人情况共计十余项指标精准定位最适合自己的升学路径，助力考生合理规划高中的学业，促进低分高就及科学的学业生涯规划。</li>
                  </ul>
                </el-tab-pane>
                <el-tab-pane label="测评目的" name="third">
                  <ul class="cp-rule">
                    <li>1、本测评仅需准确填写个人信息即可，简单快捷帮您分析出多元的升学途径。</li>
                    <li>2、本测评结论提供了高中学业的规划表，可与多元升学路径结合使用。</li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </div>
      </div>
    </index-card>
    <!--  历史  -->
    <el-drawer :visible.sync="historyVisible" title="多元升学路径规划历史" size="70%" append-to-body>
      <dynamic-table :rows="list" :columns="columns">
        <template #action="{row}">
          <el-button type="text" icon="el-icon-view" @click="goReport(row)">查看</el-button>
        </template>
      </dynamic-table>
      <pagination v-if="total>queryParams.pageSize" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" />
    </el-drawer>
  </div>
</template>

<script>
import IndexCard from '@/views/login/components/modules/shared/IndexCard.vue'
import DynamicTable from '@/components/dynamic-table/index.vue'
import { getMultipleWayHistories } from '@/api/webApi/multiple-way'

export default {
  name: 'MultipleWay',
  components: { DynamicTable, IndexCard },
  data() {
    return {
      activeName: 'first',
      // history
      historyVisible: false,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      columns: [
        { prop: 'createdTime', label: '时间' },
        { prop: 'acton', label: '操作', slotBody: 'action' }
      ]
    }
  },
  methods: {
    goForm() {
      this.$router.push('/sygh/multiple-way/form')
    },
    goReport(row) {
      const path = this.$router.resolve({ path: '/sygh/multiple-way/report', query: { formId: row.formId }})
      window.open(path.href, '_blank')
    },
    async getList() {
      const res = await getMultipleWayHistories(this.queryParams)
      this.list = res.rows
      this.total = res.total
    }
  }
}
</script>

<style lang="scss" scoped>
.cp-rule {
  font-size: 14px;
  color: #414141;
  font-family: PingFangSC-Regular, PingFang SC, Helvetica, serif;
  font-weight: 400;
  padding: 0px;
  width: 100%;
  li {
    width: 100%;
    list-style: none;
    padding: 8px 0;
    line-height: 1.75;
    word-wrap: normal;
    white-space: pre-wrap;
  }
}
.text {
  margin-bottom: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC, Helvetica, serif;
  font-weight: 400;
  justify-content: space-between;
}
</style>
<style lang="scss" scoped>
.tabBox {
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            .el-tabs__active-bar {
              background-color: var(--themeColor) !important;
            }
            .el-tabs__item.is-active {
              color: var(--themeColor) !important;
            }
          }
        }
      }
    }
  }
}
</style>