...

package.json

@@ -27,7 +27,8 @@
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vue-style-loader": "^3.1.2",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "xlsx": "^0.14.3"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/wechatmembers/bulkIntegral.vue

@@ -21,7 +21,7 @@
               <el-option label="其他" value="5"></el-option>
             </el-select>
           </div>
-          <el-button type="primary" @click="dialogImport = true;">新建导入</el-button>
+          <el-button type="primary" @click="openDialogImport">新建导入</el-button>
         </div>
         <el-table
           :data="tableData"
@@ -84,28 +84,32 @@
       :visible.sync="dialogImport"
       width="600px"
       @closed="onDialogImportClosed">
-      <el-form ref="formByImport" :model="formByImport" label-width="90px" label-suffix=":" style="margin-bottom: 36px;">
+      <!-- <el-form ref="formByImport" :model="formByImport" label-width="90px" label-suffix=":" style="margin-bottom: 36px;"> -->
+      <el-form ref="formByImport" :rules="rules" :model="formByImport" label-width="90px" label-suffix=":" style="margin-bottom: 36px;">
         <el-form-item
           label="导入类型"
-          prop="type"
-          :rules="[
-            { required: true, message: '请选择导入类型', trigger: 'blur' }
-          ]">
+          prop="importValue"
+          >
           <el-select v-model="formByImport.importValue" placeholder="请选择导入类型">
-            <el-option label="积分增加" value="积分增加"></el-option>
-            <el-option label="积分扣除" value="积分扣除"></el-option>
+            <!-- <el-option label="积分增加" value="积分增加"></el-option>
+            <el-option label="积分扣除" value="积分扣除"></el-option> -->
+            <el-option
+              v-for="item in typeList"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item
           label="选择文件"
           prop="file"
-          :rules="[
-            { required: true, message: '请选择导入类型', trigger: 'blur' }
-          ]">
+          required>
           <el-upload
             class="upload-demo"
             action="https://jsonplaceholder.typicode.com/posts/"
-            multiple>
+            :file-list="formByImport.fileList"
+            :before-upload="beforeUpload">
             <div slot="trigger">
               <div class="importBox">
                 <i class="iconfont icon-shangchuan"></i>
@@ -140,27 +144,48 @@
 import { doFetch, doFetchqs } from "../../components/axios/api";
 import NavPath from "@/common/navbar/navbar.vue";
 import url from "../../components/axios/url";
+import XLSX from 'xlsx'
 
 export default {
   data() {
     return {
       navpath: [{ name: "首页", path: "" }, { name: "微信会员", path: "" }, { name: "批量导入", path: "" }],
       tableData: [],
+      // 搜索选项值
       importType: '',
+      // 新建dialog
       dialogImport: false,
+      // 表单
       formByImport: {
         importValue: '',
-      }
+        fileList: [],
+      },
+      rules: {
+        importValue: [{required: true, message: 'hello', trigger: 'change'}]
+      },
+      // 文件列表
+      typeList: ['积分增加', '积分扣除'],
+
+      // test
     }
   },
   methods: {
     handleSizeChange(val) {
     },
     handleCurrentChange(val) {},
+    // 跳转详情
     logDetails() {},
+    // 打开dialog
+    openDialogImport() {
+      this.formByImport.importValue = '';
+      this.fileList = [];
+      this.dialogImport = true;
+    },
+    // 表单清除
     onDialogImportClosed() {
       this.$refs.formByImport.resetFields();
     },
+    // 下载模板
     downloadTemplate() {
       if(this.formByImport.importValue == '积分增加') {
 
@@ -168,8 +193,43 @@ export default {
 
       }
     },
+    // 确认导入
     importTable() {
-      this.dialogImport = false
+      this.$refs.formByImport.validateField('importValue' , err => {
+        if(!err) {
+          this.dialogImport = false
+        }
+      })
+    },
+    // 上传验证
+    beforeUpload(file) {
+      let _this = this;
+      const types = file.name.split(".")[1];
+      const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
+        item => item === types
+      );
+      if (!fileType) {
+        this.$message.warning("请上传excel表格");
+        return false;
+      }
+      var fileReader = new FileReader();
+      var workbook;
+      fileReader.onload = function(ev) {
+        var data = ev.target.result
+        workbook = XLSX.read(data, {  
+            type: 'binary'  
+        }),
+        // 以二进制流方式读取得到整份excel表格对象  
+        persons = []; // 存储获取到的数据
+      }
+      var fromTo = '';  
+      // 遍历每张表读取  
+      for (var sheet in workbook.Sheets) {  
+        if (workbook.Sheets.hasOwnProperty(sheet)) {  
+          fromTo = workbook.Sheets[sheet]['!ref'];  
+          console.log(fromTo); //表有几行数据
+        }  
+      }
     }
   },
   created() {