数据导入

src/api/preData.js

@@ -70,4 +70,32 @@ export function getCodeImg() {
     url: '/captchaImage',
     method: 'get'
   })
-}
+}
+
+
+// 获取验证码
+export function updateImportList(data) {
+  return request({
+    url: '/customer/cardImport/updateCardList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除客户电子会员卡（储蓄卡）
+export function delImportList(data) {
+  return request({
+    url: '/customer/cardImport/deleteIds',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改单条导入记录
+export function upImport(data) {
+  return request({
+    url: '/customer/cardImport',
+    method: 'put',
+    data: data
+  })
+}

src/utils/excel.js

@@ -89,14 +89,14 @@ export const export_array_to_excel = ({key, data, title, filename, autoWidth}) =
 
 export const read = (data, type) => {
     const workbook = XLSX.read(data, {type: type});
-    console.log(workbook.SheetNames[0]);
+    // console.log(workbook.SheetNames[0]);
     const firstSheetName = workbook.SheetNames[0];
     const worksheet = workbook.Sheets[firstSheetName];
-    console.log(worksheet);
+    // console.log(worksheet);
     const header = get_header_row(worksheet);
-    console.log(header);
+    // console.log(header);
     const results = XLSX.utils.sheet_to_json(worksheet);
-    console.log(results)
+    // console.log(results)
     return {header, results};
 }
 

src/views/preData/PreData_DataEntry.vue

@@ -2,7 +2,7 @@
   <PermissionContainer
     :jiBieArr="[2]"
     :type="4"
-    :tipArr="[, '标签配置只对站点级别开放', '', , '您没有开启标签功能']"
+    :tipArr="[, '数据导入只对站点级别开放', '', , '']"
   >
     <el-form
       :model="queryForm"
@@ -42,8 +42,16 @@
           icon="el-icon-edit"
           size="mini"
           @click="batchAdd"
-          >导入Excel批量新增</el-button
-        >
+          >导入Excel批量新增
+          <input
+            type="file"
+            accept=".xls,.xlsx"
+            class="upload_file"
+            @change="handleUpload($event)"
+            style="display: none"
+            id="upload_file"
+          />
+        </el-button>
 
         <el-button
           type="primary"
@@ -62,8 +70,18 @@
         @selection-change="selectionChange"
         class="mt-5"
       >
-        <af-table-column align="center" prop="id" type="selection" />
-        <af-table-column label="手机" align="center" prop="phoneNumber" />
+        <af-table-column
+          align="center"
+          prop="id"
+          type="selection"
+          fixed="left"
+        />
+        <af-table-column
+          label="手机"
+          align="center"
+          prop="phoneNumber"
+          fixed="left"
+        />
         <af-table-column label="积分" align="center" prop="integral" />
         <af-table-column
           label="电子卡类型"
@@ -72,7 +90,7 @@
           width="160px"
         >
           <template slot-scope="scope">
-            {{ translateCardToName(scope.row.cardType) }}
+            {{ translateCardToName(scope.row) }}
           </template>
         </af-table-column>
         <af-table-column label="电子卡余额" align="center" prop="balance" />
@@ -83,7 +101,7 @@
           width="160px"
         >
           <template slot-scope="scope">
-            {{ translateGradeToName(scope.row.memberGrade) }}
+            {{ translateGradeToName(scope.row) }}
           </template>
         </af-table-column>
         <af-table-column label="等级操作" align="center">
@@ -102,7 +120,7 @@
               </el-dropdown-menu>
             </el-dropdown>
             <el-popconfirm
-              title="此操作会将选中用户强制列为无标签状态，是否继续？"
+              title="将用户强制列为无等级状态，是否继续？"
               confirm-button-text="删除"
               @onConfirm="toUnGrade(scope.row.phoneNumber)"
             >
@@ -124,7 +142,7 @@
           width="160px"
         >
           <template slot-scope="scope">
-            {{ translateLabelToName(scope.row.labelId) }}
+            {{ translateLabelToName(scope.row) }}
           </template>
         </af-table-column>
         <af-table-column label="标签操作" align="center">
@@ -143,7 +161,7 @@
               </el-dropdown-menu>
             </el-dropdown>
             <el-popconfirm
-              title="此操作会将选中用户强制列为无标签状态，是否继续？"
+              title="将用户强制列为无标签状态，是否继续？"
               confirm-button-text="删除"
               @onConfirm="toUnLabel(scope.row.phoneNumber)"
             >
@@ -165,7 +183,7 @@
           width="160px"
         >
           <template slot-scope="scope">
-            {{ translateIssueToName(scope.row.couponIssueId) }}
+            {{ translateIssueToName(scope.row) }}
           </template>
         </af-table-column>
         <af-table-column label="领取方式操作" align="center">
@@ -184,7 +202,7 @@
               </el-dropdown-menu>
             </el-dropdown>
             <el-popconfirm
-              title="此操作会将选中用户强制列为无标签状态，是否继续？"
+              title="将选中用户拉取领取方式，是否继续？"
               confirm-button-text="删除"
               @onConfirm="toUnIssue(scope.row.phoneNumber)"
             >
@@ -199,6 +217,33 @@
             </el-popconfirm>
           </template>
         </af-table-column>
+        <af-table-column label="操作" align="center" width="200px">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              icon="el-icon-edit"
+              class="underline btn24"
+              size="mini"
+              @click="upImport(scope.row)"
+              >修改</el-button
+            >
+
+            <el-popconfirm
+              title="确认删除选中的记录？"
+              confirm-button-text="删除"
+              @onConfirm="delImport(scope.row)"
+            >
+              <el-button
+                type="text"
+                icon="el-icon-delete"
+                class="underline btn24"
+                size="mini"
+                slot="reference"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </template>
+        </af-table-column>
       </el-table>
       <pagination
         v-show="total > 1"
@@ -236,6 +281,7 @@
       width="600px"
       append-to-body
       status-icon
+      @close="getList"
     >
       <div v-html="tipContent">
         {{ tipContent }}
@@ -337,31 +383,111 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!--多条导入的弹窗-->
+    <el-dialog
+      title="由Excel导入的数据"
+      :visible.sync="tempImportDialog"
+      append-to-body
+      status-icon
+      width="80vw"
+    >
+      <el-table :data="tempImportList" class="mt-5" style="margin-bottom: 10px">
+        <af-table-column label="手机" align="center" prop="phoneNumber" />
+        <af-table-column
+          label="积分"
+          align="center"
+          prop="integral"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateIntegralToInt(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="电子卡类型"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateCardToName(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column label="电子卡余额" align="center" prop="balance" />
+        <af-table-column
+          label="电子卡余额"
+          align="center"
+          prop="balance"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateBalanceToFloat(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="会员等级"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateGradeToName(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="标签"
+          align="center"
+          prop="labelId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateLabelToName(scope.row) }}
+          </template>
+        </af-table-column>
+
+        <af-table-column
+          label="优惠券领取方式"
+          align="center"
+          prop="couponIssueId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateIssueToName(scope.row) }}
+          </template>
+        </af-table-column>
+      </el-table>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitExcel">确 定</el-button>
+        <el-button @click="cancelExcel">取 消</el-button>
+      </div>
+    </el-dialog>
   </PermissionContainer>
 </template>
 
 <script>
-import {
-  getLabelUser,
-  // getLabelList,
-  delUserLabel,
-} from "@/api/label/label";
-
+import excel from "@/utils/excel";
 import {
   getIssueList,
   getGradeList,
   getLabelList,
   importExcel,
   getImportList,
+  updateImportList,
+  delImportList,
+  upImport,
 } from "@/api/preData";
 
 export default {
-  name: "Dzk_Bill",
+  name: "PreData_DataEntry",
   data() {
     return {
       queryForm: {
         pageNum: 1,
         pageSize: 10,
+        phoneNumber: "",
+        importFlag:"0"
       },
       tipOpen: false,
       tipContent: "",
@@ -369,9 +495,11 @@ export default {
       open: false,
       // 总条数
       total: 0,
-      importList: [],      
+      importList: [],
+      tempImportList: [],
       selectedImport: [],
       confirmDialog: false,
+      tempImportDialog: false,
       createForm: {
         phoneNumber: "",
         integral: 0,
@@ -393,12 +521,11 @@ export default {
   computed: {},
   created() {
     this.init();
-
-    
   },
   methods: {
     init() {
       this.getList();
+
       getIssueList()
         .then((res) => {
           if (res.code == 200) {
@@ -445,34 +572,61 @@ export default {
           this.msgError("拉取等级列表失败~");
         });
     },
-    translateIssueToName(id) {
+    translateIntegralToInt(row) {
+      const integral = parseInt(row.integral);
+      if (isNaN(integral)) {
+        row.integral = 0;
+        return 0;
+      } else {
+        row.integral = integral;
+        return integral;
+      }
+    },
+    translateBalanceToFloat(row) {
+      const balance = parseFloat(row.balance);
+      if (isNaN(balance)) {
+        row.balance = 0;
+        return 0;
+      } else {
+        row.balance = balance;
+        return balance;
+      }
+    },
+    translateIssueToName(row) {
+      const id = row.couponIssueId;
       const issue = this.issueList.find((ele) => {
         return ele.id == id;
       });
       if (issue == undefined) {
+        row.couponIssueId = undefined;
         return "----";
       }
       return issue.issueRemark;
     },
-    translateGradeToName(id) {
+    translateGradeToName(row) {
+      const id = row.memberGrade;
       const grade = this.gradeList.find((ele) => {
         return ele.id == id;
       });
       if (grade == undefined) {
+        row.memberGrade = undefined;
         return "----";
       }
       return grade.grade;
     },
-    translateLabelToName(id) {
+    translateLabelToName(row) {
+      const id = row.labelId;
       const label = this.labelList.find((ele) => {
         return ele.id == id;
       });
       if (label == undefined) {
+        row.labelId = undefined;
         return "----";
       }
       return label.labelName;
     },
-    translateCardToName(id) {
+    translateCardToName(row) {
+      const id = row.cardType;
       const typeObj = {
         1: "汽油卡",
         2: "柴油卡",
@@ -482,6 +636,7 @@ export default {
 
       const type = typeObj[id];
       if (type == undefined) {
+        row.cardType = "";
         return "----";
       }
       return type;
@@ -489,18 +644,32 @@ export default {
     submitForm() {
       this.$refs["createForm"].validate((valid) => {
         if (valid) {
-          importExcel([this.createForm]).then((res) => {
-            console.log("res111111111", res);
-            this.tipOpen = true;
-            this.tipContent = res.msg;
-          });
+          if (!this.createForm.excelId) {
+            importExcel([this.createForm])
+              .then((res) => {
+                this.open = false;
+                this.tipOpen = true;
+                this.tipContent = res.msg;
+              })
+              .catch(() => {
+                this.msgError("导入失败，请刷新重试~");
+              });
+          } else {
+            upImport(this.createForm).then((res) => {
+              this.open = false;
+              this.msgSuccess("修改成功");
+            });
+          }
         }
       });
     },
     cancel() {
       this.open = false;
     },
-    batchAdd() {},
+    batchAdd() {
+      let upBut = document.getElementById("upload_file");
+      upBut.click();
+    },
     handleAdd() {
       this.title = "新增数据";
       this.createForm = {
@@ -514,12 +683,19 @@ export default {
       };
       this.open = true;
     },
-
     handleSubmitLable() {
-      const subArr = [];
-      console.log("拉入的type", this.handleType);
-      console.log("拉入的id", this.tempId);
-      console.log("拉入的人员", this.tempArr);
+      updateImportList({
+        type: this.handleType,
+        id: this.tempId,
+        phoneArr: this.tempArr,
+      })
+        .then((r) => {
+          this.getList();
+          this.confirmDialog = false;
+        })
+        .catch((e) => {
+          this.msgError("操作失败，请刷新后重试~");
+        });
     },
     cancelSubmitLabel() {
       this.getList();
@@ -534,10 +710,10 @@ export default {
       }
       return label.labelName;
     },
-    toUnGrade(phone) {
+    toUnGrade(phoneNumber) {
       const delArr = [];
       if (this.selectedImport.length == 0) {
-        delArr.push(phone);
+        delArr.push(phoneNumber);
       } else {
         this.selectedImport.map((ele) => {
           if (!!ele.phoneNumber) {
@@ -545,20 +721,9 @@ export default {
           }
         });
       }
-      console.log("删除的类型", 0);
-      console.log("删除的人的手机号", delArr);
-      // delUserLabel({ phoneList: delArr })
-      //   .then((res) => {
-      //     if (res.code == 200) {
-      //       this.getList();
-      //       this.msgSuccess("删除用户标签成功~");
-      //     } else {
-      //       throw new Error("");
-      //     }
-      //   })
-      //   .catch(() => {
-      //     this.msgError("删除用户标签状态失败，请刷新后重试~");
-      //   });
+      this.handleType = 0;
+      this.tempArr = delArr;
+      this.delHandle();
     },
     toUnLabel(phone) {
       const delArr = [];
@@ -571,8 +736,9 @@ export default {
           }
         });
       }
-      console.log("删除的类型", 1);
-      console.log("删除的人的手机号", delArr);
+      this.handleType = 1;
+      this.tempArr = delArr;
+      this.delHandle();
     },
     toUnIssue(phone) {
       const delArr = [];
@@ -585,50 +751,80 @@ export default {
           }
         });
       }
-      console.log("删除的类型", 2);
-      console.log("删除的人的手机号", delArr);
+      this.handleType = 2;
+      this.tempArr = delArr;
+      this.delHandle();
+    },
+    upImport(row) {
+      this.createForm = row;
+      this.open = true;
+    },
+    delImport(row){
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(row.excelId);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.excelId) {
+            delArr.push(ele.excelId);
+          }
+        });
+      }
+      delImportList(delArr).then(res=>{
+        this.getList()
+        this.msgSuccess("删除成功！")
+      }).catch(err=>{
+        this.msgError("删除失败，请刷新后重试~")
+      })
+    },
+    delHandle() {
+      updateImportList({
+        type: this.handleType,
+        phoneArr: this.tempArr,
+      })
+        .then((r) => {
+          this.getList();
+          this.confirmDialog = false;
+        })
+        .catch((e) => {
+          this.msgError("操作失败，请刷新后重试~");
+        });
     },
-
     selectionChange(selection) {
       console.log("selectionChange", selection);
 
       this.selectedImport = selection;
     },
-    usageTypeFotmat(row, column) {
-      if (row.usageType === "+") {
-        return "充值";
-      } else if (row.usageType === "-") {
-        return "消费";
-      }
-    },
-    cardOilsTypeFotmat(row, column) {
-      if (row.cardOilsType === "1") {
-        return "汽油";
-      } else if (row.cardOilsType === "2") {
-        return "柴油";
-      } else if (row.cardOilsType === "3") {
-        return "非油品";
-      } else if (row.cardOilsType === "4") {
-        return "LNG";
-      } else if (row.cardOilsType === "5") {
-        return "CNG";
-      }
-    },
-    /** 查询客户电子会员卡充值消费记录列表 */
     getList() {
-      getImportList()
+      getImportList(this.queryForm)
         .then((res) => {
           if (res.rows == null) {
             this.importList = [];
+            this.total = 0;
           } else {
             this.importList = res.rows;
+            this.total = res.total;
           }
         })
         .catch((err) => {
           this.msgError("拉取导入的数据列表失败");
         });
     },
-    /** 搜索按钮操作 */
+    submitExcel() {
+      importExcel(this.tempImportList)
+        .then((res) => {
+          this.tempImportDialog = false;
+          this.tipOpen = true;
+          this.tipContent = res.msg;
+        })
+        .catch(() => {
+          this.tempImportDialog = false;
+          this.msgError("导入失败，请刷新后重试");
+        });
+    },
+    cancelExcel() {
+      this.tempImportDialog = false;
+    },
     handleQuery() {
       this.queryForm.pageNum = 1;
       this.getList();
@@ -710,6 +906,49 @@ export default {
 
       this.confirmDialog = true;
     },
+    handleUpload(e) {
+      const files = e.target.files;
+      let file = files[0];
+      if(!file){
+        document.getElementById("upload_file").value = null;
+        return;
+      }
+      const fileExt = file.name.split(".").pop().toLocaleLowerCase();
+      if (fileExt === "xlsx" || fileExt === "xls") {
+        document.getElementById("upload_file").value = null;
+        this.readFile(file);
+      } else {
+        this.msgError("请选择后缀为.xlsx或者.xls的EXCEL文件");
+      }
+      return false;
+    },
+    readFile(file) {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onloadstart = (e) => {
+        console.log("onloadstart");
+      };
+      reader.onprogress = (e) => {
+        console.log("onprogress");
+        this.progressPercent = Math.round((e.loaded / e.total) * 100);
+      };
+      reader.onerror = (e) => {
+        this.msgError("文件读取出错");
+      };
+      reader.onload = (e) => {
+        console.log("onload");
+        const data = e.target.result;
+        const { header, results } = excel.read(data, "array");
+        //验证excel导入的有效性
+        if (!header.includes("phoneNumber")) {
+          this.msgError("请使用官方Excel模板导入数据");
+          return;
+        }
+
+        this.tempImportList = results;
+        this.tempImportDialog = true;
+      };
+    },
   },
 };
 </script>

src/views/preData/PreData_ImportedData.vue

@@ -0,0 +1,821 @@
+<template>
+  <PermissionContainer
+    :jiBieArr="[2]"
+    :type="4"
+    :tipArr="[, '数据导入只对站点级别开放', '', , '']"
+  >
+    <el-form
+      :model="queryForm"
+      ref="queryForm"
+      :inline="true"
+      label-width="88px"
+      style="margin-top: 20px"
+    >
+      <el-form-item label="手机号" prop="phoneNumber">
+        <el-input
+          v-model="queryForm.phoneNumber"
+          placeholder="请输入手机号"
+          clearable
+          size="small"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+
+        <el-button
+          type="info"
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+          >重置</el-button
+        >
+
+      </el-form-item>
+    </el-form>
+
+    <!--主要表格-->
+    <div>
+      <el-table
+        :data="importList"
+        class="mt-5"
+      >
+        <af-table-column
+          label="手机"
+          align="center"
+          prop="phoneNumber"
+          fixed="left"
+        />
+        <af-table-column label="积分" align="center" prop="integral" />
+        <af-table-column
+          label="电子卡类型"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateCardToName(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column label="电子卡余额" align="center" prop="balance" />
+        <af-table-column
+          label="会员等级"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateGradeToName(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="标签"
+          align="center"
+          prop="labelId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateLabelToName(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="优惠券领取方式"
+          align="center"
+          prop="couponIssueId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateIssueToName(scope.row) }}
+          </template>
+        </af-table-column>
+
+      </el-table>
+      <pagination
+        v-show="total > 1"
+        :total="total"
+        :pageSizes="[10, 50, 100, 200]"
+        :page.sync="queryForm.pageNum"
+        :limit.sync="queryForm.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!--拉入前提示框-->
+    <el-dialog
+      :title="'强拉入' + handleTypeName[handleType]"
+      :visible.sync="confirmDialog"
+      width="750px"
+      append-to-body
+    >
+      <div class="ml-5">
+        无论当前用户此刻是否已经有{{ handleTypeName[handleType] }}，
+        点击确认按钮后，会立刻将选中用户拉入新的
+        {{ handleTypeName[handleType] }}~
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleSubmitLable" size="small"
+          >确 定</el-button
+        >
+        <el-button @click="cancelSubmitLabel" size="small">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!--导入 表格反馈-->
+    <el-dialog
+      :title="'结果反馈'"
+      :visible.sync="tipOpen"
+      width="600px"
+      append-to-body
+      status-icon
+      @close="getList"
+    >
+      <div v-html="tipContent">
+        {{ tipContent }}
+      </div>
+    </el-dialog>
+
+    <!-- 新增单条导入 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="600px"
+      append-to-body
+      status-icon
+    >
+      <el-form ref="createForm" :model="createForm" label-width="180px">
+        <el-form-item
+          label="手机号"
+          prop="phoneNumber"
+          :rules="{
+            required: true,
+            message: '手机号不能为空',
+            trigger: 'blur',
+          }"
+        >
+          <input
+            type="text"
+            class="form-control"
+            v-model="createForm.phoneNumber"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="积分余额" prop="integral">
+          <input
+            type="text"
+            class="form-control"
+            v-model.number="createForm.integral"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="电子卡类型" prop="cardType">
+          <el-radio-group v-model="createForm.cardType">
+            <div>
+              <el-radio label="1">汽油卡</el-radio>
+              <el-radio label="2">柴油卡</el-radio>
+            </div>
+            <div>
+              <el-radio label="3">LNG卡</el-radio>
+              <el-radio label="4">CNG卡</el-radio>
+            </div>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="电子卡余额" prop="balance">
+          <input
+            type="text"
+            class="form-control"
+            v-model.number="createForm.balance"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="等级" prop="memberGrade">
+          <el-select v-model="createForm.memberGrade" placeholder="请选择">
+            <el-option :label="'暂不选择'" :value="''"> </el-option>
+            <el-option
+              v-for="ele in gradeList"
+              :key="ele.id"
+              :label="ele.grade"
+              :value="ele.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签" prop="labelId">
+          <el-select v-model="createForm.labelId" placeholder="请选择">
+            <el-option :label="'暂不选择'" :value="''"> </el-option>
+            <el-option
+              v-for="ele in labelList"
+              :key="ele.id"
+              :label="ele.labelName"
+              :value="ele.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优惠券领取方式" prop="couponIssueId">
+          <el-select v-model="createForm.couponIssueId" placeholder="请选择">
+            <el-option :label="'暂不选择'" :value="''"> </el-option>
+            <el-option
+              v-for="ele in issueList"
+              :key="ele.id"
+              :label="ele.issueRemark"
+              :value="ele.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!--多条导入的弹窗-->
+    <el-dialog
+      title="由Excel导入的数据"
+      :visible.sync="tempImportDialog"
+      append-to-body
+      status-icon
+      width="80vw"
+    >
+      <el-table :data="tempImportList" class="mt-5" style="margin-bottom: 10px">
+        <af-table-column label="手机" align="center" prop="phoneNumber" />
+        <af-table-column
+          label="积分"
+          align="center"
+          prop="integral"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateIntegralToInt(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="电子卡类型"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateCardToName(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column label="电子卡余额" align="center" prop="balance" />
+        <af-table-column
+          label="电子卡余额"
+          align="center"
+          prop="balance"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateBalanceToFloat(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="会员等级"
+          align="center"
+          prop="memberGrade"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateGradeToName(scope.row) }}
+          </template>
+        </af-table-column>
+        <af-table-column
+          label="标签"
+          align="center"
+          prop="labelId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateLabelToName(scope.row) }}
+          </template>
+        </af-table-column>
+
+        <af-table-column
+          label="优惠券领取方式"
+          align="center"
+          prop="couponIssueId"
+          width="160px"
+        >
+          <template slot-scope="scope">
+            {{ translateIssueToName(scope.row) }}
+          </template>
+        </af-table-column>
+      </el-table>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitExcel">确 定</el-button>
+        <el-button @click="cancelExcel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </PermissionContainer>
+</template>
+
+<script>
+import excel from "@/utils/excel";
+import {
+  getIssueList,
+  getGradeList,
+  getLabelList,
+  importExcel,
+  getImportList,
+  updateImportList,
+  delImportList,
+  upImport,
+} from "@/api/preData";
+
+export default {
+  name: "PreData_ImportedData",
+  data() {
+    return {
+      queryForm: {
+        pageNum: 1,
+        pageSize: 10,
+        phoneNumber: "",
+        importFlag:"1"
+      },
+      tipOpen: false,
+      tipContent: "",
+      title: "",
+      open: false,
+      // 总条数
+      total: 0,
+      importList: [],
+      tempImportList: [],
+      selectedImport: [],
+      confirmDialog: false,
+      tempImportDialog: false,
+      createForm: {
+        phoneNumber: "",
+        integral: 0,
+        cardType: "1",
+        balance: 0,
+        memberGrade: "",
+        labelId: "",
+        couponIssueId: "",
+      },
+      issueList: [],
+      labelList: [],
+      gradeList: [],
+      handleTypeName: ["等级", "标签", "优惠券领取方式"],
+      handleType: 1, // 0 等级 1 标签 2 优惠券领取方式
+      tempId: "",
+      tempArr: [],
+    };
+  },
+  computed: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getList();
+
+      getIssueList()
+        .then((res) => {
+          if (res.code == 200) {
+            if (res.rows == null) {
+              this.issueList = [];
+            } else {
+              this.issueList = res.rows;
+            }
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取优惠券领取方式失败~");
+        });
+      getLabelList()
+        .then((res) => {
+          if (res.code == 200) {
+            if (res.rows == null) {
+              this.labelList = [];
+            } else {
+              this.labelList = res.rows;
+            }
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取标签列表失败~");
+        });
+      getGradeList()
+        .then((res) => {
+          if (res.code == 200) {
+            if (res.rows == null) {
+              this.gradeList = [];
+            } else {
+              this.gradeList = res.rows;
+            }
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取等级列表失败~");
+        });
+    },
+    translateIntegralToInt(row) {
+      const integral = parseInt(row.integral);
+      if (isNaN(integral)) {
+        row.integral = 0;
+        return 0;
+      } else {
+        row.integral = integral;
+        return integral;
+      }
+    },
+    translateBalanceToFloat(row) {
+      const balance = parseFloat(row.balance);
+      if (isNaN(balance)) {
+        row.balance = 0;
+        return 0;
+      } else {
+        row.balance = balance;
+        return balance;
+      }
+    },
+    translateIssueToName(row) {
+      const id = row.couponIssueId;
+      const issue = this.issueList.find((ele) => {
+        return ele.id == id;
+      });
+      if (issue == undefined) {
+        row.couponIssueId = undefined;
+        return "----";
+      }
+      return issue.issueRemark;
+    },
+    translateGradeToName(row) {
+      const id = row.memberGrade;
+      const grade = this.gradeList.find((ele) => {
+        return ele.id == id;
+      });
+      if (grade == undefined) {
+        row.memberGrade = undefined;
+        return "----";
+      }
+      return grade.grade;
+    },
+    translateLabelToName(row) {
+      const id = row.labelId;
+      const label = this.labelList.find((ele) => {
+        return ele.id == id;
+      });
+      if (label == undefined) {
+        row.labelId = undefined;
+        return "----";
+      }
+      return label.labelName;
+    },
+    translateCardToName(row) {
+      const id = row.cardType;
+      const typeObj = {
+        1: "汽油卡",
+        2: "柴油卡",
+        3: "LNG卡",
+        4: "CNG卡",
+      };
+
+      const type = typeObj[id];
+      if (type == undefined) {
+        row.cardType = "";
+        return "----";
+      }
+      return type;
+    },
+    submitForm() {
+      this.$refs["createForm"].validate((valid) => {
+        if (valid) {
+          if (!this.createForm.excelId) {
+            importExcel([this.createForm])
+              .then((res) => {
+                this.open = false;
+                this.tipOpen = true;
+                this.tipContent = res.msg;
+              })
+              .catch(() => {
+                this.msgError("导入失败，请刷新重试~");
+              });
+          } else {
+            upImport(this.createForm).then((res) => {
+              this.open = false;
+              this.msgSuccess("修改成功");
+            });
+          }
+        }
+      });
+    },
+    cancel() {
+      this.open = false;
+    },
+    batchAdd() {
+      let upBut = document.getElementById("upload_file");
+      upBut.click();
+    },
+    handleAdd() {
+      this.title = "新增数据";
+      this.createForm = {
+        phoneNumber: "",
+        integral: 0,
+        cardType: "1",
+        balance: 0,
+        memberGrade: "",
+        labelId: "",
+        couponIssueId: "",
+      };
+      this.open = true;
+    },
+    handleSubmitLable() {
+      updateImportList({
+        type: this.handleType,
+        id: this.tempId,
+        phoneArr: this.tempArr,
+      })
+        .then((r) => {
+          this.getList();
+          this.confirmDialog = false;
+        })
+        .catch((e) => {
+          this.msgError("操作失败，请刷新后重试~");
+        });
+    },
+    cancelSubmitLabel() {
+      this.getList();
+      this.confirmDialog = false;
+    },
+    translationLabel(id) {
+      const label = this.labelList.find((ele) => {
+        return id == ele.id;
+      });
+      if (label == undefined) {
+        return "";
+      }
+      return label.labelName;
+    },
+    toUnGrade(phoneNumber) {
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(phoneNumber);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.phoneNumber) {
+            delArr.push(ele.phoneNumber);
+          }
+        });
+      }
+      this.handleType = 0;
+      this.tempArr = delArr;
+      this.delHandle();
+    },
+    toUnLabel(phone) {
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(phone);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.phoneNumber) {
+            delArr.push(ele.phoneNumber);
+          }
+        });
+      }
+      this.handleType = 1;
+      this.tempArr = delArr;
+      this.delHandle();
+    },
+    toUnIssue(phone) {
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(phone);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.phoneNumber) {
+            delArr.push(ele.phoneNumber);
+          }
+        });
+      }
+      this.handleType = 2;
+      this.tempArr = delArr;
+      this.delHandle();
+    },
+    upImport(row) {
+      this.createForm = row;
+      this.open = true;
+    },
+    delImport(row){
+      const delArr = [];
+      if (this.selectedImport.length == 0) {
+        delArr.push(row.excelId);
+      } else {
+        this.selectedImport.map((ele) => {
+          if (!!ele.excelId) {
+            delArr.push(ele.excelId);
+          }
+        });
+      }
+      delImportList(delArr).then(res=>{
+        this.getList()
+        this.msgSuccess("删除成功！")
+      }).catch(err=>{
+        this.msgError("删除失败，请刷新后重试~")
+      })
+    },
+    delHandle() {
+      updateImportList({
+        type: this.handleType,
+        phoneArr: this.tempArr,
+      })
+        .then((r) => {
+          this.getList();
+          this.confirmDialog = false;
+        })
+        .catch((e) => {
+          this.msgError("操作失败，请刷新后重试~");
+        });
+    },
+    selectionChange(selection) {
+      console.log("selectionChange", selection);
+
+      this.selectedImport = selection;
+    },
+    getList() {
+      getImportList(this.queryForm)
+        .then((res) => {
+          if (res.rows == null) {
+            this.importList = [];
+            this.total = 0;
+          } else {
+            this.importList = res.rows;
+            this.total = res.total;
+          }
+        })
+        .catch((err) => {
+          this.msgError("拉取导入的数据列表失败");
+        });
+    },
+    submitExcel() {
+      importExcel(this.tempImportList)
+        .then((res) => {
+          this.tempImportDialog = false;
+          this.tipOpen = true;
+          this.tipContent = res.msg;
+        })
+        .catch(() => {
+          this.tempImportDialog = false;
+          this.msgError("导入失败，请刷新后重试");
+        });
+    },
+    cancelExcel() {
+      this.tempImportDialog = false;
+    },
+    handleQuery() {
+      this.queryForm.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    toGrade(phoneAndId) {
+      const phoneAndIdArr = phoneAndId.match(/\d{1,}/g);
+      const phone = phoneAndIdArr[0];
+      const id = phoneAndIdArr[1];
+
+      if (!id || !phone) {
+        this.msgError("强拉等级失败，刷新重试~");
+        return;
+      }
+
+      if (this.selectedImport.length == 0) {
+        this.tempArr = [phone];
+      } else {
+        this.tempArr = [];
+        this.selectedImport.map((ele) => {
+          this.tempArr.push(ele.phoneNumber);
+        });
+      }
+
+      this.handleType = 0;
+      this.tempId = id;
+
+      this.confirmDialog = true;
+    },
+    toLabel(phoneAndId) {
+      const phoneAndIdArr = phoneAndId.match(/\d{1,}/g);
+      const phone = phoneAndIdArr[0];
+      const id = phoneAndIdArr[1];
+
+      if (!id || !phone) {
+        this.msgError("强拉标签失败，刷新重试~");
+        return;
+      }
+
+      if (this.selectedImport.length == 0) {
+        this.tempArr = [phone];
+      } else {
+        this.tempArr = [];
+        this.selectedImport.map((ele) => {
+          this.tempArr.push(ele.phoneNumber);
+        });
+      }
+
+      this.handleType = 1;
+      this.tempId = id;
+
+      this.confirmDialog = true;
+    },
+    toIssue(phoneAndId) {
+      const phoneAndIdArr = phoneAndId.match(/\d{1,}/g);
+      const phone = phoneAndIdArr[0];
+      const id = phoneAndIdArr[1];
+
+      if (!id || !phone) {
+        this.msgError("强拉标签失败，刷新重试~");
+        return;
+      }
+
+      if (this.selectedImport.length == 0) {
+        this.tempArr = [phone];
+      } else {
+        this.tempArr = [];
+        this.selectedImport.map((ele) => {
+          this.tempArr.push(ele.phoneNumber);
+        });
+      }
+
+      this.handleType = 2;
+      this.tempId = id;
+
+      this.confirmDialog = true;
+    },
+    handleUpload(e) {
+      const files = e.target.files;
+      let file = files[0];
+      if(!file){
+        document.getElementById("upload_file").value = null;
+        return;
+      }
+      const fileExt = file.name.split(".").pop().toLocaleLowerCase();
+      if (fileExt === "xlsx" || fileExt === "xls") {
+        document.getElementById("upload_file").value = null;
+        this.readFile(file);
+      } else {
+        this.msgError("请选择后缀为.xlsx或者.xls的EXCEL文件");
+      }
+      return false;
+    },
+    readFile(file) {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onloadstart = (e) => {
+        console.log("onloadstart");
+      };
+      reader.onprogress = (e) => {
+        console.log("onprogress");
+        this.progressPercent = Math.round((e.loaded / e.total) * 100);
+      };
+      reader.onerror = (e) => {
+        this.msgError("文件读取出错");
+      };
+      reader.onload = (e) => {
+        console.log("onload");
+        const data = e.target.result;
+        const { header, results } = excel.read(data, "array");
+        //验证excel导入的有效性
+        if (!header.includes("phoneNumber")) {
+          this.msgError("请使用官方Excel模板导入数据");
+          return;
+        }
+
+        this.tempImportList = results;
+        this.tempImportDialog = true;
+      };
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.app-container {
+  .container {
+    .row {
+      margin-bottom: 10px;
+    }
+  }
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>