excel

package.json

@@ -15,6 +15,7 @@
     "axios": "0.17.1",
     "decimal.js": "^9.0.1",
     "element-ui": "2.0.5",
+    "file-saver": "^1.3.3",
     "js-cookie": "2.2.0",
     "lodash": "^4.17.4",
     "moment": "^2.19.4",
@@ -25,7 +26,8 @@
     "vue": "2.5.9",
     "vue-multiselect": "^2.0.8",
     "vue-router": "3.0.1",
-    "vuex": "3.0.1"
+    "vuex": "3.0.1",
+    "xlsx": "^0.11.19"
   },
   "devDependencies": {
     "autoprefixer": "7.1.6",
@@ -57,6 +59,7 @@
     "ora": "1.3.0",
     "rimraf": "2.6.2",
     "sass-loader": "6.0.6",
+    "script-loader": "^0.7.2",
     "semver": "5.4.1",
     "shelljs": "0.7.8",
     "svg-sprite-loader": "3.4.1",

src/api/agnetManagement.js

@@ -55,7 +55,7 @@ export function fetchAllMemberList(query) {
 
 export function fetchGroupDetail(data, query) {
   return request({
-    url: `/agents/${data.GambleMember.id}/groupDetail`,
+    url: `/agents/${data.id}/groupDetail`,
     method: 'get',
     params: {
       startAt: query.startAt,

src/vendor/Blob.js

@@ -0,0 +1,179 @@
+/* eslint-disable */
+/* Blob.js
+ * A Blob implementation.
+ * 2014-05-27
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+(function (view) {
+    "use strict";
+
+    view.URL = view.URL || view.webkitURL;
+
+    if (view.Blob && view.URL) {
+        try {
+            new Blob;
+            return;
+        } catch (e) {}
+    }
+
+    // Internally we use a BlobBuilder implementation to base Blob off of
+    // in order to support older browsers that only have BlobBuilder
+    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+            var
+                get_class = function(object) {
+                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+                }
+                , FakeBlobBuilder = function BlobBuilder() {
+                    this.data = [];
+                }
+                , FakeBlob = function Blob(data, type, encoding) {
+                    this.data = data;
+                    this.size = data.length;
+                    this.type = type;
+                    this.encoding = encoding;
+                }
+                , FBB_proto = FakeBlobBuilder.prototype
+                , FB_proto = FakeBlob.prototype
+                , FileReaderSync = view.FileReaderSync
+                , FileException = function(type) {
+                    this.code = this[this.name = type];
+                }
+                , file_ex_codes = (
+                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+                ).split(" ")
+                , file_ex_code = file_ex_codes.length
+                , real_URL = view.URL || view.webkitURL || view
+                , real_create_object_URL = real_URL.createObjectURL
+                , real_revoke_object_URL = real_URL.revokeObjectURL
+                , URL = real_URL
+                , btoa = view.btoa
+                , atob = view.atob
+
+                , ArrayBuffer = view.ArrayBuffer
+                , Uint8Array = view.Uint8Array
+                ;
+            FakeBlob.fake = FB_proto.fake = true;
+            while (file_ex_code--) {
+                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+            }
+            if (!real_URL.createObjectURL) {
+                URL = view.URL = {};
+            }
+            URL.createObjectURL = function(blob) {
+                var
+                    type = blob.type
+                    , data_URI_header
+                    ;
+                if (type === null) {
+                    type = "application/octet-stream";
+                }
+                if (blob instanceof FakeBlob) {
+                    data_URI_header = "data:" + type;
+                    if (blob.encoding === "base64") {
+                        return data_URI_header + ";base64," + blob.data;
+                    } else if (blob.encoding === "URI") {
+                        return data_URI_header + "," + decodeURIComponent(blob.data);
+                    } if (btoa) {
+                        return data_URI_header + ";base64," + btoa(blob.data);
+                    } else {
+                        return data_URI_header + "," + encodeURIComponent(blob.data);
+                    }
+                } else if (real_create_object_URL) {
+                    return real_create_object_URL.call(real_URL, blob);
+                }
+            };
+            URL.revokeObjectURL = function(object_URL) {
+                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+                    real_revoke_object_URL.call(real_URL, object_URL);
+                }
+            };
+            FBB_proto.append = function(data/*, endings*/) {
+                var bb = this.data;
+                // decode data to a binary string
+                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+                    var
+                        str = ""
+                        , buf = new Uint8Array(data)
+                        , i = 0
+                        , buf_len = buf.length
+                        ;
+                    for (; i < buf_len; i++) {
+                        str += String.fromCharCode(buf[i]);
+                    }
+                    bb.push(str);
+                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+                    if (FileReaderSync) {
+                        var fr = new FileReaderSync;
+                        bb.push(fr.readAsBinaryString(data));
+                    } else {
+                        // async FileReader won't work as BlobBuilder is sync
+                        throw new FileException("NOT_READABLE_ERR");
+                    }
+                } else if (data instanceof FakeBlob) {
+                    if (data.encoding === "base64" && atob) {
+                        bb.push(atob(data.data));
+                    } else if (data.encoding === "URI") {
+                        bb.push(decodeURIComponent(data.data));
+                    } else if (data.encoding === "raw") {
+                        bb.push(data.data);
+                    }
+                } else {
+                    if (typeof data !== "string") {
+                        data += ""; // convert unsupported types to strings
+                    }
+                    // decode UTF-16 to binary string
+                    bb.push(unescape(encodeURIComponent(data)));
+                }
+            };
+            FBB_proto.getBlob = function(type) {
+                if (!arguments.length) {
+                    type = null;
+                }
+                return new FakeBlob(this.data.join(""), type, "raw");
+            };
+            FBB_proto.toString = function() {
+                return "[object BlobBuilder]";
+            };
+            FB_proto.slice = function(start, end, type) {
+                var args = arguments.length;
+                if (args < 3) {
+                    type = null;
+                }
+                return new FakeBlob(
+                    this.data.slice(start, args > 1 ? end : this.data.length)
+                    , type
+                    , this.encoding
+                );
+            };
+            FB_proto.toString = function() {
+                return "[object Blob]";
+            };
+            FB_proto.close = function() {
+                this.size = this.data.length = 0;
+            };
+            return FakeBlobBuilder;
+        }(view));
+
+    view.Blob = function Blob(blobParts, options) {
+        var type = options ? (options.type || "") : "";
+        var builder = new BlobBuilder();
+        if (blobParts) {
+            for (var i = 0, len = blobParts.length; i < len; i++) {
+                builder.append(blobParts[i]);
+            }
+        }
+        return builder.getBlob(type);
+    };
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

src/vendor/Export2Excel.js

@@ -0,0 +1,160 @@
+/* eslint-disable */
+require('script-loader!file-saver');
+require('script-loader!@/vendor/Blob');
+import XLSX from 'xlsx'
+
+function generateArray(table) {
+    var out = [];
+    var rows = table.querySelectorAll('tr');
+    var ranges = [];
+    for (var R = 0; R < rows.length; ++R) {
+        var outRow = [];
+        var row = rows[R];
+        var columns = row.querySelectorAll('td');
+        for (var C = 0; C < columns.length; ++C) {
+            var cell = columns[C];
+            var colspan = cell.getAttribute('colspan');
+            var rowspan = cell.getAttribute('rowspan');
+            var cellValue = cell.innerText;
+            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+            //Skip ranges
+            ranges.forEach(function (range) {
+                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+                }
+            });
+
+            //Handle Row Span
+            if (rowspan || colspan) {
+                rowspan = rowspan || 1;
+                colspan = colspan || 1;
+                ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
+            }
+            ;
+
+            //Handle Value
+            outRow.push(cellValue !== "" ? cellValue : null);
+
+            //Handle Colspan
+            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+        }
+        out.push(outRow);
+    }
+    return [out, ranges];
+};
+
+function datenum(v, date1904) {
+    if (date1904) v += 1462;
+    var epoch = Date.parse(v);
+    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+    var ws = {};
+    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
+    for (var R = 0; R != data.length; ++R) {
+        for (var C = 0; C != data[R].length; ++C) {
+            if (range.s.r > R) range.s.r = R;
+            if (range.s.c > C) range.s.c = C;
+            if (range.e.r < R) range.e.r = R;
+            if (range.e.c < C) range.e.c = C;
+            var cell = {v: data[R][C]};
+            if (cell.v == null) continue;
+            var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
+
+            if (typeof cell.v === 'number') cell.t = 'n';
+            else if (typeof cell.v === 'boolean') cell.t = 'b';
+            else if (cell.v instanceof Date) {
+                cell.t = 'n';
+                cell.z = XLSX.SSF._table[14];
+                cell.v = datenum(cell.v);
+            }
+            else cell.t = 's';
+
+            ws[cell_ref] = cell;
+        }
+    }
+    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+    return ws;
+}
+
+function Workbook() {
+    if (!(this instanceof Workbook)) return new Workbook();
+    this.SheetNames = [];
+    this.Sheets = {};
+}
+
+function s2ab(s) {
+    var buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+    return buf;
+}
+
+export function export_table_to_excel(id) {
+    var theTable = document.getElementById(id);
+    var oo = generateArray(theTable);
+    var ranges = oo[1];
+
+    /* original data */
+    var data = oo[0];
+    var ws_name = "SheetJS";
+
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+
+    /* add ranges to worksheet */
+    // ws['!cols'] = ['apple', 'banan'];
+    ws['!merges'] = ranges;
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
+}
+
+export function export_json_to_excel(th, jsonData, defaultTitle) {
+
+    /* original data */
+
+    var data = jsonData;
+    data.unshift(th);
+    var ws_name = "SheetJS";
+
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map(row => row.map(val => {
+      /*先判断是否为null/undefined*/
+      if (val == null) {
+        return {'wch': 10};
+      }
+      /*再判断是否为中文*/
+      else if (val.toString().charCodeAt(0) > 255) {
+        return {'wch': val.toString().length * 2};
+      } else {
+        return {'wch': val.toString().length};
+      }
+    }))
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]['wch'] < colWidth[i][j]['wch']) {
+          result[j]['wch'] = colWidth[i][j]['wch'];
+        }
+      }
+    }
+    ws['!cols'] = result;
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+    var title = defaultTitle || 'excel-list'
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
+}

