✅P52_三级分类-新增-新增效果

页面功能

#

加入Dialog 对话框

参考：

实现

新增分类思路：

• 当我们调用append方法时，就要将visible.sync修改为true，并且为category对象属性赋值，当我们点击确定按钮时就要调用新增函数请求调用后台处理；

src\views\modules\product\category.vue 表单中的字段名与后端实体类对应；

<template>
  <div>
    <el-tree :data="menu" :props="defaultProps" show-checkbox :expand-on-click-node="false" node-key="catId"
      :default-expanded-keys="expandKey">
    // 略.................
    </el-tree>
    <el-dialog title="提示" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name"></el-input>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-input v-model="category.showStatus"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="category.sort"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="category.icon"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="category.productCount"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

export default {

  data() {
    //这里存放数据
    return {
      dialogFormVisible: false,
      category: {
        name: "",
        parentCid: "",
        catLevel: "",
        showStatus: 1,
        sort: 0,
        icon: "",
        productUnit: "",
        productCount: "",
      },
  	//略..........
    };
  },
}

点击Append对应的方法：

  methods: {
    append(data) {
      console.log("append", data);
      this.dialogFormVisible = true;
      this.category.parentCid = data.catId;
      this.category.catLevel = data.cat_level * 1 + 1;
      console.log("append this category：", this.category);
    },
    // 略.........
  }

addCategory 函数

  methods: {
  	addCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false)
      }).then(({ data }) => {
        this.dialogFormVisible = false;
        this.$message({
          type: 'success',
          message: '新增成功'
        });
        //刷新分类数据
        this.getMenuList();
        //展开新增的菜单
        this.expandKey = [this.category.parentCid];
      }).catch({
        type: 'info',
        message: '已取消删除'
      });
    }
    // 略.........
  }

---

前端代码

src\views\modules\product\category.vue

<!-- 三级分类页面 -->
<template>
  <div>
    <el-tree :data="menu" :props="defaultProps" show-checkbox :expand-on-click-node="false" node-key="catId"
      :default-expanded-keys="expandKey">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <!-- 一级和二级目录才可以添加 -->
          <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">
            Append
          </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="提示" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name"></el-input>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-input v-model="category.showStatus"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="category.sort"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="category.icon"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="category.productCount"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  export default {

    data() {
      //这里存放数据
      return {
        dialogFormVisible: false,
        category: {
          name: "",
          parentCid: "",
          catLevel: "",
          showStatus: 1,
          sort: 0,
          icon: "",
          productUnit: "",
          productCount: "",
        },
        menu: [],
        expandKey: [],
        defaultProps: {
          children: "children",
          label: "name"
        },
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

      getMenuList() {
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get',
        }).then(({ data }) => {  // 1.使用解构即{}，将data对象解构出来
          console.log("获取三级分类数据：", data);
          // 2.将data中的data赋值给menu
          this.menu = data.data;
        });
      },

      append(data) {
        console.log("append", data);
        this.dialogFormVisible = true;
        this.category.parentCid = data.catId;
        this.category.catLevel = data.cat_level * 1 + 1;
        console.log("append this category：", this.category);
      },

      remove(node, data) {
             var ids = [data.catId];
             // 反引号是新标准es6的功能，可以用$配合大括号来实现变量拼接
             this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
             }).then(() => {
             this.$http({
             url: this.$http.adornUrl("/product/category/delete"),
             method: "post",
             data: this.$http.adornData(ids, false)
             }).then(({ data }) => {
             this.$message({
             type: 'success',
             message: '删除成功!'
             });
             this.getMenuList();
             //默认菜单展示
             this.expandKey = [node.parent.data.catId];
             });
             }).catch(() => {
             this.$message({
             type: 'info',
             message: '已取消删除'
             });
             });
             console.log("remove", node, data);
             },

             addCategory() {
             this.$http({
             url: this.$http.adornUrl("/product/category/save"),
             method: "post",
             data: this.$http.adornData(this.category, false)
             }).then(({ data }) => {
             this.dialogFormVisible = false;
             this.$message({
             type: 'success',
             message: '新增成功'
             });
             //刷新分类数据
             this.getMenuList();
             this.expandKey = [this.category.parentCid];
             }).catch({
             type: 'info',
             message: '已取消删除'
             });
             }
             },
             //生命周期 - 创建完成（可以访问当前this实例）
             created() {
             this.getMenuList();
             },
             }
             </script>
             <style  scoped></style>

---

后端代码

com.gyz.cfmall.product.controller.CategoryController#save

@RestController
@RequestMapping("product/category")
public class CategoryController {
    @Autowired
    private CategoryService categoryService;
    /**
     * 保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody CategoryEntity category) {
        categoryService.save(category);

        return R.ok();
    }
}

---

效果