From c55de3bb4ac3e74d4a9f5641042efc5f015fe309 Mon Sep 17 00:00:00 2001
From: yanwenlong <yanwenlong@quesoar.com>
Date: Sat, 16 Sep 2023 00:41:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E4=B9=A6=E5=88=86=E7=B1=BB=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/book/categorytree.vue | 230 ++++++++++++++++++++++++
 1 file changed, 230 insertions(+)
 create mode 100644 src/views/modules/book/categorytree.vue

diff --git a/src/views/modules/book/categorytree.vue b/src/views/modules/book/categorytree.vue
new file mode 100644
index 0000000..3ec0986
--- /dev/null
+++ b/src/views/modules/book/categorytree.vue
@@ -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>
\ No newline at end of file