商品导入

src/views/mall/goodsinfo.vue

@@ -53,6 +53,14 @@
         >审核</el-button>
       </template>
 
+
+      <template slot-scope="scope" slot="menuLeft">
+        <el-button type="success"
+                   icon="el-icon-upload"
+                   size="small"
+                   plain
+                   @click.stop="batchImportHandle()">批量导入</el-button>
+      </template>
     </avue-crud>
 
     <el-dialog title="商品审核" @close="refreshChange"
@@ -81,6 +89,50 @@
         <el-button type="primary" @click="auditGoods()">确 定</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="商品批量导入" @close="refreshChange"
+               append-to-body
+               :visible.sync="batchImportBox"
+               :before-close="handleClose"
+               width="600px">
+      <el-form :model="auditForm" label-width="80px">
+        <el-form-item label="商品文件:">
+          <el-upload
+              ref="upload"
+              class="upload-demo"
+              accept=".xls, .xlsx"
+              :action="importUrl"
+              :before-upload="beforeAvatarUpload"
+              :on-success="handleImportSuccess"
+              :on-error="handleImportError"
+              :limit="1"
+              :file-list="fileList"
+              :data="fileDa"
+              :headers="headers"
+              :auto-upload="false">
+            <el-button size="small" type="primary">选择文件</el-button>
+            <span style="color: #f54646; margin-left: 10px; padding-bottom: 30px" @click="downloadFile">点击下载文件模板，请勿修改模板表头</span>
+
+            <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="供应商:">
+          <el-select v-model="fileDa.storeId" placeholder="请选择供应商">
+            <el-option
+                v-for="item in storeList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span style="color: #f54646" v-if="errorMsg">上传失败原因:{{errorMsg}}</span>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="batchImport()">确 定</el-button>
+      </div>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -89,18 +141,25 @@
   import {getList, getDetail, add, update, remove, modifyState, audit} from "@/api/mall/goodsinfo";
   import {mapGetters} from "vuex";
   import {getByParentId} from "../../api/mall/categoryinfo";
+  import {getList as getStoreList} from "@/api/mall/store";
+  import { baseUrl } from '@/config/env'
+  import {getToken} from '@/util/auth';
 
   export default {
-
     data() {
-      var validatePass = (rule, value, callback) => {
-        if (value>=10 || value <=0) {
-          callback(new Error('非法的折扣'));
-        } else {
-          callback();
-        }
-      }
       return {
+        errorMsg: '',
+        headers: {
+          'Blade-Auth': 'bearer ' + getToken()
+        },
+        importUrl: baseUrl + "/api/mall/goodsinfo/batchImport",
+        fileList: [],
+        batchImportBox: false,
+        storeId: '',
+        fileDa: {
+          storeId: ''
+        },
+        storeList: [],
         option:  {
           height: 'auto',
           calcHeight: 30,
@@ -248,11 +307,6 @@
               prop: "brandId",
               hide: true,
               search: true,
-              rules: [{
-                required: true,
-                message: "请选择品牌",
-                trigger: "blur"
-              }],
               type: "select",
               remote: true,
               dicUrl: "/api/mall/brandsinfo/getByName?brandName={{key}}",
@@ -712,8 +766,11 @@
       },
 
       handleClose() {
+        this.errorMsg = '';
+        this.fileList = [];
         this.categoryIdArr = [];
         this.auditBox = false;
+        this.batchImportBox = false;
         this.auditForm = {
           auditStatus: '',
               id: '',
@@ -788,6 +845,46 @@
           loading();
           console.log(error);
         });
+      },
+      batchImportHandle() {
+        this.batchImportBox = true;
+        getStoreList(1, 1000, {state:1,auditState:1}).then(res => {
+          console.log(res.data)
+          this.storeList = res.data.data.records;
+        });
+      },
+      beforeAvatarUpload(file) {
+        // console.log(file.type)
+      },
+      batchImport() {
+        if (!this.fileDa.storeId) {
+          this.$message.warning("请选择供应商");
+          return;
+        }
+        if (this.$refs.upload.uploadFiles.length < 1) {
+          this.$message.warning("请选择需要导入的文件");
+          return;
+        }
+        this.$refs.upload.submit();
+      },
+      handleImportSuccess(res) {
+        this.$message({
+          type: "success",
+          message: "导入成功!"
+        });
+        this.handleClose();
+      },
+      handleImportError(err) {
+        this.$message({
+          type: "error",
+          message: "导入失败，请查看失败原因!"
+        });
+        let msg = err.toString();
+        msg = msg.substring(7, msg.length);
+        this.errorMsg = JSON.parse(msg).msg;
+      },
+      downloadFile() {
+        window.location.href="http://www.gzzzyd.com/groupon/template.xlsx"
       }
     }
   };