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-button type="primary" @click="handleUpload">Upload</a-button>
          <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>
    <custom-modal v-model="visible_file" :width="1200" title="File List">
      <div style="position: relative;padding-bottom: 40px;height: 460px;">
        <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>
    </custom-modal>
    <a-modal v-model="visible_upload" :width="300" title="Upload File" @ok="handleUploadFile">
      <div>
        <span class="item-label">Type</span>
          <a-select style="width:180px"
            v-model="type" 
            placeholder="select..."
            show-arrow 
            allowClear
            :options="typeOptions" 
            @change="onTypeChange"
          >
            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
          </a-select>
      </div>
      <div>
        <a-upload
          name="file"
          :multiple="true"
          :before-upload="beforeUpload" 
          :file-list="fileList"
        >
          <a-button> <a-icon type="upload" /> Select File </a-button>
        </a-upload>
      </div>
    </a-modal>
  </div>
</template>

<script>
import JSZip from 'jszip'
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',
    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: [],
      visible_upload: false,
      type: undefined,
      typeOptions: [
        {
          label: "stop",
          value: "stop"
        },{
          label: "over",
          value: "over"
        },{
          label: "skip",
          value: "skip"
        },
      ],
      fileList: [],
    }
  },
  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.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;
    },

    handleUpload() {
      this.visible_upload = true
    },
    onTypeChange(val) {
      console.log(val);
      this.type = val
    },
    beforeUpload(file,fileList) {
      console.log(file, fileList);
      this.fileList = fileList
      // this.fileList = [...this.fileList, file]
      
    },
    // async transformFile() {
    //   // 创建jszip实例
    //   let zipData = await this.zipFile(this.fileList, (added) => {})
    //   console.log(zipData);
    // },
    async zipFile(fileList, onProgress) {
      const zip = new JSZip()
      let i = 0
      for await (let f of fileList) {
        const fileData = await this.readAsArrayBuffer(f)
        console.log(f.webkitRelativePath);
        zip.file(f.webkitRelativePath, fileData, { createFolders: true })
        i++
        onProgress && onProgress(i)
      }
      return zip.generateAsync({ type: 'blob' })
    },

    async readAsArrayBuffer(file){
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = () => {
          resolve(reader.result)
        }
        reader.onloadend = () => {
          reject('FileReader failed')
        }
      })
    },
    async handleUploadFile() {
      await this.zipFile(this.fileList, (added) => { }).then(content => {
        console.log(content);
        
        const formData = new FormData()
        formData.append("file",content)
        formData.append("choice",this.type)
        postAction("/spectrumFile/upload", formData).then(res => {
          if (res.success) {
            console.log(res);
          } else {
            this.$message.warning("This operation fails. Contact your system administrator")
          }
        })
      })
    },

    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;
}
</style>