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

<template>
  <custom-modal v-model="visible" :width="1200" title="Load Data From File">
    <a-table :data-source="list" :columns="columns" :pagination="false" bordered>
      <template slot="sampleData" slot-scope="text, record">
        <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" :title="text && text.name">
          {{ text && text.name }}
        </phd-select>
      </template>
      <template slot="gasBkData" slot-scope="text, record">
        <phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" :title="text && text.name">
          {{ text && text.name }}
        </phd-select>
      </template>
      <template slot="detBkData" slot-scope="text, record">
        <phd-select type="file" @change="handleFileChange(record, 'detBkData', $event)" :title="text && text.name">
          {{ text && text.name }}
        </phd-select>
      </template>
      <template slot="qcData" slot-scope="text, record">
        <phd-select type="file" @change="handleFileChange(record, 'qcData', $event)" :title="text && text.name">
          {{ text && text.name }}
        </phd-select>
      </template>
      <template slot="status" slot-scope="text">
        <span class="status"></span>
      </template>
    </a-table>

    <!-- 底部按钮 -->
    <template slot="custom-footer">
      <a-space>
        <a-button type="primary" @click="handleReset">Reset</a-button>
        <a-button type="primary" @click="handleLoad">Load</a-button>
        <a-button type="primary" @click="handleCancel">Cancel</a-button>
      </a-space>
    </template>
    <!-- 底部按钮结束 -->
  </custom-modal>
</template>

<script>
import PhdSelect from '../PHDSelect.vue'
const columns = [
  {
    title: 'SampleData',
    dataIndex: 'sampleData',
    width: '23%',
    ellipsis: true,
    scopedSlots: {
      customRender: 'sampleData'
    }
  },
  {
    title: 'GasBkData',
    dataIndex: 'gasBkData',
    width: '23%',
    ellipsis: true,
    scopedSlots: {
      customRender: 'gasBkData'
    }
  },
  {
    title: 'DetBkData',
    dataIndex: 'detBkData',
    width: '23%',
    ellipsis: true,
    scopedSlots: {
      customRender: 'detBkData'
    }
  },
  {
    title: 'QCData',
    dataIndex: 'qcData',
    width: '23%',
    ellipsis: true,
    scopedSlots: {
      customRender: 'qcData'
    }
  },
  {
    title: 'Status',
    align: 'center',
    scopedSlots: {
      customRender: 'status'
    }
  }
]

export default {
  components: { PhdSelect },
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    this.columns = columns
    return {
      list: this.getInitialList()
    }
  },
  methods: {
    // 初始化为10*4的表格
    getInitialList() {
      return new Array(10).fill(0).map(() => ({
        sampleData: undefined,
        gasBkData: undefined,
        detBkData: undefined,
        qcData: undefined
      }))
    },

    handleFileChange(record, key, fileInfo) {
      record[key] = fileInfo
    },

    handleReset() {
      this.list = this.getInitialList()
    },

    handleLoad() {
      console.log('%c [ handleLoad ]-123', 'font-size:13px; background:pink; color:#bf2c9f;', this.list)
    },

    handleCancel() {
      this.visible = false
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.status {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-top: 8px;

  background-color: #00e170;
}
::v-deep {
  @tableBorderColor: #000;

  .ant-table-bordered .ant-table-thead > tr > th,
  .ant-table-bordered .ant-table-tbody > tr > td {
    border-right-color: @tableBorderColor;
  }
  .ant-table-thead > tr th {
    border-bottom: 1px solid @tableBorderColor;
  }

  .ant-table-bordered .ant-table-body > table {
    border-color: @tableBorderColor;
  }

  .ant-table-tbody tr td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
</style>