Skip to content

Commit

Permalink
分类模块添加删除
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaobinwu
xiaobinwu committed Apr 17, 2017
1 parent 6def14d commit 5dda661
Show file tree
Hide file tree
Showing 8 changed files with 229 additions and 27 deletions.
29 changes: 27 additions & 2 deletions assets/component/footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,44 @@
<template lang="jade">
div.footer
div.footer(:class="{fixed: isFixed}")
div.left-section 不知道写什么
div.center-section Copyright © 2017 吾记
div.right-section 不知道写什么
</template>
<script>
import Vue from 'vue'
import Browser from 'utils/browser'
export default{
name: 'footer',
data(){
return{
isFixed: false,
isie: Browser.isIE(),
winHeight: this.isie ? document.documentElement.clientHeight : window.innerHeight
}
},
props:{
bodyHeight: Number
},
watch:{
bodyHeight(newVal){
if(this.winHeight - newVal >= 100){
this.isFixed = true;
}else{
this.isFixed = false;
}
}
},
components: {}
}
}
</script>
<style lang="sass">
@import "../public/scss/_variables.scss";
.footer{
&.fixed{
position: fixed;
left: 0;
bottom: 0;
}
width: 100%;
min-width: $container-width;
display: flex;
Expand Down
2 changes: 2 additions & 0 deletions assets/config/ports.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export const JOURNAL_LIST = getApi('WuJi/GetPasserBy');

//日记模块
export const MY_CATEGORY_LIST = getApi('WuJi/GetCategoryList');
export const ADD_CATEGORY = getApi('WuJi/addCategory');
export const EDIT_CATEGORY = getApi('WuJi/editCategory');
export const MY_DIARYS_LIST = getApi('WuJi/GetMyDiarys');
export const EDIT_DIARY = getApi('WuJi/GetEditDiary');
export const DIARY_DETAIL = getApi('WuJi/GetDiaryDetail');
Expand Down
153 changes: 142 additions & 11 deletions assets/modules/diary/category.vue
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,65 @@
<template lang="jade">
div.wuji-container.center-block
div.wuji-category
el-button.add-btn(@click="handleAdd", type="primary") 添加我的分类
el-table(:data="categoryList", style="width: 100%")
el-table-column(prop="name", label="分类")
el-table-column(prop="colorHex", label="颜色")
el-table-column(prop="name", label="分类", align="center")
el-table-column(prop="colorHex", label="颜色", align="center")
template(scope="scope")
span.color-span(:style="{backgroundColor: '#' + scope.row.colorHex}")
el-table-column(prop="diaryCount", label="日记数")
el-table-column(label="操作")
span.color-span(:style="{backgroundColor: '#' + scope.row.colorHex}")
el-table-column(prop="diaryCount", label="日记数", align="center")
el-table-column(label="操作", align="center")
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)") 删除
div(slot="empty")
span 暂时没有数据，
a(href="javascript:;;", @click="handleAdd") 快速添加！
el-dialog(title="添加分类", v-model="dialogFormVisible")
el-form(:model="form")
el-form-item(label="分类名称", :label-width="formLabelWidth")
el-input(v-model="form.name", auto-complete="off")
el-form-item(label="分类颜色", :label-width="formLabelWidth", placeholder="1-8个字符")
el-select.category-select(v-model="form.colorHex", placeholder="请选择分类颜色")
el-option(v-for="item in categoryColor", :label="item", :value="item.substr(1)")
span.category-name {{ item }}
span.category-color(:style="{backgroundColor: item}")
div(slot="footer", class="dialog-footer")
el-button(@click="dialogFormVisible = false") 取消
el-button(type="primary", @click="doSave") 保存
</template>
<script>
import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
import {Table, TableColumn, Button} from "element-ui"
import { categoryColor } from 'config/color'
import Validator from 'utils/validator'
import {Table, TableColumn, Button, Dialog, Form, FormItem, Input, Select, Option, Message} from "element-ui"
// 引入组件
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Select)
Vue.use(Option)
export default{
name: 'category',
data(){
return{
title: '',
categoryColor: categoryColor,
dialogFormVisible: false,
formLabelWidth: '120px',
isCreate: true,
editRow: null,
form: {
name: '',
colorHex: ''
}
}
},
created(){
//防止页面强刷，store丢失
if(this.$store.state.diary.categoryList.length === 0){
Expand All @@ -31,21 +69,98 @@ div.wuji-container.center-block
methods:{
loadCategoryList(params = {}){
this.getCategoryList(params)
},
},
valid(){
let validator = new Validator();
const errorMsg = validator.add(this.form.name, [
{strategy: 'isNotEmpty', errorMsg:'分类名称不能为空！'},
{strategy: 'maxLength:8', errorMsg:'分类名称1-8个字符！'}
]).add(this.form.colorHex, [
{strategy: 'isNotEmpty', errorMsg:'分类颜色不能为空！'},
]).start();
validator = null;
return errorMsg;
},
handleEdit(index, row){
this.editRow = row;
this.form.name = row.name;
this.form.colorHex = row.colorHex;
this.isCreate = false;
this.dialogFormVisible = true;
},
handleDelete(index, row){
},
handleAdd(){
this.dialogFormVisible = true;
},
isSameName(item, index, array){
return item.name == this.form.name;
},
isSameColorHex(item, index, array){
return item.colorHex == this.form.colorHex;
},
doSave(){
const _self = this, errorMsg = this.valid();
let params;
if(this.isCreate){
params = {
"categoryId": this.categoryList.length + Math.floor(Math.random()*1000),
"userId": 533519,
"name": this.form.name,
"colorHex": this.form.colorHex,
"diaryCount": 0
};
}else{
params = {
"categoryId": this.editRow.categoryId,
"userId": this.editRow.userId,
"name": this.form.name,
"colorHex": this.form.colorHex,
"diaryCount": this.editRow.diaryCount
};
}
if(errorMsg){
return Message({ message: errorMsg, type: 'error', duration: 2000 });
}else if(this.categoryList.some(this.isSameName) || this.categoryList.some(this.isSameColorHex)){
return Message({ message: '分类名称和颜色不能有相同的！', type: 'error', duration: 2000 });
}
/*
异步保存处理成功后处理store
*/
if(this.isCreate){
this.addCategory(params).then(result => {
if(!result.error){
_self.reset();
return Message({ message: '提交成功', type: 'success', duration: 2000 });
}
});
}else{
this.editCategory(params).then(result => {
if(!result.error){
_self.reset();
return Message({ message: '修改成功', type: 'success', duration: 2000 });
}
});
}
},
reset(){
this.dialogFormVisible = false;
this.form.name = '';
this.form.colorHex = '';
this.editRow = null;
this.isCreate = true;
},
...mapActions([
'getCategoryList'
])
'getCategoryList',
'addCategory',
'editCategory'
])
},
computed:{
...mapState({
categoryList: state => state.diary.categoryList
})
})
},
components: {}
}
Expand All @@ -57,12 +172,28 @@ div.wuji-container.center-block
.#{$prefix}-container{
width: $container-width;
.#{$prefix}-category{
@include clearfix();
padding: 80px 0 40px 0;
.color-span{
display: inline-block;
width: 40px;
height: 20px;
}
.add-btn{
float: right;
margin-bottom: 20px;
}
}
}
.el-select-dropdown{
.category-color{
display: inline-block;
width: 40px;
height: 20px;
float: right;
}
}
.el-select-dropdown__item.selected.hover{
background-color: $main;
}
</style>
10 changes: 8 additions & 2 deletions assets/page/diary/index/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template lang="jade">
div.main
Aside(route="journals")
transition(name="slide", mode="out-in")
transition(name="slide", mode="out-in", @after-enter="computedBodyHeight")
router-view
Footer
Footer(:body-height="bodyHeight")
</template>

