xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

处理 file list 弹窗，单击行取消的功能

Browse Source 
file list 当前页勾选后，切换其他分页，清空之前选中项
This commit is contained in:
任珮宇 2023-09-18 15:04:57 +08:00
parent 3bfaa90408
commit be15cf582e
1 changed files with 137 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
View File

@ -1,16 +1,16 @@
<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 <a-table
:data-source="list" :data-source="list"
:columns="columns" :columns="columns"
:loading="loading_list" :loading="loading_list"
:pagination="false" :pagination="false"
bordered bordered
:scroll="{ y: 450 }" :scroll="{ y: 450 }"
> >
<template slot="sampleData" slot-scope="text, record"> <template slot="sampleData" slot-scope="text, record">
<div class="file-name file-ellipsis" :title="text" @dblclick="handleFileSelect('_S_',record)"> <div class="file-name file-ellipsis" :title="text" @dblclick="handleFileSelect('_S_', record)">
{{ text }} {{ text }}
</div> </div>
<!-- <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name"> <!-- <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name">
@ -18,32 +18,56 @@
</phd-select> --> </phd-select> -->
</template> </template>
<template slot="gasBkData" slot-scope="text, record"> <template slot="gasBkData" slot-scope="text, record">
<div :class="['file-ellipsis',!record.gasFileStatus?'file-name-color':'']" :title="text" @dblclick="handleFileSelect('_G_',record)"> <div
:class="['file-ellipsis', !record.gasFileStatus ? 'file-name-color' : '']"
:title="text"
@dblclick="handleFileSelect('_G_', record)"
>
{{ text }} {{ text }}
</div> </div>
</template> </template>
<template slot="detBkData" slot-scope="text, record"> <template slot="detBkData" slot-scope="text, record">
<div :class="['file-ellipsis',!record.detFileStatus?'file-name-color':'']" :title="text" @dblclick="handleFileSelect('_D_',record)"> <div
:class="['file-ellipsis', !record.detFileStatus ? 'file-name-color' : '']"
:title="text"
@dblclick="handleFileSelect('_D_', record)"
>
{{ text }} {{ text }}
</div> </div>
</template> </template>
<template slot="qcData" slot-scope="text, record"> <template slot="qcData" slot-scope="text, record">
<div :class="['file-ellipsis',!record.qcFileStatus?'file-name-color':'']" :title="text" @dblclick="handleFileSelect('_Q_',record)"> <div
:class="['file-ellipsis', !record.qcFileStatus ? 'file-name-color' : '']"
:title="text"
@dblclick="handleFileSelect('_Q_', record)"
>
{{ text }} {{ text }}
</div> </div>
</template> </template>
<template slot="status" slot-scope="text,record"> <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> <span
:class="[
(record.detFileStatus && record.gasFileStatus && record.qcFileStatus) ||
(record.sampleFileName && !record.gasFileName && !record.detFileName && !record.qcFileName)
? 'status_true'
: 'status_false',
'status',
]"
></span>
</template> </template>
</a-table> </a-table>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<template slot="custom-footer"> <template slot="custom-footer">
<a-space> <a-space>
<a-upload accept=".PHD,.phd" :custom-request="handleUpload" :multiple="true" :show-upload-list="false" :before-upload="beforeUpload" > <a-upload
<a-button type="primary" :loading="uploading"> accept=".PHD,.phd"
Upload :custom-request="handleUpload"
</a-button> :multiple="true"
:show-upload-list="false"
:before-upload="beforeUpload"
>
<a-button type="primary" :loading="uploading"> Upload </a-button>
</a-upload> </a-upload>
<a-button type="primary" @click="handleReset">Reset</a-button> <a-button type="primary" @click="handleReset">Reset</a-button>
<a-button type="primary" @click="handleLoad">Load</a-button> <a-button type="primary" @click="handleLoad">Load</a-button>
@ -54,8 +78,8 @@
</custom-modal> </custom-modal>
<a-modal v-model="visible_file" :width="1200" title="File List" @cancel="cancelFileModale"> <a-modal v-model="visible_file" :width="1200" title="File List" @cancel="cancelFileModale">
<a-spin :spinning="loading_file"> <a-spin :spinning="loading_file">
<div style="position: relative;padding-bottom: 40px;height: 460px;overflow: hidden;"> <div style="position: relative; padding-bottom: 40px; height: 460px; overflow: hidden">
<a-row type="flex" style="margin-bottom: 15px;"> <a-row type="flex" style="margin-bottom: 15px">
<a-col flex="400px"> <a-col flex="400px">
<a-input placeholder="search..." v-model="searchName" /> <a-input placeholder="search..." v-model="searchName" />
</a-col> </a-col>
@ -66,9 +90,9 @@
</a-button> </a-button>
</a-col> </a-col>
</a-row> </a-row>
<a-table <a-table
v-if="tableType=='multiple'" v-if="tableType == 'multiple'"
:data-source="list_file" :data-source="list_file"
:columns="columns_file" :columns="columns_file"
:pagination="false" :pagination="false"
:customRow="customRow" :customRow="customRow"
@ -77,7 +101,7 @@
> >
</a-table> </a-table>
<custom-table <custom-table
v-if="tableType=='single'" v-if="tableType == 'single'"
rowKey="id" rowKey="id"
size="middle" size="middle"
:columns="columns_file" :columns="columns_file"
@ -87,16 +111,19 @@
:selectionRows.sync="selectionRows_edit" :selectionRows.sync="selectionRows_edit"
> >
</custom-table> </custom-table>
<a-pagination <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
:page-size-options="ipagination.pageSizeOptions" :page-size-options="ipagination.pageSizeOptions"
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
show-less-items (total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
@ -105,7 +132,7 @@
<template slot="footer"> <template slot="footer">
<a-space class="operators" :size="20"> <a-space class="operators" :size="20">
<a-button type="success" @click="saveFileName">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>
</a-modal> </a-modal>
@ -116,7 +143,7 @@
import JSZip from 'jszip' import JSZip from 'jszip'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import PhdSelect from '../PHDSelect.vue' import PhdSelect from '../PHDSelect.vue'
import { getAction,postAction } from '../../../../api/manage' import { getAction, postAction } from '../../../../api/manage'
const columns = [ const columns = [
{ {
title: 'SampleData', title: 'SampleData',
@ -124,8 +151,8 @@ const columns = [
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
customRender: 'sampleData' customRender: 'sampleData',
} },
}, },
{ {
title: 'GasBkData', title: 'GasBkData',
@ -133,8 +160,8 @@ const columns = [
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
customRender: 'gasBkData' customRender: 'gasBkData',
} },
}, },
{ {
title: 'DetBkData', title: 'DetBkData',
@ -142,8 +169,8 @@ const columns = [
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
customRender: 'detBkData' customRender: 'detBkData',
} },
}, },
{ {
title: 'QCData', title: 'QCData',
@ -151,16 +178,16 @@ const columns = [
width: '23%', width: '23%',
ellipsis: true, ellipsis: true,
scopedSlots: { scopedSlots: {
customRender: 'qcData' customRender: 'qcData',
} },
}, },
{ {
title: 'Status', title: 'Status',
align: 'center', align: 'center',
scopedSlots: { scopedSlots: {
customRender: 'status' customRender: 'status',
} },
} },
] ]
const columns_file = [ const columns_file = [
{ {
@ -168,23 +195,25 @@ const columns_file = [
dataIndex: 'name', dataIndex: 'name',
width: '45%', width: '45%',
align: 'left', align: 'left',
ellipsis: true ellipsis: true,
},{ },
{
title: 'UpdateDate', title: 'UpdateDate',
dataIndex: 'updateDate', dataIndex: 'updateDate',
align: 'left', align: 'left',
},{ },
{
title: 'Size', title: 'Size',
dataIndex: 'size', dataIndex: 'size',
align: 'left' align: 'left',
}, },
] ]
export default { export default {
components: { PhdSelect }, components: { PhdSelect },
props: { props: {
value: { value: {
type: Boolean type: Boolean,
} },
}, },
data() { data() {
this.columns = columns this.columns = columns
@ -195,7 +224,7 @@ export default {
loading_file: false, loading_file: false,
loading_list: false, loading_list: false,
list: this.getInitialList(), list: this.getInitialList(),
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -205,7 +234,7 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
selectedRowKeys: [], selectedRowKeys: [],
selectedFiles: [], selectedFiles: [],
@ -213,11 +242,11 @@ export default {
fileNum: 0, fileNum: 0,
uploading: false, uploading: false,
currRowData: {}, currRowData: {},
currFileType: "_S_", currFileType: '_S_',
selectedRowKeys_edit: [], selectedRowKeys_edit: [],
selectionRows_edit: [], selectionRows_edit: [],
tableType: "multiple", tableType: 'multiple',
searchName: "" searchName: '',
} }
}, },
methods: { methods: {
@ -227,18 +256,25 @@ export default {
sampleFileName: undefined, sampleFileName: undefined,
gasFileName: undefined, gasFileName: undefined,
detFileName: undefined, detFileName: undefined,
qcFileName: undefined qcFileName: undefined,
})) }))
}, },
customRow(record, index) { customRow(record, index) {
const that = this; const that = this
return { return {
on: { on: {
click: () => { click: () => {
that.selectedRowKeys.push(record.id) if (that.selectedRowKeys.includes(record.id)) {
this.selectedFiles.push(record.name) const findIndex = that.selectedRowKeys.findIndex((k) => k == record.id)
} const idx = that.selectedFiles.findIndex((k) => k == record.name)
} that.selectedRowKeys.splice(findIndex, 1)
that.selectedFiles.splice(idx, 1)
} else {
that.selectedRowKeys.push(record.id)
that.selectedFiles.push(record.name)
}
},
},
} }
}, },
@ -251,19 +287,19 @@ export default {
this.selectedRowKeys = [] this.selectedRowKeys = []
this.selectedFiles = [] this.selectedFiles = []
this.visible_file = true this.visible_file = true
this.tableType = str==="_S_"?"multiple":"single" this.tableType = str === '_S_' ? 'multiple' : 'single'
this.getSpectrumFile({pageNo:1,pageSize:10}) this.getSpectrumFile({ pageNo: 1, pageSize: 10 })
}, },
onSearchFileName() { onSearchFileName() {
this.getSpectrumFile({pageNo:1,pageSize:10}) this.getSpectrumFile({ pageNo: 1, pageSize: 10 })
}, },
getSpectrumFile(params) { getSpectrumFile(params) {
this.loading_file = true this.loading_file = true
let params_arg = {...params,name:`${this.searchName?this.searchName+',':''}${this.currFileType}`} let params_arg = { ...params, name: `${this.searchName ? this.searchName + ',' : ''}${this.currFileType}` }
getAction("/spectrumFile/get", params_arg).then(res => { getAction('/spectrumFile/get', params_arg).then((res) => {
this.loading_file = false this.loading_file = false
if (res.success) { if (res.success) {
res.result.records.forEach((item,index) => { res.result.records.forEach((item, index) => {
item.id = index item.id = index
}) })
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
@ -271,16 +307,18 @@ export default {
this.ipagination.pageSize = res.result.size this.ipagination.pageSize = res.result.size
this.list_file = res.result.records this.list_file = res.result.records
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
handlePageChange(page, pageSize) { handlePageChange(page, pageSize) {
this.selectedRowKeys = []
this.selectedFiles = []
this.ipagination.current = page this.ipagination.current = page
this.ipagination.pageSize = pageSize this.ipagination.pageSize = pageSize
this.getSpectrumFile({ this.getSpectrumFile({
pageNo: page, pageNo: page,
pageSize: pageSize pageSize: pageSize,
}) })
}, },
handleSizeChange(current, size) { handleSizeChange(current, size) {
@ -288,34 +326,34 @@ export default {
this.ipagination.pageSize = size this.ipagination.pageSize = size
this.getSpectrumFile({ this.getSpectrumFile({
pageNo: current, pageNo: current,
pageSize: size pageSize: size,
}) })
}, },
onSelectChange(selectedRowKeys, selectedRows) { onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys this.selectedRowKeys = selectedRowKeys
this.selectedFiles = selectedRows.map(item => { this.selectedFiles = selectedRows.map((item) => {
return item.name return item.name
}); })
}, },
saveFileName() { saveFileName() {
this.visible_file = false this.visible_file = false
if (this.tableType ==="multiple" ) { if (this.tableType === 'multiple') {
this.loading_list = true this.loading_list = true
let params = { let params = {
fileName: this.selectedFiles.join(",") fileName: this.selectedFiles.join(','),
} }
getAction("/spectrumAnalysis/getFilesBySampleFile", params).then(res => { getAction('/spectrumAnalysis/getFilesBySampleFile', params).then((res) => {
this.loading_list = false this.loading_list = false
if (res.success) { if (res.success) {
let idx = res.result.length let idx = res.result.length
let staIdx = this.list.filter(item => Object.keys(item).length>4).length let staIdx = this.list.filter((item) => Object.keys(item).length > 4).length
if (staIdx<10) { if (staIdx < 10) {
this.list.splice(staIdx,idx,...res.result) this.list.splice(staIdx, idx, ...res.result)
} else { } else {
this.list.push(...res.result) this.list.push(...res.result)
} }
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
} else { } else {
@ -327,9 +365,9 @@ export default {
}, },
cancelFileModale() { cancelFileModale() {
this.visible_file = false this.visible_file = false
this.list_file=[] this.list_file = []
}, },
beforeUpload(file,fileList) { beforeUpload(file, fileList) {
this.fileList = fileList this.fileList = fileList
}, },
handleUpload({ file }) { handleUpload({ file }) {
@ -341,19 +379,19 @@ export default {
}, },
async zipFile(fileList, onProgress) { async zipFile(fileList, onProgress) {
const zip = new JSZip() const zip = new JSZip()
const promises=[] const promises = []
fileList.forEach(file => { fileList.forEach((file) => {
promises.push(this.readAsArrayBuffer(file)) promises.push(this.readAsArrayBuffer(file))
}) })
Promise.all(promises).then(result => { Promise.all(promises).then((result) => {
result.forEach(res => { result.forEach((res) => {
zip.file(res.fileName, res.data) zip.file(res.fileName, res.data)
}) })
zip.generateAsync({ type: 'blob' }).then(content => { zip.generateAsync({ type: 'blob' }).then((content) => {
let file = new File([content], 'test.zip', { type: content.type }) let file = new File([content], 'test.zip', { type: content.type })
const formData = new FormData() const formData = new FormData()
formData.append("file",file) formData.append('file', file)
postAction("/spectrumFile/upload", formData).then(res => { postAction('/spectrumFile/upload', formData).then((res) => {
this.uploading = false this.uploading = false
this.fileNum = 0 this.fileNum = 0
if (res.success) { if (res.success) {
@ -366,14 +404,14 @@ export default {
}) })
}, },
async readAsArrayBuffer(file){ async readAsArrayBuffer(file) {
return new Promise((resolve) => { return new Promise((resolve) => {
let reader = new FileReader() let reader = new FileReader()
reader.readAsArrayBuffer(file) reader.readAsArrayBuffer(file)
reader.onload = (e) => { reader.onload = (e) => {
resolve({ resolve({
fileName: file.name, fileName: file.name,
data: e.target.result data: e.target.result,
}) })
} }
}) })
@ -390,7 +428,7 @@ export default {
handleCancel() { handleCancel() {
this.visible = false this.visible = false
} },
}, },
computed: { computed: {
visible: { visible: {
@ -399,9 +437,9 @@ export default {
}, },
set(val) { set(val) {
this.$emit('input', val) this.$emit('input', val)
} },
} },
} },
} }
</script> </script>
@ -415,10 +453,10 @@ export default {
background-color: #00e170; background-color: #00e170;
} }
.status_true{ .status_true {
background-color: #00e170; background-color: #00e170;
} }
.status_false{ .status_false {
background-color: red; background-color: red;
} }
::v-deep { ::v-deep {
@ -440,7 +478,7 @@ export default {
padding-top: 0 !important; padding-top: 0 !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
@ -456,11 +494,11 @@ export default {
} }
} }
} }
.ant-modal-title{ .ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
.item-label{ .item-label {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
font-family: ArialMT; font-family: ArialMT;
@ -480,21 +518,21 @@ export default {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
} }
.file-name-color{ .file-name-color {
color: red; color: red;
} }
.file-ellipsis{ .file-ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/deep/.ant-table-tbody .ant-table-row td{ /deep/.ant-table-tbody .ant-table-row td {
cursor: pointer; cursor: pointer;
} }
.ant-input{ .ant-input {
width: 380px; width: 380px;
} }
/deep/.ant-table-bordered.ant-table-fixed-header .ant-table-header > table{ /deep/.ant-table-bordered.ant-table-fixed-header .ant-table-header > table {
border: none; border: none;
} }
</style> </style>