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

<template>
  <custom-modal v-model="visible" :width="1200" title="Load From Database" class="load-from-db-modal">
    <search-form :items="formItems" v-model="queryParam" @search="searchQuery"> </search-form>
    <custom-table
      size="middle"
      rowKey="sampleId"
      :columns="columns"
      :list="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
      :selectedRowKeys.sync="selectedRowKeys"
      :multiple="true"
    >
    </custom-table>
    <!-- 底部操作栏 -->
    <template slot="custom-footer">
      <a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
    </template>
  </custom-modal>
</template>

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

const columns = [
  {
    title: 'SampleID',
    align: 'left',
    dataIndex: 'sampleId'
  },
  {
    title: 'Station',
    align: 'left',
    dataIndex: 'stationName'
  },
  {
    title: 'Detector',
    align: 'left',
    dataIndex: 'detectorsName'
  },
  {
    title: 'Sample',
    align: 'left',
    dataIndex: 'sampleType'
  },
  {
    title: 'DataType',
    align: 'left',
    dataIndex: 'dataType'
  },
  {
    title: 'Qualifier',
    align: 'left',
    dataIndex: 'spectralQualifie'
  },
  {
    title: 'Col.Stop',
    align: 'left',
    dataIndex: 'collectStop'
  },
  {
    title: 'Acq.Start',
    align: 'left',
    dataIndex: 'acquisitionStart'
  },
  {
    title: 'Acq.real',
    align: 'left',
    dataIndex: 'acquisitionRealSec'
  },
  {
    title: 'Acq.live',
    align: 'left',
    dataIndex: 'acquisitionLiveSec'
  },
  {
    title: 'Status',
    align: 'left',
    dataIndex: 'status'
  }
]

export default {
  props: {
    value: {
      type: Boolean
    }
  },
  mixins: [JeecgListMixin],
  data() {
    this.columns = columns
    return {
      selectedRowKeys: [],
      stationList: [],
      detectorList: [],
      url: {
        list: '/gardsSampleData/findPage'
      },

      isLoadingSample: false // 正在加载样例
    }
  },
  created() {
    this.getStationList()
    this.getDetectorList()
  },
  methods: {
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.onClearSelected()

      const params = this.getQueryParams() //查询条件
      if (params.checkboxGroup) {
        params.checkboxGroup.forEach(item => {
          params[item] = true
        })
        delete params.checkboxGroup
      }

      this.loading = true
      getAction(this.url.list, params)
        .then(res => {
          if (res.success) {
            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 加载
     */
    async handleLoad() {
      if (!this.selectedRowKeys.length) {
        this.$message.warn('Please Select Databases To Load')
        return
      }
      this.isLoadingSample = true
      const res = await ''
      console.log('%c [ res ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      this.isLoadingSample = false
      this.visible = false
    },

    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
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    formItems() {
      return [
        {
          label: 'SampleID',
          type: 'a-input',
          name: 'sampleId',
          props: {
            allowClear: true
          },
          style: {
            width: '20%'
          }
        },
        {
          label: 'Station',
          type: 'custom-select',
          name: 'stationId',
          props: {
            options: [
              {
                label: 'ALL',
                value: ''
              },
              ...this.stationList
            ],
            showSearch: true,
            filterOption: this.filterOption,
            allowClear: true
          },
          style: {
            width: '18%'
          }
        },
        {
          label: 'Detector',
          type: 'custom-select',
          name: 'detectorId',
          props: {
            options: [
              {
                label: 'ALL',
                value: ''
              },
              ...this.detectorList
            ],
            showSearch: true,
            filterOption: this.filterOption,
            allowClear: true
          },
          style: {
            width: '18%'
          }
        },
        {
          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'
            }
          },
          style: {
            width: '22%'
          }
        },
        {
          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'
            }
          },
          style: {
            paddingRight: 0,
            width: '22%'
          }
        },
        {
          label: '',
          type: 'a-checkbox-group',
          name: 'checkboxGroup',
          props: {
            options: [
              { label: 'Collect Stop', value: 'collectStop' },
              { label: 'Acq.Start', value: 'acqDotStart' }
            ]
          },
          style: {
            width: '230px'
          }
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.load-from-db-modal {
}
</style>