front/src/views/questioncenter/generating.vue

<template>
  <div class="generating_container app-container">
    <el-card>
      <div class="header_top">
        <div v-for="(tab,idx) in visibleTabs" :key="idx" class="pointer"
             :class="{'active-tab': tab.content==tabActive}"
             @click="handleTabChange(idx)">
          {{ tab.label }}
        </div>
      </div>
    </el-card>
    <!--  NOTE:类似延迟加载  -->
    <keep-alive v-for="tab in visibleTabs" :key="tab.content">
      <component :is="tab.content" v-if="tab.content==tabActive"></component>
    </keep-alive>
  </div>
</template>
<script>
import PaperByHand from '@/views/questioncenter/components/generate-tabs/paper-by-hand'
import PaperByIntelligent from '@/views/questioncenter/components/generate-tabs/paper-by-intelligent'
import PaperRecord from '@/views/questioncenter/components/generate-tabs/paper-record'
import PaperWorkIdentifierMixin from './components/generate-tabs/paper-work-identifier-mixin'
import PaperWorkVideo from '@/views/questioncenter/components/generate-tabs/paper-work-video'
import PaperWorkPast from '@/views/questioncenter/components/generate-tabs/paper-work-past'
import PaperWorkPublish from '@/views/questioncenter/components/generate-tabs/paper-work-publish'
import PaperWorkHistory from '@/views/questioncenter/components/generate-tabs/paper-work-history'

