add: 增加上传下载excel数据操作逻辑

src/components/uploadExcel/index.vue

 <template>
   <div>
-    <input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls, .csv" class="c-hide" @change="handkeFileChange">
+    <input id="excel-upload-input" :ref="'excel-upload-input'+currentIndex" type="file" accept=".xlsx, .xls, .csv" class="c-hide excel-upload-input" @change="handkeFileChange">
     <div id="drop">
       <el-button style="margin-left:16px;" size="mini" type="text" @click="handleUpload">点击导入会员</el-button>
-      <div class="excel-upload__tip">只能上传一个文件,且不超过</div>
+      <div class="excel-upload__tip">只能上传一个excle文件（2003版本以上），且数据不超过5000条</div>
     </div>
   </div>
 </template>
@@ -12,20 +12,32 @@
 import XLSX from 'xlsx'
 
 export default {
+  props:{
+    currentIndex: {
+      type: [String,Number]
+    },
+    excelBodyData: Array,
+    excelHeader: Array
+  },
   data() {
     return {
       loading: false,
+      useIndex: null,
       excelData: {
         header: null,
-        results: null
+        results: null,
+        name: null
       }
     }
   },
   methods: {
-    generateDate({ header, results }) {
-      this.excelData.header = header
-      this.excelData.results = results
-      this.$emit('on-selected-file', this.excelData)
+    generateDate({ header, results, fileName }) {
+      this.excelData.header = header;
+      this.excelData.results = results;
+      this.excelData.name = fileName;
+      console.log(this.useIndex)
+      this.$emit('on-selected-file', this.excelData);
+      this.$emit('selectIndex', this.useIndex);
     },
     handleDrop(e) {
       e.stopPropagation()
@@ -46,28 +58,57 @@ export default {
       e.dataTransfer.dropEffect = 'copy'
     },
     handleUpload() {
-      console.log(this.excelData.header)
-      document.getElementById('excel-upload-input').click()
+      var that = this
+      console.log(this.excelData,this.excelData.header,this.currentIndex)
+      if (!!that.excelHeader&&!!that.excelHeader.length) {
+
+        that.$confirm('目前操作没有结束，点击其他导入现有数据不会保存，\n 确认要离开吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+        }).then(() => {
+          // 先清空原有数据
+          that.$emit('clearOldData',that.currentIndex)
+          document.getElementsByClassName('excel-upload-input')[that.useIndex].click()
+        }).catch(() => {
+
+        });
+        return false;
+      }
+
+      document.getElementsByClassName('excel-upload-input')[that.useIndex].click()
+
     },
     handkeFileChange(e) {
       const files = e.target.files
-      console.log(e)
       const itemFile = files[0] // only use files[0]
       if (!itemFile) return
+        console.log(itemFile.name)
       this.readerData(itemFile)
-      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+      this.$refs['excel-upload-input'+this.currentIndex].value = null // fix can't select the same excel
     },
     readerData(itemFile) {
+      var that = this;
+      console.log(itemFile.name)
+      var fileName = itemFile.name;
       const reader = new FileReader()
       reader.onload = e => {
         const data = e.target.result
         const fixedData = this.fixdata(data)
+
         const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
         const firstSheetName = workbook.SheetNames[0]
         const worksheet = workbook.Sheets[firstSheetName]
+        // console.log(Object.keys(worksheet).indexOf('!ref'),typeof(worksheet))
+        if (Object.keys(worksheet).indexOf('!ref') == -1) {
+          that.$message.error({
+            duration: 1000,
+            message: "文档内容为空"
+          })
+          return false;
+        }
         const header = this.get_header_row(worksheet)
         const results = XLSX.utils.sheet_to_json(worksheet)
-        this.generateDate({ header, results })
+        this.generateDate({ header, results, fileName })
       }
       reader.readAsArrayBuffer(itemFile)
     },
@@ -92,6 +133,16 @@ export default {
       }
       return headers
     }
+  },
+  watch: {
+    currentIndex: function(newdata,oldData){
+      console.log("watch:",newdata)
+      this.useIndex = newdata
+    }
+  },
+  mounted() {
+    console.log(this.currentIndex)
+    this.useIndex = this.currentIndex
   }
 }
 </script>

static/css/public.css

@@ -422,10 +422,18 @@ input:focus {
   width: 184px;
 }
 
+.w-200 {
+  width: 200px;
+}
+
 .w-290 {
   width: 290px;
 }
 
+.w-309 {
+  width: 309px;
+}
+
 .w-375 {
   width: 375px;
 }
@@ -1184,7 +1192,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
 
 .manualTagEdit-wrap__set .input-label {
   position: absolute;
-  right: 80px;
+  right: 60px;
   top: 10px;
   font-size: 12px;
   color: #909399;