<template>
|
<b-modal
|
size="lg"
|
:title="title"
|
ref="myModalRef"
|
:hide-header="true"
|
:hide-footer="!isShowFooter"
|
>
|
<div >
|
<h4>
|
{{title}}
|
</h4>
|
<org-tree ref="tree"
|
:data="treeData"
|
:isOpenAll="isOpenTree"
|
@currentNode="_currentOrgNode"
|
@save-org-success="getOrgTree"
|
@del-device-success="deviceDel"
|
@del-org-success="orgDel"
|
@add-device="showDeviceModel"
|
/>
|
<div class="text-center pt-4">
|
<b-button variant="primary" class="pl30 pr30 mx-4" size="md" @click="saveOrg">保存</b-button>
|
<b-button size="md" class="pl30 pr30 mx-4" @click="hideModel">取消</b-button>
|
</div>
|
</div>
|
</b-modal>
|
</template>
|
<script>
|
import { Tree } from 'element-ui'
|
import OrgTree from './OrgTree'
|
import { findOrg, updateOrg } from '@/server/home.js'
|
export default {
|
components: {
|
orgTree: OrgTree,
|
Tree
|
},
|
props: {
|
title: {
|
default: '编辑组织机构',
|
type: String
|
},
|
isShowFooter: {
|
default: true,
|
type: Boolean
|
}
|
},
|
data() {
|
return {
|
treeData: [],
|
userInfo: this.$store.getters.basicUserInfo,
|
isOpenTree: true,
|
isOpenColony: false,
|
/** 选择的节点 */
|
selectNode: {},
|
/** 选择的布控信息 */
|
deviceInfo: {}
|
}
|
},
|
methods: {
|
// * 打开modal
|
showModel(data) {
|
this.$refs.myModalRef.show()
|
if (data !== undefined) {
|
this.deviceInfo = data
|
}
|
},
|
_currentOrgNode(node) {
|
if (node !== undefined) {
|
this.selectNode = node
|
}
|
console.log(node, 'node---编辑架构操作')
|
},
|
// * 获取组织树
|
async getOrgTree() {
|
let res = await findOrg({name: ''})
|
if (res) {
|
this.treeData = res
|
}
|
},
|
// 删除布控
|
deviceDel() {
|
// this.getOrgTree()
|
// this.currentOrgItem = { id: '0', type: 'MENU', name: '平台布控' }
|
// 列表或者表格刷新
|
// this.handleSearch()
|
// this.$refs.mapDevice.findAllDevice()
|
},
|
orgDel() {
|
// this.getOrgTree()
|
// this.currentOrgItem = { id: '0', type: 'MENU', name: '平台布控' }
|
// 列表或者表格刷新
|
// this.handleSearch()
|
},
|
// 布控添加弹窗
|
showDeviceModel(data) {
|
console.log(data, '添加弹窗')
|
// this.$refs.deviceForm.showModel(data)
|
// this.$refs.deviceForm.showModel({ data, type: 'add' })
|
// this.$refs.deviceForm.showModel({data,type:'edit'})
|
},
|
// 保存组织机构
|
async saveOrg() {
|
let deviceId = this.deviceInfo.id
|
let orgId = this.selectNode.id
|
let res = await updateOrg({id: deviceId, orgId: orgId})
|
if (res && res.data !== undefined) {
|
console.log(res, '更新布控组织机构')
|
this.$toast({
|
type: res.success ? 'success' : 'error',
|
message: res.msg
|
})
|
}
|
},
|
hideModel() {
|
this.$refs.myModalRef.hide()
|
this.$emit('hiden')
|
}
|
},
|
mounted() {
|
this.getOrgTree()
|
}
|
|
}
|
</script>
|
<style lang="scss" >
|
#tree-container .el-tree {
|
overflow: auto;
|
}
|
|
#tree-container .el-tree-node > .el-tree-node__children {
|
overflow: visible;
|
}
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
// background: rgb(38, 180, 255);
|
// color: #fff;
|
color: #35bde7;
|
position: relative;
|
border-radius: 5px;
|
overflow: hidden;
|
.el-tree-node__expand-icon {
|
color: #35bde7;
|
}
|
.el-tree-node__expand-icon.is-leaf {
|
color: transparent;
|
cursor: default;
|
}
|
}
|
.el-tree-node__content:hover {
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.tree-btn{
|
padding:6px 8px;
|
}
|
|
/* .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:after{
|
content:'';
|
display: block;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
right: 100%;
|
background: rgb(38, 180, 255);
|
}
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label{
|
position: relative;
|
z-index: 9;
|
} */
|
</style>
|
