irc_web/src/views/reviewers/edit.vue

<template>
  <div class="app-container">
    <el-tabs v-model="active" @tab-click="clickTab">
      <el-tab-pane
        :label="$t('system:reviewer:tab:BasicInfo')"
        name="BasicInfo"
      >
        <basic-info v-if="load.BasicInfo" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:Employment')"
        name="Employment"
      >
        <Employment v-if="load.Employment" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:Summarize')"
        name="Summarize"
      >
        <Summarize v-if="load.Summarize" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:Specialty')"
        name="Specialty"
      >
        <specialty v-if="load.Specialty" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:Education&Training')"
        name="EducationTraining"
      >
        <education-training
          v-if="load.EducationTraining"
          :reviewerId.sync="reviewerId"
        />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:Research&Publication')"
        name="ResearchPublication"
      >
        <research-publication
          v-if="load.ResearchPublication"
          :reviewerId.sync="reviewerId"
        />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:TrialExperience')"
        name="TrialExperience"
      >
        <trial-experience
          v-if="load.TrialExperience"
          :reviewerId.sync="reviewerId"
        />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:Credentials')"
        name="Credentials"
      >
        <Credentials v-if="load.Credentials" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Resumes')" name="Resumes">
        <Resumes v-if="load.Resumes" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:reviewer:tab:Agreements')"
        name="Agreements"
      >
        <Agreements v-if="load.Agreements" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Pay')" name="Pay">
        <Pay v-if="load.Pay" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:reviewer:tab:Setting')" name="Setting">
        <Setting v-if="load.Setting" :reviewerId.sync="reviewerId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import BasicInfo from './components/BasicInfo'
import Employment from './components/Employment'
import Summarize from './components/Summarize'
import Specialty from './components/Specialty'
import EducationTraining from './components/EducationTraining'
import ResearchPublication from './components/ResearchPublication'
import TrialExperience from './components/TrialExperience'
import Credentials from './components/Credentials'
import Resumes from './components/Resumes'
import Agreements from './components/Agreements'
import Pay from './components/Pay'
import Setting from './components/Setting'
import { changeURLStatic, getQueryString } from '@/utils/history.js'
export default {
  components: {
    BasicInfo,
    Employment,
    Summarize,
    Specialty,
    EducationTraining,
    ResearchPublication,
    TrialExperience,
    Credentials,
    Resumes,
    Agreements,
    Pay,
    Setting,
  },
  props: {
    reviewerId: {
      type: String,
    },
    isSystem: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      id: this.$route.query.Id,
      active: 'BasicInfo',
      load: {
        BasicInfo: true,
        Employment: false,
        Summarize: false,
        Specialty: false,
        EducationTraining: false,
        ResearchPublication: false,
        TrialExperience: false,
        Credentials: false,
        Resumes: false,
        Agreements: false,
        Pay,
        Setting: false,
      },
    }
  },
  created() {
    if (this.isSystem) {
      if (this.$route.query.Id === '') {
        this.$router.push({ path: '/reviewers/reviewers-list' })
      }
      this.active = this.$route.query.tabActive
      this.load[this.active] = true
    }
  },
  methods: {
    clickTab(tab, event) {
      if (this.load[tab.name] === false) {
        this.load[tab.name] = true
      }
      if (!this.isSystem) return false
      changeURLStatic('tabActive', tab.name)
      const id = getQueryString('Id')
      const isEnglish = getQueryString('isEnglish')
      this.$router.push({
        path: `/reviewers/reviewers-edit?Id=${id}&isEnglish=${isEnglish}&tabActive=${tab.name}`,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-tabs {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 50px);
    overflow-y: auto;
  }
}
</style>