From be15cf582e7bc29958b31def06ee6d53b93cad10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <renpy@yuanian.com>
Date: Mon, 18 Sep 2023 15:04:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=20file=20list=20=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=EF=BC=8C=E5=8D=95=E5=87=BB=E8=A1=8C=E5=8F=96=E6=B6=88?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=20file=20list=20=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E9=A1=B5=E5=8B=BE=E9=80=89=E5=90=8E=EF=BC=8C=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96=E5=88=86=E9=A1=B5=EF=BC=8C=E6=B8=85=E7=A9=BA?=
 =?UTF-8?q?=E4=B9=8B=E5=89=8D=E9=80=89=E4=B8=AD=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Modals/LoadFromFileModal.vue   | 236 ++++++++++--------
 1 file changed, 137 insertions(+), 99 deletions(-)

diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
index cdc24f0..8221959 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
@@ -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>