效果
代码实现
页面
<el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false"
:filter-node-method="filterNode" :ref="'tree_' + item.name" :id="'tree' + item.name" node-key="id"
:current-node-key="defaultKeys" default-expand-all highlight-current @node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-input :key="data.id" autofocus size="mini" class=" w-75 text-left" :id="data.id"
v-show="data.isEdit" v-model="form.serviceName" @keyup.enter.native="addApiGroup" @blur="addApiGroup"></el-input>
<el-tooltip :content="node.label" placement="right-start" transition="el-zoom-in-top"
effect="light">
<span v-if="!data.isEdit" class="textLine1 tree-label d-flex align-items-center">
<img class="imgAlign-textBottom mr-1"
:src="data.isGroup == 1 ? require('../../../assets/images/folder.png') : require('../../../assets/images/code.png')"
alt="">
<span class=''> {{ node.label }}</span>
</span>
</el-tooltip>
<el-popover v-if="data.isGroup == 1" placement="bottom-start" width="100" trigger="click"
id="myPopover">
<div>
<el-link class="ml-0 mb-2" :underline="false" size="mini" type="info"
@click="handleAdd('api', node, data)">
<img src="../../../assets/images/code_line.png" alt="" class="mr-2" />新增接口
</el-link>
<el-popover placement="right-start" width="100" trigger="click">
<el-link class="d-block ml-0 mb-2" :underline="false" size="mini" type="info"
@click="handleAdd('group', node, data, 'up', $event)">上方添加分组</el-link>
<el-link class="d-block mb-2 ml-0" :underline="false" size="mini" type="info"
@click="handleAdd('group', node, data, 'down')">下方添加分组</el-link>
<el-link class="d-block ml-0" :underline="false" size="mini" type="info"
@click="handleAdd('group', node, data, 'child')">添加子分组</el-link>
<el-link class="ml-0 mb-2 addGroup" :underline="false" size="mini" type="info"
slot="reference">
<span>
<img src="../../../assets/images/bulletpoint.png" alt="" class="mr-2" />新增分组
</span>
<img src="../../../assets/images/chevron-right.png" alt="" class="mr-2" />
</el-link>
</el-popover>
<el-link class="d-block ml-0 mb-2" :underline="false" size="mini" type="info"
@click="handleEdit('group', node, data)"><img src="../../../assets/images/folder_line.png"
alt="" class="mr-2" />编辑分组</el-link>
<el-link class="d-block ml-0" :underline="false" size="mini" type="info"
@click="handleDelete(node, data)"><img src="../../../assets/images/delete.png" alt=""
class="mr-2" />删除</el-link>
</div>
<el-button class="ml-2" size="mini" icon="el-icon-more" type="text" slot="reference"></el-button>
</el-popover>
</span>
</el-tree>
js
export default {
name: 'AppCenterDetail',
components: { apiList },
data() {
return {
treeData: [],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
created() {
this.form.id = this.$route.query.appId
this.appId = this.$route.query.appId
this.getAppDetail(this.$route.query.appId)
},
mounted() {
},
methods: {
handleNodeClick(data, node) {
this.form.serviceName = data.label
this.queryParams.parentId = data.id
this.defaultKeys = data.id
let tree = {
id: 0,
children: this.treeData
};
addApiGroup() {
},
handleAdd(node, data, pageType){
const treeDOM = this.$refs['tree_' + this.activeName][0]
const id = Math.ceil(Math.random() * 100);
const newData = { id: id, parentId: data ? data.id : 0, label: '', isEdit: true, isNew: true, children: [] }
this.$set(this.form, 'isGroup', 1)
if (pageType == 'up') {
this.$set(this.form, 'upOrder', data.orderNum)
this.$set(this.form, 'isUp', 0)
this.$set(this.form, 'orderNum', data.orderNum - 1)
this.$set(this.form, 'parentId', data ? data.parentId : 0)
this.$set(this.form, 'upId', data.id)
treeDOM.insertBefore(newData, node)
setTimeout(() => {
document.getElementById(newData.id).focus()
}, 500);
} else if (pageType == 'down') {
this.$set(this.form, 'upOrder', data.orderNum)
this.$set(this.form, 'isUp', 1)
this.$set(this.form, 'orderNum', data.orderNum + 1)
this.$set(this.form, 'parentId', data ? data.parentId : 0)
this.$set(this.form, 'upId', data.id)
treeDOM.insertAfter(newData, node)
setTimeout(() => {
document.getElementById(newData.id).focus()
}, 500);
} else if (pageType == 'child') {
if (this.currentNodeLevel >= 4) {
this.$modal.msgWarning('当前树最多可加四级,已超出')
} else {
this.$set(this.form, 'upOrder', data.orderNum)
this.$set(this.form, 'isUp', 2)
this.$set(this.form, 'parentId', data.id)
treeDOM.append(newData, node)
treeDOM.store.nodesMap[data.id].expanded = true
setTimeout(() => {
document.getElementById(newData.id).focus()
}, 500);
}
} else {
this.addGroupVisible = true
this.$set(this.form, 'parentId', 0)
this.$set(this.form, 'isUp', 2)
}
},
},
}
