上传

src/main/vue/src/views/record/RecordList.vue

@@ -41,7 +41,20 @@
         </div>
         <div style="padding-left: 20px">
             <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">查询 </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">批量上传 </el-button>
+            <el-upload
+                :action="uploadUrl"
+                :before-upload="beforeUpload"
+                :headers="headers"
+                :show-file-list="false"
+                ref="upload"
+                :on-success="onSuccess"
+                class="uploader"
+                :on-error="onfail"
+            >
+                <el-button slot="trigger" size="small" type="primary">批量上传</el-button>
+            </el-upload>
+
+            <!-- <el-button @click="upload" type="primary" icon="el-icon-plus" class="filter-item">批量上传 </el-button> -->
             <!-- <el-button @click="update" type="primary" icon="el-icon-refresh" class="filter-item"
                     >一键获取
                 </el-button> -->
@@ -111,11 +124,12 @@
 </template>
 <script>
 import pageableTable from '@/mixins/pageableTable';
-
+import resolveUrl from 'resolve-url';
 export default {
     name: 'RecordList',
     mixins: [pageableTable],
     created() {
+        this.uploadUrl = resolveUrl(this.$baseUrl, 'record/update');
         this.$http
             .get('/district/NJ')
             .then(res => {
@@ -142,10 +156,16 @@ export default {
             recordDateRange: '',
             agency: '',
             organizer: '',
-            dateRange: ''
+            dateRange: '',
+            uploadUrl: ''
         };
     },
     computed: {
+        headers() {
+            return {
+                Authorization: 'Bearer ' + sessionStorage.getItem('token')
+            };
+        },
         selection() {
             return this.$refs.table.selection.map(i => i.id);
         }
@@ -308,6 +328,23 @@ export default {
                     id: row.id
                 }
             });
+        },
+        upload() {},
+        onfail(e) {
+            console.log(e);
+            this.$message.error('失败');
+            this.getData();
+        },
+        onSuccess() {
+            this.$message.success('上传成功');
+            this.getData();
+        },
+        beforeUpload() {
+            return this.$confirm('确认要上传文件吗?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            });
         }
     }
 };
@@ -330,4 +367,8 @@ export default {
     text-align: right;
     display: inline-block;
 }
+.uploader {
+    display: inline-block;
+    margin: 0 10px;
+}
 </style>