谷粒商城三级分类删除添加更改操作

删除操作：

1、配置数据库逻辑删除，首先在表内设置一个表示删除状态的字段，按以下方法配置，此时调用删除方法就会将表示删除状态的字段置为0（实现调用的是update方法）

*  1）、配置全局的逻辑删除规则（省略）
*  2）、配置逻辑删除的组件Bean（省略）
*  3）、给Bean加上逻辑删除注解@TableLogic

yml配置：
#mybatis-plus:逻辑删除配置
mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto
      logic-delete-value: 1
      logic-not-delete-value: 0


entity配置

	/**
	 * 是否显示[0-不显示，1显示].逻辑删除字段需要添加改注解
	 */
	@TableLogic(value = "1",delval = "0")
	private Integer showStatus;

2、在分类旁配置delete按键并绑定其功能，使用element树形控件 自定义节点内容、show-checkbox

<el-tree node-key="catId" :data="menus" show-checkbox :props="defaultProps" @node-click="handleNodeClick"
            :expand-on-click-node="false" :default-expanded-keys="expandedKey">

            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
//通过v-if设置append、delete显示条件 
                    <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">
                        Append
                    </el-button>
                    <el-button v-if="node.isLeaf" type="text" size="mini" @click="() => remove(node, data)">
                        Delete
                    </el-button>
                </span>
            </span>
        </el-tree>

3、delete方法设计

        remove(node, data) {
#解构出需要删除菜单的id
            var ids = [data.catId]
#设置删除提示框，确认删除后发送delete请求，否者取消
            this.$confirm(`是否删除[${data.name}]菜单?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
#发送delete请求，由于product的方法参数里有@RequestBody因此需要发送psot请求
#并将ids放入到请求体中，执行结束后重新执行获取菜单操作并设置默认打开菜单项
                this.$http({
                    url: this.$http.adornUrl('/product/category/delete'),
                    method: 'post',
                    data: this.$http.adornData(ids, false)
                }).then(({ data }) => {
                    console.log("shanchu")
                    this.getMenus();
                    this.expandedKey=[node.parent.data.catId]
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        }

添加和修改操作：

1、设置对话框

（1）表单复用

在data中设置一个判断那个botton激活对话框的属性，dialogType: "", 在确认按钮中绑定一个绑定方法，让数据发动到正确请求中去。

       <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
            <el-form :model="category">
                <el-form-item label="分类名称">
                    <el-input v-model="category.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="category.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="计量单位">
                    <el-input v-model="category.productUnit" 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>


//判定方法
        submitData() {
            if (this.dialogType == "add") {
                this.addCategory();
            }
            if (this.dialogType == "edit") {
                this.editCategory();
            }
        },

2、data中设置cetagory属性，并设置默认值（相当于一个cetagory对象与后端的cetageoryEntity属性对应），方便在请求体中，让后端包装成对象

           category: {
                name: "",
                parentCid: 0,
                catLevel: 0,
                showStatus: 1,
                sort: 0,
                productUnit: "",
                icon: "",
                catId: null
            },

3、点击确认后，实现append数据请求

       addCategory() {
            console.log("提交的三级分类数据", this.category);
            this.$http({
                url: this.$http.adornUrl("/product/category/save"),
                method: "post",
                data: this.$http.adornData(this.category, false)
            }).then(({ data }) => {
                this.$message({
                    message: "菜单保存成功",
                    type: "success"
                });
                //关闭对话框
                this.dialogVisible = false;
                //刷新出新的菜单
                this.getMenus();
                //设置需要默认展开的菜单
                this.expandedKey = [this.category.parentCid];
            });
        },

4、实现更新请求

       edit(data) {
            console.log("要修改的数据", data);
            this.dialogType = "edit";
            this.title = "修改分类";
            this.dialogVisible = true;

            //发送请求获取当前节点最新的数据（防止其他用户修改后，该用户回调的数据仍是之前菜单栏加载的数据）
            this.$http({
                url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
                method: "get"
            }).then(({ data }) => {
                //请求成功
                console.log("要回显的数据", data);
                this.category.name = data.data.name;
                this.category.catId = data.data.catId;
                this.category.icon = data.data.icon;
                this.category.productUnit = data.data.productUnit;
                this.category.parentCid = data.data.parentCid;
                this.category.catLevel = data.data.catLevel;
                this.category.sort = data.data.sort;
                this.category.showStatus = data.data.showStatus;
                /**
                 *         parentCid: 0,
                catLevel: 0,
                showStatus: 1,
                sort: 0,
                 */
            });


       //修改三级分类数据，更新操作时，未传过去的数据，数据库默认不改，为防止默认值覆盖源数据，将需要的数据解构出来
        editCategory() {
            var { catId, name, icon, productUnit } = this.category;
            this.$http({
                url: this.$http.adornUrl("/product/category/update"),
                method: "post",
                data: this.$http.adornData({ catId, name, icon, productUnit }, false)
            }).then(({ data }) => {
                this.$message({
                    message: "菜单修改成功",
                    type: "success"
                });
                //关闭对话框
                this.dialogVisible = false;
                //刷新出新的菜单
                this.getMenus();
                //设置需要默认展开的菜单
                this.expandedKey = [this.category.parentCid];
            });
        },

批量删除添加

1、给对话框设置ref属性，使用this.$refs.menuTree.getCheckedNodes();找到所有打勾的菜单，并将catId遍历到catIds中，其余与单个删除一致。

       batchDelete() {
            let catIds = [];
            let checkedNodes = this.$refs.menuTree.getCheckedNodes();
            console.log("被选中的元素", checkedNodes);
            for (let i = 0; i < checkedNodes.length; i++) {
                catIds.push(checkedNodes[i].catId);
            }
            this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl("/product/category/delete"),
                        method: "post",
                        data: this.$http.adornData(catIds, false)
                    }).then(({ data }) => {
                        this.$message({
                            message: "菜单批量删除成功",
                            type: "success"
                        });
                        this.getMenus();
                    });
                })
                .catch(() => { });
        },