处理 file list 弹窗，单击行取消的功能
file list 当前页勾选后，切换其他分页，清空之前选中项
This commit is contained in:
任珮宇
parent
3bfaa90408
commit
be15cf582e
|
|
@ -1,16 +1,16 @@
|
|||
<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"
|
||||
<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)">
|
||||
<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">
|
||||
|
|
@ -18,32 +18,56 @@
|
|||
</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)">
|
||||
<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)">
|
||||
<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)">
|
||||
<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 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
|
||||
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>
|
||||
|
|
@ -54,8 +78,8 @@
|
|||
</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;">
|
||||
<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>
|
||||
|
|
@ -66,9 +90,9 @@
|
|||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-table
|
||||
v-if="tableType=='multiple'"
|
||||
:data-source="list_file"
|
||||
<a-table
|
||||
v-if="tableType == 'multiple'"
|
||||
:data-source="list_file"
|
||||
:columns="columns_file"
|
||||
:pagination="false"
|
||||
:customRow="customRow"
|
||||
|
|
@ -77,7 +101,7 @@
|
|||
>
|
||||
</a-table>
|
||||
<custom-table
|
||||
v-if="tableType=='single'"
|
||||
v-if="tableType == 'single'"
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
:columns="columns_file"
|
||||
|
|
@ -87,16 +111,19 @@
|
|||
:selectionRows.sync="selectionRows_edit"
|
||||
>
|
||||
</custom-table>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
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
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
|
|
@ -105,7 +132,7 @@
|
|||
<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-button type="warn" @click="cancelFileModale">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
|
@ -116,7 +143,7 @@
|
|||
import JSZip from 'jszip'
|
||||
import FileSaver from 'file-saver'
|
||||
import PhdSelect from '../PHDSelect.vue'
|
||||
import { getAction,postAction } from '../../../../api/manage'
|
||||
import { getAction, postAction } from '../../../../api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'SampleData',
|
||||
|
|
@ -124,8 +151,8 @@ const columns = [
|
|||
width: '23%',
|
||||
ellipsis: true,
|
||||
scopedSlots: {
|
||||
customRender: 'sampleData'
|
||||
}
|
||||
customRender: 'sampleData',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'GasBkData',
|
||||
|
|
@ -133,8 +160,8 @@ const columns = [
|
|||
width: '23%',
|
||||
ellipsis: true,
|
||||
scopedSlots: {
|
||||
customRender: 'gasBkData'
|
||||
}
|
||||
customRender: 'gasBkData',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'DetBkData',
|
||||
|
|
@ -142,8 +169,8 @@ const columns = [
|
|||
width: '23%',
|
||||
ellipsis: true,
|
||||
scopedSlots: {
|
||||
customRender: 'detBkData'
|
||||
}
|
||||
customRender: 'detBkData',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'QCData',
|
||||
|
|
@ -151,16 +178,16 @@ const columns = [
|
|||
width: '23%',
|
||||
ellipsis: true,
|
||||
scopedSlots: {
|
||||
customRender: 'qcData'
|
||||
}
|
||||
customRender: 'qcData',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
align: 'center',
|
||||
scopedSlots: {
|
||||
customRender: 'status'
|
||||
}
|
||||
}
|
||||
customRender: 'status',
|
||||
},
|
||||
},
|
||||
]
|
||||
const columns_file = [
|
||||
{
|
||||
|
|
@ -168,23 +195,25 @@ const columns_file = [
|
|||
dataIndex: 'name',
|
||||
width: '45%',
|
||||
align: 'left',
|
||||
ellipsis: true
|
||||
},{
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'UpdateDate',
|
||||
dataIndex: 'updateDate',
|
||||
align: 'left',
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'Size',
|
||||
dataIndex: 'size',
|
||||
align: 'left'
|
||||
align: 'left',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: { PhdSelect },
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
|
|
@ -195,7 +224,7 @@ export default {
|
|||
loading_file: false,
|
||||
loading_list: false,
|
||||
list: this.getInitialList(),
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -205,7 +234,7 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
selectedFiles: [],
|
||||
|
|
@ -213,11 +242,11 @@ export default {
|
|||
fileNum: 0,
|
||||
uploading: false,
|
||||
currRowData: {},
|
||||
currFileType: "_S_",
|
||||
currFileType: '_S_',
|
||||
selectedRowKeys_edit: [],
|
||||
selectionRows_edit: [],
|
||||
tableType: "multiple",
|
||||
searchName: ""
|
||||
tableType: 'multiple',
|
||||
searchName: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -227,18 +256,25 @@ export default {
|
|||
sampleFileName: undefined,
|
||||
gasFileName: undefined,
|
||||
detFileName: undefined,
|
||||
qcFileName: undefined
|
||||
qcFileName: undefined,
|
||||
}))
|
||||
},
|
||||
customRow(record, index) {
|
||||
const that = this;
|
||||
const that = this
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
that.selectedRowKeys.push(record.id)
|
||||
this.selectedFiles.push(record.name)
|
||||
}
|
||||
}
|
||||
if (that.selectedRowKeys.includes(record.id)) {
|
||||
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.selectedFiles = []
|
||||
this.visible_file = true
|
||||
this.tableType = str==="_S_"?"multiple":"single"
|
||||
this.getSpectrumFile({pageNo:1,pageSize:10})
|
||||
this.tableType = str === '_S_' ? 'multiple' : 'single'
|
||||
this.getSpectrumFile({ pageNo: 1, pageSize: 10 })
|
||||
},
|
||||
onSearchFileName() {
|
||||
this.getSpectrumFile({pageNo:1,pageSize:10})
|
||||
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 => {
|
||||
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) => {
|
||||
res.result.records.forEach((item, index) => {
|
||||
item.id = index
|
||||
})
|
||||
this.ipagination.total = res.result.total
|
||||
|
|
@ -271,16 +307,18 @@ export default {
|
|||
this.ipagination.pageSize = res.result.size
|
||||
this.list_file = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.selectedRowKeys = []
|
||||
this.selectedFiles = []
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
this.getSpectrumFile({
|
||||
pageNo: page,
|
||||
pageSize: pageSize
|
||||
pageSize: pageSize,
|
||||
})
|
||||
},
|
||||
handleSizeChange(current, size) {
|
||||
|
|
@ -288,34 +326,34 @@ export default {
|
|||
this.ipagination.pageSize = size
|
||||
this.getSpectrumFile({
|
||||
pageNo: current,
|
||||
pageSize: size
|
||||
pageSize: size,
|
||||
})
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedFiles = selectedRows.map(item => {
|
||||
this.selectedFiles = selectedRows.map((item) => {
|
||||
return item.name
|
||||
});
|
||||
})
|
||||
},
|
||||
saveFileName() {
|
||||
this.visible_file = false
|
||||
if (this.tableType ==="multiple" ) {
|
||||
if (this.tableType === 'multiple') {
|
||||
this.loading_list = true
|
||||
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
|
||||
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)
|
||||
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")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
|
|
@ -327,9 +365,9 @@ export default {
|
|||
},
|
||||
cancelFileModale() {
|
||||
this.visible_file = false
|
||||
this.list_file=[]
|
||||
this.list_file = []
|
||||
},
|
||||
beforeUpload(file,fileList) {
|
||||
beforeUpload(file, fileList) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
handleUpload({ file }) {
|
||||
|
|
@ -341,19 +379,19 @@ export default {
|
|||
},
|
||||
async zipFile(fileList, onProgress) {
|
||||
const zip = new JSZip()
|
||||
const promises=[]
|
||||
fileList.forEach(file => {
|
||||
const promises = []
|
||||
fileList.forEach((file) => {
|
||||
promises.push(this.readAsArrayBuffer(file))
|
||||
})
|
||||
Promise.all(promises).then(result => {
|
||||
result.forEach(res => {
|
||||
Promise.all(promises).then((result) => {
|
||||
result.forEach((res) => {
|
||||
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 })
|
||||
const formData = new FormData()
|
||||
formData.append("file",file)
|
||||
postAction("/spectrumFile/upload", formData).then(res => {
|
||||
formData.append('file', file)
|
||||
postAction('/spectrumFile/upload', formData).then((res) => {
|
||||
this.uploading = false
|
||||
this.fileNum = 0
|
||||
if (res.success) {
|
||||
|
|
@ -366,14 +404,14 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
async readAsArrayBuffer(file){
|
||||
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
|
||||
data: e.target.result,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -390,7 +428,7 @@ export default {
|
|||
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
|
|
@ -399,9 +437,9 @@ export default {
|
|||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -415,10 +453,10 @@ export default {
|
|||
|
||||
background-color: #00e170;
|
||||
}
|
||||
.status_true{
|
||||
.status_true {
|
||||
background-color: #00e170;
|
||||
}
|
||||
.status_false{
|
||||
.status_false {
|
||||
background-color: red;
|
||||
}
|
||||
::v-deep {
|
||||
|
|
@ -440,7 +478,7 @@ export default {
|
|||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
|
@ -456,11 +494,11 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.ant-modal-title{
|
||||
.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
.item-label{
|
||||
.item-label {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
|
|
@ -480,21 +518,21 @@ export default {
|
|||
height: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
.file-name-color{
|
||||
.file-name-color {
|
||||
color: red;
|
||||
}
|
||||
.file-ellipsis{
|
||||
.file-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/deep/.ant-table-tbody .ant-table-row td{
|
||||
/deep/.ant-table-tbody .ant-table-row td {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ant-input{
|
||||
.ant-input {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user