src/views/agnetManagement/gambleMemberManagement/index.vue

@@ -54,7 +54,7 @@
           </el-table-column>
       </el-table>
       <el-table show-summary :summary-method="getSummaries" :data="combine" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
-        <el-table-column :label="`${(this.data.secondLayer.GambleMember.name).slice(19)}的會員`" align="center">
+        <el-table-column :label="`${this.data.secondLayer.name}的會員`" align="center">
           <el-table-column label="當莊次數" prop="bookieCount"  align="center"></el-table-column>          
           <el-table-column label="名稱" align="center">
             <template slot-scope="scope">
@@ -184,7 +184,7 @@ export default {
          
         this.combine = response.data
         this.allCombine.push({
-          name: (this.data.secondLayer.GambleMember.name).slice(19),
+          name: this.data.secondLayer.name,
           allUp: _.sumBy(response.data, 'totalUp'),
           allDown: _.sumBy(response.data, 'totalDown'),
           allReward: _.sumBy(response.data, 'totalReward'),

src/views/agnetManagement/index.vue

@@ -6,6 +6,8 @@
         </el-input>
         <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
         <el-button class="filter-item" @click="handleCreate" type="primary" icon="el-icon-edit">創建代理商</el-button>
+        <el-input style='width:100px;' placeholder="輸入檔案名稱" prefix-icon="el-icon-document" v-model="filename"></el-input>
+        <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">匯出 excel</el-button>
       </div>
       <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
         style="width: 100%">
@@ -16,24 +18,24 @@
         </el-table-column> -->
         <el-table-column label="名稱" align="center">
           <template slot-scope="scope">
-            {{(scope.row.GambleMember.name).slice(19)}}
-          </template>
-        </el-table-column>
-        <el-table-column label="上繳工作室金額70%" align="center">
-          <template slot-scope="scope">
-            <span :style="moneyColor(scope.row.all70)">{{scope.row.all70}}</span>
+            {{scope.row.name}}
           </template>
         </el-table-column>
         <el-table-column label="抽水％" align="center">
           <template slot-scope="scope">
             {{scope.row.feeRatio}}
           </template>
-        </el-table-column>
-          <el-table-column label="代理商上繳金額" align="center">
+        </el-table-column>        
+        <el-table-column label="代理商上繳金額" align="center">
             <template slot-scope="scope">
               <span :style="moneyColor(scope.row.all)">{{scope.row.all}}</span>
             </template>
         </el-table-column>
+        <el-table-column label="上繳工作室金額70%" align="center">
+          <template slot-scope="scope">
+            <span :style="moneyColor(scope.row.all70)">{{scope.row.all70}}</span>
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="操作" width="450">
           <template slot-scope="scope">          
             <router-link to="/agent/index/gambleMemberManagement">
@@ -86,12 +88,14 @@ export default {
       list: [],
       total: null,
       listLoading: true,
+      downloadLoading: false,
       listQuery: {
         page: 1,
         limit: 20,
         // startAt: moment.utc(moment().day('sunday').hour(12).minute(0).second(0).subtract(1, 'weeks').day(7).hour(16).minute(0).second(0)).format(),
         // endAt: moment.utc(moment().day('sunday').hour(12).minute(0).second(0).day(7).hour(11).minute(59).second(59)).format()
       },
+      filename: '',
       dialogCreateFormVisible: false,
       dialogStatus: '',
       // agent: {},
@@ -133,10 +137,12 @@ export default {
             console.log('response' , response.data.all)
             this.list.push({
               // id: agent.GambleMember.id,
-              GambleMember: {
-                id: agent.GambleMember.id,
-                name: agent.GambleMember.name
-              },
+              // GambleMember: {
+              //   id: agent.GambleMember.id,
+              //   name: agent.GambleMember.name
+              // },
+              id: agent.GambleMember.id,
+              name: agent.GambleMember.name.slice(19),
               feeRatio: response.data.feeRatio,
               all: response.data.all,
               all70: response.data.all70
@@ -246,6 +252,26 @@ export default {
         }
       })
     },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['名稱', '抽水%', '代理商上繳金額', '上繳工作室金額70%' ]
+        const filterVal = ['name', 'feeRatio', 'all', 'all70' ]
+        const list = this.list
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel(tHeader, data, this.filename)
+        this.downloadLoading = false
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    },
     handleFilter() {
       this.listQuery.page = 1
       this.getList()