VUE ElementUI Tree JAVA Mybatis实现 麦克斯

JAVA 实体类

package cn.maxhou.jxcht.entity;

public class Category {

    private Integer id;

    private String name;

    private Integer parentId;

    private Integer isParent;

    private Integer sort;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getParentId() {
        return parentId;
    }

    public void setParentId(Integer parentId) {
        this.parentId = parentId;
    }

    public Integer getIsParent() {
        return isParent;
    }

    public void setIsParent(Integer isParent) {
        this.isParent = isParent;
    }

    public Integer getSort() {
        return sort;
    }

    public void setSort(Integer sort) {
        this.sort = sort;
    }

    @Override
    public String toString() {
        return "Category{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", parentId=" + parentId +
                ", isParent=" + isParent +
                ", sort=" + sort +
                '}';
    }
}

JAVA DAO 类

package cn.maxhou.jxcht.dao;

import cn.maxhou.jxcht.entity.Category;
import org.apache.ibatis.annotations.*;

import java.util.List;

//标注这个接口是MyBatis映射
@Mapper
public interface CategoryMapper {

	//查询所有
	@Select("SELECT id,name,parent_id AS parentId,is_parent AS isParent,sort FROM category")
	List<Category> findCategory();

	//条件查询
	@Select("SELECT id,name,parent_id AS parentId,is_parent AS isParent,sort FROM category where id=#{id}")
	Category findCategoryById(long id);

	//插入语句
	@Insert("insert into category(name,parent_id,is_parent,sort ) values(#{name},#{parentId},#{isParent},#{sort}) ")
	//生成主键
	@SelectKey(statement = "SELECT LAST_INSERT_ID()",before=false,keyProperty="id",resultType=Integer.class)
	void addCategory(Category category);

	//插入语句
	@Insert("insert into category(name,parent_id,isParent,sort ) values(#{name},#{parentId},#{isParent},#{sort}) ")
	//生成主键
	@SelectKey(statement = "SELECT LAST_INSERT_ID()",before=false,keyProperty="id",resultType=Integer.class)
	void save(Category category);

	//修改语句
	@Update("Update category set name=#{name},parent_id=#{parentId},is_parent=#{isParent},sort=#{sort} where id=#{id}")
	void updateCategory(Category category);

	//删除语句
	@Delete("delete from category where id=#{id}")
	void deleteCategory(long id);
}

JAVA 控制器类

package cn.maxhou.jxcht.controller;

import cn.maxhou.jxcht.dao.CategoryMapper;
import cn.maxhou.jxcht.entity.Category;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class CategoryResource {

	private CategoryMapper categoryMapper;

	public CategoryResource(CategoryMapper categoryMapper) {
		this.categoryMapper = categoryMapper;
	}

	@CrossOrigin
	@GetMapping("/category/list")
	public ResponseEntity<List<Category>>findAll(){
		return new ResponseEntity<>(categoryMapper.findCategory(),HttpStatus.OK);
	}

	@CrossOrigin
	@RequestMapping(value="/category/add",method=RequestMethod.POST,headers="Accept=application/json")
	public ResponseEntity<Category>addCategory(@RequestBody Category category){

		System.out.println(category.toString());

		categoryMapper.addCategory(category);
		return new ResponseEntity<>(null, HttpStatus.CREATED);
	}

	@CrossOrigin
	@RequestMapping(value="/category/addByParentId",method=RequestMethod.POST,headers="Accept=application/json")
	public ResponseEntity<Category>saveCategoryById(@RequestBody Category category){
		categoryMapper.addCategory(category);
		return new ResponseEntity<>(null, HttpStatus.CREATED);
	}


	@CrossOrigin
	@RequestMapping(value = "/category",method = RequestMethod.PUT,headers="Accept=application/json")
	public ResponseEntity<Category>updateCategory(@RequestBody Category category){

		System.out.println(category.toString());

		categoryMapper.updateCategory(category);
		return new ResponseEntity<>(null,HttpStatus.CREATED);
	}

	@CrossOrigin
	@RequestMapping(value="/category/{id}",method=RequestMethod.DELETE,headers="Accept=application/json")
	public ResponseEntity<Object>delete(@PathVariable(name="id") long id){
		categoryMapper.deleteCategory(id);
		return new ResponseEntity<>("已删除",HttpStatus.NO_CONTENT);
	}
}

