电子面单页面,导入商品

seller/src/views/goods/goods-seller/goods.vue

@@ -56,6 +56,7 @@
       </Row>
       <Row class="operation padding-row">
         <Button @click="addGoods" type="primary">添加商品</Button>
+        <Button @click="openImportGoods" type="primary">导入商品</Button>
         <Dropdown @on-click="handleDropdown">
           <Button type="default">
             批量操作
@@ -179,6 +180,20 @@
         <Button type="primary" @click="saveShipTemplate">更新</Button>
       </div>
     </Modal>
+    <Modal title="导入商品信息" v-model="importModal" :mask-closable="false">
+      <div>
+        <Upload :before-upload="handleUpload" name="files" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                multiple type="drag" :action="action" :headers="accessToken">
+          <div style="padding: 50px 0">
+            <Icon type="ios-cloud-upload" size="102" style="color: #3399ff"></Icon>
+            <h2>选择或拖拽文件上传</h2>
+          </div>
+        </Upload>
+      </div>
+      <div slot="footer">
+        <Button type="text" @click="importModal = false">确定</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -192,12 +207,16 @@ import {
   deleteGoods,
   batchShipTemplate,
 } from "@/api/goods";
+import { baseUrl } from "@/libs/axios.js";
 import * as API_Shop from "@/api/shops";
 
 export default {
   name: "goods",
   data() {
     return {
+      accessToken: {}, // 验证token
+      importModal: false,
+      action: baseUrl + "/goods/import/import", // 上传接口
       id: "", //要操作的id
       loading: true, // 表单加载状态
       shipTemplateForm: {}, // 物流模板
@@ -486,6 +505,15 @@ export default {
         }
       });
     },
+    // 上传数据
+    handleUpload(file) {
+      this.file = file;
+      this.upload();
+      return false;
+    },
+    openImportGoods(){
+      this.importModal = true
+    },
     // 更新库存
     updateStock() {
       let updateStockList = this.stockList.map((i) => {
@@ -727,9 +755,7 @@ export default {
   },
   mounted() {
     this.init();
-  },
-  mounted() {
-    this.init();
+    this.accessToken.accessToken = this.getStore("accessToken");
   },
 };
 </script>