<script>
Expand All @@ -14,12 +14,18 @@ export default {
name: 'diary',
data () {
return {
bodyHeight: 0
}
},
components: {
Footer,
Aside
},
methods:{
computedBodyHeight(){
this.bodyHeight = document.querySelector('body').offsetHeight;
}
},
watch: {
'$route' (to, from) {
document.title = diary[to.name];
Expand Down
10 changes: 8 additions & 2 deletions assets/page/passing/index/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template lang="jade">
div.main
Aside(route="passing")
transition(name="slide", mode="out-in")
transition(name="slide", mode="out-in", @after-enter="computedBodyHeight")
router-view
Footer
Footer(:body-height="bodyHeight")
</template>

<script>
Expand All @@ -14,12 +14,18 @@ export default {
name: 'passing',
data () {
return {
bodyHeight: 0
}
},
components: {
Footer,
Aside
},
methods:{
computedBodyHeight(){
this.bodyHeight = document.querySelector('body').offsetHeight;
}
},
watch: {
'$route' (to, from) {
document.title = passing[to.name];
Expand Down
28 changes: 22 additions & 6 deletions assets/stores/module/diary.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,34 @@
import {MY_CATEGORY_LIST} from "config/ports";
import {MY_CATEGORY_LIST, ADD_CATEGORY, EDIT_CATEGORY} from "config/ports";
import Api, {createAction} from "utils/api";

import {Message} from "element-ui";
const state = {
//我的分类
categoryList: []
};
const mutations = {
[MY_CATEGORY_LIST](state, {payload}){
state.categoryList = payload;
}
[MY_CATEGORY_LIST](state, result){
state.categoryList = result.payload;
},
[ADD_CATEGORY](state, result){
state.categoryList.push(result.payload);
},
[EDIT_CATEGORY](state, result){
let cindex;
state.categoryList.forEach((item, index) =>{
if(item.categoryId == item.categoryId){
cindex = index;
return;
}
});

state.categoryList.splice(cindex, 1 , result);
},
};

const actions = {
getCategoryList: createAction(MY_CATEGORY_LIST, Api.getCategoryList)
getCategoryList: createAction(MY_CATEGORY_LIST, Api.getCategoryList),
addCategory: createAction(ADD_CATEGORY, Api.addCategory),
editCategory: createAction(EDIT_CATEGORY, Api.editCategory),
}

const getters = {
Expand Down
Loading

0 comments on commit 5dda661

Please sign in to comment.