refactor

src/views/example/form.vue

@@ -120,15 +120,15 @@
 </template>
 
 <script>
-import Tinymce from 'components/Tinymce'
-import Upload from 'components/Upload/singleImage3'
-import MDinput from 'components/MDinput'
+import Tinymce from '@/components/Tinymce'
+import Upload from '@/components/Upload/singleImage3'
+import MDinput from '@/components/MDinput'
 import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
 import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
-import Sticky from 'components/Sticky' // 粘性header组件
-import { validateURL } from 'utils/validate'
-import { getArticle } from 'api/article'
-import { userSearch } from 'api/remoteSearch'
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { validateURL } from '@/utils/validate'
+import { fetchArticle } from '@/api/article'
+import { userSearch } from '@/api/remoteSearch'
 
 export default {
   name: 'articleDetail',
@@ -204,7 +204,7 @@ export default {
   },
   methods: {
     fetchData() {
-      getArticle().then(response => {
+      fetchArticle().then(response => {
         this.postForm = response.data
       }).catch(err => {
         this.fetchSuccess = false
@@ -259,6 +259,7 @@ export default {
   }
 }
 </script>
+
 <style rel="stylesheet/scss" lang="scss" scoped>
   @import "src/styles/mixin.scss";
   .title-prompt{

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

@@ -1,7 +1,8 @@
 <template>
   <el-table :data="list" border fit highlight-current-row style="width: 100%">
 
-    <el-table-column align="center" label="序号" width="65">
+    <el-table-column align="center" label="序号" width="65"  v-loading="loading"
+    element-loading-text="请给我点时间！">
       <template scope="scope">
         <span>{{scope.row.id}}</span>
       </template>
@@ -15,7 +16,7 @@
 
     <el-table-column min-width="300px" label="标题">
       <template scope="scope">
-        <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
+        <span>{{scope.row.title}}</span>
         <el-tag>{{scope.row.type}}</el-tag>
       </template>
     </el-table-column>
@@ -48,7 +49,7 @@
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 
 export default {
   props: {
@@ -65,7 +66,8 @@ export default {
         limit: 5,
         type: this.type,
         sort: '+id'
-      }
+      },
+      loading: false
     }
   },
   filters: {
@@ -83,9 +85,11 @@ export default {
   },
   methods: {
     getList() {
+      this.loading = true
       this.$emit('create') // for test
       fetchList(this.listQuery).then(response => {
         this.list = response.data.items
+        this.loading = false
       })
     }
   }

src/views/example/table/dragTable.vue

@@ -47,20 +47,20 @@
 
       <el-table-column align="center" label="拖拽" width="95">
         <template scope="scope">
-          <icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
+          <icon-svg class='drag-handler' icon-class="tuozhuai"></icon-svg>
         </template>
       </el-table-column>
 
     </el-table>
 
-    <div class='show-d'>默认顺序  &nbsp;  {{ olderList}}</div>
+    <div class='show-d'>默认顺序 &nbsp; {{ olderList}}</div>
     <div class='show-d'>拖拽后顺序{{newList}}</div>
 
   </div>
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 import Sortable from 'sortablejs'
 
 export default {
@@ -79,9 +79,6 @@ export default {
       newList: []
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -92,6 +89,9 @@ export default {
       return statusMap[status]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true
@@ -109,7 +109,6 @@ export default {
     setSort() {
       const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
       this.sortable = Sortable.create(el, {
-          // handle: '.drag-handler',
         onEnd: evt => {
           const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
           this.newList.splice(evt.newIndex, 0, tempIndex)
@@ -120,7 +119,7 @@ export default {
 }
 </script>
 
-<style >
+<style scoped>
 .drag-handler{
   width: 30px;
   height: 30px;

src/views/example/table/dynamictable/fixedThead.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
 
     <div class="filter-container">
-      <el-checkbox-group v-model="checkboxVal"	>
+      <el-checkbox-group v-model="checkboxVal">
         <el-checkbox label="apple">apple</el-checkbox>
         <el-checkbox label="banana">banana</el-checkbox>
         <el-checkbox label="orange">orange</el-checkbox>

src/views/example/table/dynamictable/index.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import fixedThead from './dynamictable/fixedThead'
-import unfixedThead from './dynamictable/unfixedThead'
+import fixedThead from './fixedThead'
+import unfixedThead from './unfixedThead'
 
 export default {
   components: { fixedThead, unfixedThead }

src/views/example/table/inlineEditTable.vue

@@ -42,8 +42,7 @@
 
       <el-table-column align="center" label="编辑" width="120">
         <template scope="scope">
-          <el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="edit">编辑</el-button>
-          <el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="check">完成</el-button>
+          <el-button :type="scope.row.edit?'success':'primary'" @click='scope.row.edit=!scope.row.edit' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
         </template>
       </el-table-column>
 
@@ -52,7 +51,7 @@
 </template>
 
 <script>
-import { fetchList } from 'api/article_table'
+import { fetchList } from '@/api/article'
 
 export default {
   name: 'inline_edit-table_demo',
@@ -66,9 +65,6 @@ export default {
       }
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -79,6 +75,9 @@ export default {
       return statusMap[status]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true

src/views/example/table/table.vue

@@ -25,7 +25,7 @@
       <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
     </div>
 
-    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
 
       <el-table-column align="center" label="序号" width="65">
         <template scope="scope">
@@ -150,9 +150,9 @@
 </template>
 
 <script>
-import { fetchList, fetchPv } from 'api/article_table'
+import { fetchList, fetchPv } from '@/api/article'
 import waves from '@/directive/waves.js'// 水波纹指令
-import { parseTime } from 'utils'
+import { parseTime } from '@/utils'
 
 const calendarTypeOptions = [
       { key: 'CN', display_name: '中国' },
@@ -161,7 +161,7 @@ const calendarTypeOptions = [
       { key: 'EU', display_name: '欧元区' }
 ]
 
-  // arr to obj
+// arr to obj
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
   acc[cur.key] = cur.display_name
   return acc
@@ -210,9 +210,6 @@ export default {
       tableKey: 0
     }
   },
-  created() {
-    this.getList()
-  },
   filters: {
     statusFilter(status) {
       const statusMap = {
@@ -226,6 +223,9 @@ export default {
       return calendarTypeKeyValue[type]
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     getList() {
       this.listLoading = true