From 7d958f49c5a78d35f6784e52cfec94f328e53e9b Mon Sep 17 00:00:00 2001
From: midfar <midfar@qq.com>
Date: Mon, 13 Mar 2023 11:32:51 +0800
Subject: [PATCH] added zip demo

---
 src/router/index.ts     | 30 +++++++-------
 src/utils/index.js      |  2 +-
 src/views/zip/index.vue | 87 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 103 insertions(+), 16 deletions(-)
 create mode 100644 src/views/zip/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index c7f3e26..2ff590b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -291,21 +291,21 @@ export const asyncRoutes:RouteRecordRaw[] = [
   //   ]
   // },
 
-  // {
-  //   path: '/zip',
-  //   component: Layout,
-  //   redirect: '/zip/download',
-  //   name: 'Zip',
-  //   meta: { alwaysShow: true, title: 'Zip', icon: 'zip' },
-  //   children: [
-  //     {
-  //       path: 'download',
-  //       component: () => import('@/views/zip/index'),
-  //       name: 'ExportZip',
-  //       meta: { title: 'Export Zip' }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/zip',
+    component: Layout,
+    redirect: '/zip/download',
+    name: 'Zip',
+    meta: { alwaysShow: true, title: 'Zip', icon: 'zip' },
+    children: [
+      {
+        path: 'download',
+        component: () => import('@/views/zip/index.vue'),
+        name: 'ExportZip',
+        meta: { title: 'Export Zip' }
+      }
+    ]
+  },
 
   // {
   //   path: '/pdf',
diff --git a/src/utils/index.js b/src/utils/index.js
index 81d3f58..f78e020 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -45,7 +45,7 @@ export function parseTime(time, cFormat) {
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
     const value = formatObj[key];
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ]; }
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value]; }
     return value.toString().padStart(2, '0');
   });
   return time_str;
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
new file mode 100644
index 0000000..f09f362
--- /dev/null
+++ b/src/views/zip/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="app-container">
+    <div style="margin-bottom: 20px;">
+    <el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" :icon="IconDocument" />
+    <el-button :loading="downloadLoading" type="primary" :icon="IconDocument" @click="handleDownload">
+      Export Zip
+    </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">
+        <template v-slot="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Title">
+        <template v-slot="scope">
+          {{ scope.row.title }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Author" width="95" align="center">
+        <template v-slot="scope">
+          <el-tag>{{ scope.row.author }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="Readings" width="115" align="center">
+        <template v-slot="scope">
+          {{ scope.row.pageviews }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="Date" width="220">
+        <template v-slot="scope">
+          <span class="col-date">
+            <el-icon><IconTimer /></el-icon>
+            <span>{{ scope.row.display_time }}</span>
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/article';
+import { Timer as IconTimer, Document as IconDocument } from '@element-plus/icons-vue';
+import { markRaw } from 'vue';
+
+export default {
+  name: 'ExportZip',
+  components: {
+    IconTimer
+  },
+  data() {
+    return {
+      IconDocument: markRaw(IconDocument),
+      list: null,
+      listLoading: true,
+      downloadLoading: false,
+      filename: ''
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      this.listLoading = true;
+      const { data } = await fetchList();
+      this.list = data.items;
+      this.listLoading = false;
+    },
+    handleDownload() {
+      this.downloadLoading = true;
+      import('@/vendor/Export2Zip').then(zip => {
+        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'];
+        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'];
+        const list = this.list;
+        const data = this.formatJson(filterVal, list);
+        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename);
+        this.downloadLoading = false;
+      });
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]));
+    }
+  }
+};
+</script>