完成form file 弹窗选择文件并保存回显的功能

This commit is contained in:
renpy 2023-09-06 16:40:15 +08:00
parent c0139480f5
commit ec6cb33835

View File

@ -1,29 +1,41 @@
<template> <template>
<div> <div>
<custom-modal v-model="visible" :width="1200" title="Load Data From File"> <custom-modal v-model="visible" :width="1200" title="Load Data From File">
<a-table :data-source="list" :columns="columns" :pagination="false" bordered> <a-table :data-source="list" :columns="columns" :loading="loading_list" :pagination="false" bordered>
<template slot="sampleData" slot-scope="text, record"> <template slot="sampleData" slot-scope="text">
<phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name"> <div class="file-name" :title="text" @click="handleFileSelect">
{{ text && text.name }} {{ text }}
</phd-select> </div>
<!-- <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name">
{{ text }}
</phd-select> -->
</template> </template>
<template slot="gasBkData" slot-scope="text, record"> <template slot="gasBkData" slot-scope="text">
<phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" @select="handleFileSelect" :title="text && text.name"> <div class="file-name" :title="text" @click="handleFileSelect">
{{ text }}
</div>
<!-- <phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" @select="handleFileSelect" :title="text && text.name">
{{ text && text.name }} {{ text && text.name }}
</phd-select> </phd-select> -->
</template> </template>
<template slot="detBkData" slot-scope="text, record"> <template slot="detBkData" slot-scope="text">
<phd-select type="file" @change="handleFileChange(record, 'detBkData', $event)" @select="handleFileSelect" :title="text && text.name"> <div class="file-name" :title="text" @click="handleFileSelect">
{{ text }}
</div>
<!-- <phd-select type="file" @change="handleFileChange(record, 'detBkData', $event)" @select="handleFileSelect" :title="text && text.name">
{{ text && text.name }} {{ text && text.name }}
</phd-select> </phd-select> -->
</template> </template>
<template slot="qcData" slot-scope="text, record"> <template slot="qcData" slot-scope="text">
<phd-select type="file" @change="handleFileChange(record, 'qcData', $event)" @select="handleFileSelect" :title="text && text.name"> <div class="file-name" :title="text" @click="handleFileSelect">
{{ text }}
</div>
<!-- <phd-select type="file" @change="handleFileChange(record, 'qcData', $event)" @select="handleFileSelect" :title="text && text.name">
{{ text && text.name }} {{ text && text.name }}
</phd-select> </phd-select> -->
</template> </template>
<template slot="status" slot-scope="text"> <template slot="status" slot-scope="text,record">
<span class="status"></span> <span :class="[record.detFileStatus&&record.gasFileStatus&&record.qcFileStatus?'status_true':'status_false','status']"></span>
</template> </template>
</a-table> </a-table>
@ -68,7 +80,7 @@
</div> </div>
<template slot="footer"> <template slot="footer">
<a-space class="operators" :size="20"> <a-space class="operators" :size="20">
<a-button type="success">Save</a-button> <a-button type="success" @click="saveFileName">Save</a-button>
<a-button type="warn" @click="cancelFileModale">Cancel</a-button> <a-button type="warn" @click="cancelFileModale">Cancel</a-button>
</a-space> </a-space>
</template> </template>
@ -84,7 +96,7 @@ import { getAction,postAction } from '../../../../api/manage'
const columns = [ const columns = [
{ {
title: 'SampleData', title: 'SampleData',
dataIndex: 'sampleData', dataIndex: 'sampleFileName',
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
@ -93,7 +105,7 @@ const columns = [
}, },
{ {
title: 'GasBkData', title: 'GasBkData',
dataIndex: 'gasBkData', dataIndex: 'gasFileName',
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
@ -102,7 +114,7 @@ const columns = [
}, },
{ {
title: 'DetBkData', title: 'DetBkData',
dataIndex: 'detBkData', dataIndex: 'detFileName',
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
@ -111,7 +123,7 @@ const columns = [
}, },
{ {
title: 'QCData', title: 'QCData',
dataIndex: 'qcData', dataIndex: 'qcFileName',
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
@ -157,6 +169,7 @@ export default {
list_file: [], list_file: [],
columns_file, columns_file,
loading_file: false, loading_file: false,
loading_list: false,
list: this.getInitialList(), list: this.getInitialList(),
ipagination:{ ipagination:{
current: 1, current: 1,
@ -171,6 +184,7 @@ export default {
total: 0 total: 0
}, },
selectedRowKeys: [], selectedRowKeys: [],
selectedFiles: [],
fileList: [], fileList: [],
fileNum: 0, fileNum: 0,
uploading: false uploading: false
@ -180,10 +194,10 @@ export default {
// 10*4 // 10*4
getInitialList() { getInitialList() {
return new Array(10).fill(0).map(() => ({ return new Array(10).fill(0).map(() => ({
sampleData: undefined, sampleFileName: undefined,
gasBkData: undefined, gasFileName: undefined,
detBkData: undefined, detFileName: undefined,
qcData: undefined qcFileName: undefined
})) }))
}, },
@ -222,9 +236,26 @@ export default {
pageSize: size pageSize: size
}) })
}, },
onSelectChange(selectedRowKeys) { onSelectChange(selectedRowKeys, selectedRows) {
console.log('selectedRowKeys changed: ', selectedRowKeys); this.selectedRowKeys = selectedRowKeys
this.selectedRowKeys = selectedRowKeys; this.selectedFiles = selectedRows.map(item => {
return item.name
});
},
saveFileName() {
this.visible_file = false
this.loading_list = true
let params = {
fileName: this.selectedFiles.join(",")
}
getAction("/spectrumAnalysis/getFilesBySampleFile", params).then(res => {
this.loading_list = false
if (res.success) {
this.list =res.result.length>0? res.result:this.getInitialList()
} else {
this.$message.warning("This operation fails. Contact your system administrator")
}
})
}, },
cancelFileModale() { cancelFileModale() {
this.visible_file = false this.visible_file = false
@ -315,6 +346,12 @@ export default {
background-color: #00e170; background-color: #00e170;
} }
.status_true{
background-color: #00e170;
}
.status_false{
background-color: red;
}
::v-deep { ::v-deep {
@tableBorderColor: #000; @tableBorderColor: #000;
@ -370,4 +407,11 @@ export default {
width: 92px; width: 92px;
} }
} }
.file-name {
height: 42px;
line-height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style> </style>