374 lines
9.8 KiB
Vue
374 lines
9.8 KiB
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 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">
|
||
<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;
|
||
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;
|
||
}
|
||
}
|
||
</style>
|