<template>
|
<b-modal
|
:title="title"
|
ref="myModalRef"
|
ok-title="保存"
|
@ok="handleOk"
|
@cancel="clearName"
|
cancel-title="取消"
|
:hide-header="true"
|
footer-class="flex-center"
|
:hide-footer="isShowFooter"
|
>
|
<div>
|
<h4 slot="modal-title" class="modal-title text-center pb-4">{{title}}</h4>
|
<h5 class="title-hander">布控来源</h5>
|
<el-form>
|
<el-form-item class="mb-0" label="平台">
|
<div class="library-list clearfix pt-1">
|
<h6 class="m-0 float-left">
|
<span class="px-1">></span>
|
</h6>
|
<div class="clearfix library-content">
|
<div
|
class="float-left pl-1 alarm-item"
|
v-for="(item,index) in platDbList"
|
:key="index"
|
>
|
<span class="border-left px-1 ml-1 title"></span>
|
<el-checkbox class="alarm-checkBox mb-0" v-model="item.status">{{item.name}}</el-checkbox>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item
|
class="mb-0"
|
:label="data.name"
|
v-for="(data,dataIndex) in cluDbList"
|
:key="dataIndex"
|
>
|
<div class="library-list clearfix pt-1">
|
<h6 class="m-0 float-left">
|
<span class="px-1">></span>
|
</h6>
|
<div class="clearfix library-content">
|
<div class="float-left pl-1 alarm-item" v-for="item in data.child" :key="item.id">
|
<span class="border-left px-1 ml-1 title"></span>
|
<el-checkbox
|
class="alarm-checkBox mb-0"
|
v-model="item.status"
|
:title="`集群节点：${item.nodeName}`"
|
>{{item.name}}</el-checkbox>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</b-modal>
|
</template>
|
|
<script>
|
import { Form, FormItem, Checkbox } from 'element-ui'
|
import { getAddToCtlTree } from '@/server/ctrl.js'
|
export default {
|
props: {
|
title: String,
|
item: Object,
|
isShowFooter: {
|
default: false
|
}
|
},
|
data: () => ({
|
dataJson: null,
|
cluDbList: [],
|
platDbList: [],
|
isShowModel: false
|
}),
|
methods: {
|
async getAddToCtlTree() {
|
const res = await getAddToCtlTree()
|
if (res && res.success && res.data) {
|
this.cluDbList = res.data.cluDbList
|
this.platDbList = res.data.platDbList
|
}
|
},
|
// * 打开modal
|
showModel(data) {
|
this.dataJson = data
|
this.$refs.myModalRef.show()
|
// 初始化
|
this.init()
|
},
|
hideModel() {
|
this.isShowModel = false
|
this.$refs.myModalRef.hide()
|
},
|
// 初始化
|
init() {
|
this.platDbList.map(item => {
|
// item.status = false
|
this.$set(item, 'status', false)
|
return item
|
})
|
this.cluDbList.map(data => {
|
if (data.child) {
|
data.child.map(item => {
|
this.$set(item, 'status', false)
|
return item
|
})
|
}
|
return data
|
})
|
},
|
// * 提交表单
|
handleOk(e) {
|
e.preventDefault()
|
// 获取平台ids
|
const platDbListIds = this.platDbList
|
.filter(item => item.status)
|
.map(item => item.id)
|
let cluDbListIds = []
|
this.cluDbList.map(data => {
|
if (data.child) {
|
const ids = data.child
|
.filter(item => item.status)
|
.map(item => item.id)
|
cluDbListIds = [...cluDbListIds, ...ids]
|
}
|
})
|
if (!platDbListIds.length && !cluDbListIds.length) {
|
this.$toast({
|
type: 'error',
|
message: '您还没有选择布控来源！'
|
})
|
return
|
}
|
this.$emit('submit', {
|
platDbListIds,
|
cluDbListIds,
|
data: this.dataJson
|
})
|
},
|
// * 取消
|
clearName() {}
|
},
|
created() {
|
this.getAddToCtlTree()
|
},
|
components: {
|
elForm: Form,
|
elFormItem: FormItem,
|
elCheckbox: Checkbox
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.modal-title {
|
font-size: 18px;
|
font-weight: 900;
|
}
|
.title-hander {
|
font-size: 16px;
|
font-weight: 600;
|
color: #8c8c8c;
|
}
|
.library-list {
|
h6 {
|
height: 30px;
|
line-height: 30px;
|
width: 20px;
|
cursor: pointer;
|
.title {
|
display: block;
|
width: 60px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
.library-content {
|
margin-left: 55px;
|
}
|
.alarm-item {
|
line-height: 30px;
|
.alarm-icon {
|
display: inline-block;
|
vertical-align: middle;
|
width: 15px;
|
height: 15px;
|
line-height: 15px;
|
background: #d9534f;
|
border-radius: 50%;
|
overflow: hidden;
|
text-align: center;
|
color: #fff;
|
}
|
.alarm-name {
|
display: inline-block;
|
vertical-align: middle;
|
line-height: 15px;
|
padding: 2px 4px;
|
max-width: 100px;
|
cursor: pointer;
|
}
|
.alarm-name.active {
|
background: #35bde7;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
