完成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>
<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>
<a-table :data-source="list" :columns="columns" :loading="loading_list" :pagination="false" bordered>
<template slot="sampleData" slot-scope="text">
<div class="file-name" :title="text" @click="handleFileSelect">
{{ 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">
<phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" @select="handleFileSelect" :title="text && text.name">
<template slot="gasBkData" slot-scope="text">
<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 }}
</phd-select>
</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">
<template slot="detBkData" slot-scope="text">
<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 }}
</phd-select>
</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">
<template slot="qcData" slot-scope="text">
<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 }}
</phd-select>
</phd-select> -->
</template>
<template slot="status" slot-scope="text">
<span class="status"></span>
<template slot="status" slot-scope="text,record">
<span :class="[record.detFileStatus&&record.gasFileStatus&&record.qcFileStatus?'status_true':'status_false','status']"></span>
</template>
</a-table>
@ -68,7 +80,7 @@
</div>
<template slot="footer">
<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-space>
</template>
@ -84,7 +96,7 @@ import { getAction,postAction } from '../../../../api/manage'
const columns = [
{
title: 'SampleData',
dataIndex: 'sampleData',
dataIndex: 'sampleFileName',
width: '23%',
ellipsis: true,
scopedSlots: {
@ -93,7 +105,7 @@ const columns = [
},
{
title: 'GasBkData',
dataIndex: 'gasBkData',
dataIndex: 'gasFileName',
width: '23%',
ellipsis: true,
scopedSlots: {
@ -102,7 +114,7 @@ const columns = [
},
{
title: 'DetBkData',
dataIndex: 'detBkData',
dataIndex: 'detFileName',
width: '23%',
ellipsis: true,
scopedSlots: {
@ -111,7 +123,7 @@ const columns = [
},
{
title: 'QCData',
dataIndex: 'qcData',
dataIndex: 'qcFileName',
width: '23%',
ellipsis: true,
scopedSlots: {
@ -157,6 +169,7 @@ export default {
list_file: [],
columns_file,
loading_file: false,
loading_list: false,
list: this.getInitialList(),
ipagination:{
current: 1,
@ -171,6 +184,7 @@ export default {
total: 0
},
selectedRowKeys: [],
selectedFiles: [],
fileList: [],
fileNum: 0,
uploading: false
@ -180,10 +194,10 @@ export default {
// 10*4
getInitialList() {
return new Array(10).fill(0).map(() => ({
sampleData: undefined,
gasBkData: undefined,
detBkData: undefined,
qcData: undefined
sampleFileName: undefined,
gasFileName: undefined,
detFileName: undefined,
qcFileName: undefined
}))
},
@ -222,9 +236,26 @@ export default {
pageSize: size
})
},
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
onSelectChange(selectedRowKeys, selectedRows) {
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() {
this.visible_file = false
@ -315,6 +346,12 @@ export default {
background-color: #00e170;
}
.status_true{
background-color: #00e170;
}
.status_false{
background-color: red;
}
::v-deep {
@tableBorderColor: #000;
@ -370,4 +407,11 @@ export default {
width: 92px;
}
}
.file-name {
height: 42px;
line-height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>