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

<template>
  <custom-modal v-model="visible" :width="750" title="QC Results">
    <a-spin :spinning="isLoading">
      <a-table :columns="columns" :dataSource="list" :pagination="false" />
    </a-spin>
    <a-button slot="custom-footer" type="primary">Export to Excel</a-button>
  </custom-modal>
</template>

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

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    customCell: (record) => {
      return {
        style: {
          backgroundColor: record.flag == 'FAIL'? 'red': ''
        }
      }
    }
  },
  {
    title: 'Pass/Fail',
    dataIndex: 'flag',
    customCell: (record) => {
      return {
        style: {
          backgroundColor: record.flag == 'FAIL'? 'red': ''
        }
      }
    }
  },
  {
    title: 'Value',
    dataIndex: 'value',
    customCell: (record) => {
      return {
        style: {
          backgroundColor: record.flag == 'FAIL'? 'red': ''
        }
      }
    }
  },
  {
    title: 'Standard',
    dataIndex: 'standard',
    customCell: (record) => {
      return {
        style: {
          backgroundColor: record.flag == 'FAIL'? 'red': ''
        }
      }
    }
  }
]
export default {
  mixins: [ModalMixin],
  props: {
    sampleId: {
      type: Number
    }
  },
  data() {
    this.columns = columns
    return {
      isLoading: false,
      list: []
    }
  },
  methods: {
    async getData() {
      try {
        this.isLoading = true
        const { success, result, message } = await getAction('/gamma/viewQCResult', {
          sampleId: this.sampleId
        })
        if (success) {
          this.list = result
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    },

    beforeModalOpen() {
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped></style>