管理我的分类－分类获取接口挂至vuex

raojiawei · Apr 16, 2017 · 6def14d · 6def14d
1 parent 4409fc0
commit 6def14d
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 18 deletions.
diff --git a/assets/config/title.js b/assets/config/title.js
@@ -2,7 +2,8 @@ export const diary = {
 	'index': '我的日记列表',
 	'create': '创建我的日记',
 	'edit': '编辑我的日记',
-	'detail': '我的日记详情'
+	'detail': '我的日记详情',
+	'category': '我的分类'
 }
 export const account = {
     'register' : '吾记 - 吾记网页版在线写日记 － 注册',

diff --git a/assets/modules/diary/category.vue b/assets/modules/diary/category.vue
@@ -0,0 +1,68 @@
+<template lang="jade">
+div.wuji-container.center-block
+	div.wuji-category
+		el-table(:data="categoryList", style="width: 100%")
+			el-table-column(prop="name", label="分类")
+			el-table-column(prop="colorHex", label="颜色")
+				template(scope="scope")
+					span.color-span(:style="{backgroundColor: '#' + scope.row.colorHex}")		
+			el-table-column(prop="diaryCount", label="日记数")
+			el-table-column(label="操作")
+				template(scope="scope")
+					el-button(size="small", @click="handleEdit(scope.$index, scope.row)") 编辑
+					el-button(size="small", type="danger", @click="handleDelete(scope.$index, scope.row)") 删除
+</template>
+<script>
+    import Vue from 'vue'
+    import { mapState, mapActions } from 'vuex'
+    import {Table, TableColumn, Button} from "element-ui"
+	// 引入组件
+	Vue.use(Table)
+	Vue.use(TableColumn)
+	Vue.use(Button)
+    export default{
+        name: 'category',
+        created(){
+        	//防止页面强刷，store丢失
+        	if(this.$store.state.diary.categoryList.length === 0){
+        		this.loadCategoryList();
+        	}
+        },
+        methods:{
+	        loadCategoryList(params = {}){
+	            this.getCategoryList(params)
+	        },        
+	        handleEdit(index, row){
+
+	        },
+	        handleDelete(index, row){
+
+	        },
+	        ...mapActions([
+	          'getCategoryList'
+	        ])            	
+        },
+        computed:{
+	        ...mapState({
+	            categoryList: state => state.diary.categoryList
+	        })       
+        },
+        components: {}
+    }
+</script>
+<style lang="sass">
+	@import "../../public/scss/index.scss";
+	$prefix: 'wuji';
+	$container-width: 900px;
+	.#{$prefix}-container{
+	    width: $container-width;
+	    .#{$prefix}-category{
+	    	padding: 80px 0 40px 0;
+	    	.color-span{
+	    		display: inline-block;
+	    		width: 40px;
+	    		height: 20px;
+	    	}
+	    }
+	}
+</style>
diff --git a/assets/modules/diary/detail.vue b/assets/modules/diary/detail.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-    div.wuji-container.center-block
+    div.wuji-container.center-block(v-if="diary")
         div.wuji-header
             div.wuji-category
                 {{diary.categoryName}}
@@ -47,7 +47,7 @@
         name: 'diarydetail',
         data(){
             return{
-                diary: {},
+                diary: null,
                 position: 0,
                 visible: false,
                 checkVideo: Browser.checkVideo()

diff --git a/assets/modules/diary/index.vue b/assets/modules/diary/index.vue
@@ -11,13 +11,16 @@ div.wuji-container.center-block
                     span(:style="{backgroundColor: '#' + (category.colorHex ? category.colorHex : 'transparent'), borderColor: '#' + (category.colorHex ? category.colorHex : '808080')}")
                     span(:class="{active: (activeCategory === category.categoryId) }") {{category.name}}
                     span(:class="{active: (activeCategory === category.categoryId) }") ({{category.diaryCount}})
+                li 
+                    router-link(:to="{path: 'category'}")管理我的分类
         div.wuji-add
             i.fa.fa-pencil-square-o
             span
                 router-link(:to = "{ path: 'create' }") 添加日记
     time-line(width="450", :list="diaryFilterList")
 </template>
 <script>
+import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
 import timeLine from 'component/timeline'
 import Api from "utils/api"
@@ -27,25 +30,15 @@ export default {
     name: 'diaryindex',
     data () {
         return {
-            categoryList: [],
             diaryList: [],
             activeCategory: null
         }
-    },
+    }, 
     created(){
-        this.getCategoryList();
+        this.loadCategoryList();
         this.getMyDiarys();
     },
     methods:{
-        getCategoryList(){
-            let _self = this, params;
-            //params => 参数
-            Api.getCategoryList(params).then(result => {
-                _self.categoryList = result;
-            }).catch(error => {
-                Message({message: error, type: 'error', showClose: true});
-            });
-        },
         getMyDiarys(){
             let _self = this, params;
             //params => 参数
@@ -55,6 +48,12 @@ export default {
                 Message({message: error, type: 'error', showClose: true});
             });
         },
+        loadCategoryList(params = {}){
+            this.getCategoryList(params)
+        },        
+        ...mapActions([
+          'getCategoryList'
+        ])        
     },
     computed:{
         categoryTotal(){
@@ -74,7 +73,10 @@ export default {
         },
         isActiveCategory(){
             return Object.prototype.toString.call(this.activeCategory) === "[object Null]";
-        }
+        },
+        ...mapState({
+            categoryList: state => state.diary.categoryList
+        })        
     },
     components: {
         timeLine

diff --git a/assets/routers/diary.js b/assets/routers/diary.js
@@ -7,11 +7,13 @@ Vue.use(VueRouter)
 const Index = resolve => require(['modules/diary/index.vue'], resolve)
 const Edit = resolve => require(['modules/diary/edit.vue'], resolve)
 const Detail = resolve => require(['modules/diary/detail.vue'], resolve)
+const Category = resolve => require(['modules/diary/category.vue'], resolve)
 const routes = [
   { path: '/', component: Index, name: 'index' },
   { path: '/create', component: Edit, name: 'create' },
   { path: '/edit', component: Edit, name: 'edit'},
-  { path: '/detail', component: Detail, name: 'detail' }
+  { path: '/detail', component: Detail, name: 'detail' },
+  { path: '/category', component: Category, name: 'category' }
 ]
 
 export default new VueRouter({

diff --git a/assets/stores/index.js b/assets/stores/index.js
@@ -5,12 +5,15 @@ import Vuex from 'vuex'
 import example from './module/example'
 //用户模块
 import account from './module/account'
+//日记模块
+import diary from './module/diary'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     modules: {
 		example,
-		account
+		account,
+		diary
     }
 })
diff --git a/assets/stores/module/diary.js b/assets/stores/module/diary.js
@@ -0,0 +1,27 @@
+import {MY_CATEGORY_LIST} from "config/ports";
+import Api, {createAction} from "utils/api";
+
+const state = {
+    //我的分类
+    categoryList: []
+};
+const mutations = {
+    [MY_CATEGORY_LIST](state, {payload}){
+        state.categoryList = payload;
+    }
+};
+
+const actions = {
+    getCategoryList: createAction(MY_CATEGORY_LIST, Api.getCategoryList)
+}
+
+const getters = {
+
+}
+
+export default {
+    state,
+    actions,
+    mutations,
+    getters
+}