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" 
        :loading="loading_list" 
        :pagination="false" 
        bordered
        :scroll="{ y: 450 }"
      >
        <template slot="sampleData" slot-scope="text, record">
          <div class="file-name file-ellipsis" :title="text" @dblclick="handleFileSelect('_S_',record)">
            {{ text }}
          </div>
          <!-- <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name">
            {{ text }}
          </phd-select> -->
        </template>
        <template slot="gasBkData" slot-scope="text, record">
          <div :class="['file-ellipsis',!record.gasFileStatus?'file-name-color':'']" :title="text" @dblclick="handleFileSelect('_G_',record)">
            {{ text }}
          </div>
        </template>
        <template slot="detBkData" slot-scope="text, record">
          <div :class="['file-ellipsis',!record.detFileStatus?'file-name-color':'']" :title="text" @dblclick="handleFileSelect('_D_',record)">
            {{ text }}
          </div>
        </template>
        <template slot="qcData" slot-scope="text, record">
          <div :class="['file-ellipsis',!record.qcFileStatus?'file-name-color':'']" :title="text" @dblclick="handleFileSelect('_Q_',record)">
            {{ text }}
          </div>
        </template>
        <template slot="status" slot-scope="text,record">
          <span :class="[record.detFileStatus&&record.gasFileStatus&&record.qcFileStatus  || record.sampleFileName&&!record.gasFileName&&!record.detFileName&&!record.qcFileName?'status_true':'status_false','status']"></span>
        </template>
      </a-table>
  
      <!-- 底部按钮 -->
      <template slot="custom-footer">
        <a-space>
          <a-upload accept=".PHD,.phd" :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">
      <a-spin :spinning="loading_file">
        <div style="position: relative;padding-bottom: 40px;height: 460px;overflow: hidden;">
          <a-row type="flex" style="margin-bottom: 15px;">
            <a-col flex="400px">
              <a-input placeholder="search..." v-model="searchName" />
            </a-col>
            <a-col flex="108px">
              <a-button class="search-btn" type="primary" @click="onSearchFileName">
                <img src="@/assets/images/global/search.png" alt="" />
                Search
              </a-button>
            </a-col>
          </a-row>
          <a-table 
            v-if="tableType=='multiple'"
            :data-source="list_file" 
            :columns="columns_file"
            :pagination="false"
            :customRow="customRow"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :scroll="{ y: 330 }"
          >
          </a-table>
          <custom-table
            v-if="tableType=='single'"
            rowKey="id"
            size="middle"
            :columns="columns_file"
            :list="list_file"
            :pagination="false"
            :selectedRowKeys.sync="selectedRowKeys_edit"
            :selectionRows.sync="selectionRows_edit"
          >
          </custom-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>
      </a-spin>
      <template slot="footer">
        <a-space class="operators" :size="20">
          <a-button type="success" @click="saveFileName">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: 'sampleFileName',
    width: '23%',
    ellipsis: true,
    scopedSlots: {
      customRender: 'sampleData'
    }
  },
  {
    title: 'GasBkData',
    dataIndex: 'gasFileName',
    width: '23%',
    ellipsis: true,
    scopedSlots: {
      customRender: 'gasBkData'
    }
  },
  {
    title: 'DetBkData',
    dataIndex: 'detFileName',
    width: '23%',
    ellipsis: true,
    scopedSlots: {
      customRender: 'detBkData'
    }
  },
  {
    title: 'QCData',
    dataIndex: 'qcFileName',
    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,
      loading_list: 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: [],
      selectedFiles: [],
      fileList: [],
      fileNum: 0,
      uploading: false,
      currRowData: {},
      currFileType: "_S_",
      selectedRowKeys_edit: [],
      selectionRows_edit: [],
      tableType: "multiple",
      searchName: ""
    }
  },
  methods: {
    // 初始化为10*4的表格
    getInitialList() {
      return new Array(10).fill(0).map(() => ({
        sampleFileName: undefined,
        gasFileName: undefined,
        detFileName: undefined,
        qcFileName: undefined
      }))
    },
    customRow(record, index) {
      const that = this;
      return {
        on: {
          click: () => {
            that.selectedRowKeys.push(record.id)
            this.selectedFiles.push(record.name)
          }
        }
      }
    },

    handleFileChange(record, key, fileInfo) {
      record[key] = fileInfo
    },
    handleFileSelect(str, record) {
      this.currRowData = record
      this.currFileType = str
      this.selectedRowKeys = []
      this.selectedFiles = []
      this.visible_file = true
      this.tableType = str==="_S_"?"multiple":"single"
      this.getSpectrumFile({pageNo:1,pageSize:10})
    },
    onSearchFileName() {
      this.getSpectrumFile({pageNo:1,pageSize:10})
    },
    getSpectrumFile(params) {
      this.loading_file = true
      let params_arg = {...params,name:`${this.searchName?this.searchName+',':''}${this.currFileType}`}
      getAction("/spectrumFile/get", params_arg).then(res => {
        this.loading_file = false
        if (res.success) {
          res.result.records.forEach((item,index) => {
            item.id = index
          })
          this.ipagination.total = res.result.total
          this.ipagination.current = res.result.current
          this.ipagination.pageSize = res.result.size
          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, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedFiles = selectedRows.map(item => {
        return item.name
      });
    },
    saveFileName() {
      this.visible_file = false
      if (this.tableType ==="multiple" ) {
        this.loading_list = true
        let params = {
          fileName: this.selectedFiles.join(",")
        }
        getAction("/spectrumAnalysis/getFilesBySampleFile", params).then(res => {
          this.loading_list = false
          if (res.success) {
            let idx = res.result.length
            let staIdx = this.list.filter(item => Object.keys(item).length>4).length
            if (staIdx<10) {
              this.list.splice(staIdx,idx,...res.result)
            } else {
              this.list.push(...res.result)
            }
          } else {
            this.$message.warning("This operation fails. Contact your system administrator")
          }
        })
      } else {
        let currFileName = this.selectionRows_edit[0].name
        if (currFileName.includes(this.currFileType)) {
          this.currRowData.gasFileName = currFileName
        }
      }
    },
    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() {
      this.visible = false
      this.$emit('loadFormFile', 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;
}
.status_true{
  background-color: #00e170;
}
.status_false{
  background-color: red;
}
::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;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
  .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;
  }
}
.file-name {
  height: 42px;
  line-height: 42px;
}
.file-name-color{
  color: red;
}
.file-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/.ant-table-tbody .ant-table-row td{
  cursor: pointer;
}
.ant-input{
  width: 380px;
}
/deep/.ant-table-bordered.ant-table-fixed-header .ant-table-header > table{
  border: none;
}
</style>