mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-04 13:10:26 +08:00
72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
// 监控节点分组选择
|
|
Vue.component("report-node-groups-selector", {
|
|
props: ["v-group-ids"],
|
|
mounted: function () {
|
|
let that = this
|
|
Tea.action("/clusters/monitors/groups/options")
|
|
.post()
|
|
.success(function (resp) {
|
|
that.groups = resp.data.groups.map(function (group) {
|
|
group.isChecked = that.groupIds.$contains(group.id)
|
|
return group
|
|
})
|
|
that.isLoaded = true
|
|
})
|
|
},
|
|
data: function () {
|
|
var groupIds = this.vGroupIds
|
|
if (groupIds == null) {
|
|
groupIds = []
|
|
}
|
|
|
|
return {
|
|
groups: [],
|
|
groupIds: groupIds,
|
|
isLoaded: false,
|
|
allGroups: groupIds.length == 0
|
|
}
|
|
},
|
|
methods: {
|
|
check: function (group) {
|
|
group.isChecked = !group.isChecked
|
|
this.groupIds = []
|
|
let that = this
|
|
this.groups.forEach(function (v) {
|
|
if (v.isChecked) {
|
|
that.groupIds.push(v.id)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
allGroups: function (b) {
|
|
if (b) {
|
|
this.groupIds = []
|
|
this.groups.forEach(function (v) {
|
|
v.isChecked = false
|
|
})
|
|
}
|
|
}
|
|
},
|
|
template: `<div>
|
|
<input type="hidden" name="reportNodeGroupIdsJSON" :value="JSON.stringify(groupIds)"/>
|
|
<span class="disabled" v-if="isLoaded && groups.length == 0">还没有分组。</span>
|
|
<div v-if="groups.length > 0">
|
|
<div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" v-model="allGroups" id="all-group"/>
|
|
<label for="all-group">全部分组</label>
|
|
</div>
|
|
<div class="ui divider" v-if="!allGroups"></div>
|
|
</div>
|
|
<div v-show="!allGroups">
|
|
<div v-for="group in groups" :key="group.id" style="float: left; width: 7.6em; margin-bottom: 0.5em">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" v-model="group.isChecked" value="1" :id="'report-node-group-' + group.id" @click.prevent="check(group)"/>
|
|
<label :for="'report-node-group-' + group.id">{{group.name}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
}) |