家里的样式

2019-09-18 09:34:02 +08:00
commit 02d1678fff
681 changed files with 133918 additions and 0 deletions
--- a/src/views/TechnologyCenter/ImportParts/UploadExcel/index.vue
+++ b/src/views/TechnologyCenter/ImportParts/UploadExcel/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <div style="display: inline-block;width: 100%;height: 100%;margin: 10px 20px 40px 10px">
+    <input id="excel-upload-input" ref="excel-upload-input" type="file" multiple="multiple" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
+    <div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
+      将Excel文件拖到这或
+      <el-button style="margin-left:16px;" size="small" icon="el-icon-search" type="success" @click="handleUpload">浏览</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx'
+
+export default {
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        itemFile: [],
+        worksheet: []
+      }
+    }
+  },
+  methods: {
+    generateDate({ itemFile, worksheet }) {
+      this.excelData.itemFile.push(itemFile)
+      this.excelData.worksheet.push(worksheet)
+    },
+    handleDrop(e) {
+      this.excelData.itemFile = []
+      this.excelData.worksheet = [] // 每次拖拽都清空一次
+      e.stopPropagation()
+      e.preventDefault()
+      const files = e.dataTransfer.files
+      for (let i = 0; i < files.length; i++) { // 支持多个文件
+        const itemFile = files[i]
+        this.readerData(itemFile)
+      }
+      this.$emit('on-selected-file', this.excelData)
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    handleDragover(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    handleUpload() {
+      this.excelData.itemFile = []
+      this.excelData.worksheet = [] // 每次点击“浏览”都清空一次
+      document.getElementById('excel-upload-input').click()
+    },
+    handkeFileChange(e) {
+      const files = e.target.files
+      for (let i = 0; i < files.length; i++) { // 支持多个文件
+        const itemFile = files[i]
+        if (!itemFile) return
+        this.readerData(itemFile)
+      }
+      this.$emit('on-selected-file', this.excelData)
+      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+    },
+    readerData(itemFile) {
+      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] // cjnsheetname
+        const worksheet = workbook.Sheets[firstSheetName] // 默认firstsheet
+        this.generateDate({ itemFile, worksheet })
+      }
+      reader.readAsArrayBuffer(itemFile)
+    },
+    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
+    }
+  }
+}
+</script>
+
+<style scoped>
+#excel-upload-input{
+  display: none;
+  z-index: -9999;
+}
+#drop{
+  border: 2px dashed #bbb;
+  width: 600px;
+  line-height: 160px;
+  margin: 0;
+  font-size: 24px;
+  border-radius: 5px;
+  text-align: center;
+  color: #bbb;
+  position: relative;
+}
+</style>