refine code
This commit is contained in:
Pan
花裤衩
parent
8fa2364a3b
commit
33a4369cd7
8 changed files with 40 additions and 66 deletions
|
|
@ -18,8 +18,8 @@ import Layout from '../views/layout/Layout'
|
|||
export const constantRouterMap = [
|
||||
{ path: '/login', component: _import('login/index'), hidden: true },
|
||||
{ path: '/authredirect', component: _import('login/authredirect'), hidden: true },
|
||||
{ path: '/404', component: _import('error/404'), hidden: true },
|
||||
{ path: '/401', component: _import('error/401'), hidden: true },
|
||||
{ path: '/404', component: _import('errorPage/404'), hidden: true },
|
||||
{ path: '/401', component: _import('errorPage/401'), hidden: true },
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
|
|
@ -117,14 +117,14 @@ export const asyncRouterMap = [
|
|||
]
|
||||
},
|
||||
{
|
||||
path: '/errorpage',
|
||||
path: '/error',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: '错误页面',
|
||||
icon: '404',
|
||||
children: [
|
||||
{ path: '401', component: _import('error/401'), name: '401' },
|
||||
{ path: '404', component: _import('error/404'), name: '404' }
|
||||
{ path: '401', component: _import('errorPage/401'), name: '401' },
|
||||
{ path: '404', component: _import('errorPage/404'), name: '404' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -139,12 +139,12 @@ export const asyncRouterMap = [
|
|||
{
|
||||
path: '/excel',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
redirect: '/excel/download',
|
||||
name: 'excel',
|
||||
icon: 'EXCEL',
|
||||
children: [
|
||||
{ path: 'download', component: _import('excel/index'), name: '导出excel' },
|
||||
{ path: 'download2', component: _import('excel/selectExcel'), name: '选择导出excel' }
|
||||
{ path: 'download2', component: _import('excel/selectExcel'), name: '导出已选择项' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-dialog title="随便看" :visible.sync="dialogVisible" size="large">
|
||||
<img class="pan-img" :src="ewizardClap">
|
||||
</el-dialog>
|
||||
|
|
@ -225,5 +225,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<el-table-column width="80px" label="重要性">
|
||||
<template scope="scope">
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
|
||||
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" :key="n"></icon-svg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
@ -51,7 +51,6 @@
|
|||
import { fetchList } from 'api/article_table'
|
||||
|
||||
export default {
|
||||
name: 'articleDetail',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
|
|
@ -61,7 +60,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
list: null,
|
||||
total: null,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 5,
|
||||
|
|
@ -86,10 +84,8 @@ export default {
|
|||
methods: {
|
||||
getList() {
|
||||
this.$emit('create') // for test
|
||||
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items
|
||||
this.total = response.data.total
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tabMapOptions: [
|
||||
{ label: '中国', key: 'CN' },
|
||||
{ label: '美国', key: 'US' },
|
||||
{ label: '日本', key: 'JP' },
|
||||
{ label: '欧元区', key: 'EU' }
|
||||
{ label: '中国', key: 'CN' },
|
||||
{ label: '美国', key: 'US' },
|
||||
{ label: '日本', key: 'JP' },
|
||||
{ label: '欧元区', key: 'EU' }
|
||||
],
|
||||
activeName: 'CN',
|
||||
createdTimes: 0
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-button style='margin-bottom:20px;float:right' type="primary" icon="document" @click="handleDownload">导出excel</el-button>
|
||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
|
||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label='ID' width="95">
|
||||
<template scope="scope">
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
{{scope.row.title}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="作者" width="110">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
|
|
@ -40,7 +39,8 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true
|
||||
listLoading: true,
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -49,21 +49,21 @@ export default {
|
|||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
getList(this.listQuery).then(response => {
|
||||
getList().then(response => {
|
||||
this.list = response.data
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
require.ensure([], () => {
|
||||
const {
|
||||
export_json_to_excel
|
||||
} = require('vendor/Export2Excel')
|
||||
const { export_json_to_excel } = require('vendor/Export2Excel')
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||
const list = this.list
|
||||
const data = this.formatJson(filterVal, list)
|
||||
export_json_to_excel(tHeader, data, '列表excel')
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
|
|
|
|||
|
|
@ -1,34 +1,29 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-button style='margin-bottom:20px;float:right' type="primary" icon="document" @click="handleDownload">导出excel</el-button>
|
||||
|
||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange" ref="multipleTable">
|
||||
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button>
|
||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
|
||||
ref="multipleTable">
|
||||
<el-table-column type="selection" align="center"></el-table-column>
|
||||
|
||||
<el-table-column align="center" label='ID' width="95">
|
||||
<template scope="scope">
|
||||
{{scope.$index}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="文章标题">
|
||||
<template scope="scope">
|
||||
{{scope.row.title}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="作者" width="110">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="阅读数" width="105" align="center">
|
||||
<template scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="200">
|
||||
<template scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
|
|
@ -39,7 +34,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { getList } from 'api/article'
|
||||
|
||||
|
|
@ -48,7 +42,8 @@ export default {
|
|||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
multipleSelection: []
|
||||
multipleSelection: [],
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -67,6 +62,7 @@ export default {
|
|||
},
|
||||
handleDownload() {
|
||||
if (this.multipleSelection.length) {
|
||||
this.downloadLoading = true
|
||||
require.ensure([], () => {
|
||||
const { export_json_to_excel } = require('vendor/Export2Excel')
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
|
|
@ -75,10 +71,11 @@ export default {
|
|||
const data = this.formatJson(filterVal, list)
|
||||
export_json_to_excel(tHeader, data, '列表excel')
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.downloadLoading = false
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择一条或多条记录导出',
|
||||
message: '请至少选择一条记录',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<code>会补动态换肤的教程</code>
|
||||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<span style="line-height: 36px;">偏好设置</span>
|
||||
<a class='link-type link-title' target="_blank" href='https://segmentfault.com/a/1190000009762198#articleHeader2'>态换肤的教程</a>
|
||||
</div>
|
||||
|
||||
<div class="box-item">
|
||||
<span class="field-label">换肤:</span>
|
||||
<el-switch v-model="theme" on-text="" off-text="">
|
||||
|
|
@ -43,6 +42,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { toggleClass } from 'utils'
|
||||
import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
|
||||
|
|
@ -51,39 +51,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
theme: false,
|
||||
tags: [{
|
||||
name: '标签一',
|
||||
type: ''
|
||||
},
|
||||
{
|
||||
name: '标签二',
|
||||
type: 'gray'
|
||||
},
|
||||
{
|
||||
name: '标签三',
|
||||
type: 'primary'
|
||||
},
|
||||
{
|
||||
name: '标签四',
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
name: '标签五',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
name: '标签六',
|
||||
type: 'danger'
|
||||
}
|
||||
],
|
||||
inputVisible: false,
|
||||
inputValue: ''
|
||||
tags: [
|
||||
{ name: '标签一', type: '' },
|
||||
{ name: '标签二', type: 'gray' },
|
||||
{ name: '标签三', type: 'primary' },
|
||||
{ name: '标签四', type: 'success' },
|
||||
{ name: '标签五', type: 'warning' },
|
||||
{ name: '标签六', type: 'danger' }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
theme() {
|
||||
toggleClass(document.body, 'custom-theme')
|
||||
// this.$store.dispatch('setTheme', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -103,4 +83,7 @@ export default {
|
|||
.tag-item{
|
||||
margin-right: 15px;
|
||||
}
|
||||
.link-title{
|
||||
margin-left:35px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue