AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/Modals/SampleInfomationModal.vue

<template>
  <custom-modal v-model="visible" :width="750" title="Sample Infomation">
    <a-spin :spinning="isLoading">
      <div class="sample-infomation">
        <a-form-model :labelCol="{ style: { width: '150px', textAlign: 'left' } }">
          <a-row>
            <a-col :span="12" v-for="(item, index) in columns" :key="index">
              <a-form-model-item :label="item.title">
                {{ item.key == 'sampleId' && !isLoading ? sampleId : data[item.key] }}
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-spin>
    <div slot="custom-footer" style="text-align: center;">
      <a-space :size="20">
        <a-button type="primary">Export to Excel</a-button>
        <a-button @click="visible = false">Close</a-button>
      </a-space>
    </div>
  </custom-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import ModalMixin from '@/mixins/ModalMixin'

const columns = [
  {
    title: 'Station Id',
    key: 'stationId'
  },
  {
    title: 'Detector Id',
    key: 'detectorId'
  },
  {
    title: 'Sample Id',
    key: 'sampleId'
  },
  {
    title: 'Sample Geometry',
    key: 'sampleGeometry'
  },
  {
    title: 'Sample Quantity',
    key: 'sampleQuantity'
  },
  {
    title: 'Sample Type',
    key: 'sampleType'
  },
  {
    title: 'Collection Start',
    key: 'collectStart'
  },
  {
    title: 'Sampling Time',
    key: 'samplingTime'
  },
  {
    title: 'Collection Stop',
    key: 'collectStop'
  },
  {
    title: 'Decay Time',
    key: 'decayTime'
  },
  {
    title: 'Acquisition Start',
    key: 'acquisitionStart'
  },
  {
    title: 'Acquisition Time',
    key: 'acquisitionTime'
  },
  {
    title: 'Acquisition Stop',
    key: 'acquisitionStop'
  },
  {
    title: 'Avg Flow Rate',
    key: 'avgFlowRate'
  }
]

export default {
  mixins: [ModalMixin],
  props: {
    sampleId: {
      type: Number
    }
  },
  data() {
    this.columns = columns
    return {
      isLoading: false,
      data: {}
    }
  },
  methods: {
    async getInfo() {
      try {
        this.isLoading = true
        const { success, result, message } = await getAction('/gamma/sampleInformation', {
          sampleId: this.sampleId
        })
        if (success) {
          this.data = result
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    },

    beforeModalOpen() {
      this.data = {}
      this.getInfo()
    }
  }
}
</script>

<style lang="less" scoped>
.sample-infomation {
  background-color: #143644;
  padding: 20px;

  .ant-form-item {
    margin-bottom: 0;
  }
}
</style>