3

src/views/base/checkinInfo-list.vue

@@ -72,6 +72,14 @@
         @click="handleBatchDelete"
         >删除选中项</el-button
       >
+      <el-button
+        type="primary"
+        size="small"
+        plain
+        icon="el-icon-upload2"
+        @click="batchImportVisible = true"
+        >导入</el-button
+      >
     </el-row>
     <el-table
       :data="tableData"
@@ -183,6 +191,54 @@
       :title="modalTitle"
       @close="onDetailModalClose"
     ></checkinInfo-payment>
+    <el-dialog
+      title="批量导入租户"
+      :visible.sync="batchImportVisible"
+      :modal-append-to-body="false"
+      style="text-align: left"
+      :close-on-click-modal="false"
+    >
+      <el-form label-width="150px">
+        <el-form-item label="模板下载">
+          <el-link
+            href="http://rccs.oss-cn-hangzhou.aliyuncs.com/smart/personInfo/2020/10/小鹏管家人员导入模板.xls"
+            type="primary"
+            target="_blank"
+            >点击下载模板</el-link
+          >
+        </el-form-item>
+        <el-form-item label="上传文件">
+          <el-upload
+            class="upload-demo"
+            accept=".xls"
+            :action="uploadUrlXls"
+            :headers="headers"
+            :on-preview="handleBatchImportPreview"
+            name="uploadFile"
+            :multiple="true"
+            :limit="1"
+            :on-remove="handleBatchImportRemove"
+            :before-remove="beforeBatchImportRemove"
+            :before-upload="beforeUpload"
+            :on-exceed="handleBatchImportExceed"
+            :on-success="handleBatchImportSuccess"
+            :file-list="batchImportFileList"
+          >
+            <el-button size="small" type="primary" :loading="xlsLoading"
+              >点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip">
+              只能上传xls文件，且不超过500kb
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="batchImportVisible = false"
+          >关 闭</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -192,6 +248,7 @@ import CheckinInfoPayment from "./checkinInfo-payment";
 import checkinInfoApi from "@/api/base/checkinInfo";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
+import { getToken } from "@/utils/auth";
 
 export default {
   data() {
@@ -219,6 +276,13 @@ export default {
       showModal1: false,
       modalTitle: "",
       businessKey: "",
+      batchImportVisible: false,
+      uploadUrlXls: Constant.serverUrl + "/base/personInfo/importXls",
+      batchImportFileList: [],
+      xlsLoading: false,
+      headers: {
+        Authorization: getToken(),
+      },
     };
   },
   methods: {
@@ -377,7 +441,63 @@ export default {
               self.$message.error(jsonData.message + "");
           }
       });
-    }
+    },
+    beforeUpload(file, fileList) {
+      //导入前判断
+      var self = this;
+      self.xlsLoading = true;
+      return true;
+    },
+    //批量导入-上传成功
+    handleBatchImportSuccess(response, file, fileList) {
+      var self = this;
+      self.xlsLoading = false;
+      
+      if (response.result) {
+        self.$message.success(response.message);
+        this.batchImportFileList = [];
+        this.changePage(1);
+
+        this.batchImportVisible = false;
+      } else {
+        //this.$message.error(response.message);
+        this.batchImportFileList = [];
+        this.changePage(1);
+
+        if (response.data != null) {
+          //下载有错误信息提示的报表
+          //window.open(response.data);
+          self.$message({
+            showClose: true,
+            dangerouslyUseHTMLString: true,
+            message:
+              response.message +
+              `,<a href="${response.data}" target="_blank">点击下载未导入的数据报表</a>&nbsp;`,
+            duration: 30000,
+          });
+        }
+      }
+    },
+    //批量导入-预览
+    handleBatchImportPreview(file) {
+      console.log(file.url);
+    },
+    //批量导入-移除
+    handleBatchImportRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    //批量导入-移除前操作
+    beforeBatchImportRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    //批量导入-文件超出个数限制时的钩子
+    handleBatchImportExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
   },
   mounted: function () {
     this.changePage(1);