Merge branch 'dev' of maopiao/mp-ui-pc into test

src/api/admin/salesite.js

@@ -66,3 +66,30 @@ export function updateSaleSiteStatus(data) {
     data: data
   })
 }
+
+// 下载导入模板
+export function salesiteDownload() {
+  return request({
+    url: '/api/v1/mp/admin/salesite/template/download',
+    method: 'post',
+  })
+}
+
+/**
+ * Post 方式上传文件
+ */
+export function salesiteImport(data, config = {}) {
+  var formData  = new FormData()
+  Object.keys(data).forEach(key => {
+    formData.append(key, data[key])
+  })
+  return request({
+    url: `/api/v1/mp/admin/salesite/import`,
+    method: 'post',
+    data: formData ,
+    ...config,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}

src/views/business/salesite/index.vue

@@ -112,6 +112,16 @@
         >导出门店</el-button
         >
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-upload2"
+          size="mini"
+          @click="handleImport"
+          v-hasPermi="['business:salesite:export']"
+          >批量导入门店</el-button>
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -193,6 +203,41 @@
         </template>
       </el-table-column>
     </el-table>
+   <!--    导入门店-->
+   <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body :before-close="openSwitch">
+      1.请下载Excel模版，填写门店
+      <br><br>
+      &emsp;&emsp;<a style="color: #1890FF;" @click="downloadExcel">下载Excel模版</a>
+      <br><br>
+      2.上传Excel
+      <div style="padding-top: 20px; text-align: center">
+        <el-upload
+          ref="upload"
+          :limit="1"
+          :data="reqData"
+          accept=".xlsx, .xls"
+          :headers="upload.headers"
+          :action="upload.url"
+          :disabled="upload.isUploading"
+          :on-progress="handleFileUploadProgress"
+          :on-success="handleFileSuccess"
+          :auto-upload="false"
+          :http-request="reqUploadFile"
+          :on-exceed="exceedMax"
+          drag
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip text-center" slot="tip">
+            <span>仅允许导入 xls xlsx 格式文件。</span>
+          </div>
+        </el-upload>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="openSwitch()">取 消</el-button>
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+      </div>
+    </el-dialog>
 
     <pagination
       v-show="total>0"
@@ -224,7 +269,7 @@
 <script>
 import { listAllChannel} from "@/api/admin/channel";
 import { listAreaByPid} from "@/api/admin/area";
-import { listSaleSite, updateSaleSiteStatus,salesiteOrderExport } from "@/api/admin/salesite";
+import { listSaleSite, updateSaleSiteStatus,salesiteOrderExport,salesiteDownload,salesiteImport } from "@/api/admin/salesite";
 import SiteCreate from './components/Create'
 import AddSiteCreate from './components/AddCreate'
 import SiteDetail from './components/Detail'
@@ -288,6 +333,15 @@ export default {
       // 表单参数
       form: {},
 
+      // 用户导入参数
+      upload: {
+        open: false,// 是否显示弹出层（用户导入）
+        title: "",// 弹出层标题（用户导入）
+        isUploading: false,// 是否禁用上传
+        url: "",// 上传的地址
+        headers: {},//请求头
+      },
+      reqData: {},
     };
   },
   mounted() {
@@ -487,7 +541,87 @@ export default {
         }).catch(function() {
            row.statusV = row.statusV === "1" ? "2" : "1";
         });
-    }
+    },
+    //下载excel模版表格
+    downloadExcel() {
+      salesiteDownload().then(response => {
+        this.download(response.msg);
+      })
+    },
+
+    handleImport() {
+      this.upload.title = "批量导入门店";
+      this.upload.open = true;
+    },
+    openSwitch() {
+      this.upload.open = false
+      this.$refs.upload.clearFiles();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+
+    // 自定义文件上传的实现
+    reqUploadFile(param) {
+      var data = this.reqData || {}
+      var params = {
+        file: param.file,
+        ...data
+      }
+      this.vloading = this.$loading({
+        lock: true,
+        text: "正在批量导入门店.....",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      salesiteImport(params).then(response => {
+        this.vloading.close();
+        console.log(response,'response')
+        if(response.data && response.data.length){
+          let data1 = `<tr><th>手机号</th><th>门店名称</th><th>佣金比例(%)</th><th>上级渠道(手机号)</th><th>错误信息</th></tr>`
+          let data2 = ''
+          for (let i = 0; i < response.data.length; i++) {
+            let h = response.data[i]
+            data2 += '<tr><td>' + h.mobile +'</td><td>'+ h.name + '</td><td>'+ h.commRate + '%</td><td>'+ h.parentsMobile +'</td><td>'+ h.errorReason +'</td></tr>'
+          }
+          let data = '<table style="width:668px"><thead>'+ data1+'</thead><tbody>'+data2+'</tbody></table>'
+          this.$alert(data, response.msg, { dangerouslyUseHTMLString: true, customClass:'custom-alert' });
+        }else{ 
+          this.upload.open = false;
+          this.upload.isUploading = false;
+          this.$refs.upload.clearFiles();
+          this.$message({
+            message: '导入成功',
+            type: 'success'
+          })
+        }
+      }).catch(response => {
+        this.vloading.close();
+      })
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.getList();
+    },
+    // 超出限制时的提示
+    exceedMax() {
+      this.$message({
+        message: '请移除已有文件后再进行上传',
+        type: 'warning'
+      })
+    },
   }
 };
 </script>
+
+<style lang='scss'>
+.custom-alert {
+  width: 700px;
+}
+</style>