新增：分类管理
This commit is contained in:
jmal
parent
a6930d2062
commit
b81dd052b0
47
src/api/category.js
Normal file
47
src/api/category.js
Normal file
@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default {
|
||||
categories(params) {
|
||||
return request({
|
||||
url: 'category/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
categoryTree(params) {
|
||||
return request({
|
||||
url: 'category/tree',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
categoryInfo(params) {
|
||||
return request({
|
||||
url: 'category/info',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
add(data) {
|
||||
return request({
|
||||
url: 'category/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
},
|
||||
update(data) {
|
||||
return request({
|
||||
url: 'category/update',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
},
|
||||
delete(name) {
|
||||
return request({
|
||||
url: 'category/delete',
|
||||
method: 'delete',
|
||||
params: {name}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div id="top" style="display: block;" class="animateIn">
|
||||
<div class="navbar animated fadeIn fast delay-1s">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand text-brand">JMAL'S</a>
|
||||
<a class="navbar-brand text-brand" href="/articles">JMAL'S</a>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item dropdown"></li>
|
||||
|
||||
@ -4,6 +4,34 @@
|
||||
<al-loading v-if="isLoading"></al-loading>
|
||||
</transition>
|
||||
<al-back-top></al-back-top>
|
||||
<div id="top" style="display: block;" class="animateIn">
|
||||
<div class="navbar animated fadeIn fast delay-1s">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand text-brand" href="/articles">JMAL'S</a>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item dropdown"></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav side-toolbar-list">
|
||||
<li class="nav-item">
|
||||
<a id="nav-side-toolbar-github" href="https://github.com/jamebal" title="Github" target="_blank">fff<i class="fa fa-github"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
|
||||
</div>
|
||||
<div class="cover-wrapper">
|
||||
<div class="cover half" style="position: relative; z-index: 0; background-image: none;">
|
||||
<div class="cover-body">
|
||||
@ -11,20 +39,10 @@
|
||||
<p class="title">jmal</p>
|
||||
<p class="subtitle">「清空你的杯子, 方能再行注满」</p>
|
||||
</div>
|
||||
<div class="b">
|
||||
<div class="m_search">
|
||||
<form name="searchform" class="form u-search-form">
|
||||
<input type="text" class="input u-search-input" placeholder=""> <i class="icon fas fa-search fa-fw"> <svg-icon icon-class="search" /></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="backstretch">
|
||||
<!--<img src="~@/assets/img/widget-img1.jpg">-->
|
||||
<img class="blog-background" src="https://images.unsplash.com/photo-1603378991000-2dda90e8563a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3200&q=80"
|
||||
onerror="this.src='~@/assets/img/widget-img1.jpg'">
|
||||
<!--<el-image :src="backImageSrc">-->
|
||||
<!--</el-image>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,6 +144,7 @@
|
||||
@import "src/styles/index";
|
||||
@import "src/styles/markdown";
|
||||
@import "src/styles/articles";
|
||||
@import "src/styles/article";
|
||||
.l_side {
|
||||
width: 285px;
|
||||
float: right;
|
||||
|
||||
@ -15,19 +15,23 @@
|
||||
<div v-if="item.name === 'cusomerManager'">
|
||||
<cusomer-manager></cusomer-manager>
|
||||
</div>
|
||||
<span v-if="item.name === 'categoryManager'" slot="label"><i class="el-icon-menu"></i>{{item.label}}</span>
|
||||
<div v-if="item.name === 'categoryManager'">
|
||||
<category-manager></category-manager>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInfo, userUpdate} from '@/api/user'
|
||||
import cusomerInfo from '@/views/setting/tabs/cusomerInfo'
|
||||
import cusomerManager from '@/views/setting/tabs/cusomerManager'
|
||||
import categoryManager from '@/views/setting/tabs/categoryManager'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
cusomerInfo,cusomerManager
|
||||
cusomerInfo,cusomerManager,categoryManager
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -36,7 +40,8 @@
|
||||
{name: 'cusomerInfo', label:'个人信息'},
|
||||
],
|
||||
adminTabs: [
|
||||
{name: 'cusomerManager', label:'用户管理'}
|
||||
{name: 'cusomerManager', label:'用户管理'},
|
||||
{name: 'categoryManager', label:'分类管理'}
|
||||
],
|
||||
tabsDefault: 'cusomerInfo',
|
||||
userInfo:{}
|
||||
|
||||
264
src/views/setting/tabs/categoryManager.vue
Normal file
264
src/views/setting/tabs/categoryManager.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="container" v-wechat-title="title">
|
||||
<el-dialog class="dialog-cm" :title="dialogTitle" :visible.sync="dialogVisible">
|
||||
<el-form ref="managerForm" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="分类名称" prop="categoryName">
|
||||
<el-input v-model="form.categoryName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类缩略名">
|
||||
<el-input v-model="form.thumbnailName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="父级分类">
|
||||
<el-cascader
|
||||
v-model="form.parentCategoryName"
|
||||
:options="categories"
|
||||
:props="{ checkStrictly: true }"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述">
|
||||
<el-input type="textarea" v-model="form.desc" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button native-type="submit" type="primary" @click.native.prevent="onSave('managerForm')">保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>分类列表</span>
|
||||
<el-button class="card-button" type="text" @click="add">添加分类</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="categoryList"
|
||||
stripe
|
||||
>
|
||||
<el-table-column
|
||||
prop="categoryName"
|
||||
label="名称"
|
||||
width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="subCategoryNumber"
|
||||
label="子分类"
|
||||
width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="quota"
|
||||
label="缩略名"
|
||||
width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="quota"
|
||||
label="默认"
|
||||
width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="quota"
|
||||
label="文章数"
|
||||
width="150">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="250">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="scope.row.username !== 'jmal'"
|
||||
size="mini"
|
||||
@click="handleEdit(scope.row.id,scope.row.username)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-if="scope.row.username !== 'jmal'"
|
||||
size="mini"
|
||||
@click="resetPassword(scope.row.id,scope.row.username)"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
<el-button v-if="scope.row.username !== 'jmal'"
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import categoryApi from "@/api/category";
|
||||
import CropperDialog from '@/components/Cropper/dialog'
|
||||
|
||||
export default {
|
||||
name: 'categoryManager',
|
||||
components: {
|
||||
CropperDialog
|
||||
},
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "用户管理",
|
||||
categoryList: [],
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
userUpdateLoading: false,
|
||||
valid: true,
|
||||
categories: [
|
||||
{ value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控'
|
||||
}]}]
|
||||
}
|
||||
],
|
||||
form: {
|
||||
categoryName: '',
|
||||
thumbnailName: '',
|
||||
parentCategoryName: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
categoryName: [
|
||||
{ required: true, message: '请输入分类名称', trigger: 'blur' },
|
||||
]
|
||||
},
|
||||
editMove: 1,// 1添加,2修改
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() {
|
||||
this.getCategories()
|
||||
},
|
||||
methods: {
|
||||
getCategories(){
|
||||
categoryApi.categories().then(res => {
|
||||
this.categoryList = res.data
|
||||
})
|
||||
},
|
||||
async add() {
|
||||
this.dialogVisible = true
|
||||
this.dialogTitle = '添加分类'
|
||||
this.editMove = 1
|
||||
await this.$nextTick()
|
||||
this.$refs.managerForm.resetFields()
|
||||
},
|
||||
// 设置formData
|
||||
setFormData() {
|
||||
let data = new FormData();
|
||||
for (let formKey in this.form) {
|
||||
if(this.form.hasOwnProperty(formKey)){
|
||||
data.append(formKey,this.form[formKey])
|
||||
}
|
||||
}
|
||||
return data
|
||||
},
|
||||
// 保存
|
||||
onSave() {
|
||||
this.$refs.managerForm.validate((valid) => {
|
||||
this.valid = valid
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
console.log(this.form, this.setFormData())
|
||||
this.userUpdateLoading = true
|
||||
if(this.editMove === 1){
|
||||
this.addCateGory(this.setFormData())
|
||||
}
|
||||
if(this.editMove === 2){
|
||||
this.userCateGory(this.setFormData())
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleEdit(id) {
|
||||
this.editMove = 2
|
||||
this.dialogVisible = true
|
||||
this.dialogTitle = '修改分类'
|
||||
categoryApi.categoryInfo({
|
||||
id: id,
|
||||
}).then(res => {
|
||||
this.form = res.data
|
||||
})
|
||||
categoryApi.categoryTree({username: this.$store.state.user.userId}).then(res => {
|
||||
this.categories = res.data
|
||||
})
|
||||
},
|
||||
// 删除分类
|
||||
handleDelete(id) {
|
||||
this.$confirm('是否删除该分类, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
categoryApi.delete(id).then(() => {
|
||||
this.onSuccess('删除成功!')
|
||||
}).catch(() => {
|
||||
this.onError()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 修改分类
|
||||
userCateGory(data){
|
||||
categoryApi.update(data).then(() => {
|
||||
this.onSuccess()
|
||||
}).catch(() => {
|
||||
this.onError()
|
||||
})
|
||||
},
|
||||
// 添加分类
|
||||
addCateGory(data){
|
||||
categoryApi.add(data).then(() => {
|
||||
this.onSuccess()
|
||||
}).catch(() => {
|
||||
this.onError()
|
||||
})
|
||||
},
|
||||
onSuccess(message){
|
||||
this.getUserList()
|
||||
let msg = '保存成功!'
|
||||
if(message){
|
||||
msg = message
|
||||
}
|
||||
this.userUpdateLoading = false
|
||||
this.dialogVisible = false
|
||||
this.$message({
|
||||
message: msg,
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
},
|
||||
onError() {
|
||||
this.userUpdateLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--<style src="@styles/cropper.css"></style>-->
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/setting";
|
||||
.card-button {
|
||||
float: right;
|
||||
padding: 3px 0;
|
||||
}
|
||||
.box-card {
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user