|
|
@@ -7,7 +7,7 @@
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-tree node-key="id"
|
|
|
- class="filter-tree group-tree"></el-tree>
|
|
|
+ class="cy-group-tree"></el-tree>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane>
|
|
|
@@ -16,15 +16,24 @@
|
|
|
<div class="nav-title">数据组配置</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-tree class="filter-tree group-tree"
|
|
|
- :data="groupDataList"
|
|
|
- :indent="0"
|
|
|
+<!-- :data="groupDataList"-->
|
|
|
+ <el-tree class="cy-group-tree"
|
|
|
+ ref="groupTree"
|
|
|
+ :indent="10"
|
|
|
node-key="id"
|
|
|
+ :load="loadGroupNode"
|
|
|
+ :props="groupProps"
|
|
|
+ lazy
|
|
|
@node-contextmenu="rightNodeEvent"
|
|
|
@node-click="handleNodeClick"
|
|
|
- :highlight-current="false"
|
|
|
- :expand-on-click-node="false"
|
|
|
- :default-expand-all="true"></el-tree>
|
|
|
+ :expand-on-click-node="false">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <svg-icon v-if="data.itemName" icon-class="file-bg"/>
|
|
|
+ <svg-icon v-else-if="data.id == -1" icon-class="groups"/>
|
|
|
+ <svg-icon v-else icon-class="group"/>
|
|
|
+ <span :title='data.groupName || data.itemName' style="margin-left: 2px;">{{ data.groupName || data.itemName }}</span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
@@ -35,6 +44,14 @@
|
|
|
<li @click="createGroupEvent">添加组</li>
|
|
|
</ul>
|
|
|
|
|
|
+ <!-- 数据组列表右键操作 -->
|
|
|
+ <ul v-show="visibleGroupChildMenu"
|
|
|
+ :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
|
|
|
+ class="contextmenu contextmenu-black">
|
|
|
+ <li @click="updateGroup">修改</li>
|
|
|
+ <li @click="delGroup">删除</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
<!-- 添加组配置弹出层 -->
|
|
|
<el-dialog
|
|
|
:title="groupDialogTitle"
|
|
|
@@ -204,9 +221,11 @@
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
+ delDataSourceById,
|
|
|
+ delItemGroupById,
|
|
|
getAllDataSource,
|
|
|
getAllItemGroup,
|
|
|
- getDataSourceItemTree,
|
|
|
+ getDataSourceItemTree, getItemGroupById,
|
|
|
saveOrUpdateDataSource,
|
|
|
saveOrUpdateItemGroup
|
|
|
} from "@/api/datasource";
|
|
|
@@ -224,15 +243,21 @@ export default {
|
|
|
labelPosition: 'top',
|
|
|
// 组配置右键布局显示状态
|
|
|
visibleGroupMenu: false,
|
|
|
+ visibleGroupChildMenu: false,
|
|
|
// 右键布局显示位置
|
|
|
menuLeft: 0,
|
|
|
// 右键布局显示位置
|
|
|
menuTop: 0,
|
|
|
groupDataList: [{
|
|
|
- id: 0,
|
|
|
- label: '数据组列表',
|
|
|
+ id: -1,
|
|
|
+ groupName: '数据组列表',
|
|
|
children: []
|
|
|
}],
|
|
|
+ chooseGroupData: null,
|
|
|
+ chooseGroupParentNode: null,
|
|
|
+ groupProps: {
|
|
|
+ isLeaf: 'leaf'
|
|
|
+ },
|
|
|
// 读取模式
|
|
|
readModeList: [],
|
|
|
// 数据源
|
|
|
@@ -275,11 +300,17 @@ export default {
|
|
|
document.body.removeEventListener('click', this.closeMenu)
|
|
|
}
|
|
|
},
|
|
|
+ visibleGroupChildMenu(value) {
|
|
|
+ if (value) {
|
|
|
+ document.body.addEventListener('click', this.closeMenu)
|
|
|
+ } else {
|
|
|
+ document.body.removeEventListener('click', this.closeMenu)
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
},
|
|
|
created() {
|
|
|
- this.getGroupList()
|
|
|
},
|
|
|
methods: {
|
|
|
/** 数据项搜索过滤 */
|
|
|
@@ -291,16 +322,48 @@ export default {
|
|
|
handleNodeClick(data, node, target) {
|
|
|
this.closeMenu()
|
|
|
},
|
|
|
+ /** 懒加载查询组配置文件 */
|
|
|
+ loadGroupNode(node, resolve) {
|
|
|
+ if (node.level === 0) {
|
|
|
+ return resolve(this.groupDataList)
|
|
|
+ }
|
|
|
+ if (node.data.id == -1) {
|
|
|
+ getAllItemGroup().then(res => {
|
|
|
+ resolve(res.data)
|
|
|
+ }).catch((e) => {
|
|
|
+ resolve([])
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ getItemGroupById(node.data.id).then(res => {
|
|
|
+ if (!res.data) {
|
|
|
+ resolve([])
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let arr = res.data.itemList
|
|
|
+ for (let i in arr) {
|
|
|
+ arr[i].leaf = true
|
|
|
+ }
|
|
|
+ resolve(arr)
|
|
|
+ }).catch((e) => {
|
|
|
+ resolve([])
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 数据组配置右键菜单事件 */
|
|
|
rightNodeEvent(event, data, node, target) {
|
|
|
this.closeMenu()
|
|
|
// 判断是否最后一级菜单
|
|
|
- if ((!data.children || data.children.length == 0) && data.id != 0) {
|
|
|
- return
|
|
|
- }
|
|
|
this.menuLeft = 80
|
|
|
- this.menuTop = 30
|
|
|
- this.visibleGroupMenu = true
|
|
|
+ if (data.id == -1) {
|
|
|
+ this.menuTop = 30
|
|
|
+ this.visibleGroupMenu = true
|
|
|
+ this.chooseGroupParentNode = node
|
|
|
+ } else if (!data.itemName) {
|
|
|
+ this.menuTop = 30 + event.layerY
|
|
|
+ this.visibleGroupChildMenu = true
|
|
|
+ this.chooseGroupData = data
|
|
|
+ this.chooseGroupParentNode = node.parent
|
|
|
+ }
|
|
|
},
|
|
|
/** 添加数据组事件 */
|
|
|
createGroupEvent() {
|
|
|
@@ -331,7 +394,10 @@ export default {
|
|
|
confirmButtonText: '确定',
|
|
|
callback: action => {
|
|
|
this.handleCancel()
|
|
|
+ this.chooseItemDataList = []
|
|
|
+ this.chooseItemDataView = false
|
|
|
// 刷新组列表
|
|
|
+ this.refreshGroupData()
|
|
|
}
|
|
|
})
|
|
|
return
|
|
|
@@ -348,9 +414,59 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+ /** 更新组信息 */
|
|
|
+ updateGroup() {
|
|
|
+ console.log(this.chooseGroupData)
|
|
|
+ },
|
|
|
+ /** 删除组信息 */
|
|
|
+ delGroup() {
|
|
|
+ let _this = this
|
|
|
+ if (!this.chooseGroupData) {
|
|
|
+ _this.$message({
|
|
|
+ message: '删除失败！',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ _this.$confirm('您确定要删除该数据组吗？', '温馨提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消'
|
|
|
+ }).then(() => {
|
|
|
+ const loading = showLoading(_this, '删除中，请稍候···')
|
|
|
+ delItemGroupById(this.chooseGroupData.id).then(res => {
|
|
|
+ loading.close()
|
|
|
+ // 刷新数据组数据
|
|
|
+ _this.refreshGroupData()
|
|
|
+ _this.$message({
|
|
|
+ message: res.data,
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ }).catch((e) => {
|
|
|
+ loading.close()
|
|
|
+ _this.$message({
|
|
|
+ message: '删除失败！',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 刷新数据组列表 */
|
|
|
+ refreshGroupData() {
|
|
|
+ if (this.chooseGroupParentNode) {
|
|
|
+ let node = this.chooseGroupParentNode
|
|
|
+ if (node) {
|
|
|
+ node.loaded = false
|
|
|
+ node.expand()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 选择数据源值改变事件 */
|
|
|
dataSourceChange(val) {
|
|
|
this.groupBasicForm.dataSourceId = val
|
|
|
+ this.chooseItemDataList = []
|
|
|
+ this.chooseItemDataListByTree = []
|
|
|
+ this.chooseItemDataView = false
|
|
|
},
|
|
|
/** 读取模式值改变事件 */
|
|
|
readModeChange(val) {
|
|
|
@@ -374,15 +490,6 @@ export default {
|
|
|
console.error(e)
|
|
|
})
|
|
|
},
|
|
|
- /** 查询组列表 */
|
|
|
- getGroupList() {
|
|
|
- getAllItemGroup().then(res => {
|
|
|
- console.log(res)
|
|
|
- this.groupDataList.children = res.data
|
|
|
- }).catch((e) => {
|
|
|
- console.error(e)
|
|
|
- })
|
|
|
- },
|
|
|
/** 添加数据项 */
|
|
|
addDataItem() {
|
|
|
let id = this.groupBasicForm.dataSourceId
|
|
|
@@ -604,6 +711,7 @@ export default {
|
|
|
/** 关闭右键弹出层 */
|
|
|
closeMenu() {
|
|
|
this.visibleGroupMenu = false
|
|
|
+ this.visibleGroupChildMenu = false
|
|
|
},
|
|
|
/** 弹出层取消事件 */
|
|
|
handleCancel() {
|
|
|
@@ -700,37 +808,27 @@ export default {
|
|
|
padding: 0 25px 30px;
|
|
|
}
|
|
|
|
|
|
-.group-tree {
|
|
|
+.cy-group-tree {
|
|
|
background: #646464;
|
|
|
color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.group-tree .el-tree-node__content .el-icon-caret-right:before {
|
|
|
- content: url("~@/assets/images/groups.png");
|
|
|
-}
|
|
|
|
|
|
-.group-tree .el-tree-node__children .el-tree-node__content .el-icon-caret-right:before {
|
|
|
- content: url("~@/assets/images/group.png");
|
|
|
-}
|
|
|
-
|
|
|
-.group-tree .el-tree-node__content:hover {
|
|
|
- background-color: transparent;
|
|
|
-}
|
|
|
-
|
|
|
-.group-tree .el-tree-node__expand-icon.expanded {
|
|
|
- transform: rotate(0);
|
|
|
-}
|
|
|
+ .el-tree-node:focus > .el-tree-node__content {
|
|
|
+ background-color: #7e7f7f;
|
|
|
+ }
|
|
|
|
|
|
-.group-tree .el-tree-node__expand-icon.is-leaf {
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
+ .el-tree-node__content:hover {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
|
|
|
-.group-tree .el-tree-node:focus > .el-tree-node__content {
|
|
|
- background-color: #7e7f7f;
|
|
|
-}
|
|
|
+ .custom-tree-node {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
-.group-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
|
- background-color: #7e7f7f;
|
|
|
+ .svg-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.cy-form {
|
|
|
@@ -760,12 +858,14 @@ export default {
|
|
|
|
|
|
.cy-transform-data {
|
|
|
width: calc(50% - 60px);
|
|
|
-}
|
|
|
|
|
|
-.custom-tree-node {
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
+ .cy-line {
|
|
|
+ .custom-tree-node {
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.cy-item-tag {
|
|
|
@@ -773,4 +873,4 @@ export default {
|
|
|
margin-top: -7px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
不吃鱼
