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

<template>
  <div>
    <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)" @select="handleFileSelect" :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)" @select="handleFileSelect" :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)" @select="handleFileSelect" :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)" @select="handleFileSelect" :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-upload :custom-request="handleUpload" :multiple="true" :show-upload-list="false" :before-upload="beforeUpload" >
            <a-button type="primary" :loading="uploading">
              Upload
            </a-button>
          </a-upload>
          <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>
    <a-modal v-model="visible_file" :width="1200" title="File List" @cancel="cancelFileModale">
      <div style="position: relative;padding-bottom: 40px;height: 460px;overflow: hidden;">
        <a-table 
          :data-source="list_file" 
          :columns="columns_file" 
          :loading="loading_file"
          :pagination="false"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
        </a-table>
        <a-pagination 
          size="small"
          v-model="ipagination.current" 
          :pageSize="ipagination.pageSize"
          :page-size-options="ipagination.pageSizeOptions"
          show-size-changer
          show-quick-jumper
          :total="ipagination.total"
          :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
          show-less-items 
          @change="handlePageChange"
          @showSizeChange="handleSizeChange"
        />
      </div>
      <template slot="footer">
        <a-space class="operators" :size="20">
          <a-button type="success">Save</a-button>
          <a-button type="warn"  @click="cancelFileModale">Cancel</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script>
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import PhdSelect from '../PHDSelect.vue'
import { getAction,postAction } from '../../../../api/manage'
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'
    }
  }
]
const columns_file = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: '45%',
    align: 'left',
    ellipsis: true
  },{
    title: 'UpdateDate',
    dataIndex: 'updateDate',
    align: 'left',
  },{
    title: 'Size',
    dataIndex: 'size',
    align: 'left'
  },
]
export default {
  components: { PhdSelect },
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    this.columns = columns
    return {
      visible_file: false,
      list_file: [],
      columns_file,
      loading_file: false,
      list: this.getInitialList(),
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          const { current, pageSize } = this.ipagination
          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      selectedRowKeys: [],
      fileList: [],
      fileNum: 0,
      uploading: false
    }
  },
  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
    },
    handleFileSelect() {
      this.visible_file = true
      this.getSpectrumFile({pageNo:1,pageSize:10})
    },
    getSpectrumFile(params) {
      this.loading_file = true
      getAction("/spectrumFile/get", params).then(res => {
        this.loading_file = false
        if (res.success) {
          this.ipagination.total = res.result.total
          this.list_file = res.result.records
        } else {
          this.$message.warning("This operation fails. Contact your system administrator")
        }
      })
    },
    handlePageChange(page, pageSize) {
      this.ipagination.current = page
      this.ipagination.pageSize = pageSize
      this.getSpectrumFile({
        pageNo: page,
        pageSize: pageSize
      })
    },
    handleSizeChange(current, size) {
      this.ipagination.current = current
      this.ipagination.pageSize = size
      this.getSpectrumFile({
        pageNo: current,
        pageSize: size
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    cancelFileModale() {
      this.visible_file = false
      this.list_file=[]
    },
    beforeUpload(file,fileList) {
      this.fileList = fileList
    },
    handleUpload({ file }) {
      this.uploading = true
      this.fileNum += 1
      if (this.fileNum == this.fileList.length) {
        this.zipFile(this.fileList)
      }
    },
    async zipFile(fileList, onProgress) {
      const zip = new JSZip()
      const promises=[]
      fileList.forEach(file => {
        promises.push(this.readAsArrayBuffer(file))
      })
      Promise.all(promises).then(result => {
        result.forEach(res => {
          zip.file(res.fileName, res.data)
        })
        zip.generateAsync({ type: 'blob' }).then(content => {
          let file = new File([content], 'test.zip', { type: content.type })
          const formData = new FormData()
          formData.append("file",file)
          postAction("/spectrumFile/upload", formData).then(res => {
            this.uploading = false
            this.fileNum = 0
            if (res.success) {
              this.$message.success(res.message)
            } else {
              this.$message.warning(res.message)
            }
          })
        })
      })
    },

    async readAsArrayBuffer(file){
      return new Promise((resolve) => {
        let reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = (e) => {
          resolve({
            fileName: file.name,
            data: e.target.result
          })
        }
      })
    },

    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;
  }
  .ant-pagination{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .ant-select {
    .ant-select-arrow-icon {
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    &-open {
      .ant-select-arrow-icon {
        transform: rotate(180deg);
      }
    }
  }
  .ant-modal-title{
    letter-spacing: 1px;
  }
}
.item-label{
  display: inline-block;
  font-size: 16px;
  font-family: ArialMT;
  color: #ade6ee;
  line-height: 32px;
  height: 32px;
  margin-right: 10px;
}
.operators {
  width: 100%;
  justify-content: center;
  .ant-btn {
    width: 92px;
  }
}
</style>