VUE条件树查询

看如下图所示的功能，是不是可高级了？什么，你没看懂？拜托双击放大看！

 是的，我最近消失了一段时间就是在研究这个玩意的实现，通过不懈努力与钻研并参考其他人员实现并加以改造，很好，终于有点小成果，这不就迫不及待给大家分享出来！使用的第三组件为VANT-X6引擎！

自己看官方文档：->https://x6.antv.antgroup.com/tutorial/getting-started

通过上述流后，可以任意组装出查询SQL语句或者是结构交给后端进行查询显示！这远比给定的那些搜索框框来的更加有性价比！用户搜索功能那就是嗖的一下提升了好多个档次。

来吧，到了最重要的环节，代码展示：

一、依赖安装

在项目的依赖包中添加以下依赖：最好按照我使用的版本添加哦，避免出现不兼容API报错无法运行！

"@antv/x6": "1.34.6",
"@antv/hierarchy": "0.6.8",
"@antv/x6-vue-shape": "1.3.2",
"@vue/composition-api":"1.3.0"

完成后，进行npm install或yarn install，取决于你使用的是什么环境脚本！

二、页面代码：

 queryGraph.vue 页面代码

<template><div id="container" style="height: 100%;width:100%"></div>
</template>
<script>
import { Graph } from '@antv/x6'
import Hierarchy from '@antv/hierarchy'
import '@antv/x6-vue-shape'
import condition from './queryCondition.vue' //这是我的vue组件，作为子节点展示在思维导图上
import { findItem, lastChild, setData, addChildNode, removeNode, randomId } from './fun'export default {data() {return {graphData: {'id': '1','type': 'original—add','width': 80,'height': 30,"children": [// {//     "id": 0.28207584597793156,//     "type": "relative", //关系节点//     "width": 44,//     "height": 44,//     "data": {//         "relative": "and" //and并且 or或者//     },//     "children": [//         {//             "id": 0.32858917851150116,//             "type": "condition-text", //条件节点//             "width": 90,//             "height": 44,//             "level": 1, //判断它是第几级的条件节点//             "edgeText": "",//             "data": {//                 "complete": true,//                 "form": {} //你的业务数据//             }//         },//         {//             "id": 0.30546487070416783,//             "type": "vue-shape", //自定义组件 业务节点//             "width": 744,//             "height": 44,//             "level": 1,//             "edgeText": "",//             "data": {//                 "complete": false,//                 "form": {} //你的业务数据//             }//         }//     ]// }]} //默认只有一个根节点}},mounted() {this.init()},methods: {//初始化⽅法init() {let self = thisGraph.registerNode('original—add',{inherit: 'rect',width: 80,height: 30,label: '+纳入条件',attrs: { //样式代码body: {rx: 4,ry: 4,stroke: '#037AFB',fill: '#037AFB',strokeWidth: 1,event: 'add:original' //根节点点击事件},label: {fontSize: 14,fill: 'white',event: 'add:original'//根节点点击事件}}},true,)//表示《并且 或者》的关系节点Graph.registerNode('relative',{inherit: 'rect',markup: [{tagName: 'rect',selector: 'body'},{tagName: 'text',selector: 'label_text'},{tagName: 'image',selector: 'switch'}],attrs: { //样式代码body: {rx: 4,ry: 4,stroke: 'orange',fill: 'orange',strokeWidth: 1,event: 'change:relative'},label_text: {fontSize: 14,fill: 'white',event: 'change:relative'},switch: {event: 'change:relative' //关系节点 切换 关系事件},text: { text: '并且' }},data: { relative: 'and' } //and并且 or或者 默认为 并且})//自定义vue 业务节点Graph.registerVueComponent('condition', condition, true)//显示条件语句Graph.registerNode('condition-text',{inherit: 'rect',markup: [{tagName: 'rect',selector: 'body'},{tagName: 'g',attrs: { class: 'content' },children: []}],attrs: {}//样式代码})// 弯的边Graph.registerEdge('mindmap-edge',{inherit: 'edge',router: {name: 'manhattan',args: {startDirections: ['right'],endDirections: ['left']}},connector: {name: 'rounded'},attrs: {line: {targetMarker: '',stroke: '#A2B1C3',strokeWidth: 2}}, //样式代码zIndex: 0},true,)// 直的边Graph.registerEdge('straight-edge',{inherit: 'edge',attrs: {}, //样式代码zIndex: 0},true,)//编辑Graph.registerNodeTool('edit', {inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',width: 32,height: 28}},{tagName: 'image',selector: 'icon',attrs: {'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',cursor: 'pointer',width: 16,height: 16,x: 8,y: 6}}],x: '100%',y: '100%',offset: { x: -96, y: -72 },onClick({ cell }) {const dataItem = cell.getData()setData(this.graphData, cell.id, { ...dataItem, complete: false, isEdit: true })cell.setData({ ...dataItem, complete: false, isEdit: true })//打开编辑时，子级元素偏移const firstChild = cell.getChildAt(0)if (firstChild) {const cellWidth = dataItem.form.unit ? 844 : 744const x = cellWidth - firstChild.position({ relative: true }).x + 80 //编辑框 - 第一个子级位置 - 连接线宽 = 子级偏移量cell.getChildAt(0).translate(x)}}})//删除Graph.registerNodeTool('del', {inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',width: 32,height: 28}},{tagName: 'image',selector: 'icon',attrs: {'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',cursor: 'pointer',width: 16,height: 16,x: 8,y: 6}}],x: '100%',y: '100%',offset: { x: -64, y: -72 },onClick({ cell }) {if (removeNode(cell.id, this.graphData)) {render(graph, this.graphData)}}})//新增限定条件Graph.registerNodeTool('add-condition', {inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',width: 32,height: 28}},{tagName: 'image',selector: 'icon',attrs: {'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',cursor: 'pointer',width: 16,height: 16,x: 8,y: 6}}],x: '100%',y: '100%',offset: { x: -32, y: -72 },onClick({ cell }) {debuggerconst { id } = cellconst dataItem = findItem(this.graphData, id).nodeconst lastNode = lastChild(dataItem)//找到当前node的最后一级，添加if (addChildNode(lastNode.id, '并且', graphData)) render(graph, this.graphData)}})//关系节点 点击增加条件事件Graph.registerNodeTool('relative:add-condition', {inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',width: 32,height: 28}},{tagName: 'image',selector: 'icon',attrs: {'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',cursor: 'pointer',width: 16,height: 16,x: 8,y: 6}}],x: '100%',y: '100%',offset: { x: -32, y: -72 },onClick({ cell }) {debuggerconst { id } = cellif (addChildNode(id, '', this.graphData)) render(graph, this.graphData)}})//边增加条件Graph.registerEdgeTool('edge:add-condition', {inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',fontSize: 16,width: 20,height: 20,rx: 2,ry: 2,stroke: '#296FFF',strokeWidth: 1}},{tagName: 'text',selector: 'label',textContent: '+',attrs: {x: 5,y: 15,fontSize: 16,cursor: 'pointer',fill: '#ffff'}}],distance: '100%',offset: { y: -10, x: -10 },onClick({ cell }) {const { node, parent } = findItem(self.graphData, cell.target.cell)const newId = randomId()const childP = {children: [node],id: newId,type: 'relative',width: 40,height: 40,level: 2,data: { relative: 'and', type: 'document' }}const currentIndex = parent.children.findIndex(item => item.id === node.id)parent.children[currentIndex] = childPlet anode = addChildNode(newId, '', self.graphData)anode.width = 550if (anode) {render(graph, self.graphData)}// const { node, parent } = findItem(self.graphData, cell.target.cell)// const newId = randomId()// const childP = {//     id: newId,//     type: "vue-shape", //自定义组件 业务节点//     width: 550,//     height: 44,//     level: 1,//     edgeText: "",//     data: {//         complete: false,//         form: {} //你的业务数据//     }// }// parent.children.push(childP)// render(graph, self.graphData)}})let graph = new Graph({background: { color: '#fff' },container: document.getElementById('container'),panning: { enabled: true },selecting: { enabled: true },keyboard: { enabled: true },grid: true,mousewheel: {enabled: true,modifiers: ['ctrl', 'meta']},interacting: { nodeMovable: false }})const render = (graph, graphData) => {const result = Hierarchy.mindmap(graphData, {direction: 'H',getHeight(d) {return d.height},getWidth(d) {return d.width},getHGap() {return 40},getVGap() {return 20},getSide: () => {return 'right'}})const cells = []const traverse = (hierarchyItem, parentId) => {if (hierarchyItem) {const { data, children } = hierarchyItemconst node = graph.createNode({...data,shape: data.type,x: hierarchyItem.x,y: hierarchyItem.y,component: 'condition'})if (parentId) {//有父级则插入父级const parent = graph.getCellById(parentId)parent && parent.addChild(node)}if (data.type === 'condition-text') {//条件文案节点 根据文字长度，计算宽度，这边粗糙了点，将数字也按中文字长度计算，可优化//下面是我的根据我的业务数据结构计算长度，可参考//const { key, opt, value = [], unit } = data.data.form//const keyText = key.displayText//const optText = opt.displayText//const valueText = typeof value === 'string' ? value : value.join(',')//const unitText = valueText.length ? (unit || '') : ''//const width = (keyText.length + optText.length + valueText.length + unitText.length) * 16 + 10//node.attr('key/text', `${keyText},`)//node.attr('opt', { text: `${optText} `, x: keyText.length * 16 + 5 })//node.attr('value', { text: valueText, x: (keyText.length + optText.length) * 16 + 5 })//node.attr('unit', { text: unitText, x: (keyText.length + optText.length + valueText.length) * 16 + 5 })//node.resize(width, 44)//data.width = width}//关系节点，默认是并且为蓝色，是或者的话，需要切换颜色判断if (data.type === 'relative' && data.data.relative === 'or') {node.setAttrs({body: { stroke: '#CEE8D9', fill: '#CEE8D9' },label_text: { fill: '#008451' },switch: { 'xlink:href': "" },text: { text: '或者' }})}cells.push(node)//子节点边if (children) {children.forEach((item) => {const { id, data: itemData } = itemcells.push(graph.createEdge({shape: itemData.edgeText ? 'straight-edge' : 'mindmap-edge',source: {cell: hierarchyItem.id,anchor: {name: itemData.type === 'topic-child' ? 'right' : 'center',args: {dx: itemData.type === 'topic-child' ? -16 : '25%'}}},target: { cell: id, anchor: { name: 'left' } },labels: [{ attrs: { text: { text: itemData.edgeText || '' } } }]}),)traverse(item, node.id)})}}}traverse(result)graph.resetCells(cells)// graph.scaleContentToFit({ maxScale: 1 })graph.centerContent()}//根结点添加graph.on('add:original', ({ node }) => {debuggerif (this.graphData.children.length == 0) {const { id } = nodelet anode = addChildNode(id, '', this.graphData)anode.id = randomId()anode.type = "vue-shape" //自定义组件 业务节点anode.width = 550anode.height = 44anode.level = 1anode.edgeText = ""anode.data = {complete: false,form: {} //你的业务数据}anode.children = []if (anode) {render(graph, this.graphData)}}else if (this.graphData.children.lastObject().type != 'relative') {const { id } = nodelet tlist = this.graphData.childrenthis.graphData.children = []let anode = addChildNode(id, '', this.graphData)anode.type = "relative"anode.width = 40;anode.height = 40;anode.level = 1;anode.data = {"relative": "and" //and并且 or或者}let xlist = []tlist.forEach(element => {xlist.push(element)});xlist.push({"id": randomId(),"type": "vue-shape", //自定义组件 业务节点"width": 550,"height": 44,"level": 1,"edgeText": "","data": {"complete": false,"form": {} //你的业务数据}})anode.children = xlistif (anode) {render(graph, this.graphData)}}else {const { id } = nodelet tlist = this.graphData.childrenthis.graphData.children = []let anode = addChildNode(id, '', this.graphData)anode.type = "relative"anode.width = 40;anode.height = 40;anode.level = 1;anode.data = {"relative": "and" //and并且 or或者}let xlist = []tlist.forEach(x=>{xlist.push(x)})xlist.push({"id": randomId(),"type": "vue-shape", //自定义组件 业务节点"width": 550,"height": 44,"level": 1,"edgeText": "","data": {"complete": false,"form": {} //你的业务数据}})anode.children = xlist// tlist.push(anode)this.graphData.children = [anode]if (anode) {render(graph, this.graphData)}}})//节点数据变化graph.on('node:change:data', (cell) => {debugger})//关系节点 切换《并且或者》graph.on('change:relative', (cell) => {let node = cell.nodeif (node.data.relative == "and") {node.data.relative = "or"node.setAttrs({body: {stroke: '#d4eade',fill: '#d4eade'},label_text: {fontSize: 14,fill: '#3e845e',},text: { text: '或者' }})}else {node.data.relative = "and"node.setAttrs({body: {stroke: 'orange',fill: 'orange'},label_text: {fontSize: 14,fill: 'white',},text: { text: '并且' }})}debuggerconst dataItem = node.getData()setData(self.graphData,node.id,dataItem)debugger})//节点聚焦 增加工具栏目graph.on('node:mouseenter', ({ node }) => {// if (['condition-text', 'relative'].includes(node.shape)) {//     if (!this.isExistUnComplete()) { //判断当前是否有未填写完成的vue组件节点//         if (node.shape === 'condition-text') {//             node.setAttrs({ body: { fill: '#E9F0FF', stroke: '#296FFF' } })//         }//         this.addTool(node)//     }// }})//节点失焦 移除工具栏graph.on('node:mouseleave', ({ node }) => {// if (['condition-text', 'relative'].includes(node.shape)) {//     if (node.shape === 'condition-text') {//         node.setAttrs({ body: { stroke: '#CCC', fill: '#fff' } })//     }//     this.removeTool(node)// }})//边 悬浮事件graph.on('edge:mouseenter', ({ edge }) => {//不是 根结点下第一个关系节点 并且 没有未完成的节点 可添加const targetNode = graph.getCellById(edge.target.cell)const targetNodeData = findItem(this.graphData, edge.target.cell).nodeconst isChild = targetNodeData.level ? targetNodeData.level === 1 : true //不是限定节点 可添加if (!(edge.source.cell === '1' && targetNode.shape === 'relative') && isChild && !this.isExistUnComplete()) {edge.addTools(['edge:add-condition'])}})//边 失焦graph.on('edge:mouseleave', ({ edge }) => {if (!this.isExistUnComplete()) {//判断当前是否有未填写完成的vue组件节点edge.removeTools(['edge:add-condition'])}})render(graph, this.graphData)},isExistUnComplete() {return false}}
}
</script>
<style lang="scss">
.topic-image {visibility: hidden;cursor: pointer;
}.x6-node:hover .topic-image {visibility: visible;
}.x6-node-selected rect {stroke-width: 2px;
}
</style>

三、自定义条件组件queryCondition.vue

<template><div class="condition"><el-form ref="form" :model="form" label-width="0" inline><el-row :gutter="10"><el-col :span=8><el-form-item class="w-100"><el-input v-model="form.name" placeholder="搜索项目"></el-input></el-form-item></el-col><el-col :span=4><el-form-item class="w-100"><el-select v-model="form.condition" placeholder="关系"><el-option v-for="item in optionsList" :key="item.label" :label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col><el-col :span=7><el-form-item class="w-100"><el-input v-model="form.text" placeholder="对比值"></el-input></el-form-item></el-col><el-col :span=5><el-from-item class="w-100"><div class="flex-row w-100"><el-button>取消</el-button><el-button type="primary" @click="onSubmit">确定</el-button></div></el-from-item></el-col></el-row></el-form></div>
</template><script>// import { elForm, elFormItem, elInput, elSelect, elOption } from 'element-ui'//在这需要再次按需引入对应组件
export default {name: 'queryCondition',inject: ["getGraph", "getNode"],// components: { elForm, elFormItem, elInput, elSelect, elOption },data() {return {form: {name:null,condition:null,text:null},optionsList: [{ label: '等于', value: '=' },{ label: '不等于', value: '!=' },{ label: '大于', value: '>' },{ label: '大于等于', value: '>=' },{ label: '小于', value: '<' },{ label: '小于等于', value: '<=' }]}},mounted() {},methods: {onSubmit(){}}
}
</script><style lang="scss" scoped>
.condition {padding: 0px 10px;height: 100%;background: #EFF4FF;border: 1px solid #5F95FF;border-radius: 6px;display: flex;flex-direction: row;justify-content: center;align-items: center;
}.flex-row{display: flex;flex-direction: row;justify-content: center;align-items: center;
}::v-deep {.el-form-item--small {margin: 0px;vertical-align: middle !important;}.el-button--small{padding-left:10px;padding-right: 10px;}
}
</style>

四、公共方法 fun.js

import {snowFlakeId} from '@/utils/snowFlake'//查找节点的父节点 当前节点，顶级节点的数据
export const findItem = (obj, id, levelTop) => {const topNode = levelTop? levelTop: obj.level && obj.level === 1? obj: null;if (obj.id === id) {return {parent: null,node: obj,topNode,};}const { children } = obj;if (children) {for (let i = 0, len = children.length; i < len; i++) {const res = findItem(children[i], id, topNode);if (res) {return {parent: res.parent || obj,node: res.node,topNode: res.topNode,};}}}return null;
};
//查找最末级
export const lastChild = (obj) => {if (obj.children && obj.children.length) {return lastChild(obj.children[0]);} else {return obj;}
};
//设置某个节点的data
export const setData = (obj, id, dataItem) => {if (obj.id === id) {obj.data = dataItem;if (["vue-shape", "condition-text"].includes(obj.type)) {obj.type = dataItem.complete ? "condition-text" : "vue-shape";}return;}if (obj.children) {obj.children.forEach((child) => {setData(child, id, dataItem);});}
};//插入节点
export const addChildNode = (id, edgeText, data) => {const res = findItem(data, id);const dataItem = res.node;if (dataItem) {const item = {id: randomId(),type: "vue-shape",width: 744,height: 44, //内容宽高 + padding20 + 边框4level: dataItem.level === 1 ? dataItem.level + 1 : 1,edgeText,};if (dataItem.children) {dataItem.children.push(item);} else {dataItem.children = [item];}return item;}return null;
};
//移除节点
export const removeNode = (id, data) => {const res = findItem(data, id);const dataItem = res.parent;if (dataItem && dataItem.children) {const { children } = dataItem;const index = children.findIndex((item) => item.id === id);children.splice(index, 1); //删除当前if (children.length && children.length < 2) {//并且或者 只有一个子级时 删除并且或者节点const p2 = findItem(data, dataItem.id).parent; //父级的父级const p2OtherChildren = p2.children.filter((item) => item.id !== dataItem.id);p2.children = [...p2OtherChildren, ...children];}return true;}return null;
};export const randomId = ()=> {return snowFlakeId()
};

目前只实现初步的效果，后期实现相关功能后再视具体是否可开放源码进行共享！

创作不易，谢谢你的点赞和关注收藏！