更新

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+package-lock.json
 
 # local env files
 .env.local

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
+    "file-saver": "^2.0.2",
     "jsonwebtoken": "^8.5.1",
     "loadsh": "0.0.4",
     "naf-core": "^0.1.2",
@@ -20,7 +21,8 @@
     "vue-meta": "^2.3.4",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
-    "wangeditor": "^3.1.1"
+    "wangeditor": "^3.1.1",
+    "xlsx": "^0.16.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
@@ -36,6 +38,7 @@
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "prettier": "^1.19.1",
+    "script-loader": "^0.7.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/excel/Blob.js

@@ -0,0 +1,341 @@
+/* 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/excel/Export2Excel.js

@@ -0,0 +1,279 @@
+/* eslint-disable */
+
+require('script-loader!file-saver');
+
+require('./Blob');
+
+require('script-loader!xlsx/dist/xlsx.core.min');
+
+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);
+
+  console.log('a')
+
+  var oo = generateArray(theTable);
+
+  var ranges = oo[1];
+
+  /* original data */
+
+  var data = oo[0];
+
+  var ws_name = "SheetJS";
+
+  console.log(data);
+
+  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")
+
+}
+
+function formatJson(jsonData) {
+
+  console.log(jsonData)
+
+}
+
+export function export_json_to_excel(th, jsonData, defaultTitle) {
+
+  /* original data */
+
+  var data = jsonData;
+
+  data.unshift(th);
+
+  var ws_name = "Sheet";
+
+  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 + 5 };
+
+    } else {
+
+      return { 'wch': val.toString().length + 5 };
+
+    }
+
+  }))
+
+  /*以第一行为初始值*/
+
+  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 || '列表'
+
+  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), title + ".xlsx")
+
+}

src/views/room/statList.vue

@@ -6,6 +6,9 @@
           <topInfo :topTitle="pageTitle"></topInfo>
         </el-col>
       </el-col>
+      <el-col :span="24" class="add" style="text-align:right">
+        <el-button size="mini" type="primary" @click="excelBtn()" icon="el-icon-plus">导出</el-button>
+      </el-col>
       <el-col :span="24" class="info">
         <data-table :fields="fields" :data="list" :opera="opera" :total="total" @query="searchInfo"></data-table>
       </el-col>
@@ -26,7 +29,10 @@ export default {
   },
   data: () => ({
     opera: [],
-    fields: [{ label: '机构名称', prop: 'username', filter: 'input' }],
+    fields: [
+      { label: '机构名称', prop: 'username', filter: 'input' },
+      { label: '手机号', prop: 'phone' },
+    ],
     list: [],
     total: 0,
   }),
@@ -35,13 +41,27 @@ export default {
   },
   methods: {
     ...lookuser(['query']),
-    async searchInfo() {
-      const res = await this.query({ roomid: this.id });
+    async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, roomname: this.name, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
         this.$set(this, `total`, res.total);
       }
     },
+    // 导出
+    excelBtn() {
+      require.ensure([], () => {
+        const { export_json_to_excel } = require('@/excel/Export2Excel');
+        const tHeader = ['机构名称', '手机号'];
+        const filterVal = ['username', 'phone'];
+        const list = this.list;
+        const data = this.formatJson(filterVal, list);
+        export_json_to_excel(tHeader, data);
+      });
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]));
+    },
   },
   computed: {
     ...mapState(['user']),