cmdb/cmdb-ui/src/components/MonitorNodeSetting/index.vue

169 lines
4.5 KiB
Python

<template>
<div>
<a-form-item v-for="(node, index) in nodes" :key="node.id">
<a-row :gutter="24">
<a-col :span="6" :offset="1">
<a-form-item :label="index ? '' : 'ip地址'">
<a-input
allowClear
size="small"
v-decorator="[
`node_ip_${node.id}`,
{
rules: [
{ required: false, message: '请输入ip地址' },
{
pattern:
'^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$',
message: 'ip地址格式错误',
trigger: 'blur',
},
],
},
]"
placeholder="请输入ip地址"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item :label="index ? '' : 'community'" colon>
<a-input
allowClear
size="small"
v-decorator="[
`node_community_${node.id}`,
{
rules: [{ required: false, message: '请输入community' }],
},
]"
placeholder="请输入community"
/>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item :label="index ? '' : '版本'" colon>
<a-select
size="small"
v-decorator="[
`node_version_${node.id}`,
{
rules: [{ required: false, message: '请输入版本' }],
},
]"
placeholder="请选择版本"
>
<a-select-option value="1">
v1
</a-select-option>
<a-select-option value="2c">
v2c
</a-select-option>
<a-select-option value="3">
v3
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item :label="index ? '' : ' '" :colon="false">
<a @click="() => removeNode(node.id, 1)" :style="{ color: 'red' }">
<a-icon type="delete" />
</a>
</a-form-item>
</a-col>
</a-row>
</a-form-item>
<a-form-item style="text-align: center">
<a-button type="dashed" style="width: 30%;" @click="addNode">
<a-icon type="plus" />
添加节点
</a-button>
</a-form-item>
</div>
</template>
<script>
import _ from 'lodash'
import { v4 as uuidv4 } from 'uuid'
export default {
name: 'MonitorNodeSetting',
props: {
initNodes: {
type: Array,
default: () => [],
},
form: {
type: Object,
default: null,
},
},
data() {
return {
nodes: [],
}
},
methods: {
initNodesFunc() {
this.nodes = _.cloneDeep(this.initNodes)
},
addNode() {
const newNode = {
id: uuidv4(),
ip: '',
community: '',
version: '',
}
this.nodes.push(newNode)
this.$nextTick(() => {
this.form.setFieldsValue({
[`node_ip_${newNode.id}`]: newNode.ip,
[`node_community_${newNode.id}`]: newNode.community,
[`node_version_${newNode.id}`]: newNode.version,
})
})
},
removeNode(removeId, minLength) {
if (this.nodes.length <= minLength) {
this.$message.error('不可再删除!')
return
}
const _idx = this.nodes.findIndex((item) => item.id === removeId)
if (_idx > -1) {
this.nodes.splice(_idx, 1)
}
},
getInfoValuesFromForm(values) {
return this.nodes.map((item) => {
return {
id: item.id,
ip: values[`node_ip_${item.id}`],
community: values[`node_community_${item.id}`],
version: values[`node_version_${item.id}`],
}
})
},
setNodeField() {
if (this.nodes && this.nodes.length) {
this.nodes.forEach((item) => {
this.form.setFieldsValue({
[`node_ip_${item.id}`]: item.ip,
[`node_community_${item.id}`]: item.community,
[`node_version_${item.id}`]: item.version,
})
})
}
},
getNodeValue() {
const values = this.form.getFieldsValue()
return this.getInfoValuesFromForm(values)
},
},
}
</script>
<style></style>