<template>
|
<div class="bs-theme-wrap">
|
<div class="tree-box">
|
<div class="ztree-filter-container filter-container">
|
<el-input
|
v-model="queryForm.searchKey"
|
placeholder="请输入数据集分组"
|
clearable
|
class="ztree-input bs-el-input"
|
@keyup.enter.native="reSearch()"
|
@clear="reSearch()"
|
/>
|
<el-button
|
:loading="loading"
|
type="primary"
|
icon="el-icon-search"
|
@click="reSearch()"
|
>
|
查询
|
</el-button>
|
</div>
|
<br class="br">
|
<el-tabs v-model="activeName">
|
<el-tab-pane
|
label="分组"
|
name="group"
|
/>
|
<el-tab-pane
|
label="类型"
|
name="type"
|
/>
|
</el-tabs>
|
<div
|
v-show="activeName == 'group'"
|
class="left"
|
>
|
<div class="ztree ztree-box">
|
<el-scrollbar class="scroll">
|
<el-empty v-show="noData" />
|
<div
|
v-if="!categoryData.length"
|
style="text-align: center;"
|
>
|
<el-button
|
type="text"
|
icon="el-icon-plus"
|
@click="addRootNode"
|
>
|
<span style="color: var(--bs-el-color-primary);">新增根节点</span>
|
</el-button>
|
</div>
|
<ul
|
v-show="!noData"
|
id="datasetTypeTree"
|
class="ztree"
|
/>
|
<div
|
v-loading="loading"
|
class="loading"
|
element-loading-text="正在加载数据"
|
element-loading-spinner="el-icon-loading"
|
/>
|
</el-scrollbar>
|
</div>
|
<div
|
v-show="rightClickForm.visible"
|
class="ztreeNodeMenu"
|
@mouseleave="rightClickForm.visible = false"
|
@mouseenter="rightClickForm.visible = true"
|
>
|
<div class="node-bottom-menu">
|
<div class="triangle" />
|
<ul>
|
<li
|
v-if="!isBoth"
|
@click="menuClick(editTypeConstant.editOrg)"
|
>
|
<span slot="title">编辑</span>
|
</li>
|
<li
|
v-if="!isBoth"
|
@click="menuClick(editTypeConstant.deleteOrg)"
|
>
|
<span slot="title">删除</span>
|
</li>
|
<li @click="menuClick(editTypeConstant.addSiblingOrg)">
|
<span slot="title">新增同级</span>
|
</li>
|
<li
|
v-if="!isBoth"
|
@click="menuClick(editTypeConstant.addChildOrg)"
|
>
|
<span slot="title">新增子级</span>
|
</li>
|
</ul>
|
</div>
|
<div class="node-top-menu">
|
<ul>
|
<li
|
v-if="!isBoth"
|
@click="menuClick(editTypeConstant.addChildOrg)"
|
>
|
<span slot="title">新增子级</span>
|
</li>
|
<li @click="menuClick(editTypeConstant.addSiblingOrg)">
|
<span slot="title">新增同级</span>
|
</li>
|
<li
|
v-if="!isBoth"
|
@click="menuClick(editTypeConstant.deleteOrg)"
|
>
|
<span slot="title">删除</span>
|
</li>
|
<li
|
v-if="!isBoth"
|
@click="menuClick(editTypeConstant.editOrg)"
|
>
|
<span slot="title">编辑</span>
|
</li>
|
</ul>
|
<div class="triangle" />
|
</div>
|
</div>
|
</div>
|
<div
|
v-show="activeName == 'type'"
|
class="left"
|
>
|
<div class="left-tab-box">
|
<ul>
|
<li
|
v-for="(_type,index) in datasetTypeList"
|
:key="index"
|
:class="{ 'tab-style': true, 'tab-active': _type.datasetType == curType }"
|
@click="getTypeData(_type.datasetType)"
|
>
|
<span>{{ _type.name }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<CategroyEditForm
|
v-if="editFormVisible"
|
ref="categroyEditForm"
|
:app-code="appCode"
|
@addOrUpdateNode="addOrUpdateNode"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// eslint-disable-next-line no-unused-vars
|
import $ from 'jquery'
|
import 'ztree/js/jquery.ztree.core'
|
import 'ztree/js/jquery.ztree.exedit'
|
import 'ztree/js/jquery.ztree.exhide'
|
import 'data-room-ui/assets/style/zTree/metroStyle.css'
|
import 'data-room-ui/assets/style/zTree/zTree.scss'
|
import 'data-room-ui/assets/style/zTree/zTreeSelect.scss'
|
import { getCategoryTree, categoryRemove, categoryDele } from 'data-room-ui/js/utils/datasetConfigService'
|
import CategroyEditForm from './CategroyEditForm.vue'
|
export default {
|
name: 'DatasetTypeTreeIndex',
|
components: {
|
CategroyEditForm
|
},
|
props: {
|
datasetTypeList: {
|
type: Array,
|
default: () => (['original', 'custom', 'storedProcedure', 'json', 'script'])
|
},
|
appCode: {
|
type: String,
|
default: ''
|
}
|
},
|
data: function () {
|
return {
|
activeName: 'group',
|
categoryData: [],
|
curType: '-1',
|
noData: false,
|
loading: false,
|
rightTableIsTransition: '',
|
flatData: [],
|
queryForm: {
|
searchKey: ''
|
},
|
ztreeObj: '',
|
nodeData: '',
|
rightClickForm: {
|
visible: false,
|
org: {}
|
},
|
editTypeConstant: {
|
deleteOrg: 'deleteOrg',
|
editOrg: 'editOrg',
|
addChildOrg: 'addChildOrg',
|
addSiblingOrg: 'addSiblingOrg'
|
},
|
editFormVisible: false,
|
ztreeSetting: {
|
view: {
|
dblClickExpand: false,
|
showTitle: false,
|
addHoverDom: (treeId, treeNode) => {
|
const nodeObj = $('#' + treeNode.tId + '_a')
|
nodeObj.css({ 'background-color': '#f6f7fb', cursor: 'pointer' })
|
},
|
removeHoverDom: (treeId, treeNode) => {
|
const nodeObj = $('#' + treeNode.tId + '_a')
|
nodeObj.css({ 'background-color': 'rgba(0,0,0,0)' })
|
},
|
addDiyDom: this.addDiyDom
|
},
|
callback: {
|
onClick: this.getNodeData,
|
onExpand: this.expandNode
|
}
|
},
|
isBoth: false // 是否为全部
|
}
|
},
|
computed: { },
|
mounted () {
|
this.initLazyDatasetTypeTree()
|
},
|
|
methods: {
|
// 新增根节点
|
addRootNode () {
|
this.editFormVisible = true
|
this.$nextTick(() => {
|
this.$refs.categroyEditForm.tableName = 'r_dataset'
|
this.$refs.categroyEditForm.dialogFormVisible = true
|
this.$refs.categroyEditForm.init({ parentId: 0 }, true)
|
this.$refs.categroyEditForm.radio = 0
|
this.$refs.categroyEditForm.title = '新增分组'
|
})
|
},
|
addDiyDom (treeId, treeNode) {
|
if (this.activeName === 'type') return
|
if (treeNode.parentNode && treeNode.parentNode.id !== 2) return
|
const aObj = $('#' + treeNode.tId + '_a')
|
const editStr = "<span id='diyBtn_" + treeNode.id + "' class='treeAddNode'>⋮</span>"
|
aObj.after(editStr)
|
const btn = $('#diyBtn_' + treeNode.id)
|
if (btn) {
|
const _this = this
|
btn.bind('mouseenter', function () {
|
if (treeNode.name === '全部' && treeNode.id === '') {
|
_this.isBoth = true
|
} else {
|
_this.isBoth = false
|
}
|
_this.nodeData = treeNode
|
_this.rightClickForm.org = treeNode
|
_this.rightClickForm.visible = true
|
let hieght = 0
|
const nodeElObj = document.getElementById(treeNode.tId + '_a').getBoundingClientRect()
|
const clientHeight = document.documentElement.clientHeight
|
const clientY = nodeElObj.top + 34
|
if (clientHeight - clientY < 200) {
|
hieght = clientY - 200
|
document.querySelector('.node-bottom-menu').style.display = 'none'
|
const menu = document.querySelector('.node-top-menu')
|
/* 菜单定位基于鼠标点击位置 */
|
menu.style.display = ''
|
menu.style.left = nodeElObj.right - 92 + 'px'
|
menu.style.top = hieght + 20 + 25 + 'px'
|
menu.style.position = 'fixed' // 为新创建的DIV指定绝对定位
|
menu.style.width = 110 + 'px'
|
} else {
|
hieght = clientY
|
document.querySelector('.node-top-menu').style.display = 'none'
|
const menu = document.querySelector('.node-bottom-menu')
|
/* 菜单定位基于鼠标点击位置 */
|
menu.style.display = ''
|
menu.style.left = nodeElObj.right - 92 + 'px'
|
menu.style.top = hieght - 8 + 'px'
|
menu.style.position = 'fixed' // 为新创建的DIV指定绝对定位
|
menu.style.width = 110 + 'px'
|
}
|
})
|
btn.bind('mouseout', function () {
|
_this.rightClickForm.visible = false
|
})
|
}
|
},
|
// 初始化树节点
|
initLazyDatasetTypeTree () {
|
this.loading = true
|
getCategoryTree({ type: 'dataset', moduleCode: this.appCode }).then((res) => {
|
this.categoryData = res.map((item) => {
|
return { isParent: item.hasChildren, ...item }
|
})
|
this.categoryData.unshift({ name: '全部', id: '', parentId: '0' })
|
this.ztreeObj = $.fn.zTree.init($('#datasetTypeTree'), this.ztreeSetting, this.categoryData)
|
this.$emit('reCategory')
|
}).then((e) => {
|
this.loading = false
|
}).catch((e) => {
|
this.loading = false
|
})
|
},
|
// 节点展开
|
expandNode (event, tree, nodeData) {
|
if (nodeData.children) {
|
nodeData.children.forEach((item) => {
|
this.ztreeObj.showNode(item)
|
})
|
} else {
|
this.loading = true
|
}
|
},
|
// 未知
|
expandedNodes () {
|
if (this.rightTableIsTransition === 1) {
|
this.$emit('expandedNodes', 1)
|
} else {
|
this.$emit('expandedNodes', this.flatTreeData(this.ztreeObj.getNodes()).length)
|
}
|
this.flatData = []
|
},
|
// filter方法
|
filterNode (node) {
|
const selfMatch = node.name.includes(this.queryForm.searchKey)
|
const childMatch = false
|
// 过滤非匹配的值
|
return !(this.recursion(node, childMatch) || selfMatch)
|
},
|
// 子节点匹配 - 递归
|
recursion (node, childMatch) {
|
if (node.isParent) {
|
for (let i = 0; i < node.children.length; i++) {
|
if (node.children[i].name.includes(this.queryForm.searchKey)) {
|
childMatch = true
|
return childMatch
|
} else {
|
childMatch = this.recursion(node.children[i], childMatch)
|
}
|
}
|
}
|
return childMatch
|
},
|
// 查询
|
reSearch () {
|
this.activeName = 'group'
|
if (this.queryForm.searchKey) {
|
const treeObj = $.fn.zTree.getZTreeObj('datasetTypeTree')
|
const nodes = treeObj.getNodesByParam('isHidden', true)
|
treeObj.showNodes(nodes)
|
const hiddenNodes = treeObj.getNodesByFilter(this.filterNode)
|
treeObj.hideNodes(hiddenNodes)
|
treeObj.expandAll(true)
|
} else {
|
this.initLazyDatasetTypeTree()
|
}
|
},
|
// 节点点击事件
|
getNodeData (treeId, treeNode, nodeData, clickFlag) {
|
this.curType = '-1'
|
this.$emit('nodeClick', nodeData, this.activeName)
|
},
|
// 类型点击事件
|
getTypeData (datasetType) {
|
this.curType = datasetType
|
this.ztreeObj.cancelSelectedNode()
|
this.$emit('nodeClick', datasetType, this.activeName)
|
},
|
// 更多事件
|
menuClick (editType) {
|
// 删除节点
|
if (editType === this.editTypeConstant.deleteOrg) {
|
categoryDele(this.rightClickForm.org.id).then((res) => {
|
if (res == 0) {
|
this.deleteOrg(this.rightClickForm.org)
|
} else {
|
this.$message.error('当前节点下存在已定义数据集，无法删除')
|
}
|
})
|
return
|
}
|
// 编辑节点
|
this.editFormVisible = true
|
if (editType === this.editTypeConstant.editOrg) {
|
this.$nextTick(() => {
|
this.$refs.categroyEditForm.type = 'dataset'
|
this.$refs.categroyEditForm.dialogFormVisible = true
|
this.$refs.categroyEditForm.init(this.rightClickForm.org, false)
|
this.$refs.categroyEditForm.title = '编辑分组'
|
})
|
return
|
}
|
// 新增同级节点
|
if (editType === this.editTypeConstant.addSiblingOrg) {
|
this.$nextTick(() => {
|
this.$refs.categroyEditForm.type = 'dataset'
|
this.$refs.categroyEditForm.dialogFormVisible = true
|
this.$refs.categroyEditForm.init(this.rightClickForm.org, true, editType)
|
this.$refs.categroyEditForm.radio = 0
|
this.$refs.categroyEditForm.title = '新增分组'
|
})
|
return
|
}
|
// 新增子节点
|
if (editType === this.editTypeConstant.addChildOrg) {
|
this.$nextTick(() => {
|
this.$refs.categroyEditForm.type = 'dataset'
|
this.$refs.categroyEditForm.dialogFormVisible = true
|
this.$refs.categroyEditForm.init(this.rightClickForm.org, true, editType)
|
this.$refs.categroyEditForm.radio = 1
|
this.$refs.categroyEditForm.title = '新增分组'
|
})
|
}
|
},
|
flatTreeData (data) {
|
data.forEach(item => {
|
this.flatData.push(item)
|
if (item.children) {
|
this.flatTreeData(item.children)
|
}
|
})
|
return this.flatData
|
},
|
// 删除分类
|
deleteOrg (org) {
|
this.$confirm('删除数据集分组，确定进行删除操作?', '提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'bs-el-message-box'
|
}
|
).then(() => {
|
if (!org.id) {
|
return
|
}
|
categoryRemove(org.id).then((data) => {
|
this.$message.success('操作成功')
|
// this.ztreeObj.removeNode(org)
|
// this.initLazyOrgTree()
|
const removeNode = this.ztreeObj.getNodeByParam('id', org.id, null)
|
this.ztreeObj.removeNode(removeNode)
|
this.redrawTree()
|
// 刷新右侧表格
|
this.$emit('refreshData', org)
|
})
|
})
|
},
|
// 刷新右侧表格
|
refreshData (cbObj) {
|
// 刷新右侧表格
|
this.$emit('refreshData', cbObj)
|
},
|
// 新增或修改节点
|
addOrUpdateNode (params, isAdd) {
|
if (!isAdd) {
|
const editNode = this.ztreeObj.getNodeByParam('id', params.id, null)
|
editNode.name = params.name
|
this.ztreeObj.editName(editNode)
|
this.ztreeObj.setEditable(false)
|
} else {
|
// 新增
|
const parentNode = params.parentId === 0 ? null : this.ztreeObj.getNodeByParam('id', params.parentId, null)
|
this.ztreeObj.addNodes(parentNode, params)
|
}
|
this.redrawTree()
|
},
|
// 重新绘制树
|
redrawTree () {
|
// 重新绘制ztree
|
getCategoryTree({ type: 'dataset', moduleCode: this.appCode }).then((res) => {
|
this.categoryData = res.map((item) => {
|
return { isParent: item.hasChildren, ...item }
|
})
|
this.categoryData.unshift({ name: '全部', id: '', parentId: '0' })
|
}).then((e) => {
|
this.loading = false
|
}).catch((e) => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '../../assets/style/bsTheme.scss';
|
|
::v-deep .el-tabs {
|
.el-tabs__header {
|
margin: 0;
|
|
.el-tabs__nav {
|
width: 100%;
|
|
.el-tabs__item {
|
color: var(--bs-el-text);
|
width: 50%;
|
text-align: center;
|
}
|
|
.el-tabs__active-bar {
|
display: none !important;
|
}
|
|
.el-tabs__item.is-active {
|
color: var(--bs-el-color-primary) !important;
|
border-bottom-color: var(--bs-el-border) !important;
|
}
|
}
|
}
|
}
|
::v-deep .ztree {
|
span {
|
color: var(--bs-el-text);
|
}
|
|
li:hover {
|
background: transparent !important;
|
background-color: transparent !important;
|
}
|
|
.curSelectedNode {
|
background: var(--bs-el-background-3) !important;
|
background-color: var(--bs-el-background-3) !important;
|
}
|
|
a:hover {
|
background: var(--bs-el-background-3) !important;
|
background-color: var(--bs-el-background-3) !important;
|
}
|
}
|
::v-deep .el-tabs__nav-wrap::after {
|
display: none !important;
|
}
|
|
.left-tab-box ul li {
|
font-size: 12px;
|
display: -webkit-box;
|
display: -webkit-flex;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-align: center;
|
-webkit-align-items: center;
|
-ms-flex-align: center;
|
align-items: center;
|
height: 34px;
|
line-height: 40px;
|
cursor: pointer;
|
padding-left: 20px;
|
margin: 2px 0;
|
|
&:hover,
|
&.tab-active {
|
background-color: #f2f7fe;
|
}
|
|
&.tab-active::before {
|
content: "";
|
height: 34px;
|
line-height: 40px;
|
position: absolute;
|
left: 0;
|
border-left: 4px solid var(--bs-el-color-primary);
|
}
|
}
|
|
.ztree-input {
|
margin-right: 10px !important;
|
}
|
|
.ztree-box {
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.el-textarea__inner {
|
color: var(--bs-el-text);
|
background-color: var(--bs-el-background-1) !important;
|
}
|
</style>
|
