refine code

Author: PanJiaChen

src/router/index.js

@@ -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: '导出已选择项' }
     ]
   },
   {

src/views/error/401.vue renamed to src/views/errorPage/401.vue

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

src/views/error/404.vue renamed to src/views/errorPage/404.vue

@@ -225,5 +225,4 @@ export default {
     }
   }
 }
-
 </style>

src/views/example/tab/components/tabPane.vue

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

src/views/example/tab/index.vue

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

src/views/excel/index.vue

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

src/views/excel/selectExcel.vue

@@ -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'
         })
       }

src/views/theme/index.vue

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