github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: category and tag form. (#193)

pull/163/head
Ryan Wang 2020-06-08 11:24:01 +08:00 committed by GitHub
parent 6c626b76cb
commit dc4d1e2d98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 183 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -16623,6 +16623,11 @@
"codemirror": "^5.22.0" "codemirror": "^5.22.0"
} }
}, },
"vue-contextmenujs": {
"version": "1.3.9",
"resolved": "https://registry.npmjs.org/vue-contextmenujs/-/vue-contextmenujs-1.3.9.tgz",
"integrity": "sha512-Y5QMBLsxnSFD+NIebYsqL6nA6hu9N8Kf4i+wB9WhqUkoyIRpBJVu2ZazU9tduHOp6kai2yJYzIgvfCOJDi18ag=="
},
"vue-count-to": { "vue-count-to": {
"version": "1.0.13", "version": "1.0.13",
"resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz", "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",

1
package.json
View File

@ -29,7 +29,6 @@
"vue-router": "^3.1.6", "vue-router": "^3.1.6",
"vuejs-logger": "^1.5.3", "vuejs-logger": "^1.5.3",
"vuex": "^3.1.1", "vuex": "^3.1.1",
"flv.js": "^1.5.0",
"vue-contextmenujs": "^1.3.9" "vue-contextmenujs": "^1.3.9"
}, },
"devDependencies": { "devDependencies": {

16
src/views/attachment/AttachmentList.vue
View File

@ -275,11 +275,17 @@ export default {
this.queryParam.size = this.pagination.size this.queryParam.size = this.pagination.size
this.queryParam.sort = this.pagination.sort this.queryParam.sort = this.pagination.sort
this.listLoading = true this.listLoading = true
attachmentApi.query(this.queryParam).then(response => { attachmentApi
this.attachments = response.data.data.content .query(this.queryParam)
this.pagination.total = response.data.data.total .then(response => {
this.listLoading = false this.attachments = response.data.data.content
}) this.pagination.total = response.data.data.total
})
.finally(() => {
setTimeout(() => {
this.listLoading = false
}, 200)
})
}, },
loadMediaTypes() { loadMediaTypes() {
attachmentApi.getMediaTypes().then(response => { attachmentApi.getMediaTypes().then(response => {

149
src/views/post/CategoryList.vue
View File

@ -13,28 +13,39 @@
:title="title" :title="title"
:bodyStyle="{ padding: '16px' }" :bodyStyle="{ padding: '16px' }"
> >
<a-form layout="horizontal"> <a-form-model
<a-form-item ref="categoryForm"
:model="categoryToCreate"
:rules="categoryRules"
layout="horizontal"
>
<a-form-model-item
label="名称：" label="名称："
help="* 页面上所显示的名称" help="* 页面上所显示的名称"
prop="name"
> >
<a-input v-model="categoryToCreate.name" /> <a-input v-model="categoryToCreate.name" />
</a-form-item> </a-form-model-item>
<a-form-item <a-form-model-item
label="别名：" label="别名："
help="* 一般为单个分类页面的标识，最好为英文" help="* 一般为单个分类页面的标识，最好为英文"
prop="slug"
> >
<a-input v-model="categoryToCreate.slug" /> <a-input v-model="categoryToCreate.slug" />
</a-form-item> </a-form-model-item>
<a-form-item label="上级目录："> <a-form-model-item
label="上级目录："
prop="parentId"
>
<category-select-tree <category-select-tree
:categories="categories" :categories="categories"
v-model="categoryToCreate.parentId" v-model="categoryToCreate.parentId"
/> />
</a-form-item> </a-form-model-item>
<a-form-item <a-form-model-item
label="封面图：" label="封面图："
help="* 在分类页面可展示，需要主题支持" help="* 在分类页面可展示，需要主题支持"
prop="thumbnail"
> >
<a-input v-model="categoryToCreate.thumbnail"> <a-input v-model="categoryToCreate.thumbnail">
<a <a
@ -45,22 +56,23 @@
<a-icon type="picture" /> <a-icon type="picture" />
</a> </a>
</a-input> </a-input>
</a-form-item> </a-form-model-item>
<a-form-item <a-form-model-item
label="描述：" label="描述："
help="* 分类描述，部分主题可显示" help="* 分类描述，部分主题可显示"
prop="description"
> >
<a-input <a-input
type="textarea" type="textarea"
v-model="categoryToCreate.description" v-model="categoryToCreate.description"
:autoSize="{ minRows: 3 }" :autoSize="{ minRows: 3 }"
/> />
</a-form-item> </a-form-model-item>
<a-form-item> <a-form-model-item>
<a-button <a-button
type="primary" type="primary"
@click="handleSaveClick" @click="handleSaveClick"
v-if="formType==='create'" v-if="!isUpdateForm"
>保存</a-button> >保存</a-button>
<a-button-group v-else> <a-button-group v-else>
<a-button <a-button
@ -69,12 +81,11 @@
>更新</a-button> >更新</a-button>
<a-button <a-button
type="dashed" type="dashed"
@click="handleAddCategory" @click="categoryToCreate = {}"
v-if="formType==='update'"
>返回添加</a-button> >返回添加</a-button>
</a-button-group> </a-button-group>
</a-form-item> </a-form-model-item>
</a-form> </a-form-model>
</a-card> </a-card>
</a-col> </a-col>
<a-col <a-col
@ -118,7 +129,7 @@
<a-menu slot="overlay"> <a-menu slot="overlay">
<a-menu-item> <a-menu-item>
<a <a
href="javascript:;" href="javascript:void(0);"
@click="handleEditCategory(item)" @click="handleEditCategory(item)"
>编辑</a> >编辑</a>
</a-menu-item> </a-menu-item>
@ -274,13 +285,20 @@ export default {
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
data() { data() {
return { return {
formType: 'create',
categories: [], categories: [],
categoryToCreate: {}, categoryToCreate: {},
thumbnailDrawerVisible: false, thumbnailDrawerVisible: false,
menu: {},
loading: false, loading: false,
columns columns,
categoryRules: {
name: [
{ required: true, message: '* 分类名称不能为空', trigger: ['change', 'blur'] },
{ max: 255, message: '* 分类名称的字符长度不能超过 255', trigger: ['change', 'blur'] }
],
slug: [{ max: 255, message: '* 分类别名的字符长度不能超过 255', trigger: ['change', 'blur'] }],
thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change', 'blur'] }],
description: [{ max: 100, message: '* 分类描述的字符长度不能超过 100', trigger: ['change', 'blur'] }]
}
} }
}, },
computed: { computed: {
@ -289,6 +307,9 @@ export default {
return '修改分类' return '修改分类'
} }
return '添加分类' return '添加分类'
},
isUpdateForm() {
return this.categoryToCreate.id
} }
}, },
created() { created() {
@ -297,56 +318,68 @@ export default {
methods: { methods: {
loadCategories() { loadCategories() {
this.loading = true this.loading = true
categoryApi.listAll(true).then(response => { categoryApi
this.categories = response.data.data .listAll(true)
this.loading = false .then(response => {
}) this.categories = response.data.data
})
.finally(() => {
setTimeout(() => {
this.loading = false
}, 200)
})
}, },
handleSaveClick() { handleSaveClick() {
this.createOrUpdateCategory() this.createOrUpdateCategory()
}, },
handleAddCategory() {
this.formType = 'create'
this.categoryToCreate = {}
},
handleEditCategory(category) { handleEditCategory(category) {
this.categoryToCreate = category this.categoryToCreate = category
this.formType = 'update'
}, },
handleDeleteCategory(id) { handleDeleteCategory(id) {
categoryApi.delete(id).then(response => { categoryApi
this.$message.success('删除成功！') .delete(id)
this.loadCategories() .then(response => {
this.handleAddCategory() this.$message.success('删除成功！')
}) this.categoryToCreate = {}
})
.finally(() => {
this.loadCategories()
})
}, },
createOrUpdateCategory() { createOrUpdateCategory() {
if (!this.categoryToCreate.name) { this.$refs.categoryForm.validate(valid => {
this.$notification['error']({ if (valid) {
message: '提示', if (this.categoryToCreate.id) {
description: '分类名称不能为空！' categoryApi
}) .update(this.categoryToCreate.id, this.categoryToCreate)
return .then(response => {
} this.$message.success('更新成功！')
if (this.categoryToCreate.id) { this.categoryToCreate = {}
categoryApi.update(this.categoryToCreate.id, this.categoryToCreate).then(response => { })
this.$message.success('更新成功！') .finally(() => {
this.loadCategories() this.loadCategories()
}) })
} else { } else {
categoryApi.create(this.categoryToCreate).then(response => { categoryApi
this.$message.success('保存成功！') .create(this.categoryToCreate)
this.loadCategories() .then(response => {
}) this.$message.success('保存成功！')
} this.categoryToCreate = {}
this.handleAddCategory() })
.finally(() => {
this.loadCategories()
})
}
}
})
}, },
handleCategoryToMenu(category) { handleCategoryToMenu(category) {
this.menu['name'] = category.name const menu = {
this.menu['url'] = `${category.fullPath}` name: category.name,
menuApi.create(this.menu).then(response => { url: `${category.fullPath}`
}
menuApi.create(menu).then(response => {
this.$message.success('添加到菜单成功！') this.$message.success('添加到菜单成功！')
this.menu = {}
}) })
}, },
handleSelectThumbnail(data) { handleSelectThumbnail(data) {

109
src/views/post/TagList.vue
View File

@ -13,22 +13,30 @@
:title="title" :title="title"
:bodyStyle="{ padding: '16px' }" :bodyStyle="{ padding: '16px' }"
> >
<a-form layout="horizontal"> <a-form-model
<a-form-item ref="tagForm"
:model="tagToCreate"
:rules="tagRules"
layout="horizontal"
>
<a-form-model-item
label="名称：" label="名称："
help="* 页面上所显示的名称" help="* 页面上所显示的名称"
prop="name"
> >
<a-input v-model="tagToCreate.name" /> <a-input v-model="tagToCreate.name" />
</a-form-item> </a-form-model-item>
<a-form-item <a-form-model-item
label="别名：" label="别名："
help="* 一般为单个标签页面的标识，最好为英文" help="* 一般为单个标签页面的标识，最好为英文"
prop="slug"
> >
<a-input v-model="tagToCreate.slug" /> <a-input v-model="tagToCreate.slug" />
</a-form-item> </a-form-model-item>
<a-form-item <a-form-model-item
label="封面图：" label="封面图："
help="* 在标签页面可展示，需要主题支持" help="* 在标签页面可展示，需要主题支持"
prop="thumbnail"
> >
<a-input v-model="tagToCreate.thumbnail"> <a-input v-model="tagToCreate.thumbnail">
<a <a
@ -39,12 +47,12 @@
<a-icon type="picture" /> <a-icon type="picture" />
</a> </a>
</a-input> </a-input>
</a-form-item> </a-form-model-item>
<a-form-item> <a-form-model-item>
<a-button <a-button
type="primary" type="primary"
@click="handleSaveClick" @click="handleSaveClick"
v-if="formType==='create'" v-if="!isUpdateForm"
>保存</a-button> >保存</a-button>
<a-button-group v-else> <a-button-group v-else>
<a-button <a-button
@ -53,8 +61,7 @@
>更新</a-button> >更新</a-button>
<a-button <a-button
type="dashed" type="dashed"
@click="handleAddTag" @click="tagToCreate = {}"
v-if="formType==='update'"
>返回添加</a-button> >返回添加</a-button>
</a-button-group> </a-button-group>
<a-popconfirm <a-popconfirm
@ -62,15 +69,15 @@
@confirm="handleDeleteTag(tagToCreate.id)" @confirm="handleDeleteTag(tagToCreate.id)"
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
v-if="formType==='update'" v-if="isUpdateForm"
> >
<a-button <a-button
type="danger" type="danger"
style="float:right" style="float:right"
>删除</a-button> >删除</a-button>
</a-popconfirm> </a-popconfirm>
</a-form-item> </a-form-model-item>
</a-form> </a-form-model>
</a-card> </a-card>
</a-col> </a-col>
<a-col <a-col
@ -121,10 +128,17 @@ export default {
components: { AttachmentSelectDrawer }, components: { AttachmentSelectDrawer },
data() { data() {
return { return {
formType: 'create',
tags: [], tags: [],
tagToCreate: {}, tagToCreate: {},
thumbnailDrawerVisible: false thumbnailDrawerVisible: false,
tagRules: {
name: [
{ required: true, message: '* 标签名称不能为空', trigger: ['change', 'blur'] },
{ max: 255, message: '* 标签名称的字符长度不能超过 255', trigger: ['change', 'blur'] }
],
slug: [{ max: 255, message: '* 标签别名的字符长度不能超过 255', trigger: ['change', 'blur'] }],
thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change', 'blur'] }]
}
} }
}, },
computed: { computed: {
@ -133,6 +147,9 @@ export default {
return '修改标签' return '修改标签'
} }
return '添加标签' return '添加标签'
},
isUpdateForm() {
return this.tagToCreate.id
} }
}, },
created() { created() {
@ -147,43 +164,41 @@ export default {
handleSaveClick() { handleSaveClick() {
this.createOrUpdateTag() this.createOrUpdateTag()
}, },
handleAddTag() {
this.formType = 'create'
this.tagToCreate = {}
},
handleEditTag(tag) { handleEditTag(tag) {
this.tagToCreate = tag this.tagToCreate = tag
this.formType = 'update'
}, },
handleDeleteTag(tagId) { handleDeleteTag(tagId) {
tagApi.delete(tagId).then(response => { tagApi
this.$message.success('删除成功！') .delete(tagId)
this.loadTags() .then(response => {
this.handleAddTag() this.$message.success('删除成功！')
}) this.tagToCreate = {}
})
.finally(() => {
this.loadTags()
})
}, },
createOrUpdateTag() { createOrUpdateTag() {
if (!this.tagToCreate.name) { this.$refs.tagForm.validate(valid => {
this.$notification['error']({ if (valid) {
message: '提示', if (this.tagToCreate.id) {
description: '标签名称不能为空！' tagApi.update(this.tagToCreate.id, this.tagToCreate).then(response => {
}) this.$message.success('更新成功！')
return this.tagToCreate = {}
} })
if (this.tagToCreate.id) { } else {
tagApi.update(this.tagToCreate.id, this.tagToCreate).then(response => { tagApi
this.$message.success('更新成功！') .create(this.tagToCreate)
this.loadTags() .then(response => {
this.tagToCreate = {} this.$message.success('保存成功！')
}) this.tagToCreate = {}
} else { })
tagApi.create(this.tagToCreate).then(response => { .finally(() => {
this.$message.success('保存成功！') this.loadTags()
this.loadTags() })
this.tagToCreate = {} }
}) }
} })
this.handleAddTag()
}, },
handleSelectThumbnail(data) { handleSelectThumbnail(data) {
this.$set(this.tagToCreate, 'thumbnail', encodeURI(data.path)) this.$set(this.tagToCreate, 'thumbnail', encodeURI(data.path))

80
src/views/system/Installation.vue
View File

@ -234,86 +234,34 @@ export default {
generalRules: { generalRules: {
username: [ username: [
{ { required: true, message: '* 用户名不能为空', trigger: ['change', 'blur'] },
required: true, { max: 50, message: '* 用户名的字符长度不能超过 50', trigger: ['change', 'blur'] }
message: '用户名不能为空',
trigger: 'change'
},
{
max: 50,
message: '用户名的字符长度不能超过 50',
trigger: 'change'
}
], ],
nickname: [ nickname: [
{ { required: true, message: '* 用户昵称不能为空', trigger: ['change', 'blur'] },
required: true, { max: 255, message: '* 用户昵称的字符长度不能超过 255', trigger: ['change', 'blur'] }
message: '用户昵称不能为空',
trigger: 'change'
},
{
max: 255,
message: '用户昵称的字符长度不能超过 255',
trigger: 'change'
}
], ],
email: [ email: [
{ { required: true, message: '* 电子邮件地址不能为空', trigger: ['change', 'blur'] },
required: true, { max: 127, message: '* 电子邮件地址的字符长度不能超过 127', trigger: ['change', 'blur'] },
message: '电子邮件地址不能为空',
trigger: 'change'
},
{
max: 127,
message: '电子邮件地址的字符长度不能超过 127',
trigger: 'change'
},
{ {
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/g, pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/g,
message: '电子邮件地址的格式不正确', message: '* 电子邮件地址的格式不正确',
trigger: 'change' trigger: ['change', 'blur']
} }
], ],
password: [ password: [
{ { required: true, message: '* 密码不能为空', trigger: ['change', 'blur'] },
required: true, { min: 8, max: 100, message: '* 密码的字符长度必须在 8 - 100 之间', trigger: ['change', 'blur'] }
message: '密码不能为空',
trigger: 'change'
},
{
min: 8,
max: 100,
message: '密码的字符长度必须在 8 - 100 之间',
trigger: 'change'
}
], ],
confirmPassword: [ confirmPassword: [
{ { required: true, message: '* 确认密码不能为空', trigger: ['change', 'blur'] },
required: true, { validator: confirmPasswordValidate, trigger: ['change', 'blur'] }
message: '确认密码不能为空',
trigger: 'change'
},
{
validator: confirmPasswordValidate,
trigger: 'change'
}
] ]
}, },
blogRules: { blogRules: {
url: [ url: [{ required: true, message: '* 博客地址不能为空', trigger: ['change', 'blur'] }],
{ title: [{ required: true, message: '* 博客标题不能为空', trigger: ['change', 'blur'] }]
required: true,
message: '博客地址不能为空',
trigger: 'change'
}
],
title: [
{
required: true,
message: '博客标题不能为空',
trigger: 'change'
}
]
} }
} }
}, },