增加导出功能

package-lock.json

@@ -2164,6 +2164,15 @@
       "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
       "dev": true
     },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.nlark.com/adler-32/download/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2604,7 +2613,7 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "requires": {
         "core-js": "^2.4.0",
@@ -3175,6 +3184,16 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/cfb/download/cfb-1.2.0.tgz",
+      "integrity": "sha1-ak0IcrUl7WA0nh71H7Swv3Psqag=",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -3512,6 +3531,22 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npm.taobao.org/codepage/download/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.nlark.com/commander/download/commander-2.14.1.tgz?cache=0&sync_timestamp=1627358254258&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcommander%2Fdownload%2Fcommander-2.14.1.tgz",
+          "integrity": "sha1-IjUSPjevjKPGXfRbAm29NXsBuao="
+        }
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -3955,6 +3990,15 @@
         }
       }
     },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.nlark.com/crc-32/download/crc-32-1.2.0.tgz",
+      "integrity": "sha1-yy224puIUI4y2d0OwWk+e0Ghggg=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -5227,6 +5271,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.nlark.com/exit-on-epipe/download/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha1-C92S6H1ShdJn2qgXHQ6wYVlolpI="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -5511,6 +5560,11 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.nlark.com/fflate/download/fflate-0.3.11.tgz",
+      "integrity": "sha1-LEQNcYD964GeZImNiFivMnsEKl0="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -5545,6 +5599,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npm.taobao.org/file-saver/download/file-saver-2.0.5.tgz?cache=0&sync_timestamp=1605790887683&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffile-saver%2Fdownload%2Ffile-saver-2.0.5.tgz",
+      "integrity": "sha1-1hz+LOBZ9BTYmendbUEH7iVnDDg="
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -5700,6 +5759,11 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.nlark.com/frac/download/frac-1.1.2.tgz",
+      "integrity": "sha1-PXT39keMiKG1AgMG10fcYxPHTQs="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -8168,7 +8232,7 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "resolved": "https://registry.nlark.com/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
       "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
     },
     "npm-run-path": {
@@ -9401,6 +9465,11 @@
         "renderkid": "^2.0.4"
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.nlark.com/printj/download/printj-1.1.2.tgz",
+      "integrity": "sha1-2Q3rKXWoufYA+zoclOP0xTx4oiI="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -10876,6 +10945,14 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.nlark.com/ssf/download/ssf-0.11.2.tgz",
+      "integrity": "sha1-C5lpiyN1SNCI/EPN8rcMGnUSwGw=",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -12772,6 +12849,16 @@
         }
       }
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/wmf/download/wmf-1.0.2.tgz",
+      "integrity": "sha1-fRnWIQcaCMK9xrfmiKnENSmMwto="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npm.taobao.org/word/download/word-0.3.0.tgz",
+      "integrity": "sha1-hUIVfk+OhJ9KNjooiZLUdhLbmWE="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -12848,6 +12935,30 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xlsx": {
+      "version": "0.17.0",
+      "resolved": "https://registry.nlark.com/xlsx/download/xlsx-0.17.0.tgz",
+      "integrity": "sha1-AoF2oBQJZ9zuGBfSIWeEYeR0gcg=",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.nlark.com/commander/download/commander-2.17.1.tgz?cache=0&sync_timestamp=1627358254258&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcommander%2Fdownload%2Fcommander-2.17.1.tgz",
+          "integrity": "sha1-vXerfebelCBc6sxy8XFtKfIKd78="
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -10,10 +10,12 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "element-ui": "^2.15.3",
+    "file-saver": "^2.0.5",
     "vant": "^2.12.24",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "xlsx": "^0.17.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/views/back-stage-management/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mainBox">
     <div class="title">
-      <span>已预约人数：{{activeName === 'first' ? tableDataCustomer.length : tableDataUser.length}}人</span>永天科技-安博会人员信息管理
+      <span>{{activeName === 'first' ? '已预约人数：' + tableDataCustomer.length + '人' : '商务负责人：' + tableDataUser.length + '位'}}</span>永天科技-安博会人员信息管理
     </div>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="客户信息" name="first"></el-tab-pane>
@@ -24,6 +24,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit()">查询</el-button>
+          <el-button type="primary" @click="exportExcel()">导出</el-button>
           <el-button type="primary" @click="type = 'add';dialogUserVisible = true" v-if="activeName === 'second'">新增接待人</el-button>
         </el-form-item>
       </el-form>
@@ -32,6 +33,7 @@
             :data="tableData"
             border
             height="100%"
+            id="userTable"
             style="width: 100%">
             <template v-if="activeName === 'first'">
                 <el-table-column prop="name" label="客户姓名" show-overflow-tooltip></el-table-column>
@@ -54,7 +56,7 @@
                 <!-- <el-table-column prop="phone" label="登录账号"></el-table-column> -->
                 <!-- <el-table-column prop="zip" label="接待客户数（人）"></el-table-column> -->
             </template>
-            <el-table-column fixed="right" label="操作">
+            <el-table-column label="操作" v-if="!isExportExcel">
                 <template slot-scope="scope">
                     <template v-if="activeName === 'first'">
                         <el-button type="text" size="small" v-if="!scope.row.userPhone" @click="type = 'add';currentRow = scope.row;dialogVisible = true">分配接待人</el-button>
@@ -77,6 +79,8 @@
 <script>
 import elDialog from './dialog';
 import elDialogUser from './dialog-user';
+import FileSaver from 'file-saver'
+import XLSX from 'xlsx'
 export default {
 components: {
     elDialog,
@@ -95,6 +99,7 @@ data() {
       tableDataCustomer:[],
       dialogVisible:false,
       dialogUserVisible:false,
+      isExportExcel:false,
       type:null,
       currentRow:{}
     };
@@ -125,6 +130,26 @@ data() {
     // deleteClick(row){
 
     // },
+    exportExcel () {
+      this.isExportExcel = true
+      this.$nextTick(()=>{
+        //指定想要导出表格的id
+        let wb = XLSX.utils.table_to_book(document.querySelector('#userTable'))
+        wb.Sheets.Sheet1['!cols'] = [ {wpx: 100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100}, { wpx:100},]
+        console.log(wb)
+        //数据写入
+        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
+        // console.log(wbout)
+        try {
+          //表格的参数
+          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'user.xlsx')
+        } catch (e) { 
+        if(typeof console !== 'undefined') console.log(e, wbout) 
+        }
+        this.isExportExcel = false
+        return wbout;
+      })
+    },
     onSubmit() {
         if(this.activeName === 'first'){
             this.tableData = this.tableDataCustomer.filter(val=>{