From 4dd4b8cd494060adc837280a88acffbb3ba749b9 Mon Sep 17 00:00:00 2001
From: "tianyiming26@gmail.com" <tianyiming26@gmail.com>
Date: Sun, 25 Aug 2019 02:01:47 +0800
Subject: [PATCH 1/4] add: excel route

---
 src/router/index.js         |  2 ++
 src/router/modules/excel.js | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/router/modules/excel.js

diff --git a/src/router/index.js b/src/router/index.js
index cb7c20d..7030f97 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,7 @@ import widgets from './modules/widgets';
 import uiComponents from './modules/ui-components';
 import tables from './modules/tables';
 import charts from './modules/charts';
+import excel from './modules/excel';
 
 Vue.use(Router);
 
@@ -64,6 +65,7 @@ export default new Router({
         uiComponents,
         tables,
         charts,
+        excel,
       ],
     },
     {
diff --git a/src/router/modules/excel.js b/src/router/modules/excel.js
new file mode 100644
index 0000000..177baf3
--- /dev/null
+++ b/src/router/modules/excel.js
@@ -0,0 +1,22 @@
+const routes = {
+  path: '/excel',
+  name: 'Excel',
+  component: {
+    template: '<router-view></router-view>',
+  },
+  meta: {
+    hasMulSub: true,
+    hidden: false,
+    icon: 'grid_on',
+  },
+  children: [
+    {
+      path: 'upload-excel',
+      name: 'UploadExcel',
+      component: () => import('@/views/excel/ExcelUpload.vue'),
+      meta: {},
+    },
+  ],
+};
+
+export default routes;

From be36e1156bf56be95ed5199c2b5dff7325910326 Mon Sep 17 00:00:00 2001
From: "tianyiming26@gmail.com" <tianyiming26@gmail.com>
Date: Sun, 25 Aug 2019 03:02:14 +0800
Subject: [PATCH 2/4] dnf: upload excel

---
 package-lock.json                    | 141 +++++++++++++++++++---
 package.json                         |   3 +-
 src/components/excel/ExcelUpload.vue | 167 +++++++++++++++++++++++++++
 src/i18n/locales.js                  |  12 ++
 src/views/excel/ExcelUpload.vue      |  19 +++
 5 files changed, 327 insertions(+), 15 deletions(-)
 create mode 100644 src/components/excel/ExcelUpload.vue
 create mode 100644 src/views/excel/ExcelUpload.vue

diff --git a/package-lock.json b/package-lock.json
index ee3fafc..a92dd17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1659,6 +1659,15 @@
       "integrity": "sha512-4diPfzWbLEIElVG4AnqP+00SULlPzNuyJFNnmMrLgyaxG6tZXJ1sn7mjBu4fHrJE+Yp/jgylOweJn2xsLMFggQ==",
       "dev": true
     },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "ajv": {
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
@@ -2746,6 +2755,17 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "cfb": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.1.3.tgz",
+      "integrity": "sha512-joXBW0nMuwV9no7UTMiyVJnQL6XIU3ThXVjFUDHgl9MpILPOomyfaGqC290VELZ48bbQKZXnQ81UT5HouTxHsw==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "commander": "^2.16.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      }
+    },
     "chalk": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
@@ -3004,7 +3024,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -3050,6 +3071,22 @@
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.0.tgz",
       "integrity": "sha512-3Ter+tYtRlTNtxtYdYNPxGxBL/b3cMcvPdPm70gvmcOO2Rauv/fUEewWa0tT596Hosv6ea2mtpx28OXBy1mQCg=="
     },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
+      "requires": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
+        }
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -3448,6 +3485,15 @@
         "parse-json": "^4.0.0"
       }
     },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@@ -4812,6 +4858,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -5287,6 +5338,11 @@
       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -5361,7 +5417,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5382,12 +5439,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5402,17 +5461,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5529,7 +5591,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5541,6 +5604,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5555,6 +5619,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5562,12 +5627,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5586,6 +5653,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5666,7 +5734,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5678,6 +5747,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5763,7 +5833,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5799,6 +5870,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5818,6 +5890,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5861,12 +5934,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -7382,6 +7457,7 @@
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
       "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
       "dev": true,