VUE　文件

<template>

  <div class="block">
    <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
    >
      <template #default="{node,data}">
          <span class="custom-tree-node">
            <span>{{ data.name }}</span>
            <span>
              <a @click="append(data,node)" style="margin-right: 5px"><el-icon><plus /></el-icon></a>
              <a v-if="data.parentId!==0||data.parentId>0" @click="remove(data.id)" style="margin-right: 5px"><el-icon><delete-filled /></el-icon></a>
              <a @click="edit(data,node)" ><el-icon><edit /></el-icon></a>
            </span>
          </span>
      </template>
    </el-tree>
  </div>

  <el-dialog v-model="dialogFormVisible" title="请输入新名称">
    <el-input v-model="formname" autocomplete="off"></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upd">提交</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script lang="ts">

import axios from "axios";
import {defineComponent} from "vue";
export default defineComponent({
  data() {
    return {
      treeData: [],
      formname:'',
      dialogFormVisible:false,
      parentId2:0,
      sort2:0,
      id2:0,
    }
  },
  mounted() {
    this.getlist();

  },

  methods: {
    getlist: function () {

      axios.get('http://localhost:8080/category/list', {})
          .then(response => {
            (this as any).$data.treeData = this.arraytotree(response.data);

          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });

    },
    //数组转化为树
    arraytotree: function (arr: any) {
      const top: any[] = [], sub: any[] = [], tempObj: any = {};
      arr.forEach(function (item: any) {
        if (item.parentId === 0) { // 顶级分类
          top.push(item)
        } else {
          sub.push(item) // 其他分类
        }
        item.children = []; // 默然添加children属性
        tempObj[item.id] = item // 用当前分类的id做key，存储在tempObj中
      })

      sub.forEach(function (item) {
        // 取父级
        const parent = tempObj[item.parentId] || {'children': []}
        // 把当前分类加入到父级的children中
        parent.children.push(item)
      })

      return top
    },
    remove(id: any) {
      console.log(id)
      axios.delete('http://localhost:8080/category/' + id)
          .then(response => {
            console.log(response)
            this.getlist();
          }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },

    append(node:any){
      console.log(node)
      /*console.log("------------")
      console.log(data)*/
      axios
          .post('http://localhost:8080/category/add', {
            //变量值必须加this关键字才能正确对应data里面的对象
            name :node.name+"的子类",
            parentId:node.id,
            sort:node.sort+1,
            isParent:0,
          })
          .then(response => {

            if(response.status==201){
              alert("添加成功");
              this.getlist()
              //this.$router.push({ name: "/warehouses_list"})
            }else{
              alert("添加失败");
            }

          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });

    },
    edit(node:any){
      this.$data.dialogFormVisible = true
      console.log(node)
      this.$data.formname=node.name;
      this.$data.parentId2=node.parentId;
      this.$data.sort2=node.sort;
      this.$data.id2=node.id;
    },

    upd(){
      axios
          .put('http://localhost:8080/category', {
            //变量值必须加this关键字才能正确对应data里面的对象
            id:this.$data.id2,
            name :this.$data.formname,
            parentId:this.$data.parentId2,
            sort:this.$data.sort2,
            isParent:0,
          })
          .then(response => {

            if(response.status==201){
              alert("修改成功");
              this.$data.dialogFormVisible = false
              this.getlist()
            }else{
              alert("添加失败");
            }

          })

          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    }

  }

})
</script>

<style scoped>

</style>