上传文件至 'src/xt_pages/workforce/components/scheduleUploadExcel'

src/xt_pages/workforce/components/scheduleUploadExcel/index.vue

@@ -1,180 +1,182 @@
-<template>
-  <div>
-    <el-dialog
-      :visible.sync="msgTipVisible"
-      width="40%"
-    >
-      <span>若执行排班导入,系统将会清除当前已有临时排班数据,是否继续导入？</span>
-      <span slot="footer" class="dialog-footer">
-    <el-button @click="msgTipVisible = false">取 消</el-button>
-    <el-button type="primary" @click="handleUpload()">确 定</el-button>
-  </span>
-    </el-dialog>
-     <input id="excel-upload-input" ref="excel-upload-input" type="file"  accept=".xlsx,.xls,.xltx," @change="handleClick" >
-    <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="msgTipVisible = true">导入排班
-    </el-button>
-  </div>
-</template>
-
-<script>
-  import XLSX from 'xlsx'
-
-  export default {
-    name: "scheduleUploadExcel",
-    props: {
-      beforeUpload: Function,
-      onSuccess: Function
-    },
-    data() {
-      return {
-        loading: false,
-        msgTipVisible:false,
-        excelData: {
-          header: null,
-          results: null
-        }
-      }
-    },
-    methods: {
-      generateDate({ header, results }) {
-        console.log("header",header)
-        console.log("results",results)
-        this.excelData.header = header
-        this.excelData.results = results
-
-        this.onSuccess && this.onSuccess(this.excelData)
-      },
-      handleDrop(e) {
-        e.stopPropagation()
-        e.preventDefault()
-        if (this.loading) return
-        const files = e.dataTransfer.files
-        if (files.length !== 1) {
-          this.$message.error('Only support uploading one file!')
-          return
-        }
-        const rawFile = files[0] // only use files[0]
-
-        if (!this.isExcel(rawFile)) {
-          this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
-          return false
-        }
-        this.upload(rawFile)
-        e.stopPropagation()
-        e.preventDefault()
-      },
-      handleDragover(e) {
-        e.stopPropagation()
-        e.preventDefault()
-        e.dataTransfer.dropEffect = 'copy'
-      },
-      handleUpload() {
-        this.msgTipVisible = false
-
-        document.getElementById('excel-upload-input').click()
-      },
-      handleClick(e) {
-
-        const files = e.target.files
-        const rawFile = files[0] // only use files[0]
-        console.log("rawfiel",rawFile)
-        if (!rawFile)
-        return
-        this.upload(rawFile)
-
-      },
-      upload(rawFile) {
-
-        this.$refs['excel-upload-input'].value = null // fix can't select the same excel
-        console.log("3333",this.beforeUpload)
-        if (!this.beforeUpload) {
-          this.readerData(rawFile)
-          return
-        }
-        const before = this.beforeUpload(rawFile)
-        console.log("before",before)
-        if (before) {
-          this.readerData(rawFile)
-        }
-      },
-      readerData(rawFile) {
-
-        this.loading = true
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader()
-          reader.onload = e => {
-
-            const data = e.target.result
-            console.log("data22222",data)
-            const fixedData = this.fixdata(data)
-            const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
-            const firstSheetName = workbook.SheetNames[0]
-            const worksheet = workbook.Sheets[firstSheetName]
-
-            const header = this.get_header_row(worksheet)
-
-            const results = XLSX.utils.sheet_to_json(worksheet)
-            this.generateDate({ header, results })
-            this.loading = false
-            resolve()
-          }
-          reader.readAsArrayBuffer(rawFile)
-        })
-      },
-      fixdata(data) {
-        let o = ''
-        let l = 0
-        const w = 10240
-        for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
-        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
-        return o
-      },
-      get_header_row(sheet) {
-
-        if(sheet['!ref'] == undefined){
-          this.loading = false
-          return
-        }
-
-        const headers = []
-        const range = XLSX.utils.decode_range(sheet['!ref'])
-        let C
-        const R = range.s.r /* start in the first row */
-        for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
-          var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
-          var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
-          if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
-          headers.push(hdr)
-        }
-        return headers
-
-
-
-      },
-      isExcel(file) {
-
-        return /\.(xlsx|xls|csv)$/.test(file.name)
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  #excel-upload-input {
-    display: none;
-    z-index: -9999;
-  }
-
-  #drop {
-    border: 2px dashed #bbb;
-    width: 600px;
-    height: 160px;
-    line-height: 160px;
-    margin: 0 auto;
-    font-size: 24px;
-    border-radius: 5px;
-    text-align: center;
-    color: #bbb;
-    position: relative;
-  }
-</style>
+<template>
+  <div>
+    <el-dialog
+      :visible.sync="msgTipVisible"
+      width="40%"
+      :modal-append-to-body='false'
+      :close-on-click-modal="false"
+    >
+      <span>若执行排班导入,系统将会清除当前已有临时排班数据,是否继续导入？</span>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="msgTipVisible = false">取 消</el-button>
+    <el-button type="primary" @click="handleUpload()">确 定</el-button>
+  </span>
+    </el-dialog>
+     <input id="excel-upload-input" ref="excel-upload-input" type="file"  accept=".xlsx,.xls,.xltx," @change="handleClick" >
+    <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="msgTipVisible = true">导入排班
+    </el-button>
+  </div>
+</template>
+
+<script>
+  import XLSX from 'xlsx'
+
+  export default {
+    name: "scheduleUploadExcel",
+    props: {
+      beforeUpload: Function,
+      onSuccess: Function
+    },
+    data() {
+      return {
+        loading: false,
+        msgTipVisible:false,
+        excelData: {
+          header: null,
+          results: null
+        }
+      }
+    },
+    methods: {
+      generateDate({ header, results }) {
+        console.log("header",header)
+        console.log("results",results)
+        this.excelData.header = header
+        this.excelData.results = results
+
+        this.onSuccess && this.onSuccess(this.excelData)
+      },
+      handleDrop(e) {
+        e.stopPropagation()
+        e.preventDefault()
+        if (this.loading) return
+        const files = e.dataTransfer.files
+        if (files.length !== 1) {
+          this.$message.error('Only support uploading one file!')
+          return
+        }
+        const rawFile = files[0] // only use files[0]
+
+        if (!this.isExcel(rawFile)) {
+          this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
+          return false
+        }
+        this.upload(rawFile)
+        e.stopPropagation()
+        e.preventDefault()
+      },
+      handleDragover(e) {
+        e.stopPropagation()
+        e.preventDefault()
+        e.dataTransfer.dropEffect = 'copy'
+      },
+      handleUpload() {
+        this.msgTipVisible = false
+
+        document.getElementById('excel-upload-input').click()
+      },
+      handleClick(e) {
+
+        const files = e.target.files
+        const rawFile = files[0] // only use files[0]
+        console.log("rawfiel",rawFile)
+        if (!rawFile)
+        return
+        this.upload(rawFile)
+
+      },
+      upload(rawFile) {
+
+        this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+        console.log("3333",this.beforeUpload)
+        if (!this.beforeUpload) {
+          this.readerData(rawFile)
+          return
+        }
+        const before = this.beforeUpload(rawFile)
+        console.log("before",before)
+        if (before) {
+          this.readerData(rawFile)
+        }
+      },
+      readerData(rawFile) {
+
+        this.loading = true
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onload = e => {
+
+            const data = e.target.result
+            console.log("data22222",data)
+            const fixedData = this.fixdata(data)
+            const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+            const firstSheetName = workbook.SheetNames[0]
+            const worksheet = workbook.Sheets[firstSheetName]
+
+            const header = this.get_header_row(worksheet)
+
+            const results = XLSX.utils.sheet_to_json(worksheet)
+            this.generateDate({ header, results })
+            this.loading = false
+            resolve()
+          }
+          reader.readAsArrayBuffer(rawFile)
+        })
+      },
+      fixdata(data) {
+        let o = ''
+        let l = 0
+        const w = 10240
+        for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+        return o
+      },
+      get_header_row(sheet) {
+
+        if(sheet['!ref'] == undefined){
+          this.loading = false
+          return
+        }
+
+        const headers = []
+        const range = XLSX.utils.decode_range(sheet['!ref'])
+        let C
+        const R = range.s.r /* start in the first row */
+        for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+          var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
+          var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+          if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+          headers.push(hdr)
+        }
+        return headers
+
+
+
+      },
+      isExcel(file) {
+
+        return /\.(xlsx|xls|csv)$/.test(file.name)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  #excel-upload-input {
+    display: none;
+    z-index: -9999;
+  }
+
+  #drop {
+    border: 2px dashed #bbb;
+    width: 600px;
+    height: 160px;
+    line-height: 160px;
+    margin: 0 auto;
+    font-size: 24px;
+    border-radius: 5px;
+    text-align: center;
+    color: #bbb;
+    position: relative;
+  }
+</style>