feat: support import csv; !#zh: 支持导入 csv

ly525
1 parent 129fcf9b
Showing 5 changed files with 132 additions and 26 deletions
front-end/h5/package.json
front-end/h5/src/components/core/support/csv-import.js
front-end/h5/src/components/core/support/excel.js
front-end/h5/src/components/plugins/lbp-table.js
front-end/h5/yarn.lock
@@ -26,6 +26,7 @@
     "font-awesome": "4.7.0",
     "hotkeys-js": "^3.7.6",
     "html2canvas": "^1.0.0-rc.3",
+    "papaparse": "^5.2.0",
     "proxy-agent": "^3.1.0",
     "qrcode": "^1.4.1",
     "register-service-worker": "^1.6.2",
@@ -57,6 +58,7 @@
     "cross-env": "^6.0.3",
     "dart-sass": "^1.23.7",
     "eslint": "^5.16.0",
+    "eslint-plugin-cypress": "^2.11.1",
     "eslint-plugin-vue": "^5.0.0",
     "less-loader": "^6.1.1",
     "sass": "^1.18.0",
+import Papa from 'papaparse'
+
+const validFileMimeTypes =  ['text/csv', 'text/x-csv', 'application/vnd.ms-excel', 'text/plain']
+export default {
+  name: 'lbs-csv-import',
+  methods: {
+    checkMimeType (type) {
+      return validFileMimeTypes.indexOf(type) > -1
+    },
+    validFileMimeType (e) {
+      e.preventDefault()
+      let file = this.$refs.csv.files[0]
+      const isValidFileMimeType = this.checkMimeType(file.type)
+      if (isValidFileMimeType) this.loadFile()
+    },
+    loadFile () {
+      /**
+       * output {String}
+          "columnA,columnB,columnC
+          "Susan",41,a
+          "Mike",5,b
+          "Jake",33,c
+          "Jill",30,d
+          "
+        * csv {Object}
+        {
+          "data": [
+            ["columnA", "columnB", "columnC"],
+            ["Susan", "41", "a"],
+            ["Mike", "5", "b"],
+            ["Jake", "33", "c"],
+            ["Jill", "30", "d"],
+          ],
+          "errors": [],
+          "meta": {
+            "delimiter": ",",
+            "linebreak": "\n",
+            "aborted": false,
+            "truncated": false,
+            "cursor": 72
+          }
+        }
+       */
+      this.readFile((output) => {
+        // const sample = Papa.parse(output, { preview: 2, skipEmptyLines: true })
+        const csv = Papa.parse(output, { skipEmptyLines: true })
+        this.$emit('parse', csv)
+        this.$refs.input.value = ''
+      })
+    },
+    readFile (callback) {
+      let file = this.$refs.csv.files[0]
+      if (file) {
+        let reader = new FileReader()
+        reader.readAsText(file, 'UTF-8')
+        reader.onload = function (evt) {
+          callback(evt.target.result)
+        }
+        reader.onerror = function () {
+        }
+      }
+    }
+  },
+  render () {
+    const randomId = +new Date()
+    return <div style="height: 50px;">
+      <label for={randomId} class="ant-btn ant-btn-primary ant-btn-sm">请选择CSV文件</label>
+      {/* <input id={randomId} style="visibility:hidden;" type="file"></input> */}
+      <input ref="input" id={randomId} ref="csv" type="file" onChange={this.validFileMimeType} style="visibility:hidden;" name="csv">xxxx</input>
+    </div>
+  }
+}
@@ -4,7 +4,7 @@
  
 import Spreadsheet from 'x-data-spreadsheet'
 import Parser from '../../../utils/excel-parser'
-
+import CsvImport from './csv-import'
 // const getDefaultTableMatrix = () => [
 //   [1, 2, 3, 4],
 //   [5, 6, 7, 8],
@@ -34,8 +34,24 @@ export default {
       }
     }
   },
