feat: 完成新版本Load From File功能
This commit is contained in:
parent
85f4ccb995
commit
671677a68e
|
|
@ -46,8 +46,7 @@ export class FilePicker {
|
|||
*/
|
||||
static async isFileInDirectory(directoryHandle, fileHandle) {
|
||||
const relativePaths = await directoryHandle.resolve(fileHandle)
|
||||
|
||||
if (relativePaths === null) {
|
||||
if (relativePaths === null || relativePaths.length > 1) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Modal } from 'ant-design-vue'
|
||||
import { saveAs } from 'file-saver'
|
||||
import JSZip from 'jszip'
|
||||
|
||||
/**
|
||||
* 弹窗填入文件名保存文件
|
||||
|
|
@ -55,3 +56,23 @@ export const readFile = (file, fileType = 'text') => {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 压缩文件
|
||||
* @param {Array<File>} fileList
|
||||
* @param {string} zipName
|
||||
* @returns
|
||||
*/
|
||||
export const zipFile = async (fileList, zipName) => {
|
||||
const zip = new JSZip()
|
||||
const promises = []
|
||||
fileList.forEach(file => {
|
||||
promises.push(readFile(file, 'arrayBuffer'))
|
||||
})
|
||||
const result = await Promise.all(promises)
|
||||
result.forEach(res => {
|
||||
zip.file(res.fileName, res.data)
|
||||
})
|
||||
const content = await zip.generateAsync({ type: 'blob' })
|
||||
return new File([content], zipName, { type: content.type })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ export class PHDParser {
|
|||
/**
|
||||
* sample 谱的文件名
|
||||
*/
|
||||
sampleFileName = ''
|
||||
sampleFilePrefix = ''
|
||||
|
||||
/**
|
||||
* 其他文件名
|
||||
*/
|
||||
otherFileNames = []
|
||||
otherFilePrefixes = []
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
|
|
@ -53,9 +53,9 @@ export class PHDParser {
|
|||
if (this.fileType == 'B') {
|
||||
// 如果解析的是sample 文件，则获取其他三个文件
|
||||
if (this.dataType == PHD_DATA_TYPE.SAMPLEPHD) {
|
||||
const fileNames = this.getFileNames(fileNameLine)
|
||||
this.sampleFileName = fileNames.splice(0, 1)[0]
|
||||
this.otherFileNames = fileNames
|
||||
const filePrefixes = this.getFilePrefixes(fileNameLine)
|
||||
this.sampleFilePrefix = filePrefixes.splice(0, 1)[0]
|
||||
this.otherFilePrefixes = filePrefixes
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,16 +93,15 @@ export class PHDParser {
|
|||
* 获取全部文件名
|
||||
* @param {string} text
|
||||
*/
|
||||
getFileNames(text) {
|
||||
const unHandledfileNames = this.splitLineText(text)
|
||||
const fileTypes = ['S', 'D', 'G']
|
||||
const fileNames = unHandledfileNames
|
||||
.filter(fileName => fileName)
|
||||
.map((fileName, index) => {
|
||||
fileName = fileName.replace(/(\d{4})\/(\d{2})\/(\d{2})-(\d{2}):(\d{2})/, '$1$2$3_$4$5')
|
||||
return `${fileName}_${fileTypes[index]}_${this.qualify}`
|
||||
getFilePrefixes(text) {
|
||||
const unHandledfilePrefixes = this.splitLineText(text)
|
||||
const filePrefixes = unHandledfilePrefixes
|
||||
.filter(filePrefix => filePrefix)
|
||||
.map(filePrefix => {
|
||||
filePrefix = filePrefix.replace(/(\d{4})\/(\d{2})\/(\d{2})-(\d{2}):(\d{2})/, '$1$2$3_$4$5')
|
||||
return filePrefix + '_'
|
||||
})
|
||||
return fileNames
|
||||
return filePrefixes
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,54 +10,55 @@
|
|||
bordered
|
||||
:scroll="{ y: 450 }"
|
||||
>
|
||||
<template slot="sampleData" slot-scope="text, record">
|
||||
<template slot="sampleData" slot-scope="text, record, index">
|
||||
<div
|
||||
class="file-name file-ellipsis"
|
||||
:title="text && text.fileName"
|
||||
@dblclick="useFilePicker('sampleFileName', record)"
|
||||
@dblclick="useFilePicker('sampleFileName', record, index)"
|
||||
>
|
||||
{{ text && text.fileName }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="gasBkData" slot-scope="text, record">
|
||||
<template slot="gasBkData" slot-scope="text, record, index">
|
||||
<div
|
||||
:class="['file-ellipsis', !record.gasFileName ? 'file-name-color' : '']"
|
||||
:class="['file-ellipsis', text && text.file ? '' : 'file-name-color']"
|
||||
:title="text && text.fileName"
|
||||
@dblclick="useFilePicker('gasFileName', record)"
|
||||
@dblclick="useFilePicker('gasFileName', record, index)"
|
||||
>
|
||||
{{ text && text.fileName }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="detBkData" slot-scope="text, record">
|
||||
<template slot="detBkData" slot-scope="text, record, index">
|
||||
<div
|
||||
:class="['file-ellipsis', !record.detFileName ? 'file-name-color' : '']"
|
||||
:class="['file-ellipsis', text && text.file ? '' : 'file-name-color']"
|
||||
:title="text && text.fileName"
|
||||
@dblclick="useFilePicker('detFileName', record)"
|
||||
@dblclick="useFilePicker('detFileName', record, index)"
|
||||
>
|
||||
{{ text && text.fileName }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="qcData" slot-scope="text, record">
|
||||
<template slot="qcData" slot-scope="text, record, index">
|
||||
<div
|
||||
:class="['file-ellipsis', !record.qcFileName ? 'file-name-color' : '']"
|
||||
:class="['file-ellipsis', text && text.file ? '' : 'file-name-color']"
|
||||
:title="text && text.fileName"
|
||||
@dblclick="useFilePicker('qcFileName', record)"
|
||||
@dblclick="useFilePicker('qcFileName', record, index)"
|
||||
>
|
||||
{{ text && text.fileName }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="status" slot-scope="text, record">
|
||||
<template v-if="record.sampleFileName">
|
||||
<span
|
||||
:class="[
|
||||
record.sampleFileName
|
||||
? record.fileType == 'B' && !(record.gasFileName && record.detFileName)
|
||||
class="status"
|
||||
:class="
|
||||
record.fileType == 'B' &&
|
||||
!(record.gasFileName && record.gasFileName.file && record.detFileName && record.detFileName.file)
|
||||
? 'status_false'
|
||||
: 'status_true'
|
||||
: '',
|
||||
'status',
|
||||
]"
|
||||
"
|
||||
></span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 不支持 File System Access 的情况 -->
|
||||
<a-table
|
||||
|
|
@ -121,6 +122,7 @@
|
|||
<template slot="custom-footer">
|
||||
<a-space>
|
||||
<a-upload
|
||||
v-if="!canUseFilePicker"
|
||||
accept=".PHD,.phd"
|
||||
:custom-request="handleUpload"
|
||||
:multiple="true"
|
||||
|
|
@ -130,7 +132,7 @@
|
|||
<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 :loading="isUploadingZip" type="primary" @click="handleLoad">Load</a-button>
|
||||
<a-button type="primary" @click="handleCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
|
@ -200,10 +202,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import JSZip from 'jszip'
|
||||
import { getAction, postAction } from '../../../../api/manage'
|
||||
import { FilePicker } from '@/utils/FilePicker'
|
||||
import { readFile } from '@/utils/file'
|
||||
import { readFile, zipFile } from '@/utils/file'
|
||||
import { PHDParser, PHD_DATA_TYPE } from '@/utils/phdHelper'
|
||||
import ModalMixin from '@/mixins/ModalMixin'
|
||||
|
||||
|
|
@ -289,6 +290,7 @@ export default {
|
|||
columns_file,
|
||||
loading_file: false,
|
||||
loading_list: false,
|
||||
isUploadingZip: false,
|
||||
list: [],
|
||||
ipagination: {
|
||||
current: 1,
|
||||
|
|
@ -360,29 +362,30 @@ export default {
|
|||
},
|
||||
|
||||
// 用新的文件操作接口
|
||||
async useFilePicker(column, record) {
|
||||
async useFilePicker(column, record, rowIndex) {
|
||||
// 如果没有选择sampleFile，则不允许选其他的
|
||||
if (column !== 'sampleFileName' && (!record.sampleFileName || record.fileType !== 'B')) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.directoryHanlder) {
|
||||
this.chooseFile(column, record)
|
||||
this.chooseFile(column, record, rowIndex)
|
||||
} else {
|
||||
try {
|
||||
this.directoryHanlder = await FilePicker.chooseDirectory()
|
||||
this.chooseFile(column, record)
|
||||
this.chooseFile(column, record, rowIndex)
|
||||
} catch {}
|
||||
}
|
||||
},
|
||||
|
||||
async chooseFile(column, record) {
|
||||
async chooseFile(column, record, rowIndex) {
|
||||
try {
|
||||
const [fileHandle] = await FilePicker.chooseFile(false, [{ accept: { 'text/phd': ['.phd'] } }])
|
||||
try {
|
||||
const isFileInDirectory = await FilePicker.isFileInDirectory(this.directoryHanlder, fileHandle)
|
||||
if (!isFileInDirectory) {
|
||||
this.$message.warn('File and Directory Not in Same')
|
||||
this.directoryHanlder = undefined
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -400,10 +403,18 @@ export default {
|
|||
|
||||
// 如果是sample
|
||||
if (column == 'sampleFileName') {
|
||||
const { sampleFileName, otherFileNames, liveTime } = phdParser
|
||||
// 看看之前有没有选中过该文件，非同一行，则只能选择文件名不同的
|
||||
const findIndex = this.list.findIndex(
|
||||
(item) => item.sampleFileName && item.sampleFileName.file && item.sampleFileName.file.name == file.name
|
||||
)
|
||||
if (-1 !== findIndex && findIndex !== rowIndex) {
|
||||
return
|
||||
}
|
||||
|
||||
const { sampleFilePrefix, otherFilePrefixes, qualify, liveTime } = phdParser
|
||||
record.sampleFileName = {
|
||||
file,
|
||||
fileName: `${sampleFileName}_${liveTime}.PHD`,
|
||||
fileName: `${sampleFilePrefix}S_${qualify}_${liveTime}.PHD`,
|
||||
}
|
||||
|
||||
const iter = await this.directoryHanlder.values()
|
||||
|
|
@ -418,11 +429,13 @@ export default {
|
|||
}
|
||||
|
||||
const nameKeys = ['detFileName', 'gasFileName']
|
||||
const fileTypes = ['D', 'G']
|
||||
|
||||
otherFileNames.forEach((otherFileName, index) => {
|
||||
otherFilePrefixes.forEach((otherFilePrefix, index) => {
|
||||
const fileType = fileTypes[index]
|
||||
// 在所有文件中查找 名字含有 从sample文件解析出的文件名 的文件
|
||||
const findFile = fileList.find((file) => {
|
||||
return file.name.includes(otherFileName)
|
||||
return file.name.includes(`${otherFilePrefix}${fileType}_${qualify}`)
|
||||
})
|
||||
|
||||
if (findFile) {
|
||||
|
|
@ -431,16 +444,21 @@ export default {
|
|||
fileName: findFile.name,
|
||||
}
|
||||
} else {
|
||||
record[columns[index]] = undefined
|
||||
record[nameKeys[index]] = {
|
||||
file: undefined,
|
||||
fileName: `${otherFilePrefix}${fileType}.PHD`,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 查找 QC 文件
|
||||
let qcFileInfo = undefined
|
||||
let qcFileInfo = {
|
||||
file: undefined,
|
||||
fileName: `${sampleFilePrefix}Q.PHD`,
|
||||
}
|
||||
const qcFileList = fileList.filter((file) => file.name.includes('_Q_'))
|
||||
const compareFileName = sampleFileName.slice(0, 23)
|
||||
for (const qcFile of qcFileList) {
|
||||
if (qcFile.name.slice(0, 23) <= compareFileName) {
|
||||
if (qcFile.name.slice(0, 23) <= sampleFilePrefix) {
|
||||
qcFileInfo = {
|
||||
file: qcFile,
|
||||
fileName: qcFile.name,
|
||||
|
|
@ -466,7 +484,7 @@ export default {
|
|||
|
||||
/**
|
||||
* 判断文件和列是否匹配
|
||||
* @param {*} fileType
|
||||
* @param {*} column
|
||||
* @param {*} dataType
|
||||
*/
|
||||
fileNameAndColumnMatch(column, dataType) {
|
||||
|
|
@ -569,28 +587,12 @@ export default {
|
|||
beforeUpload(file, fileList) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
handleUpload({ file }) {
|
||||
async handleUpload() {
|
||||
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) => {
|
||||
const file = await zipFile(this.fileList, 'test.zip')
|
||||
const res = await this.uploadZipFile(file)
|
||||
this.uploading = false
|
||||
this.fileNum = 0
|
||||
if (res.success) {
|
||||
|
|
@ -598,31 +600,72 @@ export default {
|
|||
} 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,
|
||||
})
|
||||
}
|
||||
})
|
||||
// 上传zip文件
|
||||
async uploadZipFile(file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res = await postAction('/spectrumFile/upload', formData)
|
||||
return res
|
||||
},
|
||||
|
||||
handleReset() {
|
||||
this.list = this.getInitialList()
|
||||
},
|
||||
|
||||
handleLoad() {
|
||||
async handleLoad() {
|
||||
// 如果文件系统可用
|
||||
if (this.canUseFilePicker) {
|
||||
const propNames = ['sampleFileName', 'gasFileName', 'detFileName', 'qcFileName']
|
||||
const files = []
|
||||
for (const item of this.list) {
|
||||
propNames.forEach((propName) => {
|
||||
const value = item[propName]
|
||||
if (value && value.file) {
|
||||
files.push(value.file)
|
||||
}
|
||||
})
|
||||
}
|
||||
if(!files.length) {
|
||||
this.$message.warn('File is Empty ')
|
||||
return
|
||||
}
|
||||
const zipedFiles = await zipFile(files, 'test.zip')
|
||||
this.isUploadingZip = true
|
||||
try {
|
||||
const { success, message } = await this.uploadZipFile(zipedFiles)
|
||||
if (success) {
|
||||
try {
|
||||
const { success, result, message } = await getAction('/spectrumAnalysis/getFilesBySampleFile', {
|
||||
fileName: this.list
|
||||
.filter((item) => item.sampleFileName)
|
||||
.map((item) => item.sampleFileName.file.name)
|
||||
.join(','),
|
||||
})
|
||||
if (success) {
|
||||
this.visible = false
|
||||
this.$emit('loadFormFile', result)
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.isUploadingZip = false
|
||||
}
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.isUploadingZip = false
|
||||
}
|
||||
} else {
|
||||
this.visible = false
|
||||
this.$emit('loadFormFile', this.list)
|
||||
}
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user