<template>
|
<div ref="treeContainer" id="tree-container-org" class="clearfix pr" style="padding: 0px 8px;">
|
<!-- <div v-if="isSearch">
|
<div class="py-2 flex-row-between">
|
<b-input
|
autocomplete="off"
|
v-model="searchValue"
|
placeholder="输入机构名称"
|
@change.native="handleSearch"
|
class="mr10"
|
/>
|
<b-button variant="primary" class="pl-4 pr-4" @click="handleSearch">搜索</b-button>
|
<h4 class="py-2 mb-0 font-weight-bold">设备列表</h4>
|
<b-button variant="link" class="tree-btn" @click="$emit('toggleOpen')">
|
<i class="ion ion-md-swap f20"></i>
|
</b-button>
|
</div>
|
<hr class="m-0 mb-2 bg-grid" />
|
</div>-->
|
<!-- style="background: rgb(243, 243, 243) bg-white" -->
|
<div class="flex-row-between">
|
<!-- <div class="d-flex pt-2">
|
<h5
|
class="py-2 mb-0 font-weight-bold cursor-pointer"
|
title="点击清除平台设备选择"
|
@click="clearTree"
|
>平台设备</h5>
|
<div class="py-2 add-tool" v-if="!isLock && editId==='orgAdd'">
|
<span class="text-primary pl-2" @click="addNdoe">
|
<i class="ion ion-ios-add-circle-outline f18" title="添加组织"></i>
|
</span>
|
<span class="text-primary pl-1" @click="edit"><i class="far fa-edit f18"></i></span>
|
<span class="text-primary pl-1" @click="addDevice({ id: '0' })">
|
<i class="fas fa-server f18" title="添加设备"></i>
|
</span>
|
</div>
|
</div>-->
|
<!-- <b-button variant="link" class="tree-btn" @click="$emit('toggleOpen')">
|
<i class="ion ion-md-swap f20"></i>
|
</b-button>-->
|
<div class="pt-2" v-show="false">
|
<fTemplate authority="device:orgTree:edit">
|
<circle-lock :isLock="isLock" @change="isLock=!isLock" class="ml-2 mr-2"/>
|
</fTemplate>
|
<!-- <b-button variant="link" class="tree-btn" @click="$emit('toggleOpen')">
|
<i class="ion ion-md-swap f20"></i>
|
</b-button>-->
|
</div>
|
</div>
|
<div class="overflow-auto pb-2 px-2 pr animation" :style="isOpen?'height:38vh':'height:76vh'">
|
<Tree
|
:data="data"
|
:props="option"
|
:default-expand-all="isOpenAll"
|
@node-click="handleNodeClick"
|
highlight-current
|
id="tree"
|
ref="tree2"
|
node-key="id"
|
class="float-left"
|
style="width: 100%"
|
:expand-on-click-node="false"
|
:render-content="renderContent"
|
/>
|
|
<!-- <circle-lock @change="setLockState" class="ml-2 mr-2 org-tree-lock"/> -->
|
</div>
|
<!-- tree-Model start -->
|
<div class="tree-Model-bg" v-show="showAdd" @click="resetForm"></div>
|
<div class="tree-Model" v-show="showAdd" :style="{'left':clientX+'px','top':clientY+'px'}">
|
<el-card :body-style="{padding: '10px' }">
|
<div class="pt-2"></div>
|
<el-form
|
:model="addTreeForm"
|
size="mini"
|
:rules="rules"
|
ref="addTreeForm"
|
label-width="70px"
|
>
|
<el-form-item label="名称：" prop="name">
|
<el-input v-model="addTreeForm.name"></el-input>
|
</el-form-item>
|
<div class="text-center pb-2">
|
<b-button variant="primary" class="pl20 pr20 mx-2" @click="submitForm">保存</b-button>
|
<b-button class="pl20 pr20 mx-2" @click="resetForm">取消</b-button>
|
</div>
|
</el-form>
|
</el-card>
|
</div>
|
<!-- tree-Model end -->
|
<!-- <add-device-form
|
:item="null"
|
ref="deviceForm"
|
title="新增设备"
|
@submit="deviceSubmit"
|
:isShowFooter="false"
|
/>-->
|
</div>
|
</template>
|
|
<script>
|
import { getContainerRect } from '@/components/common/util.js'
|
import { Tree, Card, Form, FormItem, Input } from 'element-ui'
|
// import addDeviceForm from './addDeviceForm'
|
import circleLock from '@/components/specialButton/circleLock'
|
import { delDevice } from '@/server/home.js'
|
import { delDicOrg, saveDicOrg } from '@/server/common.js'
|
export default {
|
data: () => ({
|
searchValue: '',
|
isLock: true,
|
editId: '',
|
addTreeForm: {
|
name: ''
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入节点名称', trigger: 'blur' },
|
{ min: 2, max: 10, message: '长度在 2 到 10 个字', trigger: 'blur' }
|
]
|
},
|
showAdd: false,
|
clientX: 0,
|
clientY: 0
|
}),
|
props: {
|
data: {
|
type: Array,
|
default: () => [],
|
required: true
|
},
|
option: {
|
type: Object,
|
default: () => ({
|
children: 'child',
|
label: 'name'
|
})
|
},
|
isOpenAll: {
|
default: true,
|
type: Boolean
|
},
|
isSearch: {
|
default: true,
|
type: Boolean
|
},
|
isOpen: {
|
default: false,
|
type: Boolean
|
}
|
},
|
methods: {
|
/* 接口声明 start */
|
async saveDicOrg(json) {
|
const res = await saveDicOrg(json)
|
if (res.success && res.code === 200 && res.data) {
|
/* 成功操作 */
|
this.$emit('save-org-success')
|
/* 初始化 */
|
this.resetForm()
|
this.$toast({
|
type: 'success',
|
message: res && res.msg ? res.msg : '保存组织成功'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '保存组织失败！'
|
})
|
}
|
console.log(res, 'saveDicOrg---res')
|
},
|
async delDevice(id) {
|
const res = await delDevice({ id })
|
if (res.success && res.code === 200) {
|
/* 成功操作 */
|
this.$emit('del-device-success')
|
this.$toast({
|
type: 'success',
|
message: res && res.msg ? res.msg : '删除设备成功'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '删除设备失败！'
|
})
|
}
|
console.log(res, 'delDevice---res')
|
},
|
async delDicOrg(id) {
|
const res = await delDicOrg({ id })
|
if (res.success && res.code === 200) {
|
/* 成功操作 */
|
this.$emit('del-org-success')
|
this.$toast({
|
type: 'success',
|
message: res && res.msg ? res.msg : '删除组织成功'
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '删除组织失败！'
|
})
|
}
|
console.log(res, 'delDicOrg---res')
|
},
|
/* 接口声明 end */
|
handleNodeClick(node) {
|
this.editId = node.id ? node.id : ''
|
this.$emit('currentNode', node)
|
},
|
// * 设置选中状态
|
setCurrentKey(id) {
|
this.$nextTick(() => {
|
this.$refs.tree2.setCurrentKey(id)
|
})
|
},
|
// 清空选中状态
|
removeCurrentNode() {
|
this.$refs.tree2.setCurrentKey(null)
|
},
|
// * 过滤
|
handleSearch() {
|
this.$refs.tree2.filter(this.searchValue)
|
},
|
// * 过滤
|
filterNode(value, data) {
|
if (!value) return true
|
return data.name.indexOf(value) !== -1
|
},
|
// * 获取被选中节点
|
getCurrentNode() {
|
return this.$refs.tree2.getCurrentNode()
|
},
|
setLockState(e) {
|
console.log(e, 'true 锁定')
|
},
|
clearTree() {
|
this.editId = 'orgAdd'
|
this.$emit('currentNode', { id: '0', type: 'MENU', name: '平台设备' })
|
this.removeCurrentNode()
|
},
|
/* 添加节点编辑 */
|
submitForm() {
|
this.$refs.addTreeForm.validate(valid => {
|
if (valid) {
|
// const json = { id, parentId, ...this.addTreeForm }
|
this.saveDicOrg(this.addTreeForm)
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
resetForm() {
|
this.$refs.addTreeForm.resetFields()
|
/* 关闭弹窗 */
|
this.showAdd = false
|
this.addTreeForm = { name: '' }
|
},
|
|
/* 节点操作 */
|
setModelXYShow(event) {
|
if (!this.$refs.treeContainer) {
|
return null
|
}
|
let { clientX = 0, clientY = 0 } = event
|
console.log(clientX, clientY, ' clientX, clientY')
|
const { left = 0, top = 0, width, height } = getContainerRect(
|
this.$refs.treeContainer
|
)
|
console.log(left, top, width, height, 'left, top, width, height')
|
|
if (clientX && clientX - left > 0) {
|
clientX = clientX - left
|
}
|
if (clientY && clientY - top > 0) {
|
clientY = clientY - top
|
}
|
clientX = clientX - 50
|
clientY = clientY + 10
|
console.log(width - clientX, 'width-clientX')
|
if (width - clientX - 200 < 0) {
|
clientX = width - 200
|
}
|
|
this.clientX = clientX
|
this.clientY = clientY
|
this.showAdd = true
|
// console.log(
|
// { clientX, clientY, showAdd: true },
|
// '{ clientX, clientY, showAdd: true }'
|
// )
|
return { clientX, clientY, showAdd: true }
|
},
|
addNdoe(event, data) {
|
if (data) {
|
this.addTreeForm.parentId = data.id ? data.id : ''
|
} else {
|
this.addTreeForm.parentId = '0'
|
}
|
// submitForm({id = '', parentId =''})
|
/* 显示弹窗函数 */
|
this.setModelXYShow(event)
|
},
|
edit(event, data) {
|
if (data && data.type === 'MENU') {
|
this.addTreeForm.name = data.name ? data.name : ''
|
this.addTreeForm.id = data.id ? data.id : ''
|
/* 显示弹窗函数 */
|
this.setModelXYShow(event)
|
} else if (data) {
|
// 设备编辑
|
this.$emit('add-device', { data, type: 'edit' })
|
}
|
},
|
delNdoe({ id, type }) {
|
this.$swal(
|
{
|
title: '确定删除？',
|
text: `你将要删除当前${type === 'MENU' ? '节点' : '设备'}吗！`,
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
// confirmButtonColor: '#d9534f',
|
confirmButtonText: '确定删除！',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
() => {
|
type === 'MENU' ? this.delDicOrg(id) : this.delDevice(id)
|
}
|
)
|
},
|
addDevice(data) {
|
this.$emit('add-device', { data, type: 'add' })
|
},
|
renderContent(h, { node, data, store }) {
|
return (
|
<span class="custom-tree-node">
|
{data.type !== 'MENU' ? (
|
data.isOnMap === 1 ? (
|
<span class="text-primary">{data.name}</span>
|
) : (
|
<span class="text-purple">{data.name}</span>
|
)
|
) : (
|
<span>{data.name}</span>
|
)}
|
{!this.isLock && this.editId === data.id ? (
|
<span class="py-2 add-tool" v-show="!isLock && editId === node.id">
|
{data.type === 'MENU' ? (
|
<span
|
class="text-primary pl-2"
|
on-click={event => {
|
this.addNdoe(event, data)
|
}}
|
>
|
<i
|
class="ion ion-ios-add-circle-outline f16"
|
title="添加机构"
|
/>
|
</span>
|
) : (
|
''
|
)}
|
|
<span
|
class="text-primary pl-1"
|
on-click={event => {
|
this.edit(event, data)
|
}}
|
>
|
<i class="far fa-edit f16" title="编辑" />
|
</span>
|
|
<span
|
class="text-primary pl-1"
|
on-click={event => {
|
this.delNdoe(data)
|
}}
|
>
|
<i class="far fa-trash-alt f16" title="删除" />
|
</span>
|
{data.type === 'MENU' ? (
|
<span
|
class="text-primary pl-1"
|
on-click={event => {
|
this.addDevice(data)
|
}}
|
>
|
<i class="fas fa-server f16" title="添加设备" />
|
</span>
|
) : (
|
''
|
)}
|
</span>
|
) : (
|
''
|
)}
|
</span>
|
)
|
},
|
deviceSubmit(data) {
|
console.log(data, '弹窗提交')
|
}
|
},
|
/* !isLock && */
|
components: {
|
Tree,
|
circleLock,
|
elCard: Card,
|
elForm: Form,
|
elFormItem: FormItem,
|
elInput: Input
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
#tree-container-org .el-tree {
|
overflow: auto;
|
}
|
#tree-container-org .el-tree-node {
|
> .el-tree-node__children {
|
overflow: visible;
|
float: left;
|
min-width: 100%;
|
}
|
&:after {
|
display: block;
|
content: '';
|
clear: both;
|
}
|
}
|
.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;
|
}
|
.org-tree-lock {
|
position: absolute;
|
right: 0px;
|
top: 2px;
|
}
|
.animation {
|
transition: all 0.5s;
|
}
|
.tree-edit-btn {
|
padding: 0px 3px;
|
font-size: 14px;
|
}
|
.add-tool {
|
cursor: pointer;
|
}
|
.tree-Model {
|
position: absolute;
|
top: 50px;
|
left: 50px;
|
width: 200px;
|
}
|
.tree-Model-bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
// width: 100%;
|
// height: 100%;
|
background: rgba(255, 255, 255, 0.6);
|
}
|
</style>
|