+      "optional": true,
       "requires": {
         "prelude-ls": "~1.1.2",
         "type-check": "~0.3.2"
@@ -9877,7 +9953,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "prepend-http": {
       "version": "2.0.0",
@@ -9901,6 +9978,11 @@
         "utila": "~0.4"
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -10576,7 +10658,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",
@@ -11559,6 +11642,14 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "ssf": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.2.tgz",
+      "integrity": "sha512-rDhAPm9WyIsY8eZEKyE8Qsotb3j/wBdvMWBUsOhJdfhKGLfQidRjiBUV0y/MkyCLiXQ38FG6LWW/VYUtqlIDZQ==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -12571,6 +12662,7 @@
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
       "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
       "dev": true,
+      "optional": true,
       "requires": {
         "prelude-ls": "~1.1.2"
       }
@@ -13665,6 +13757,27 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xlsx": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.15.1.tgz",
+      "integrity": "sha512-z+o4+QPMc32EPboLCzJAz94o0Zyy+8jrmWTsVpfzwknFln9qDO6/HN1KrGGVC4//sGA7dh4R3HA4fhbGIKCDOA==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.3",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "ssf": "~0.10.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
diff --git a/package.json b/package.json
index fa76153..9656d0c 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,8 @@
     "vue-router": "^3.0.6",
     "vuedraggable": "^2.21.0",
     "vuetify": "^1.5.16",
-    "vuex": "^3.1.1"
+    "vuex": "^3.1.1",
+    "xlsx": "^0.15.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",
diff --git a/src/components/excel/ExcelUpload.vue b/src/components/excel/ExcelUpload.vue
new file mode 100644
index 0000000..7a06f63
--- /dev/null
+++ b/src/components/excel/ExcelUpload.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <v-subheader>
+      <label for="file">Spreadsheet</label>
+    </v-subheader>
+    <input
+      id="file"
+      type="file"
+      ref="excel-upload-input"
+      class="excel-upload-input"
+      :accept="sheetJSFT"
+      @change="handleUpload"
+    >
+    <div
+      class="drop-wrapper"
+      @drop="handleDropFile"
+      @dragenter="handleSuppress"
+      @dragover="handleSuppress"
+    >
+      Drop a file here or
+      <v-btn
+        small
+        color="blue-grey"
+        style="line-height: 30px"
+        @click="handleUpload"
+      >
+        Upload
+      </v-btn>
+    </div>
+
+    <div>
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th
+              v-for="c in cols"
+              :key="c.key"
+            >{{c}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(r, key) in fileData"
+            :key="key"
+          >
+            <td
+              v-for="c in cols"
+              :key="c.key"
+            > {{ r[c.key] }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx';
+
+export default {
+  name: 'ExcelUpload',
+  props: {
+    beforeUpload: Function,
+    onSuccess: Function,
+  },
+  data() {
+    const SheetJSFT = [
+      'xlsx',
+      'xlsb',
+      'xlsm',
+      'xls',
+      'xml',
+      'csv',
+      'txt',
+      'ods',
+      'fods',
+      'uos',
+      'sylk',
+      'dif',
+      'dbf',
+      'prn',
+      'qpw',
+      '123',
+      'wb*',
+      'wq*',
+      'html',
+      'htm',
+    ]
+      .map((x) => {
+        return '.' + x;
+      })
+      .join(',');
+    return {
+      loading: false,
+      sheetJSFT: SheetJSFT,
+      cols: [],
+      fileData: [],
+    };
+  },
+  methods: {
+    handleUpload(e) {
+      this.loading = 'loading';
+      const files = e.target.files || [];
+      if (files && files[0]) {
+        this.readFile(files[0]);
+      }
+    },
+    handleDropFile(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      const files = e.dataTransfer.files || [];
+      if (files && files[0]) {
+        this.readFile(files[0]);
+      }
+    },
+    handleSuppress(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    readFile(file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        /* Parse data */
+        const bstr = e.target.result;
+        const wb = XLSX.read(bstr, { type: 'binary' });
+
+        // Get first worksheet
+        const wsname = wb.SheetNames[0];
+        const ws = wb.Sheets[wsname];
+        // Convert array of arrays
+        const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
+        this.fileData = data;
+        this.cols = this.makeCols(ws);
+      };
+      reader.readAsBinaryString(file);
+    },
+    makeCols(ws) {
+      // console.log('>>>>ws', ws);
+      const range = XLSX.utils.decode_range(ws['!ref']);
+      const { r } = range.s;
+      const cols = [];
+
+      for (let { c } = range.s; c <= range.e.c; c += 1) {
+        const col = ws[XLSX.utils.encode_cell({ c, r })];
+        cols.push(col && col.t ? XLSX.utils.format_cell(col) : '');
+      }
+
+      return cols;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.drop-wrapper{
+  margin: 0 auto;
+  width: 460px;
+  height: 180px;
+  line-height: 180px;
+  border: 2px dashed rgba(156, 146, 146, 0.63);
+  font-size: 20px;
+  border-radius: 8px;
+  text-align: center;
+  color: rgb(59, 197, 202);
+  position: relative;
+}
+</style>
diff --git a/src/i18n/locales.js b/src/i18n/locales.js
index 09df1b5..54f778c 100644
--- a/src/i18n/locales.js
+++ b/src/i18n/locales.js
@@ -264,5 +264,17 @@ export default {
       en: 'Else',
       'zh-CN': '其他',
     },
+    excel: {
+      en: 'Excel',
+      'zh-CN': 'Excel',
+    },
+    uploadExcel: {
+      en: 'Upload Excel',
+      'zh-CN': '上传 Excel',
+    },
+    exportExcel: {
+      en: 'Export Excel',
+      'zh-CN': '导出 Excel',
+    },
   },
 };
diff --git a/src/views/excel/ExcelUpload.vue b/src/views/excel/ExcelUpload.vue
new file mode 100644
index 0000000..dccd45f
--- /dev/null
+++ b/src/views/excel/ExcelUpload.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <excel-upload />
+  </div>
+</template>
+
+<script>
+import ExcelUpload from '@/components/excel/ExcelUpload.vue';
+
+export default {
+  name: 'ExcelUploadComponent',
+  components: {
+    ExcelUpload,
+  },
+  data() {
+    return {};
+  },
+};
+</script>

From 05dcb0bfaafa29552c439600a2c1fe704bd70ac7 Mon Sep 17 00:00:00 2001
From: "tianyiming26@gmail.com" <tianyiming26@gmail.com>
Date: Thu, 29 Aug 2019 14:30:56 +0800
Subject: [PATCH 3/4] mod: excel upload component

---
 src/components/excel/ExcelUpload.vue | 82 ++++++++++++++++++----------
 src/views/excel/ExcelUpload.vue      |  4 +-
 2 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/src/components/excel/ExcelUpload.vue b/src/components/excel/ExcelUpload.vue
index 7a06f63..f1c29ea 100644
--- a/src/components/excel/ExcelUpload.vue
+++ b/src/components/excel/ExcelUpload.vue
@@ -1,33 +1,30 @@
 <template>
-  <div>
+  <div class="upload">
     <v-subheader>
       <label for="file">Spreadsheet</label>
     </v-subheader>
     <input
       id="file"
       type="file"
-      ref="excel-upload-input"
-      class="excel-upload-input"
+      ref="uploadInputRef"
+      style="display: none;"
       :accept="sheetJSFT"
       @change="handleUpload"
     >
     <div
-      class="drop-wrapper"
+      class="upload-dragger"
+      :class="{
+        'is-dragover': dragover
+      }"
       @drop="handleDropFile"
       @dragenter="handleSuppress"
       @dragover="handleSuppress"
+      @dragleave.prevent="dragover = false"
+      @click="$refs.uploadInputRef.click()"
     >
-      Drop a file here or
-      <v-btn
-        small
-        color="blue-grey"
-        style="line-height: 30px"
-        @click="handleUpload"
-      >
-        Upload
-      </v-btn>
+      Drop a file here or <em>Upload</em>
     </div>
-
+    <div class="upload-tip">上传文件大小不超过 10MB</div>
     <div>
       <table class="table table-striped">
         <thead>
@@ -35,7 +32,7 @@
             <th
               v-for="c in cols"
               :key="c.key"
-            >{{c}}</th>
+            >{{ c }}</th>
           </tr>
         </thead>
         <tbody>
@@ -86,12 +83,11 @@ export default {
       'html',
       'htm',
     ]
-      .map((x) => {
-        return '.' + x;
-      })
+      .map(x => (`.${x}`))
       .join(',');
     return {
       loading: false,
+      dragover: false,
       sheetJSFT: SheetJSFT,
       cols: [],
       fileData: [],
@@ -108,6 +104,7 @@ export default {
     handleDropFile(e) {
       e.stopPropagation();
       e.preventDefault();
+      this.dragover = false;
       const files = e.dataTransfer.files || [];
       if (files && files[0]) {
         this.readFile(files[0]);
@@ -116,6 +113,7 @@ export default {
     handleSuppress(e) {
       e.stopPropagation();
       e.preventDefault();
+      this.dragover = true;
     },
     readFile(file) {
       const reader = new FileReader();
@@ -152,16 +150,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.drop-wrapper{
-  margin: 0 auto;
-  width: 460px;
-  height: 180px;
-  line-height: 180px;
-  border: 2px dashed rgba(156, 146, 146, 0.63);
-  font-size: 20px;
-  border-radius: 8px;
-  text-align: center;
-  color: rgb(59, 197, 202);
-  position: relative;
+.upload {
+  &-dragger {
+    width: 360px;
+    height: 180px;
+    background-color: #fff;
+    border: 2px dashed rgba(156, 146, 146, 0.63);
+    border-radius: 6px;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    line-height: 180px;
+    margin: 20px auto 10px;
+    font-size: 20px;
+  }
+
+  &:hover {
+    box-shadow: 0px 0px 10px #4587dd;
+  }
+
+  em {
+    color: #409eff;
+    font-style: normal;
+  }
+
+  &-tip {
+    font-size: 13px;
+    color: #606266;
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .is-dragover {
+    background-color: rgba(238, 240, 242, 0.5);
+    border: 2px dashed #83cfc9;
+  }
 }
 </style>
diff --git a/src/views/excel/ExcelUpload.vue b/src/views/excel/ExcelUpload.vue
index dccd45f..45136f4 100644
--- a/src/views/excel/ExcelUpload.vue
+++ b/src/views/excel/ExcelUpload.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <excel-upload />
-  </div>
+  <excel-upload />
 </template>
 
 <script>

From ab1a45bcb74d4f1c9a62a81c61dd24d574b96cdb Mon Sep 17 00:00:00 2001
From: "tianyiming26@gmail.com" <tianyiming26@gmail.com>
Date: Thu, 29 Aug 2019 16:43:41 +0800
Subject: [PATCH 4/4] mod: excel upload component

---
 src/components/excel/ExcelUpload.vue | 110 +++++++++++++--------------
 src/views/excel/ExcelUpload.vue      |  47 +++++++++++-
 2 files changed, 97 insertions(+), 60 deletions(-)

diff --git a/src/components/excel/ExcelUpload.vue b/src/components/excel/ExcelUpload.vue
index f1c29ea..60bdef0 100644
--- a/src/components/excel/ExcelUpload.vue
+++ b/src/components/excel/ExcelUpload.vue
@@ -24,30 +24,7 @@
     >
       Drop a file here or <em>Upload</em>
     </div>
-    <div class="upload-tip">上传文件大小不超过 10MB</div>
-    <div>
-      <table class="table table-striped">
-        <thead>
-          <tr>
-            <th
-              v-for="c in cols"
-              :key="c.key"
-            >{{ c }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(r, key) in fileData"
-            :key="key"
-          >
-            <td
-              v-for="c in cols"
-              :key="c.key"
-            > {{ r[c.key] }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <div class="upload-tip">上传文件大小不超过 {{ filesizeLimitUnitMB }} MB</div>
   </div>
 </template>
 
@@ -57,8 +34,10 @@ import XLSX from 'xlsx';
 export default {
   name: 'ExcelUpload',
   props: {
-    beforeUpload: Function,
-    onSuccess: Function,
+    filesizeLimitUnitMB: {
+      type: Number,
+      default: 2,
+    },
   },
   data() {
     const SheetJSFT = [
@@ -66,22 +45,22 @@ export default {
       'xlsb',
       'xlsm',
       'xls',
-      'xml',
-      'csv',
-      'txt',
-      'ods',
-      'fods',
-      'uos',
-      'sylk',
-      'dif',
-      'dbf',
-      'prn',
-      'qpw',
-      '123',
-      'wb*',
-      'wq*',
-      'html',
-      'htm',
+      // 'xml',
+      // 'csv',
+      // 'txt',
+      // 'ods',
+      // 'fods',
+      // 'uos',
+      // 'sylk',
+      // 'dif',
+      // 'dbf',
+      // 'prn',
+      // 'qpw',
+      // '123',
+      // 'wb*',
+      // 'wq*',
+      // 'html',
+      // 'htm',
     ]
       .map(x => (`.${x}`))
       .join(',');
@@ -89,15 +68,18 @@ export default {
       loading: false,
       dragover: false,
       sheetJSFT: SheetJSFT,
-      cols: [],
-      fileData: [],
+      headers: [],
+      fileData: {
+        headers: [],
+        data: [],
+      },
     };
   },
   methods: {
     handleUpload(e) {
-      this.loading = 'loading';
+      this.loading = true;
       const files = e.target.files || [];
-      if (files && files[0]) {
+      if (files && files[0] && this.beforeUpload(files[0])) {
         this.readFile(files[0]);
       }
     },
@@ -126,24 +108,36 @@ export default {
         const wsname = wb.SheetNames[0];
         const ws = wb.Sheets[wsname];
         // Convert array of arrays
-        const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
-        this.fileData = data;
-        this.cols = this.makeCols(ws);
+        const data = XLSX.utils.sheet_to_json(ws);
+        this.handleSuccess(this.makeHeaders(ws), data);
       };
       reader.readAsBinaryString(file);
     },
-    makeCols(ws) {
+    handleSuccess(headers, data = []) {
+      this.$emit('update-filedata', { headers, data });
+    },
+    makeHeaders(ws) {
       // console.log('>>>>ws', ws);
       const range = XLSX.utils.decode_range(ws['!ref']);
       const { r } = range.s;
-      const cols = [];
+      const headers = [];
 
       for (let { c } = range.s; c <= range.e.c; c += 1) {
         const col = ws[XLSX.utils.encode_cell({ c, r })];
-        cols.push(col && col.t ? XLSX.utils.format_cell(col) : '');
+        headers.push(col && col.t ? XLSX.utils.format_cell(col) : '');
       }
 
-      return cols;
+      return headers;
+    },
+    beforeUpload(file) {
+      // 1MB = 1,000 KB 1MiB = 1,024KiB
+      const isLimit = file.size / 1000 / 1000 <= this.filesizeLimitUnitMB;
+
+      if (!isLimit) {
+        this.$message.warning(`File size can not exceed ${this.filesizeLimitUnitMB}MB!`);
+      }
+
+      return isLimit;
     },
   },
 };
@@ -152,7 +146,7 @@ export default {
 <style lang="scss" scoped>
 .upload {
   &-dragger {
-    width: 360px;
+    width: 400px;
     height: 180px;
     background-color: #fff;
     border: 2px dashed rgba(156, 146, 146, 0.63);
@@ -165,10 +159,10 @@ export default {
     line-height: 180px;
     margin: 20px auto 10px;
     font-size: 20px;
-  }
 
-  &:hover {
-    box-shadow: 0px 0px 10px #4587dd;
+    &:hover {
+      box-shadow: 0px 0px 10px #4587dd;
+    }
   }
 
   em {
@@ -177,9 +171,9 @@ export default {
   }
 
   &-tip {
+    margin-top: 10px;
     font-size: 13px;
     color: #606266;
-    margin-top: 10px;
     text-align: center;
   }
 
diff --git a/src/views/excel/ExcelUpload.vue b/src/views/excel/ExcelUpload.vue
index 45136f4..5684ca2 100644
--- a/src/views/excel/ExcelUpload.vue
+++ b/src/views/excel/ExcelUpload.vue
@@ -1,5 +1,23 @@
 <template>
-  <excel-upload />
+  <div>
+    <excel-upload @update-filedata="val => (fileData = val)" />
+    <v-data-table
+      v-if="fileData && fileData.headers"
+      style="margin-top:20px;"
+      :headers="tableData.headers"
+      :items="tableData.data"
+      class="elevation-1"
+    >
+      <v-progress-linear slot="progress" color="blue" indeterminate />
+      <template slot="items" slot-scope="props">
+        <td
+          v-for="(col, index) in tableData.headers"
+          :key="index">
+          {{ props.item[col.value] }}
+        </td>
+      </template>
+    </v-data-table>
+  </div>
 </template>
 
 <script>
@@ -11,7 +29,32 @@ export default {
     ExcelUpload,
   },
   data() {
-    return {};
+    return {
+      fileData: {},
+    };
+  },
+  computed: {
+    tableData() {
+      if (!this.fileData) {
+        return {
+          headers: [],
+          data: [],
+        };
+      }
+
+      const headers = [];
+      const cols = this.fileData.headers || [];
+      const rawData = this.fileData.data || [];
+
+      for (let i = 0, len = cols.length; i < len; i += 1) {
+        headers.push({
+          text: cols[i],
+          value: cols[i],
+        });
+      }
+
+      return { headers, data: rawData };
+    },
   },
 };
 </script>