WxxyDeveloper/Jsl-OA-Web-Re
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added zip demo

Browse Source
This commit is contained in:
midfar 2023-03-13 11:32:51 +08:00
parent 707b85da06
commit 7d958f49c5
3 changed files with 103 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/router/index.ts
View File

@ -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',

2
src/utils/index.js
View File

@ -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;

87
src/views/zip/index.vue Normal file
View File

@ -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>