导入模板功能整了一下

src/components/GmhExcel.vue

@@ -3,14 +3,14 @@
     <el-card class="box-card bottom-10">
       <el-steps :active="active" finish-status="success">
         <el-step title="导入名单"></el-step>
-        <el-step title="填充模板"></el-step>
+        <el-step title="导入模板"></el-step>
-        <el-step title="步骤 3"></el-step>
+        <el-step title="完成"></el-step>
       </el-steps>
       <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
     </el-card>
 
     <el-card>
-      <el-form ref="$form" :model="model" label-position="left" label-width="100px" size="small">
+      <el-form ref="$form" :model="model" label-position="right" label-width="100px" size="small">
         <el-form-item :rules="rules.upload" prop="upload" label="名单上传" v-if="active==0">
           <el-upload
             action="/api/excel/readData"
@@ -24,38 +24,72 @@
             :before-upload="uploadBefore"
             :before-remove="uploadBeforeRemove"
             :on-exceed="uploadOnExceed"
+            :file-list="nameFileList"
           >
             <el-button type="primary" size="small">点击上传</el-button>
           </el-upload>
         </el-form-item>
 
-        <el-form-item :rules="rules.uploadTemplate" prop="uploadTemplate" label="模板上传" v-if="active==1">
+        <el-form-item
+          :rules="rules.uploadTemplate"
+          prop="uploadTemplate"
+          label="模板上传"
+          v-if="active==1"
+        >
           <el-upload
             action="/api/excel/template"
             :multiple="false"
             :on-success="uploadSuccess"
+            :file-list="templateFileList"
           >
             <el-button type="primary" size="small">点击上传</el-button>
           </el-upload>
         </el-form-item>
+
+        <el-form-item prop="cellNum" label="指定单元格" v-if="active==1">
+          <el-input v-model="model.cellNum" style="width=200px">
+            <el-button slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="cellData" label="原始数据" v-if="active==1">
+          <el-input type="textarea" v-model="model.cellData" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="newCellData" label="替换后的数据" v-if="active==1">
+          <el-input type="textarea" v-model="model.newCellData" disabled></el-input>
+        </el-form-item>
       </el-form>
     </el-card>
 
-    <el-dialog :visible.sync="dialogVisible" width="60%">
+    <el-dialog :visible.sync="dialogVisible" width="40%">
       <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane v-for="(val, key, index) in namePreview" :key="index" :label="key" :name="key">
+        <el-tab-pane
+          v-for="(item, index) in namePreview"
+          :key="index"
+          :label="item.sheetName"
+          :name="item.index"
+        >
           <div class="table-s">
-            <el-table :data="val" stripe style="width: 100%">
+            <el-table :data="item.nameList" stripe style="width: 100%">
-              <el-table-column type="index" label="序号" min-width="80%"></el-table-column>
+              <el-table-column type="index" label="序号" min-width="20%" align="center"></el-table-column>
-              <el-table-column prop="name" label="姓名" min-width="50%"></el-table-column>
+              <el-table-column prop="name" label="姓名" min-width="50%" align="center"></el-table-column>
+              <el-table-column fixed="right" label="操作" min-width="30%" align="center">
+                <template slot-scope="scope">
+                  <el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
+                  <el-button type="danger" icon="el-icon-delete" circle size="small"></el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </div>
+          <div class="top-10">
+            <span>{{item.sheetName}} 一共有{{item.nameList.length}}个人，请检查一下对不对</span>
+            <span v-if="item.hasRepeat" class="f-right">有{{item.repeatCount}}个重复的帮你去掉了</span>
+          </div>
         </el-tab-pane>
       </el-tabs>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="next">下一步</el-button>
+        <el-button type="primary" @click="nameListNext">下一步</el-button>
       </span>
     </el-dialog>
   </div>
@@ -68,7 +102,10 @@ export default {
       forms: ["$form"],
       model: {
         upload: "",
-        uploadTemplate: ""
+        uploadTemplate: "",
+        cellNum: "",
+        cellData: "",
+        newCellData: ""
       },
       rules: {
         upload: [],
@@ -76,8 +113,10 @@ export default {
       },
       active: 0,
       dialogVisible: false,
-      namePreview: {},
+      namePreview: [],
-      activeName: ""
+      activeName: 0,
+      nameFileList: [],
+      templateFileList: []
     };
   },
   created() {
@@ -95,15 +134,33 @@ export default {
           console.log(err);
         });
     },
-    next() {
+    nameListNext() {
+      this.$confirm("请确认名单是否正确?", "提示", {
+        confirmButtonText: "没毛病",
+        cancelButtonText: "有问题",
+        type: "warning"
+      })
+        .then(() => {
           this.dialogVisible = false;
           if (this.active++ > 2) this.active = 0;
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "有问题就改"
+          });
+        });
     },
     uploadPreview(file) {},
     uploadRemove(file, fileList) {},
     uploadSuccess(response, file, fileList) {
+      if (response.success) {
         this.namePreview = response.data;
         this.dialogVisible = true;
+        this.$message.success("姓名导入成功");
+      } else {
+        this.$message.success("姓名导入出现了错误，请联系陈达解决");
+      }
     },
     uploadError(err, file, fileList) {},
     uploadProgress(event, file, fileList) {},
@@ -121,10 +178,19 @@ export default {
 
 <style>
 .table-s {
-  height: 500px;
+  height: 400px;
   overflow: auto;
 }
 .bottom-10 {
   margin-bottom: 10px;
 }
+.top-10 {
+  margin-top: 10px;
+}
+.left-10 {
+  margin-left: 10px;
+}
+.f-right {
+  float: right;
+}
 </style>