调整文件列表表格的样式及列表分页参数

上传文件的逻辑调整及接口联调

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

@@ -30,7 +30,11 @@
       <!-- 底部按钮 -->
       <template slot="custom-footer">
         <a-space>
-          <a-button type="primary" @click="handleUpload">Upload</a-button>
+          <a-upload :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>
           <a-button type="primary" @click="handleCancel">Cancel</a-button>
@@ -39,7 +43,7 @@
       <!-- 底部按钮结束 -->
     </custom-modal>
     <custom-modal v-model="visible_file" :width="1200" title="File List">
-      <div style="position: relative;padding-bottom: 40px;height: 460px;">
+      <div style="position: relative;padding-bottom: 40px;height: 460px;overflow: hidden;">
         <a-table 
           :data-source="list_file" 
           :columns="columns_file" 
@@ -63,31 +67,6 @@
         />
       </div>
     </custom-modal>
-    <a-modal v-model="visible_upload" :width="300" title="Upload File" @ok="handleUploadFile">
-      <div>
-        <span class="item-label">Type</span>
-          <a-select style="width:180px"
-            v-model="type" 
-            placeholder="select..."
-            show-arrow 
-            allowClear
-            :options="typeOptions" 
-            @change="onTypeChange"
-          >
-            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-          </a-select>
-      </div>
-      <div>
-        <a-upload
-          name="file"
-          :multiple="true"
-          :before-upload="beforeUpload" 
-          :file-list="fileList"
-        >
-          <a-button> <a-icon type="upload" /> Select File </a-button>
-        </a-upload>
-      </div>
-    </a-modal>
   </div>
 </template>
 
@@ -144,6 +123,7 @@ const columns_file = [
   {
     title: 'Name',
     dataIndex: 'name',
+    width: '45%',
     align: 'left',
     ellipsis: true
   },{
@@ -184,21 +164,9 @@ export default {
         total: 0
       },
       selectedRowKeys: [],
-      visible_upload: false,
-      type: undefined,
-      typeOptions: [
-        {
-          label: "stop",
-          value: "stop"
-        },{
-          label: "over",
-          value: "over"
-        },{
-          label: "skip",
-          value: "skip"
-        },
-      ],
       fileList: [],
+      fileNum: 0,
+      uploading: false
     }
   },
   methods: {
@@ -224,6 +192,7 @@ export default {
       getAction("/spectrumFile/get", params).then(res => {
         this.loading_file = false
         if (res.success) {
+          this.ipagination.total = res.result.total
           this.list_file = res.result.records
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
@@ -250,25 +219,30 @@ export default {
       console.log('selectedRowKeys changed: ', selectedRowKeys);
       this.selectedRowKeys = selectedRowKeys;
     },
-
-    handleUpload() {
-      this.visible_upload = true
-    },
-    onTypeChange(val) {
-      console.log(val);
-      this.type = val
-    },
     beforeUpload(file,fileList) {
-      console.log(file, fileList);
       this.fileList = fileList
-      // this.fileList = [...this.fileList, file]
-      
     },
-    // async transformFile() {
-    //   // 创建jszip实例
-    //   let zipData = await this.zipFile(this.fileList, (added) => {})
-    //   console.log(zipData);
-    // },
+    async handleUpload({ file }) {
+      this.uploading = true
+      this.fileNum += 1
+      if (this.fileNum == this.fileList.length) {
+        await this.zipFile(this.fileList, (added) => { }).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 => {
+            this.uploading = false
+            this.fileNum = 0
+            if (res.success) {
+              console.log(res);
+              this.$message.success(res.message)
+            } else {
+              this.$message.warning(res.message)
+            }
+          })
+        })
+      }
+    },
     async zipFile(fileList, onProgress) {
       const zip = new JSZip()
       let i = 0
@@ -294,22 +268,6 @@ export default {
         }
       })
     },
-    async handleUploadFile() {
-      await this.zipFile(this.fileList, (added) => { }).then(content => {
-        console.log(content);
-        
-        const formData = new FormData()
-        formData.append("file",content)
-        formData.append("choice",this.type)
-        postAction("/spectrumFile/upload", formData).then(res => {
-          if (res.success) {
-            console.log(res);
-          } else {
-            this.$message.warning("This operation fails. Contact your system administrator")
-          }
-        })
-      })
-    },
 
     handleReset() {
       this.list = this.getInitialList()