看如下圖所示的功能，是不是可高級了？什么，你沒看懂？拜托雙擊放大看！

?是的，我最近消失了一段時間就是在研究這個玩意的實現(xiàn)，通過不懈努力與鉆研并參考其他人員實現(xiàn)并加以改造，很好，終于有點小成果，這不就迫不及待給大家分享出來！使用的第三組件為VANT-X6引擎！

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

通過上述流后，可以任意組裝出查詢SQL語句或者是結(jié)構(gòu)交給后端進行查詢顯示！這遠比給定的那些搜索框框來的更加有性價比！用戶搜索功能那就是嗖的一下提升了好多個檔次。

來吧，到了最重要的環(huán)節(jié)，代碼展示：

一、依賴安裝

在項目的依賴包中添加以下依賴：最好按照我使用的版本添加哦，避免出現(xiàn)不兼容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，取決于你使用的是什么環(huán)境腳本！

二、頁面代碼：

?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組件，作為子節(jié)點展示在思維導(dǎo)圖上
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", //關(guān)系節(jié)點//     "width": 44,//     "height": 44,//     "data": {//         "relative": "and" //and并且 or或者//     },//     "children": [//         {//             "id": 0.32858917851150116,//             "type": "condition-text", //條件節(jié)點//             "width": 90,//             "height": 44,//             "level": 1, //判斷它是第幾級的條件節(jié)點//             "edgeText": "",//             "data": {//                 "complete": true,//                 "form": {} //你的業(yè)務(wù)數(shù)據(jù)//             }//         },//         {//             "id": 0.30546487070416783,//             "type": "vue-shape", //自定義組件 業(yè)務(wù)節(jié)點//             "width": 744,//             "height": 44,//             "level": 1,//             "edgeText": "",//             "data": {//                 "complete": false,//                 "form": {} //你的業(yè)務(wù)數(shù)據(jù)//             }//         }//     ]// }]} //默認(rèn)只有一個根節(jié)點}},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' //根節(jié)點點擊事件},label: {fontSize: 14,fill: 'white',event: 'add:original'//根節(jié)點點擊事件}}},true,)//表示《并且 或者》的關(guān)系節(jié)點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' //關(guān)系節(jié)點 切換 關(guān)系事件},text: { text: '并且' }},data: { relative: 'and' } //and并且 or或者 默認(rèn)為 并且})//自定義vue 業(yè)務(wù)節(jié)點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', // 基類名稱，使用已經(jīng)注冊的工具名稱。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', // 基類名稱，使用已經(jīng)注冊的工具名稱。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', // 基類名稱，使用已經(jīng)注冊的工具名稱。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)//找到當(dāng)前node的最后一級，添加if (addChildNode(lastNode.id, '并且', graphData)) render(graph, this.graphData)}})//關(guān)系節(jié)點 點擊增加條件事件Graph.registerNodeTool('relative:add-condition', {inherit: 'button', // 基類名稱，使用已經(jīng)注冊的工具名稱。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', // 基類名稱，使用已經(jīng)注冊的工具名稱。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", //自定義組件 業(yè)務(wù)節(jié)點//     width: 550,//     height: 44,//     level: 1,//     edgeText: "",//     data: {//         complete: false,//         form: {} //你的業(yè)務(wù)數(shù)據(jù)//     }// }// 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') {//條件文案節(jié)點 根據(jù)文字長度，計算寬度，這邊粗糙了點，將數(shù)字也按中文字長度計算，可優(yōu)化//下面是我的根據(jù)我的業(yè)務(wù)數(shù)據(jù)結(jié)構(gòu)計算長度，可參考//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}//關(guān)系節(jié)點，默認(rèn)是并且為藍色，是或者的話，需要切換顏色判斷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)//子節(jié)點邊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()}//根結(jié)點添加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" //自定義組件 業(yè)務(wù)節(jié)點anode.width = 550anode.height = 44anode.level = 1anode.edgeText = ""anode.data = {complete: false,form: {} //你的業(yè)務(wù)數(shù)據(jù)}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", //自定義組件 業(yè)務(wù)節(jié)點"width": 550,"height": 44,"level": 1,"edgeText": "","data": {"complete": false,"form": {} //你的業(yè)務(wù)數(shù)據(jù)}})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", //自定義組件 業(yè)務(wù)節(jié)點"width": 550,"height": 44,"level": 1,"edgeText": "","data": {"complete": false,"form": {} //你的業(yè)務(wù)數(shù)據(jù)}})anode.children = xlist// tlist.push(anode)this.graphData.children = [anode]if (anode) {render(graph, this.graphData)}}})//節(jié)點數(shù)據(jù)變化graph.on('node:change:data', (cell) => {debugger})//關(guān)系節(jié)點 切換《并且或者》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})//節(jié)點聚焦 增加工具欄目graph.on('node:mouseenter', ({ node }) => {// if (['condition-text', 'relative'].includes(node.shape)) {//     if (!this.isExistUnComplete()) { //判斷當(dāng)前是否有未填寫完成的vue組件節(jié)點//         if (node.shape === 'condition-text') {//             node.setAttrs({ body: { fill: '#E9F0FF', stroke: '#296FFF' } })//         }//         this.addTool(node)//     }// }})//節(jié)點失焦 移除工具欄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 }) => {//不是 根結(jié)點下第一個關(guān)系節(jié)點 并且 沒有未完成的節(jié)點 可添加const targetNode = graph.getCellById(edge.target.cell)const targetNodeData = findItem(this.graphData, edge.target.cell).nodeconst isChild = targetNodeData.level ? targetNodeData.level === 1 : true //不是限定節(jié)點 可添加if (!(edge.source.cell === '1' && targetNode.shape === 'relative') && isChild && !this.isExistUnComplete()) {edge.addTools(['edge:add-condition'])}})//邊 失焦graph.on('edge:mouseleave', ({ edge }) => {if (!this.isExistUnComplete()) {//判斷當(dāng)前是否有未填寫完成的vue組件節(jié)點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="關(guān)系"><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'//在這需要再次按需引入對應(yīng)組件
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'//查找節(jié)點的父節(jié)點 當(dāng)前節(jié)點，頂級節(jié)點的數(shù)據(jù)
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;}
};
//設(shè)置某個節(jié)點的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);});}
};//插入節(jié)點
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, //內(nèi)容寬高 + 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;
};
//移除節(jié)點
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); //刪除當(dāng)前if (children.length && children.length < 2) {//并且或者 只有一個子級時 刪除并且或者節(jié)點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()
};

目前只實現(xiàn)初步的效果，后期實現(xiàn)相關(guān)功能后再視具體是否可開放源碼進行共享！

創(chuàng)作不易，謝謝你的點贊和關(guān)注收藏！