完善：分类管理
This commit is contained in:
jmal
parent
9bf86fdd46
commit
7bf8935171
@ -1,4 +1,5 @@
|
||||
import request from '@/utils/request'
|
||||
const qs = require('qs')
|
||||
|
||||
export default {
|
||||
categories(params) {
|
||||
@ -36,11 +37,14 @@ export default {
|
||||
data
|
||||
})
|
||||
},
|
||||
delete(name) {
|
||||
delete(params) {
|
||||
return request({
|
||||
url: 'category/delete',
|
||||
method: 'delete',
|
||||
params: {name}
|
||||
params,
|
||||
paramsSerializer: function(params) {
|
||||
return qs.stringify(params, { arrayFormat: 'repeat' })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,84 +2,82 @@
|
||||
<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 label="分类名称" prop="name">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类缩略名">
|
||||
<el-input v-model="form.thumbnailName" />
|
||||
<el-form-item label="分类缩略名" prop="thumbnailName">
|
||||
<el-input v-model="form.thumbnailName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="父级分类">
|
||||
<el-form-item label="父级分类" prop="parentCategoryId">
|
||||
<el-cascader
|
||||
v-model="form.parentCategoryName"
|
||||
v-model="form.parentCategoryId"
|
||||
:options="categories"
|
||||
:show-all-levels="false"
|
||||
:props="{ checkStrictly: true }"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类描述">
|
||||
<el-input type="textarea" v-model="form.desc" />
|
||||
<el-form-item label="分类描述" prop="desc">
|
||||
<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-button native-type="submit" type="primary" :loading="categoryUpdateLoading"
|
||||
@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 slot="header">
|
||||
<div class="clearfix">
|
||||
<div class="card-header-back" v-if="parentCategory.name">
|
||||
<span class="header-back-title" @click="backParent">
|
||||
<i class="el-icon-back"></i>
|
||||
<span>返回上级目录</span>
|
||||
</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
</div>
|
||||
<div class="card-header content-title"><span>{{ parentCategory.name ? `管理 ${parentCategory.name} 的子分类` : '管理分类' }}</span> </div>
|
||||
<el-button class="card-button" size="mini" type="primary" @click="add()">新增分类</el-button>
|
||||
</div>
|
||||
<div class="card-header-right" v-show="this.multipleSelection.length > 0">
|
||||
<el-button v-show="this.multipleSelection.length === 1" size="small" @click="handleEdit()">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete()">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="categoryList"
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
prop="categoryName"
|
||||
label="名称"
|
||||
width="150">
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="subCategoryNumber"
|
||||
label="子分类"
|
||||
width="150">
|
||||
prop="name"
|
||||
label="名称">
|
||||
</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">
|
||||
prop="subCategorySize"
|
||||
label="子分类">
|
||||
<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>
|
||||
<a v-if="scope.row.subCategorySize > 0"
|
||||
@click="subCategoryList(scope.row.id)">{{ scope.row.subCategorySize }}个分类</a>
|
||||
<a v-else @click="add(scope.row.id)">新增</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="thumbnailName"
|
||||
label="缩略名">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="quota"
|
||||
label="默认">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="quota"
|
||||
label="文章数">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
@ -87,175 +85,255 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import categoryApi from "@/api/category";
|
||||
import CropperDialog from '@/components/Cropper/dialog'
|
||||
import categoryApi from "@/api/category";
|
||||
import CropperDialog from '@/components/Cropper/dialog'
|
||||
|
||||
export default {
|
||||
name: 'categoryManager',
|
||||
components: {
|
||||
CropperDialog
|
||||
export default {
|
||||
name: 'categoryManager',
|
||||
components: {
|
||||
CropperDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "分类管理",
|
||||
categoryList: [],
|
||||
dialogVisible: false,
|
||||
dialogTitle: '',
|
||||
categoryUpdateLoading: false,
|
||||
valid: true,
|
||||
categories: [],
|
||||
parentCategory: {},// 父级分类信息
|
||||
parentCategoryId: undefined,
|
||||
form: {
|
||||
name: '',
|
||||
thumbnailName: '',
|
||||
parentCategoryId: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入分类名称', trigger: 'blur'},
|
||||
]
|
||||
},
|
||||
editMove: 1,// 1添加,2修改
|
||||
multipleSelection: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.getCategories()
|
||||
this.getParentCategory()
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val
|
||||
},
|
||||
props: {
|
||||
// 返回父级分类
|
||||
backParent() {
|
||||
this.subCategoryList(this.parentCategory.parentCategoryId)
|
||||
},
|
||||
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修改
|
||||
getParentCategory() {
|
||||
if (this.$route.query.parent) {
|
||||
categoryApi.categoryInfo({
|
||||
categoryId: this.$route.query.parent
|
||||
}).then(res => {
|
||||
this.parentCategory = res.data
|
||||
})
|
||||
} else {
|
||||
this.parentCategory = {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getCategories() {
|
||||
categoryApi.categories({
|
||||
userId: this.$store.state.user.userId,
|
||||
parentCategoryId: this.$route.query.parent
|
||||
}).then(res => {
|
||||
this.categoryList = res.data
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
categoryTree() {
|
||||
categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
|
||||
this.categories = res.data
|
||||
})
|
||||
},
|
||||
// 子分类列表
|
||||
subCategoryList(parentCategoryId) {
|
||||
if (parentCategoryId) {
|
||||
this.$router.push(`${window.location.pathname}?parent=${parentCategoryId}`)
|
||||
} else {
|
||||
this.$router.push(window.location.pathname)
|
||||
}
|
||||
this.getCategories()
|
||||
this.getParentCategory()
|
||||
},
|
||||
async add(parentCategoryId) {
|
||||
this.categoryTree()
|
||||
this.dialogVisible = true
|
||||
this.dialogTitle = '添加分类'
|
||||
this.editMove = 1
|
||||
await this.$nextTick()
|
||||
this.$refs.managerForm.resetFields()
|
||||
if (this.$route.query.parent) {
|
||||
this.form.parentCategoryId = this.$route.query.parent;
|
||||
}
|
||||
if (parentCategoryId) {
|
||||
this.form.parentCategoryId = parentCategoryId;
|
||||
}
|
||||
},
|
||||
// 设置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.categoryUpdateLoading = 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({
|
||||
categoryId: id
|
||||
}).then(res => {
|
||||
this.form = res.data
|
||||
})
|
||||
this.categoryTree()
|
||||
},
|
||||
// 删除分类
|
||||
handleDelete() {
|
||||
let categoryIds = []
|
||||
this.multipleSelection.forEach(category => {
|
||||
categoryIds.push(category.id)
|
||||
})
|
||||
this.$confirm('所选分类下的所有内容都将被删除, 您确认要删除吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
categoryApi.delete({categoryIds: categoryIds}).then(() => {
|
||||
this.onDeleted()
|
||||
}).catch(() => {
|
||||
console.log('sdf')
|
||||
this.onError()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 修改分类
|
||||
userCategory(data) {
|
||||
categoryApi.update(data).then(() => {
|
||||
this.onSuccess()
|
||||
}).catch(() => {
|
||||
this.onError()
|
||||
})
|
||||
},
|
||||
// 添加分类
|
||||
addCategory(data) {
|
||||
if (!this.form.hasOwnProperty('userId')) {
|
||||
data.append('userId', this.$store.state.user.userId)
|
||||
}
|
||||
categoryApi.add(data).then(() => {
|
||||
this.onSuccess()
|
||||
}).catch(() => {
|
||||
this.onError()
|
||||
})
|
||||
},
|
||||
onDeleted(){
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
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
|
||||
onSuccess(message) {
|
||||
this.getCategories()
|
||||
let msg = '保存成功!'
|
||||
if (message) {
|
||||
msg = message
|
||||
}
|
||||
this.categoryUpdateLoading = false
|
||||
this.dialogVisible = false
|
||||
this.$message({
|
||||
message: msg,
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
},
|
||||
onError() {
|
||||
this.categoryUpdateLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--<style src="@styles/cropper.css"></style>-->
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/setting";
|
||||
.card-button {
|
||||
float: right;
|
||||
padding: 3px 0;
|
||||
.content-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
/deep/ .el-page-header {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition: color 0.3s;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-button {
|
||||
float: right;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
line-height: 32px;
|
||||
}
|
||||
.card-header-back {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
.header-back-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.card-header-right {
|
||||
float: right;
|
||||
margin-top: -32px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!--<el-button @click="dialogVisible = false">取 消</el-button>-->
|
||||
<el-button native-type="submit" type="primary" @click.native.prevent="onSave('managerForm')">保 存</el-button>
|
||||
<el-button native-type="submit" type="primary" :loading="userUpdateLoading" @click.native.prevent="onSave('managerForm')">保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
@ -82,7 +82,6 @@
|
||||
|
||||
<script>
|
||||
import { getInfo, userUpdate, addUser, delUser, resetPass, userList} from '@/api/user'
|
||||
import { formatSize } from '@/utils/number'
|
||||
import CropperDialog from '@/components/Cropper/dialog'
|
||||
|
||||
export default {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user