501 lines
14 KiB
Vue
501 lines
14 KiB
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>
|