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

src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue

@@ -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>
+      <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 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 }}
-          </phd-select>
+          </phd-select> -->
         </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 }}
-          </phd-select>
+          </phd-select> -->
         </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 }}
-          </phd-select>
+          </phd-select> -->
         </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>
       </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,
+        sampleFileName: undefined,
-        gasBkData: undefined,
+        gasFileName: undefined,
-        detBkData: undefined,
+        detFileName: undefined,
-        qcData: undefined
+        qcFileName: undefined
       }))
     },
 
@@ -222,9 +236,26 @@ export default {
         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() {
       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>