From ff1fa4ed91ada240da4eaab7771ffcf62f682cf5 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Fri, 28 Sep 2018 17:39:30 +0800
Subject: [PATCH] feature[Excel]: support bookType option

---
 src/vendor/Export2Excel.js                    |  7 ++--
 .../excel/components/AutoWidthOption.vue      | 30 +++++++++++++++
 src/views/excel/components/BookTypeOption.vue | 38 +++++++++++++++++++
 src/views/excel/components/FilenameOption.vue | 28 ++++++++++++++
 src/views/excel/exportExcel.vue               | 26 ++++++++-----
 5 files changed, 116 insertions(+), 13 deletions(-)
 create mode 100644 src/views/excel/components/AutoWidthOption.vue
 create mode 100644 src/views/excel/components/BookTypeOption.vue
 create mode 100644 src/views/excel/components/FilenameOption.vue

diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
index 75f33ae1..523f90ce 100644
--- a/src/vendor/Export2Excel.js
+++ b/src/vendor/Export2Excel.js
@@ -149,7 +149,8 @@ export function export_json_to_excel({
   header,
   data,
   filename,
-  autoWidth = true
+  autoWidth = true,
+  bookType=  'xlsx'
 } = {}) {
   /* original data */
   filename = filename || 'excel-list'
@@ -196,11 +197,11 @@ export function export_json_to_excel({
   wb.Sheets[ws_name] = ws;
 
   var wbout = XLSX.write(wb, {
-    bookType: 'xlsx',
+    bookType: bookType,
     bookSST: false,
     type: 'binary'
   });
   saveAs(new Blob([s2ab(wbout)], {
     type: "application/octet-stream"
-  }), filename + ".xlsx");
+  }), `${filename}.${bookType}`);
 }
diff --git a/src/views/excel/components/AutoWidthOption.vue b/src/views/excel/components/AutoWidthOption.vue
new file mode 100644
index 00000000..06aad430
--- /dev/null
+++ b/src/views/excel/components/AutoWidthOption.vue
@@ -0,0 +1,30 @@
+<template>
+  <div style="display:inline-block;">
+    <label class="radio-label">Cell Auto-Width: </label>
+    <el-radio-group v-model="autoWidth">
+      <el-radio :label="true" border>True</el-radio>
+      <el-radio :label="false" border>False</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    autoWidth: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
new file mode 100644
index 00000000..9970b0e4
--- /dev/null
+++ b/src/views/excel/components/BookTypeOption.vue
@@ -0,0 +1,38 @@
+<template>
+  <div style="display:inline-block;">
+    <label class="radio-label">Book Type: </label>
+    <el-select v-model="bookType" style="width:120px;" >
+      <el-option
+        v-for="item in options"
+        :key="item"
+        :label="item"
+        :value="item"/>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: 'xlsx'
+    }
+  },
+  data() {
+    return {
+      options: ['xlsx', 'csv', 'txt']
+    }
+  },
+  computed: {
+    bookType: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
new file mode 100644
index 00000000..5cc931ad
--- /dev/null
+++ b/src/views/excel/components/FilenameOption.vue
@@ -0,0 +1,28 @@
+<template>
+  <div style="display:inline-block;">
+    <!-- $t is vue-i18n global function to translate lang -->
+    <label class="radio-label" style="padding-left:0;">Filename: </label>
+    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    filename: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue
index ae32b3aa..bbd5980c 100644
--- a/src/views/excel/exportExcel.vue
+++ b/src/views/excel/exportExcel.vue
@@ -2,14 +2,12 @@
   <!-- $t is vue-i18n global function to translate lang -->
   <div class="app-container">
 
-    <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
-    <label class="radio-label">Cell Auto-Width: </label>
-    <el-radio-group v-model="autoWidth">
-      <el-radio :label="true" border>True</el-radio>
-      <el-radio :label="false" border>False</el-radio>
-    </el-radio-group>
-    <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
+    <div>
+      <FilenameOption v-model="filename" />
+      <AutoWidthOption v-model="autoWidth" />
+      <BookTypeOption v-model="bookType" />
+      <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
+    </div>
 
     <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label="Id" width="95">
@@ -46,15 +44,22 @@
 import { fetchList } from '@/api/article'
 import { parseTime } from '@/utils'
 
+// options components
+import FilenameOption from './components/FilenameOption'
+import AutoWidthOption from './components/AutoWidthOption'
+import BookTypeOption from './components/BookTypeOption'
+
 export default {
   name: 'ExportExcel',
+  components: { FilenameOption, AutoWidthOption, BookTypeOption },
   data() {
     return {
       list: null,
       listLoading: true,
       downloadLoading: false,
       filename: '',
-      autoWidth: true
+      autoWidth: true,
+      bookType: 'xlsx'
     }
   },
   created() {
@@ -79,7 +84,8 @@ export default {
           header: tHeader,
           data,
           filename: this.filename,
-          autoWidth: this.autoWidth
+          autoWidth: this.autoWidth,
+          bookType: this.bookType
         })
         this.downloadLoading = false
       })