若依框架构造树形结构数据
一、数据库表结构
以分组为例，仅创建分组所需字段，其余业务需要字段后续再添加即可
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for ggroup_data
-- ----------------------------
DROP TABLE IF EXISTS `group_data`;
CREATE TABLE `group_data` (
`group_id` bigint NOT NULL AUTO_INCREMENT COMMENT '分组id',
`parent_id` bigint NULL DEFAULT NULL COMMENT '父组id',
`ancestors` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '祖级列表',
`group_name` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '分组名称',
`order_num` int NULL DEFAULT NULL COMMENT '显示顺序',
`type` int NULL DEFAULT NULL COMMENT '节点类型，用于业务处理',
PRIMARY KEY (`group_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 58 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = DYNAMIC;
SET FOREIGN_KEY_CHECKS = 1;
二、前端 - 表格
1、表格结构
<el-table v-if="refreshTable" v-loading="loading" :data="groupList" row-key="groupId" :default-expand-all="isExpandAll" :tree-props="{children:'children',hasChildren:'hasChildren'}">
<el-table-column label="分组名称" align="left" prop="groupName" />
<el-table-column label="排序" align="left" prop="orderNum" />
<el-table-column label="节点类型" align="center" prop="type" >
<template slot-scope="scope">
<span v-if="scope.row.type === 0">xxx</span>
<span v-else-if="scope.row.type === 1">xxx</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:group:edit']"> 修改</el-button>
<!-- 可根据不同的节点类型来实现不同的逻辑 -->
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:group:remove']">{{scope.row.type === 0 ? '删除' : '解绑/xxx' }}</el-button>
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['device:group:add']" v-if="scope.row.type===0">新增</el-button>
</template>
</el-table-column>
</el-table>
2、添加对话中上级节点
<!-- 添加或修改场景管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!-- 上级节点 -->
<el-form-item label="上级分组" prop="parentId" v-if="form.parentId !== 0">
<treeselect v-model="form.parentId" :options="groupOptions" :normalizer="normalizer" placeholder="选择上级场景" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-radio-group v-model="form.type" size="small" @change="handleTypeChange($event)" :disabled="isUpdate">
<el-radio v-for="(item, index) in groupTypeList" :key="index" :label="item.value"
:disabled="item.disabled">{{item.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
3、需要引入依赖
import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
4、data中数据
data() {
return {
// 遮罩层
loading: true,
// 分组管理表格数据
groupList: [],
// 是否展开，默认全部展开
isExpandAll: true,
refreshTable: true,
groupOptions:[],
//例子
groupTypeList: [
{"label": "文件夹","value": 0},
{"label": "SMCB", "value": 1},
{"label": "SMCT", "value": 2}
],
};
},
5、相关方法
/** 查询分组管理列表 */
getList() {
this.loading = true;
listGroup(this.queryParams).then(response => {
//TODO：使用handleTree构造为树形数据让表格显示为可折叠类型
this.groupList = this.handleTree(response.data,"groupId")
this.loading = false;
});
},
/** 新增按钮操作 */
handleAdd(row) {
//传统添加逻辑
//TODO：获取树形结构
listGroup().then(res => {
this.groupOptions = this.handleTree(res.data,"groupId");
})
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
//传统修改逻辑
//TODO：查询除自身节点外的其他数据
listGroupExcludeChild(row.groupId).then(response => {
this.groupOptions = this.handleTree(response.data,"groupId");
if (this.groupOptions.length == 0){
const noResultOptions = {groupId:this.form.parentId,groupName:this.form.groupName,children:[]};
this.groupOptions.push(noResultOptions);
}
});
},
/** 转换分组数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.groupId,
label: node.groupName,
children: node.children
};
},
三、前端 - 侧边栏树形结构
1、侧边栏树形结构
<el-row :gutter="20">
<el-col :span="4" :xs="24">
<!-- 筛选分组节点 -->
<div class="head-container">
<el-input v-model="groupName" placeholder="请输入分组名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
</div>
<!-- 分组树形结构 -->
<div class="head-container">
<el-tree :data="groupOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="groupId" default-expand-all highlight-current @node-click="handleNodeClick"/>
</div>
</el-col>
<el-col :span="20" :xs="24">
</el-col>
</el-row>
2、data中数据
groupOptions: [],
groupName: "",
nodeInfo: {},
defaultProps: {
children: "children",
label: "label",
groupData: "groupData",
},
3、监听器方法
watch: {
//监听groupName,用于筛选分组数据
groupName(val) {
this.$refs.tree.filter(val);
},
},
4、相关方法
//节点过滤方法
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//点击节点触发的方法
handleNodeClick(data) {
this.nodeInfo = data.groupData;
//TODO：后续的业务处理，例如建立连接/展示数据...
}
//获取分组树
getGroupTree() {
groupSelectTree().then(res => {
this.groupOptions = res.data;
})
},
四、后端
1、表格数据 - excludeChild
对应前端的listGroupExcludeChild
//controller
@GetMapping("/list/exclude/{groupId}")
public AjaxResult excludeChild(@PathVariable(value = "groupId",required = false)Long groupId)
{
//查询要分组列表
List<GroupData> list = groupDataService.selectGroupDataList(new GroupData());
//使用流的方式处理数据
list.removeIf(g -> g.getGroupId().intValue() == groupId || ArrayUtils.contains(StringUtils.split(g.getAncestors(),","),groupId+""));
return success(list);
}
2、树形数据
对应前端的groupSelectTree
//controller
@GetMapping("/groupSelectTree")
public AjaxResult selectGroupTreeList(GdtGroupData group){
logger.info("分组构建树为：{}",success(groupDataService.selectGroupTreeList(group)));
return success(groupDataService.selectGroupTreeList(group));
}
//---------------------------------------------------------------------------------------------------------------------------------------
//service
List<GroupTreeSelect> selectGroupTreeList(GroupData group);
//---------------------------------------------------------------------------------------------------------------------------------------
//impl
//1、查询树形结构数据
@Override
public List<GroupTreeSelect> selectGroupTreeList(GroupData group) {
List<GroupData> groupData = selectGroupDataList(group);
return buildGroupTreeSelect(groupData);
}
//2、构建前端下拉框结构
private List<GroupTreeSelect> buildGroupTreeSelect(List<GroupData> list) {
List<GroupData> groupDataList = buildGroupTree(list);
return groupDataList.stream().map(GroupTreeSelect::new).collect(Collectors.toList());
}
//3、构建前端所需树结构
public List<GroupData> buildGroupTree(List<GroupData> groups){
List<GroupData> resultList = new ArrayList<>();
List<Long> tempList = groups.stream().map(GroupData::getGroupId).collect(Collectors.toList());
for (GroupData group : groups) {
if (!tempList.contains(group.getParentId())){
recursionFn(groups,group);
resultList.add(group);
}
}
if (resultList.isEmpty()){
resultList = groups;
}
return resultList;
}
//4、递归列表
private void recursionFn(List<GroupData> list, GroupData g) {
List<GroupData> childList = getChildList(list,g);
g.setChildren(childList);
for (GroupData gChild : childList) {
if (hasChild(list,gChild)){
recursionFn(list,gChild);
}
}
}
//5、得到子节点
private List<GroupData> getChildList(List<GroupData> list, GroupData g) {
List<GroupData> tList = new ArrayList<>();
Iterator<GroupData> iterator = list.iterator();
while (iterator.hasNext()){
GroupData n = iterator.next();
if (StringUtils.isNotNull(n.getParentId()) && n.getParentId().longValue() == g.getGroupId().longValue()){
tList.add(n);
}
}
return tList;
}
//6、判断是否有子节点
private boolean hasChild(List<GroupData> list, GroupData gChild) {
return getChildList(list,gChild).size() > 0;
}
//---------------------------------------------------------------------------------------------------------------------------------------
//domain
/**
* GroupTreeselect树结构实体类
*
* @author Mr.Liu
*/
@Data
public class GroupTreeSelect implements Serializable
{
private static final long serialVersionUID = 1L;
/** 节点ID */
private Long id;
/** 节点名称 */
private String label;
/** 子节点 */
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<GroupTreeSelect> children;
private GroupData groupData;
public GroupTreeSelect() { }
public GroupTreeSelect(GroupData group)
{
this.id = group.getGroupId();
this.label = group.getGroupName();
this.groupData = group;
this.children = group.getChildren().stream().map(GroupTreeSelect::new).collect(Collectors.toList());
}
}