Excel mass user input

https://dev.wormwood.com.sg/zentao/task-view-210.html

Strides-Admin/src/http/api/voucher.js

@@ -1,4 +1,4 @@
-import {get, put, post, del} from '../http'
+import {get, put, post, del, download} from '../http'
 
 const prefix = "dawn/api/v1/";
 
@@ -86,6 +86,12 @@ const voucher = {
   },
   getWeekOptions() {
     return get(prefix + "day-of-week-select")
+  },
+  /**
+   * 下载批量发放代金券模板
+   */
+  downloadTemplate() {
+    return download(prefix + 'issue-voucher-template')
   }
 }
 

Strides-Admin/src/views/voucher/DialogIssue.vue

@@ -2,6 +2,7 @@
   <el-dialog
     :visible="visible"
     title="ISSUE VOUCHER"
+    custom-class="issuance-dialog"
     :before-close="onHide">
     <el-form
       ref="dialogForm"
@@ -9,7 +10,7 @@
       :rules="rules"
       class="filter-container"
       label-position="right"
-      label-width="140px">
+      label-width="130px">
       <el-form-item
         label="Select User:"
         prop="userPk">
@@ -199,6 +200,11 @@ export default {
 </script>
 
 <style scoped>
+>>> .issuance-dialog {
+  width: 100%;
+  padding: 0 10px;
+  max-width: 520px;
+}
 .dialog-form-item {
   width: 100%;
   max-width: 350px;

Strides-Admin/src/views/voucher/issuance.vue

@@ -1,16 +1,44 @@
 <template>
   <div class="app-container">
     <div class="filter-container filter-view">
-      <div class="filter-flex-button">
+      <div class="filter-flex-button"></div>
+      <my-upload
+        accept=".xls,.xlsx,.csv"
+        :limit="1"
+        :is-blob="true"
+        :action="action"
+        :headers="headers"
+        :file-list="fileList"
+        :show-file-list="false"
+        :before-upload="onImportStart"
+        :on-success="onImportExcel"
+        :on-error="onImportExcelErr"
+        v-if="!$route.meta.onlyView">
         <el-button
+          icon="el-icon-upload2"
           type="primary"
-          @click="onClickIssue">
-          ISSUE VOUCHER
+          :loading="loading.upload">
+          Batch Upload
+        </el-button>
+      </my-upload>
+      <div v-if="!$route.meta.onlyView">
+        <el-button
+          icon="el-icon-download"
+          type="primary"
+          :loading="loading.download"
+          @click="onDownloadTmp">
+          Template
         </el-button>
       </div>
+      <el-button
+        type="primary"
+        icon="el-icon-s-ticket"
+        @click="onClickIssue">
+        Issue Voucher
+      </el-button>
     </div>
     <el-table
-      v-loading="table.loading"
+      v-loading="loading.table"
       :data="table.data">
       <el-table-column
         label="User E-mail"
@@ -69,8 +97,11 @@
 
 <script>
 import api from '../../http/api/voucher.js';
+import { baseURL } from '@/http/http'
 import Pagination from '@/components/Pagination';
 import DialogIssue from './DialogIssue.vue';
+import MyUpload from '@/components/MyUpload'
+import { getToken } from '@/utils/auth'
 export default {
   data() {
     return {
@@ -79,18 +110,33 @@ export default {
         pageSize: 10,
         pageCriteria: {
           criteria: "",
-          voucherStatus: "To Be Used"
+          voucherStatus: "" //"To Be Used"
         }
       },
       table: {
         data: [],
-        total: 0,
-        loading: false
+        total: 0
       },
+      loading: {
+        table: false,
+        upload: false,
+        download: false
+      },
+      fileList: [],
       showIssueDialog: false
     };
   },
-  components: {DialogIssue, Pagination},
+  components: {DialogIssue, Pagination, MyUpload},
+  computed: {
+    action() {
+      return baseURL + process.env.VUE_APP_API_PREFIX + '/dawn/api/v1/batch-issue-voucher'
+    },
+    headers() {
+      return {
+        accessToken: getToken()
+      }
+    }
+  },
   created() {
     this.toSearch();
   },
@@ -100,7 +146,7 @@ export default {
       this.getTableData();
     },
     getTableData() {
-      this.table.loading = true;
+      this.loading.table = true;
       api.getIssuanceVoucherPages(this.params).then(res => {
         if (res.data && res.data.totalRow) {
           this.table.data = res.data.records
@@ -117,7 +163,7 @@ export default {
         this.table.data = []
         this.table.total = 0
       }).finally(() => {
-        this.table.loading = false
+        this.loading.table = false
       })
     },
     onClickIssue() {
@@ -128,6 +174,59 @@ export default {
       if (e) {
         this.toSearch();
       }
+    },
+    onImportStart() {
+      this.loading.upload = true;
+    },
+    onImportExcel(res, file, fileList) {
+      fileList = [];
+      this.fileList = [];
+      if (res.success == undefined) {
+        this.downloadExcel(res, "batch-issuance-result.xls");
+        this.loading.upload = false;
+      } else {
+        this.onImportExcelErr(res.msg, file, fileList);
+      }
+    },
+    onImportExcelErr(err, file, fileList) {
+      this.$message({
+        type: 'error',
+        message: err
+      })
+      this.loading.upload = false;
+    },
+    onDownloadTmp() {
+      this.loading.download = true;
+      api.downloadTemplate().then(res => {
+        this.downloadExcel(res, "batch-issuance-template.xlsx")
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.loading.download = false;
+      })
+    },
+    downloadExcel(res, fileName) {
+      const blob = new Blob([res], {
+        type: 'application/vnd.ms-excel;charset=utf-8'
+      })
+      // let href = window.URL.createObjectURL(blob)
+      if ('download' in document.createElement('a')) {
+        // 非IE下载
+        const elink = document.createElement('a')
+        elink.download = fileName
+        elink.style.display = 'none'
+        elink.href = URL.createObjectURL(blob)
+        document.body.appendChild(elink)
+        elink.click()
+        URL.revokeObjectURL(elink.href) // 释放URL 对象
+        document.body.removeChild(elink)
+      } else {
+        // IE10+下载
+        navigator.msSaveBlob(blob, fileName)
+      }
     }
   }
 }