lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增：添加标签管理

Browse Source
This commit is contained in:
jmal 2020-12-02 19:49:50 +08:00
parent 8ccd5ffce8
commit 43987938bb
7 changed files with 453 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/api/tag.js Normal file
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
const qs = require('qs')
export default {
tagList(params) {
return request({
url: 'tag/list',
method: 'get',
params
})
},
tagInfo(params) {
return request({
url: 'tag/info',
method: 'get',
params
})
},
add(data) {
return request({
url: 'tag/add',
method: 'post',
data
})
},
update(data) {
return request({
url: 'tag/update',
method: 'put',
data
})
},
delete(params) {
return request({
url: 'tag/delete',
method: 'delete',
params,
paramsSerializer: function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
})
}
}

6
src/router/index.js
View File

@ -249,6 +249,12 @@ export const constantRoutes = [
name: 'manager-categories',
component: () => import('@/views/setting/articles/categoryManager'),
meta: { title: '分类管理', icon: 'fenlei' }
},
{
path: 'manager-tags',
name: 'manager-tags',
component: () => import('@/views/setting/articles/tagManager'),
meta: { title: '标签管理', icon: 'biaoqian' }
}
]
},

8
src/styles/setting.scss
View File

@ -103,6 +103,14 @@ a:hover {
margin-top: 10px;
max-width: 300px;
}
.el-form-item__content {
.instruction {
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
}
}
.instruction {
color: #9a9a9a;
font-size: .8125rem;

152
src/views/markdown/index.vue
View File

@ -19,13 +19,13 @@
</div>
</el-header>
<el-main>
<div id="vditor"></div>
<div id="vditor" v-loading="vditorLoading"></div>
</el-main>
</div>
<div class="editor-right">
<div class="operation">
<el-button class="release-button" type="warning" size="small" @click="saveDraft" :loading="updating">保存草稿</el-button>
<el-button class="release-button" type="primary" size="small" @click="release" :loading="updating">{{ editStatus?'发布文章':'更新文章' }}</el-button>
<el-button class="release-button" type="primary" size="small" @click="release" :loading="updating">{{ editStatus?'更新文章':'发布文章' }}</el-button>
</div>
<div class="more-setting">
<p class="mark-setting-label">文章封面：</p>
@ -55,6 +55,38 @@
clearable
@change="selectCategory"
></el-cascader>
<p class="mark-setting-label">标签：</p>
<el-tag
v-for="tag in dynamicTags"
:key="tag.id"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-autocomplete
:class="[inputNewTagClass, inputValueExist?inputErrorClass:'']"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
:fetch-suggestions="querySearch"
@select="handleSelect"
placeholder="请输入内容"
@keyup.enter.native="handleInputConfirm"
></el-autocomplete>
<!-- <el-input-->
<!-- :class="[inputNewTagClass, inputValueExist?inputErrorClass:'']"-->
<!-- v-if="inputVisible"-->
<!-- v-model="inputValue"-->
<!-- ref="saveTagInput"-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleInputConfirm"-->
<!-- @blur="handleInputConfirm"-->
<!-- >-->
<!-- </el-input>-->
<div v-if="inputValueExist" class="instruction-error">该标签已存在</div>
<el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
</div>
</div>
</div>
@ -86,6 +118,7 @@
import Vditor from 'vditor'
import "vditor/src/assets/scss/index.scss"
import categoryApi from "@/api/category";
import tagApi from "@/api/tag";
let toolbar = [
'emoji',
@ -158,12 +191,21 @@
categories: [],
categoryIdsList: [],
draft: false,
articleLink: `${window.origin}/artiles/`
articleLink: `${window.origin}/artiles/`,
tags: [],
dynamicTags: [],
inputVisible: false,
inputValue: '',
inputValueExist: false,
inputNewTagClass: 'input-new-tag',
inputErrorClass: 'input-error',
vditorLoading: true,
}
},
mounted() {
this.getMarkdown()
this.categoryTree()
this.getTags()
const that = this
window.onresize = function temp() {
that.reHeight()
@ -186,6 +228,20 @@
this.getMarkdown(true)
this.categoryTree()
},
querySearch(queryString, cb) {
let tags = this.tags
let results = queryString ? tags.filter((tag) => {
return (tag.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}) : tags
// 调用 callback 返回建议列表的数据
results = results.map(res => {
return {value: res.name}
})
cb(results)
},
handleSelect(item){
this.handleInputConfirm()
},
valueHasChanged(){
this.$emit('update:hasChange', true)
},
@ -195,24 +251,29 @@
markdownApi.getMarkdown({
mark: this.$route.query.id
}).then((res) => {
this.file = res.data
this.content = this.file.contentText
this.filename = this.file.name.split('.md')[0]
this.storageLocation = res.data.path
if(this.categories && this.categories.length > 0){
this.findCategoryIds(null, this.categories, this.file.categoryIds)
}
// 初始化编辑器
if(isReload){
this.contentEditor.setValue(res.data.contentText)
} else {
this.vditorInit(res.data.contentText)
}
this.file = res.data
this.content = this.file.contentText
this.filename = this.file.name.split('.md')[0]
this.storageLocation = res.data.path
// 加载分类
if(this.categories && this.categories.length > 0){
this.findCategoryIds(null, this.categories, this.file.categoryIds)
}
// 加载标签
if(this.tags && this.tags.length > 0) {
this.loadDynamicTags()
}
}).then(() => {
const that = this
setTimeout(function (){
that.$emit('update:hasChange', false)
}, 100)
}, 200)
})
} else {
if(isReload){
@ -223,13 +284,46 @@
}
},
categoryTree() {
categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
categoryApi.categoryTree().then(res => {
this.categories = res.data
if(this.file.categoryIds && this.file.categoryIds.length > 0){
this.findCategoryIds(null, this.categories, this.file.categoryIds)
}
})
},
getTags() {
tagApi.tagList().then(res => {
this.tags = res.data
if(this.file.tagIds && this.file.tagIds.length > 0) {
this.loadDynamicTags()
}
})
},
loadDynamicTags() {
this.dynamicTags = this.tags.filter(tag => this.file.tagIds.includes(tag.id)).map(tag => tag.name)
},
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
});
},
handleInputConfirm() {
let inputValue = this.inputValue
if (inputValue) {
if (this.dynamicTags.includes(inputValue)){
this.inputValueExist = true
return
}
this.dynamicTags.push(inputValue)
}
this.inputValueExist = false
this.inputVisible = false
this.inputValue = ''
},
findCategoryIds(parentCategory, categories, categoryIds) {
if(!categoryIds){
return
@ -269,6 +363,7 @@
},
after: () => {
this.contentEditor.setValue(content)
console.log('sdf')
},
input: (val) => {
this.valueHasChanged()
@ -374,6 +469,7 @@
isDraft: this.draft,
slug: this.file.slug ? this.file.slug : this.filename,
categoryIds: categoryIds,
tagNames: this.dynamicTags,
currentDirectory: this.storageLocation,
contentText: this.contentEditor.getValue()
}).then(() => {
@ -469,7 +565,37 @@
}
}
}
/deep/ .el-tag {
margin-left: 8px;
margin-top: 8px;
}
/deep/ .button-new-tag {
margin-left: 8px;
margin-top: 8px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
/deep/ .input-new-tag {
margin-left: 8px;
margin-top: 8px;
max-width: 94px;
vertical-align: bottom;
}
/deep/ .input-error {
input {
border-color: #f56c6c;
}
}
.instruction-error {
color: #F56C6C;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
margin-left: 8px;
}
@media (min-width: 1200px) {
.article-editor {
max-width: 1200px;

2
src/views/setting/articles/articleManager.vue
View File

@ -286,7 +286,7 @@ export default {
}
},
categoryTree() {
categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
categoryApi.categoryTree().then(res => {
this.categories = res.data
if(this.$route.query.categoryIds){
this.query.categoryIds = this.$route.query.categoryIds

20
src/views/setting/articles/categoryManager.vue
View File

@ -6,7 +6,8 @@
<el-input v-model="form.name" style="width: 100%;"/>
</el-form-item>
<el-form-item label="分类缩略名" prop="thumbnailName">
<el-input v-model="form.thumbnailName" style="width: 100%;" placeholder="分类缩略名用于创建友好的链接形式."/>
<el-input v-model="form.thumbnailName" style="width: 100%;"/>
<div class="instruction">分类缩略名用于创建友好的链接形式.</div>
</el-form-item>
<el-form-item label="父级分类" prop="parentCategoryId">
<el-cascader
@ -18,7 +19,12 @@
clearable></el-cascader>
</el-form-item>
<el-form-item label="分类描述" prop="desc">
<el-input type="textarea" v-model="form.desc"/>
<el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 2, maxRows: 6 }"/>
<div class="instruction">此文字用于描述分类, 在该分类首页中它会被显示.</div>
</el-form-item>
<el-form-item label="分类背景" prop="categoryBackground">
<el-input type="textarea" v-model="form.categoryBackground" :autosize="{ minRows: 2, maxRows: 6 }"/>
<div class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图.</div>
</el-form-item>
<el-form-item>
<el-button native-type="submit" type="primary" :loading="categoryUpdateLoading"
@ -115,7 +121,8 @@ export default {
name: '',
thumbnailName: '',
parentCategoryId: '',
desc: ''
desc: '',
categoryBackground: ''
},
rules: {
name: [
@ -153,14 +160,13 @@ export default {
},
getCategories() {
categoryApi.categories({
userId: this.$store.state.user.userId,
parentCategoryId: this.$route.query.parent
}).then(res => {
this.categoryList = res.data
})
},
categoryTree() {
categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
categoryApi.categoryTree().then(res => {
this.categories = res.data
})
},
@ -253,7 +259,6 @@ export default {
categoryApi.delete({categoryIds: categoryIds}).then(() => {
this.onDeleted()
}).catch(() => {
console.log('sdf')
this.onError()
})
})
@ -268,9 +273,6 @@ export default {
},
// 添加分类
addCategory(data) {
if (!this.form.hasOwnProperty('userId')) {
data.append('userId', this.$store.state.user.userId)
}
categoryApi.add(data).then(() => {
this.onSuccess()
}).catch(() => {

244
src/views/setting/articles/tagManager.vue Normal file
View File

@ -0,0 +1,244 @@
<template>
<div class="container" v-wechat-title="title">
<el-dialog class="dialog-cm" :title="dialogTitle" :visible.sync="dialogVisible">
<el-form ref="managerForm" :model="form" label-position="left" :rules="rules" label-width="85px">
<el-form-item label="标签名称" prop="name">
<el-input v-model="form.name" style="width: 100%;"/>
</el-form-item>
<el-form-item label="标签缩略名" prop="slug">
<el-input v-model="form.slug" style="width: 100%;"/>
<div class="instruction">标签缩略名用于创建友好的链接形式, 如果留空则默认使用标签名称.</div>
</el-form-item>
<el-form-item label="标签背景" prop="categoryBackground">
<el-input type="textarea" v-model="form.tagBackground" :autosize="{ minRows: 2, maxRows: 6 }"/>
<div class="instruction">在这里填入图片的URL地址, 以在该标签页面显示一个背景大图.</div>
</el-form-item>
<el-form-item>
<el-button native-type="submit" type="primary" :loading="tagUpdateLoading"
@click.native.prevent="onSave('managerForm')">保 存
</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-card class="box-card">
<div slot="header">
<div class="clearfix">
<div class="card-header content-title"><span>{{ title }}</span> </div>
<el-button class="card-button" size="mini" type="primary" @click="add()">新增标签</el-button>
</div>
<div class="card-header-right">
<el-checkbox class="check-all" :indeterminate="isIndeterminate" v-model="checkAll" @change="selectAll">全选</el-checkbox>
<el-button :disabled="this.multipleSelection.length !== 1" size="small" @click="handleEdit()">编辑</el-button>
<el-button :disabled="this.multipleSelection.length === 0" size="small" type="danger" @click="handleDelete()">删除</el-button>
</div>
</div>
<div>
<el-checkbox-group v-model="multipleSelection" size="small" @change="handleCheckTagChange">
<el-checkbox v-for="tag in tags" :key="tag.id" class="tag-checkbox" :label="tag.id" border>
{{tag.name}}
</el-checkbox>
</el-checkbox-group>
</div>
</el-card>
</div>
</template>
<script>
import tagApi from "@/api/tag";
import categoryApi from "@/api/category";
export default {
name: 'tagManager',
data() {
return {
title: "标签管理",
dialogVisible: false,
dialogTitle: '',
tagUpdateLoading: false,
form: {
name: '',
slug: '',
tagBackground: ''
},
rules: {
name: [
{required: true, message: '请输入标签名称', trigger: 'blur'},
]
},
tags: [],
editMove: 1,// 1添加,2修改
tagGroup: [],
multipleSelection: [],
checkAll: false,
isIndeterminate: false,
}
},
computed: {},
mounted() {
this.getTags()
},
methods: {
getTags() {
tagApi.tagList().then(res => {
this.tags = res.data
})
},
handleCheckTagChange(value) {
console.log(value)
let checkedCount = value.length;
this.checkAll = checkedCount === this.tags.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
},
selectAll(value) {
if(value){
this.tags.forEach(tag => {
this.multipleSelection.push(tag.id)
})
} else {
this.multipleSelection = []
}
this.isIndeterminate = false
},
handleEdit() {
this.editMove = 2
this.dialogVisible = true
this.dialogTitle = '修改标签'
tagApi.tagInfo({
tagId: this.multipleSelection[0]
}).then(res => {
this.form = res.data
})
},
// 删除标签
handleDelete() {
let tagIds = this.multipleSelection
this.$confirm('您确定要删除这些标签吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
tagApi.delete({tagIds: tagIds}).then(() => {
this.$notify({
title: '删除成功',
type: 'success',
duration: 1000
})
this.multipleSelection = []
this.isIndeterminate = false
this.getTags()
}).catch(() => {
this.onError()
})
})
},
// 设置formData
setFormData() {
let data = new FormData();
for (let formKey in this.form) {
if (this.form.hasOwnProperty(formKey) && this.form[formKey]) {
data.append(formKey, this.form[formKey])
}
}
return data
},
// 保存
onSave() {
this.$refs.managerForm.validate((valid) => {
this.valid = valid
if (valid) {
this.tagUpdateLoading = true
if (this.editMove === 1) {
this.addTag(this.setFormData())
}
if (this.editMove === 2) {
this.updateTag(this.setFormData())
}
} else {
return false;
}
})
},
// 修改标签
updateTag(data) {
tagApi.update(data).then(() => {
this.onSuccess()
}).catch(() => {
this.onError()
})
},
// 添加标签
addTag(data) {
tagApi.add(data).then(() => {
this.onSuccess()
}).catch(() => {
this.onError()
})
},
async add() {
this.dialogVisible = true
this.dialogTitle = '添加标签'
this.editMove = 1
await this.$nextTick()
this.$refs.managerForm.resetFields()
},
onError() {
this.tagUpdateLoading = false
},
onSuccess(message) {
this.getTags()
let msg = '保存成功!'
if (message) {
msg = message
}
this.tagUpdateLoading = false
this.dialogVisible = false
this.$message({
message: msg,
type: 'success',
duration: 1000
})
},
}
}
</script>
<!--<style src="@styles/cropper.css"></style>-->
<style lang="scss" scoped>
@import "src/styles/setting";
.content-title {
font-size: 16px;
font-weight: 600;
}
/deep/ .el-page-header {
height: 32px;
line-height: 32px;
}
/deep/ .tag-checkbox {
.el-checkbox__inner {
display: none;
}
.el-checkbox__label {
padding-left: 5px;
}
}
/deep/ .el-checkbox {
margin-right: 0;
}
/deep/ .el-checkbox.is-bordered {
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
}
/deep/ .el-checkbox.is-bordered.is-checked {
background-color: #ecf5ff;
border-color: #40a9ff;
color: #d9ecff;
}
/deep/ .el-icon-edit:hover {
color: #40a9ff;
}
.check-all {
margin-right: 20px;
}
</style>