ops/front
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add snmp oid table editor ui

Browse Source
This commit is contained in:
zxr
2026-07-05 18:07:51 +08:00
parent fafdb0d830
commit fc5d653433
1 changed files with 69 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/ops/pages/dc/device-collect/components/FormDialog.vue
View File

@@ -140,10 +140,59 @@
</a-form-item>
</a-col>
</a-row>
<a-form-item field="snmp_oids" label="SNMP OID配置(JSON数组)">
<a-form-item field="snmp_oids">
<template #label>
<div class="snmp-oid-label">
<span>SNMP OID配置</span>
<div class="snmp-oid-actions">
<a-button size="mini" type="text" @click="switchSnmpOidEditMode">
{{ snmpOidEditMode === 'table' ? 'JSON' : '表格' }}
</a-button>
<a-button v-if="snmpOidEditMode === 'table'" size="mini" type="primary" @click="addSnmpOidRow">
添加
</a-button>
</div>
</div>
</template>
<template v-if="snmpOidEditMode === 'table'">
<a-table :data="snmpOidRows" :pagination="false" size="small" class="snmp-oid-table">
<template #columns>
<a-table-column title="OID" data-index="oid" :width="220">
<template #cell="{ record }">
<a-input v-model="record.oid" @input="handleSnmpOidRowChange" />
</template>
</a-table-column>
<a-table-column title="指标名称" data-index="metric_name" :width="150">
<template #cell="{ record }">
<a-input v-model="record.metric_name" @input="handleSnmpOidRowChange" />
</template>
</a-table-column>
<a-table-column title="指标unit" data-index="metric_unit" :width="120">
<template #cell="{ record }">
<a-input v-model="record.metric_unit" @input="handleSnmpOidRowChange" />
</template>
</a-table-column>
<a-table-column title="类型" data-index="type" :width="100">
<template #cell="{ record }">
<a-input v-model="record.type" @input="handleSnmpOidRowChange" />
</template>
</a-table-column>
<a-table-column title="操作" :width="80">
<template #cell="{ rowIndex }">
<a-button size="mini" type="text" status="danger" @click="removeSnmpOidRow(rowIndex)">
删除
</a-button>
</template>
</a-table-column>
</template>
</a-table>
</template>
<a-textarea
v-else
v-model="formData.snmp_oids"
:rows="3"
:rows="5"
placeholder='可留空使用默认模板，或填写如 [{"oid":"1.3.6.1.2.1.1.3.0","metric_name":"sys_uptime"}]'
/>
</a-form-item>
@@ -573,3 +622,21 @@ onMounted(() => {
loadRoomOptions()
})
</script>
<style scoped>
.snmp-oid-label {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.snmp-oid-actions {
display: flex;
gap: 8px;
}
.snmp-oid-table {
width: 100%;
}
</style>