zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图书分类完成

Browse Source
This commit is contained in:
yanwenlong
2023-09-16 00:41:40 +08:00
parent cc4f896601
commit c55de3bb4a
1 changed files with 230 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
src/views/modules/book/categorytree.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<div>
<el-form :inline="true">
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item>
</el-form>
<el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick" show-checkbox node-key="catId"
:default-expanded-keys="expandedkey" :expand-on-click-node="false" default-expand-all>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button v-if="node.level <= 1" type="text" size="mini" @click="() => addOrUpdateHandle(data)">
add
</el-button>
<el-button type="text" size="mini" @click="() => addOrUpdateHandle(data,data)">
edit
</el-button>
<el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">
delete
</el-button>
</span>
</span>
</el-tree>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="30%"
>
<el-form :model="addcategory" inline label-width="70px" class="addCategory">
<el-form-item label="父节点">
<el-select
@visible-change="visibleChange"
v-model="addcategory.bookCid"
filterable
allow-create
default-first-option
placeholder="请选择节点">
<el-option
v-for="item in oneCategory"
:key="item.id + ''"
:label="item.name"
:value="item.id + ''">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="addcategory.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addcategory.sort" type="number" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitData">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
addcategory:{
bookCid: null,
name: '',
sort: 0
},
oneCategory: [],
category:{name:"", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0 ,catId: null},
dialogVisible:false,
dialogType:"",
menus: [],
title:'',
expandedkey: [],
defaultProps: {
children: 'children',
label: 'name'
}
}
},
created() {
this.getTreeList()
this.visibleChange()
},
methods: {
visibleChange(flag){
console.log('flag',flag)
this.$http({
url: this.$http.adornUrl(`/book/bookCategory/getOneLevel`),
method: 'post',
data: {}
}).then(({ data }) => {
this.oneCategory = data.bookCategoryEntity
this.oneCategory.unshift({
"id": 0,
"name": "根节点",
"bookCid": '',
"bookLevel": null,
"delFlag": 0,
"sort": 1,
"bookCount": null
})
})
},
handleNodeClick(data) {
console.log(data)
},
getTreeList() {
this.$http({
url: this.$http.adornUrl(`/book/bookCategory/getTwoLevel`),
method: 'post',
params: {}
}).then(({ data }) => {
this.menus = data.data;
})
},
addOrUpdateHandle(data, flag){
if(data){ // 修改
this.dialogVisible = true
if(flag){ // 点击edit
this.dialogType = 'edit'
this.title = '修改分类'
console.log('data',data)
this.addcategory.name = data.name
this.addcategory.bookCid = data.bookCid + ''
this.addcategory.id = data.id + ''
this.addcategory.sort = data.sort
}else{ // 点击一级树结构add
this.dialogType = 'add'
this.title = '添加分类'
this.addcategory.name = ''
this.addcategory.bookCid = data.id + ''
this.addcategory.id = null
this.addcategory.sort = 0
}
} else { // 点击外部的新增按钮
this.dialogVisible = true
this.dialogType = 'add'
this.title = '添加分类'
this.addcategory.name = ''
this.addcategory.bookCid = '0'
this.addcategory.id = null
this.addcategory.sort = 0
}
},
submitData(){
console.log(this.dialogType)
if(this.dialogType == 'add'){
this.addLevel()
}
if(this.dialogType == 'edit'){
this.editData()
}
},
addLevel(){
console.log("提交的三级分类数据",this.addcategory)
this.$http({
url: this.$http.adornUrl(`/book/bookCategory/save`),
method: 'post',
data: this.$http.adornData(this.addcategory, false)
}).then(({ data }) => {
this.$message({
type: 'success',
message: '目录添加成功!'
});
this.dialogVisible = false
this.getTreeList()
// this.expandedkey = [this.addcategory.parentCid]
// this.category = {}
})
},
editData(){
console.log("修改的三级分类数据",this.addcategory)
this.$http({
url: this.$http.adornUrl(`book/bookCategory/update`),
method: 'post',
data: this.$http.adornData(this.addcategory, false)
}).then(({ data }) => {
this.$message({
type: 'success',
message: '目录修改成功!'
});
this.dialogVisible = false
this.getTreeList()
// this.expandedkey = [this.addcategory.parentCid]
// this.category = {}
})
},
remove(node, data) {
console.log("remove",node,data)
var ids = {id: data.id}
this.$confirm(`是否删除【${data.name}】？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl(`/book/bookCategory/delete`),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({ data }) => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getTreeList();
// this.expandedkey = [node.parent.data.catId]
})
}).catch(() => { });
},
}
}
</script>
<style lang="less" scoped>
/deep/ .addCategory .el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label{
width: 200px;
}
</style>