AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/Modals/RLRModal/index.vue

<template>
  <custom-modal v-model="visible" :width="1280" title="Mini Radionuclide Laboratory Reports" :destroyOnClose="true">
    <a-spin :spinning="isLoading">
      <div class="rlr">
        <div class="rlr-tabs">
          <div
            class="rlr-tabs-item"
            :class="activeKey == index ? 'active' : ''"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="activeKey = index"
          >
            {{ tab }}
          </div>
        </div>
        <div class="rlr-content">
          <h4>{{ tabs[activeKey] }}</h4>
          <div class="rlr-content-detail">
            <template v-if="activeKey == 0">
              <c-header :allData="allInfo" />
            </template>
            <template v-if="activeKey == 1">
              <Objective :allData="allInfo" />
            </template>
            <template v-if="activeKey == 2">
              <collection :allData="allInfo" />
            </template>
            <template v-if="activeKey == 3">
              <sample-receipt :allData="allInfo" />
            </template>
            <template v-if="activeKey == 4">
              <test :allData="allInfo" />
            </template>
            <template v-if="activeKey == 5">
              <peaks-method :allData="allInfo" />
            </template>
            <template v-if="activeKey == 6">
              <peak-fit :allData="allInfo" />
            </template>
            <template v-if="activeKey == 7">
              <g-analysis-methods :allData="allInfo" />
            </template>
            <template v-if="activeKey == 8">
              <peak-association :allData="allInfo" />
            </template>
            <template v-if="activeKey == 9">
              <references :allData="allInfo" />
            </template>
            <template v-if="activeKey == 10">
              <results :allData="allInfo" />
            </template>
            <template v-if="activeKey == 11">
              <nuclide-ratios :allData="allInfo" />
            </template>
            <template v-if="activeKey == 12">
              <g-coincidence-correction />
            </template>
            <template v-if="activeKey == 13">
              <mda />
            </template>
            <template v-if="activeKey == 14">
              <conclusions :allData="allInfo" />
            </template>
            <template v-if="activeKey == 15">
              <comment :allData="allInfo" />
            </template>
          </div>
        </div>
      </div>
    </a-spin>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import CHeader from './components/Header.vue'
import Objective from './components/Objective.vue'
import Collection from './components/Collection.vue'
import SampleReceipt from './components/SampleReceipt.vue'
import Test from './components/Test.vue'
import PeaksMethod from './components/PeaksMethod.vue'
import PeakFit from './components/PeakFit.vue'
import GAnalysisMethods from './components/g_AnalysisMethods.vue'
import PeakAssociation from './components/PeakAssociation.vue'
import References from './components/References.vue'
import Results from './components/Results.vue'
import NuclideRatios from './components/NuclideRatios.vue'
import GCoincidenceCorrection from './components/g_CoincidenceCorrection.vue'
import Mda from './components/MDA.vue'
import Conclusions from './components/Conclusions.vue'
import Comment from './components/Comment.vue'
import { getAction } from '@/api/manage'

const tabs = [
  'Header',
  'Objective',
  'Collection',
  'SampleReceipt',
  'Test',
  'PeaksMethod',
  'PeakFit',
  'g_AnalysisMethods',
  'PeakAssociation',
  'References',
  'Results',
  'NuclideRatios',
  'g_CoincidenceCorrection',
  'MDA',
  'Conclusions',
  'Comment'
]

export default {
  mixins: [ModalMixin],
  components: {
    CHeader,
    Objective,
    Collection,
    SampleReceipt,
    Test,
    PeaksMethod,
    PeakFit,
    GAnalysisMethods,
    PeakAssociation,
    References,
    Results,
    NuclideRatios,
    GCoincidenceCorrection,
    Mda,
    Conclusions,
    Comment
  },
  props: {
    sampleId: {
      type: Number
    }
  },
  data() {
    this.tabs = tabs
    return {
      isLoading: false,
      activeKey: 0,
      allInfo: {}
    }
  },
  methods: {
    beforeModalOpen() {
      this.activeKey = 0
      this.getGammaViewRLR();
    },
    getGammaViewRLR() {
      this.isLoading = true
      let params = {
        sampleId: this.sampleId
      }
      getAction("/gamma/viewRLR", params).then(res => {
        this.isLoading = false
        if (res.success) {
          this.allInfo = res.result
        } else {
          this.$message.warning("This operation fails. Contact your system administrator")
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.rlr {
  display: flex;

  &-tabs {
    width: 170px;
    background-color: #275466;
    padding: 3px 0;

    &-item {
      cursor: pointer;
      user-select: none;
      padding: 0 5px;
      height: 32px;
      line-height: 32px;

      &.active {
        background-color: #296d81;
      }
    }
  }

  &-content {
    margin-left: 20px;
    flex: 1;

    h4 {
      color: #fff;
    }

    &-detail {
      height: 600px;
      padding: 20px;
      overflow: auto;
      background-color: #082f3e;
    }
  }
}
</style>