export default {
  mixins: [PaperWorkIdentifierMixin],
  components: {
    PaperWorkHistory,
    PaperWorkPublish,
    PaperWorkPast,
    PaperWorkVideo,
    PaperRecord,
    PaperByIntelligent,
    PaperByHand
  },
  data() {
    return {
      normalTabs: [{
        label: '手动组卷',
        content: PaperByHand.name
      }, {
        label: '智能组卷',
        content: PaperByIntelligent.name
      }, {
        label: '组卷记录',
        content: PaperRecord.name
      }],
      paperWorkTabs: [{
        label: '组卷作业',
        content: PaperByHand.name
      }, {
        label: '视频作业',
        content: PaperWorkVideo.name
      }, {
        label: '试卷作业',
        content: PaperWorkPast.name
      }, {
        label: '发布作业',
        content: PaperWorkPublish.name
      }, {
        label: '检查作业',
        content: PaperWorkHistory.name
      }],
      visibleTabs: [],
      tabActive: ''
    }
  },
  created() {
    // visibleTabs不能做成计算属性，否则因为依赖于路由会在任意跳转时刷新
    this.visibleTabs = this.isPaperWork ? this.paperWorkTabs : this.normalTabs

    let query = this.$route.query
    const defaultActive = query.tabActive * 1 || 0
    this.handleTabChange(defaultActive)
  },
  methods: {
    handleTabChange(idx) {
      const current = this.visibleTabs[idx]
      this.tabActive = current.content
    }
  }
}
</script>
<style lang="scss">
.generating_container {
  .active-tab {
    color: #47c6a2;
  }

  .active-tab::after {
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    background: #47c6a2;
    left: 0;
    transform: translateY(50%);
    bottom: 0;
  }

  .header_top {
    display: flex;
    border-bottom: 1px solid #b7b7b7;
    margin-bottom: 20px;
  }

  .header_top > div {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 8px 0 24px 0;
  }

  .el-card {
    margin-bottom: 20px;
  }

  .generating_aside {
    padding-bottom: 104px;
    background: #fff;
    margin-right: 24px;
    height: 600px;
    overflow: scroll;
    overflow-x: hidden;
  }

  .el-aside {
    margin-bottom: 0;
    padding: 24px 0 0 16px;
  }

  .aside_header {
    display: flex;
    flex-direction: column;
    justify-content: left;
  }

  .aside_header > span:first-child {
    width: 173px;
    height: 27px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#ffffff),
        to(#47c6a2)
    );
    background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
    opacity: 0.5;
  }

  .aside_header > span:last-child {
    margin-bottom: 20px;
  }

  .aside_header > span {
    margin-top: 5px;
    width: 84px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #343434;
    line-height: 22px;
  }

  .el-main {
    //padding: 37px 28px 0 28px;
  }

  .main_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .main_header .main_tit {
    font-size: 16px;
    font-weight: 500;
    color: #47c6a2;
    line-height: 22px;
    margin-right: 64px;
  }

  .main_header .filter {
    font-weight: 400;
    color: #4c4c4c;
    line-height: 20px;
  }

  .main_header .left {
    display: flex;
  }

  .search_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-right: 20px;
  }

  .search_box img {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 6px;
  }

  .search_box input {
    background: #f7f7ff;
    border-radius: 20px;
    border: 1px solid #c6cbf5;
    outline: none;
    width: 340px;
    height: 32px;
    padding-left: 24px;
  }

  .que_item {
    border-radius: 1px;
    border: 1px solid #dedede;
    margin-bottom: 8px;
  }

  .que_content {
    padding: 12px 24px 0 33px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4c4c4c;
    line-height: 27px;
    margin-bottom: 40px;
  }

  .que-content-title {
    font-size: 14px;
    display: flex;
  }


  .que-option {
    line-height: 40px;
  }

  .que-option span {
    margin-right: 5px;
  }

  .que_footer {
    border-top: 1px solid #dedede;
    padding-left: 33px;
    overflow: hidden;
    padding-bottom: 23px;
    padding-top: 21px;
  }

  .que_footer .spans {
    float: left;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #979797;
    line-height: 20px;
  }

  .que_footer .spans > span {
    margin-right: 20px;
  }

  .operation {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #47c6a2;
    line-height: 20px;
    float: right;
  }

  .operation > div {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .operation .shoucan {
    margin-right: 46px;
  }

  .operation .jiucuo {
    color: #ff4e00;
    margin-right: 32px;
  }

  .operation .detail span {
    border-radius: 1px;
    border-bottom: 1px solid #47c6a2;
  }

  .operation .detail {
    margin-right: 32px;
  }

  .operation > div > img {
    margin-right: 10px;
  }

  .knowPoints .tags {
    margin-top: 24px;
    margin-bottom: 72px;
  }

  .knowPoints .tit {
    margin-bottom: 16px;
    overflow: hidden;
    color: #47c6a2;
  }

  .knowPoints .clear {
    float: right;
    margin-right: 40px;
  }

  .knowPoints .clear img {
    margin-right: 16px;
  }

  .que .tit {
    margin-bottom: 16px;
    overflow: hidden;
    color: #47c6a2;
  }

  .que .clear {
    float: right;
    margin-right: 40px;
  }

  .que .clear img {
    margin-right: 16px;
  }

  .el-divider.generating_divider {
    margin: 0;
    background: #47c6a2;
  }

  .computer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .computer .computer_item {
    flex: 33% 0 0;
    margin-bottom: 32px;
  }

  .computer .computer_item .tit {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #343434;
    line-height: 20px;
  }

  .computer .computer_item .select {
    width: 58px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #969696;
    line-height: 17px;
  }


  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
    background-color: rgb(238, 241, 245);
  }

  .queBoxer {
    display: flex;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .queBoxer .main {
    border-top: 2px solid #47c6a2;
    padding: 10px 0;
    border-bottom: 2px solid #47c6a2;
    background: #fff;
  }

  .queBoxer > div > div {
    padding: 0 10px;
  }

  .queBoxer .left {
    padding: 10px;
    background: #47c6a2;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .queBoxer .main .btn {
    background: #47c6a2;
    color: white;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    margin: 5px 10px;
    text-align: center;
  }

  .queBoxer .left .tit {
    display: flex;
    writing-mode: lr-tb;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }

  .generateExam {
    padding: 14px 29px;
    background: #47c6a2;
    border-radius: 4px;
    cursor: pointer;
    color: white;
  }

  .el-button--success.is-plain.is-disabled {
    background-color: #ffffff;
    border-color: #e6ebf5;
    color: #c0c4cc;
  }

  .el-tree-node__content {
    padding-top: 6px;
    padding-bottom: 6px;
    height: 32px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #343434;
    line-height: 20px;
  }

  & .split_page .el-pager > li {
    border-radius: 50%;
  }

  & .el-tree-node {
    padding-left: 16px;
  }

  & .el-tree-node__expand-icon.expanded {
    content: "";
  }

  & .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 6px;
    /* position: absolute; */
    right: 16px;
  }

  & .radio_contianer .is-active .el-radio-button__inner {
    border-left: none;
  }

  .empty-text {
    margin-top: 150px;
    text-align: center;
    color: #ccc;
  }

  & .el-input-number.is-controls-right .el-input-number__decrease {
    width: 16px;
  }

  & .el-input-number.is-controls-right[class*="medium"] [class*="increase"],
  & .el-input-number.is-controls-right[class*="medium"] [class*="decrease"] {
    width: 16px;
  }

  & .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    color: #47c6a2;
    background: #ffffff;
  }

  & .table-delete-icon {
    cursor: pointer;
  }
}
</style>