AnalysisSystemForRadionuclide_vue/src/views/system/DataBase.vue

<template>
  <div>
    <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
      <div class="btn-group" slot="additional">
        <div>
          <a-checkbox v-model="delParams.sampleData"> SampleData </a-checkbox>
          <a-checkbox v-model="delParams.rnAuto" @change="handleCheckboxChange('rnAuto')"> AutoResults </a-checkbox>
          <a-checkbox v-model="delParams.rnMan" @change="handleCheckboxChange('rnMan')"> Reviewed Results </a-checkbox>
        </div>
        <a-button type="primary" @click="onDel">
          <img src="@/assets/images/global/delete.png" alt="" />
          Delete
        </a-button>
      </div>
    </search-form>
    <custom-table
      size="middle"
      rowKey="sampleId"
      :columns="columns"
      :list="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
      :selectedRowKeys.sync="selectedRowKeys"
      :scroll="{ x: true, y: 'calc(100vh - 415px)' }"
    >
      <template slot="index" slot-scope="{ index }">
        {{ index + 1 }}
      </template>
    </custom-table>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, getAction } from '../../api/manage'

const columns = [
  {
    title: 'NO',
    align: 'left',
    width: 100,
    scopedSlots: {
      customRender: 'index',
    },
    customHeaderCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
    customCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
  },
  {
    title: 'SITE DET CODE',
    align: 'left',
    dataIndex: 'siteDetCode',
    width: 150,
  },
  {
    title: 'SAMPLE ID',
    align: 'left',
    width: 120,
    dataIndex: 'sampleId',
  },
  {
    title: 'STATION',
    align: 'left',
    width: 100,
    dataIndex: 'stationName',
  },
  {
    title: 'DETECTOR',
    align: 'left',
    width: 120,
    dataIndex: 'detectorsName',
  },
  {
    title: 'SAMPLE TYPE',
    align: 'left',
    width: 140,
    dataIndex: 'sampleType',
  },
  {
    title: 'DATA TYPE',
    align: 'left',
    width: 120,
    dataIndex: 'dataType',
  },
  {
    title: 'GEOMETRY',
    align: 'left',
    width: 160,
    dataIndex: 'geometry',
    ellipsis: true,
  },
  {
    title: 'QUALIFIE',
    align: 'left',
    width: 100,
    dataIndex: 'spectralQualifie',
  },
  {
    title: 'TRANSMIT DTG',
    align: 'left',
    width: 180,
    dataIndex: 'transmitDtg',
  },
  {
    title: 'COLLECT START',
    align: 'left',
    width: 180,
    dataIndex: 'collectStart',
  },
  {
    title: 'COLLECT STOP',
    align: 'left',
    width: 180,
    dataIndex: 'collectStop',
  },
  {
    title: 'ACQ.START',
    align: 'left',
    width: 180,
    dataIndex: 'acquisitionStart',
  },
  {
    title: 'ACQ.STOP',
    align: 'left',
    width: 180,
    dataIndex: 'acquisitionStop',
  },
  {
    title: 'ACQ.REAL(S)',
    align: 'left',
    width: 120,
    dataIndex: 'acquisitionRealSec',
  },
  {
    title: 'ACQ.LIVE(S)',
    align: 'left',
    width: 140,
    dataIndex: 'acquisitionLiveSec',
  },
  {
    title: 'QUANTITY',
    align: 'left',
    width: 100,
    dataIndex: 'quantity',
  },
  {
    title: 'STATUS',
    align: 'left',
    width: 100,
    dataIndex: 'status',
  },
]

export default {
  mixins: [JeecgListMixin],
  data() {
    this.columns = columns
    return {
      queryParam: {
        station: '',
        detector: '',
      },
      delParams: {
        sampleData: true,
        rnAuto: true,
        rnMan: true,
      },
      url: {
        list: '/gardsSampleData/findPage',
      },
      stationList: [],
      detectorList: [],
    }
  },
  created() {
    this.getStationList()
    this.getDetectorList()
  },
  methods: {
    async getStationList() {
      try {
        const { success, result, message } = await getAction('/gardsStations/findPage', {
          pageIndex: 1,
          pageSize: 10000,
        })
        if (success) {
          this.stationList = result.records.map((record) => ({ label: record.stationCode, value: record.stationId }))
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    async getDetectorList() {
      try {
        const { success, result, message } = await getAction('/gardsDetectors/findPage', {
          pageIndex: 1,
          pageSize: 10000,
        })
        if (success) {
          this.detectorList = result.records.map((record) => ({ label: record.detectorCode, value: record.detectorId }))
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    handleCheckboxChange(name) {
      if (!this.delParams[name]) {
        this.delParams.sampleData = false
      }
    },

    onDel() {
      if (this.selectedRowKeys && this.selectedRowKeys.length) {
        this.$confirm({
          title: 'Do You Want To Delete This Item?',
          okText: 'OK',
          cancelText: 'Cancel',
          onOk: async () => {
            try {
              const { success, message } = await deleteAction('/gardsSampleData/deleteById', {
                sampleId: this.selectedRowKeys[0],
                ...this.delParams,
              })
              if (success) {
                this.$message.success('Delete Success!')
              } else {
                this.$message.error(message)
              }
            } catch (error) {
              console.error(error)
            }
          },
        })
      } else {
        this.$message.warn('Please Select An Item To Delete')
      }
    },
  },
  computed: {
    formItems() {
      return [
        {
          label: 'SampleID',
          type: 'a-input',
          name: 'sampleId',
          props: {
            allowClear: true,
            style: {
              width: '190px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'Station',
          type: 'custom-select',
          name: 'stationId',
          props: {
            options: [
              {
                label: 'ALL',
                value: '',
              },
              ...this.stationList,
            ],
            showSearch: true,
            filterOption: this.filterOption,
            allowClear: true,
            style: {
              width: '190px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'Detector',
          type: 'custom-select',
          name: 'detectorId',
          props: {
            options: [
              {
                label: 'ALL',
                value: '',
              },
              ...this.detectorList,
            ],
            showSearch: true,
            filterOption: this.filterOption,
            allowClear: true,
            style: {
              width: '190px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'From',
          type: 'custom-date-picker',
          name: 'collectStart',
          props: {
            showTime: { format: 'HH:mm' },
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            style: {
              minWidth: 'auto',
              width: '282px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'To',
          type: 'custom-date-picker',
          name: 'collectStop',
          props: {
            showTime: { format: 'HH:mm' },
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            style: {
              minWidth: 'auto',
              width: '282px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: '',
          type: 'a-checkbox-group',
          props: {
            options: [
              { label: 'Collect Stop', value: 'collectStop' },
              { label: 'Acq.Start', value: 'acqDotStart' },
            ],
          },
          style: {
            width: '230px',
          },
        },
      ]
    },
  },
  watch: {
    'delParams.sampleData': {
      handler(newVal) {
        if (newVal) {
          this.delParams.rnAuto = true
          this.delParams.rnMan = true
        }
      },
    },
  },
}
</script>

<style lang="less" scoped>
.btn-group {
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-bottom: 8px;

  img {
    margin-right: 12px;
    height: 18px;
  }
}
</style>