VUE Element-UI 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>