+  methods: {
+    parseCSV (csv) {
+      const sheetData = Parser.binaryMatrix2excel(csv.data)
+      this.$emit('change', csv.data)
+      this.refreshSheet({ rows: sheetData })
+    },
+    refreshSheet (data) {
+      this.sheet.loadData(data)
+      this.sheet.reRender()
+    }
+  },
   render () {
-    return <div id="excel-wrapper" ref="excel" style="margin-right: 12px;width: 100%;overflow: scroll"></div>
+    return <div>
+      <span>方案1: 选择导入 csv 文件</span>
+      <CsvImport onParse={this.parseCSV} />
+      <span>方案2: 直接编辑 Excel</span>
+      <div id="excel-wrapper" ref="excel" style="margin-right: 12px;width: 100%;overflow: scroll"></div>
+    </div>
   },
   mounted () {
     const ele = this.$refs.excel
@@ -48,17 +64,17 @@ export default {
       //   width: () => ele.getBoundingClientRect().width
       // }
     }
-    new Spreadsheet(ele, options)
-      .loadData({
-        rows: this.innerItems
-      }) // load data
-      .change(excelData => {
-        // console.log('----------')
-        // console.log(excelData)
-        // console.log(this.formatter(excelData))
-        // console.log('----------')
-        this.$emit('change', this.formatter(excelData) /** BinaryMatrix */)
-        // save data to db
-      })
+    this.sheet = new Spreadsheet(ele, options)
+    this.sheet.loadData({
+      rows: this.innerItems
+    }).change(excelData => {
+      debugger
+      // console.log('----------')
+      // console.log(excelData)
+      // console.log(this.formatter(excelData))
+      // console.log('----------')
+      this.$emit('change', this.formatter(excelData) /** BinaryMatrix */)
+      // save data to db
+    })
   }
 }
 // https://github.com/luban-h5-components/plugin-common-props
 import PropTypes from '@luban-h5/plugin-common-props'
-import { addListener as addResizeListener, removeListener } from 'resize-detector'
+import { addListener as addResizeListener, removeListener as removeResizeListener } from 'resize-detector'
 import './styles/table.scss'
  
 function sum (arr = [], key) {
@@ -27,10 +27,10 @@ export default {
     freezeCount: PropTypes.number({ label: '冻结列数(px)', defaultValue: 0 }),
     dataset: PropTypes.excel({
       defaultValue: () => [
-        [ '列A', '列B', '列C'],
-        [ '————', '————', '————'],
-        [ '————', '————', '————'],
-        [ '————', '————', '————']
+        ['列A', '列B', '列C'],
+        ['————', '————', '————'],
+        ['————', '————', '————'],
+        ['————', '————', '————']
       ]
     })
   },
@@ -94,6 +94,12 @@ export default {
       this.mainTableEle = root.querySelector('.main-table-wrapper > table')
       this.fixedTableWrapperEle = root.querySelector('.fixed-table-wrapper')
       this.fixedTableEle = root.querySelector('.left-table')
+    },
+    __resizeHandler () {
+      this.setTableWidth()
+      if (this.freezeCount) {
+        this.setFixedTableStyle()
+      }
     }
   },
  
@@ -101,11 +107,9 @@ export default {
     this.initElements()
     this.setTableWidth()
     this.setFixedTableStyle()
-    addResizeListener(this.$refs.lbpTable, () => {
-      this.setTableWidth()
-      if (this.freezeCount) {
-        this.setFixedTableStyle()
-      }
-    })
+    addResizeListener(this.$refs.lbpTable, this.__resizeHandler)
+  },
+  destroy () {
+    removeResizeListener(this.$el, this.__resizeHandler)
   }
 }
@@ -3926,6 +3926,13 @@ eslint-module-utils@^2.4.0:
     debug "^2.6.8"
     pkg-dir "^2.0.0"
  
+eslint-plugin-cypress@^2.11.1:
+  version "2.11.1"
+  resolved "https://registry.npm.taobao.org/eslint-plugin-cypress/download/eslint-plugin-cypress-2.11.1.tgz#a945e2774b88211e2c706a059d431e262b5c2862"
+  integrity sha1-qUXid0uIIR4scGoFnUMeJitcKGI=
+  dependencies:
+    globals "^11.12.0"
+
 eslint-plugin-es@^1.3.1:
   version "1.4.1"
   resolved "https://registry.npm.taobao.org/eslint-plugin-es/download/eslint-plugin-es-1.4.1.tgz#12acae0f4953e76ba444bfd1b2271081ac620998"
@@ -4922,7 +4929,7 @@ glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
  
-globals@^11.0.1, globals@^11.1.0, globals@^11.7.0:
+globals@^11.0.1, globals@^11.1.0, globals@^11.12.0, globals@^11.7.0:
   version "11.12.0"
   resolved "https://registry.npm.taobao.org/globals/download/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha1-q4eVM4hooLq9hSV1gBjCp+uVxC4=
@@ -7937,6 +7944,11 @@ pako@~1.0.5:
   resolved "https://registry.npm.taobao.org/pako/download/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
   integrity sha1-Qyi621CGpCaqkPVBl31JVdpclzI=
  
+papaparse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npm.taobao.org/papaparse/download/papaparse-5.2.0.tgz#97976a1b135c46612773029153dc64995caa3b7b"
+  integrity sha1-l5dqGxNcRmEncwKRU9xkmVyqO3s=
+
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/parallel-transform/download/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"