Skip to content

Commit f662c25

Browse files
pycoder404pycoder404
committed
update create page:tag and category and submit style
1 parent 2d547d2 commit f662c25

File tree

5 files changed

+55
-25
lines changed

5 files changed

+55
-25
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,8 @@ npm run lint
2222

2323
### Customize configuration
2424
See [Configuration Reference](https://cli.vuejs.org/config/).
25+
26+
27+
### Todo list
28+
[] add admin's page
29+
[] how to display draft and private articles

‎src/styles/index.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,10 @@ aside {
142142
line-height: 50px;
143143
position: relative;
144144
width: 100%;
145-
text-align: right;
145+
text-align: left;
146146
padding-right: 20px;
147147
transition: 600ms ease position;
148-
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
148+
//background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
149149

150150
.subtitle {
151151
font-size: 20px;
@@ -155,7 +155,9 @@ aside {
155155
&.draft {
156156
background: #d0d0d0;
157157
}
158-
158+
&.published {
159+
background: rgba(208, 208, 208, 0.38);
160+
}
159161
&.deleted {
160162
background: #d0d0d0;
161163
}

‎src/views/article/components/ArticleComment.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
<el-form ref="commentFormRef" :model="commentForm">
4747
<el-form-item prop="content">
4848
<mavon-editor
49+
:autofocus="false"
4950
ref="commentEditor"
5051
class="mavon-edtior-custom-comment"
5152
code-style="vs2015"

‎src/views/article/create.vue

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,46 +31,52 @@
3131
</el-form-item>
3232
</div>
3333

34-
<el-form-item label="分类" prop="category">
34+
<el-form-item style="margin-left:45px;" label="分类: " prop="category">
3535
<el-radio-group v-model="postForm.category">
3636
<el-radio-button
37+
class="mar-left"
3738
v-for="category in articleCategories"
3839
:key="category['title']"
3940
:label="category['title']"
4041
:value="category['id']"
4142
>
4243
{{category['title']}}
4344
</el-radio-button>
44-
<el-button icon="PlusIcon" @click="addCategoryDialogVisible=true">新建分类</el-button>
45-
4645
</el-radio-group>
46+
<div class="mar-left">
47+
<el-button icon="PlusIcon" @click="addCategoryDialogVisible=true">新建分类</el-button>
48+
</div>
4749
</el-form-item>
4850

49-
<el-dialog v-model="addCategoryDialogVisible" title="添加分类">
5051

51-
<el-input v-model="newCategory"/>
52-
<template #footer>
53-
<span class="dialog-footer">
54-
<el-button @click="addCategoryDialogVisible = false">Cancel</el-button>
55-
<el-button type="primary" @click="submitToCreateCategory">Confirm</el-button>
56-
</span>
57-
</template>
58-
</el-dialog>
59-
60-
<el-form-item label='标签' prop="tags">
52+
<el-form-item style="margin-left:45px;" label='标签: ' prop="tags">
6153
<el-checkbox-group
6254
v-model="postForm.tags"
6355
>
6456
<el-checkbox
57+
class="mar-left"
6558
v-for="tag in articleTags"
6659
:key="tag['title']"
6760
:label="tag['title']"
6861
:value="tag['title']"
6962
/>
70-
<el-button icon="PlusIcon" @click="addTagDialogVisible=true">新建标签</el-button>
7163
</el-checkbox-group>
64+
<div class="mar-left">
65+
<el-button icon="PlusIcon" @click="addTagDialogVisible=true">新建标签</el-button>
66+
</div>
67+
7268
</el-form-item>
7369

70+
<el-dialog v-model="addCategoryDialogVisible" title="添加分类">
71+
<el-input v-model="newCategory"/>
72+
<template #footer>
73+
<span class="dialog-footer">
74+
<el-button @click="addCategoryDialogVisible = false">Cancel</el-button>
75+
<el-button type="primary" @click="submitToCreateCategory">Confirm</el-button>
76+
</span>
77+
</template>
78+
</el-dialog>
79+
7480
<el-dialog v-model="addTagDialogVisible" title="添加标签">
7581
<el-input v-model="newTag"/>
7682
<template #footer>
@@ -80,14 +86,18 @@
8086
</span>
8187
</template>
8288
</el-dialog>
89+
8390
</el-form>
8491

8592
<sticky-nav
86-
:class-name="'sub-navbar '+postForm.status"
87-
style="padding: 0px 45px 15px 45px;"
93+
class-name="sub-navbar"
94+
style="padding: 0px 45px 0px 45px;"
8895
>
89-
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
90-
Submit
96+
<el-button v-loading="loading" type="success" @click="submitForm('published')">
97+
Publish
98+
</el-button>
99+
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm('draft')">
100+
Save Draft
91101
</el-button>
92102
</sticky-nav>
93103
</div>
@@ -282,13 +292,14 @@
282292
const title = 'Edit Article'
283293
document.title = `${title} - ${this.postForm.id}`
284294
},
285-
submitForm() {
295+
submitForm(status = 'draft') {
286296
console.log(this.postForm)
287297
this.$refs.postFormRef.validate(valid => {
288298
if (valid) {
289299
this.loading = true
290300
if (this.isEdit) {
291301
const articleId = this.$route.params && this.$route.params.id
302+
this.postForm['status'] = status
292303
updateArticle(articleId, this.postForm).then((res) => {
293304
const resp = res
294305
this.$notify({
@@ -393,6 +404,10 @@
393404
}
394405
}
395406
407+
.mar-left {
408+
margin-left: 10px;
409+
}
410+
396411
.article-textarea ::v-deep {
397412
textarea {
398413
padding-right: 40px;

‎src/views/article/list.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717
<div class="article-desc">
1818
<span>
1919
@{{article.created_time }} {{ article.author }}, views:{{article.views_count}} likes:{{article.likes_count}} comments:{{article.comments_count}}
20-
<el-button icon="DeleteFilled" text/>
20+
<el-button v-if=false icon="DeleteFilled" text/>
2121
<router-link
22+
v-if="false"
2223
:to="'/article/edit/'+ article.id"
2324
class="article-title"
2425
><el-button
@@ -48,6 +49,7 @@
4849
<script>
4950
import {getArticleList} from '@/api/article'
5051
import PaginNation from '@/components/PagiNation'
52+
import {mapGetters} from "vuex";
5153
// import SvgIcon from '@/components/SvgIcon/index'
5254
5355
export default {
@@ -79,9 +81,14 @@
7981
created() {
8082
this.getList()
8183
},
84+
computed: {
85+
...mapGetters([
86+
'roles'
87+
])
88+
},
8289
methods: {
8390
getList() {
84-
this.listLoading = true
91+
// this.listLoading = true
8592
// fixme 这里在前端的url界面没有显示 ?page=1&pagesize=10,并且这里如果地址栏如果人工输入，会导致pagination 显示错乱
8693
Object.assign(this.listQuery, this.$route.query)
8794
getArticleList(this.listQuery).then(response => {

0 commit comments

Comments
 (0)