From ee101984f0852d4c7aa7db267219ce09e0cce282 Mon Sep 17 00:00:00 2001
From: zxr <271055687@qq.com>
Date: Sun, 5 Jul 2026 23:06:18 +0800
Subject: [PATCH] refactor: reuse snmp oid editor in storage form

---
 .../storage/components/StorageFormDialog.vue  | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/views/ops/pages/dc/storage/components/StorageFormDialog.vue b/src/views/ops/pages/dc/storage/components/StorageFormDialog.vue
index 27dc1ed..fc90e7f 100644
--- a/src/views/ops/pages/dc/storage/components/StorageFormDialog.vue
+++ b/src/views/ops/pages/dc/storage/components/StorageFormDialog.vue
@@ -173,13 +173,11 @@
           </a-col>
         </a-row>
 
-        <a-form-item field="snmp_oids" label="SNMP OID配置">
-          <a-textarea
-            v-model="formData.snmp_oids"
-            :rows="3"
-            placeholder='可留空用默认模板，或填写 JSON 数组如 [{"oid":"1.3.6.1.2.1.1.3.0","metric_name":"sys_uptime"}]'
-          />
-        </a-form-item>
+        <SnmpOidEditor
+          ref="snmpOidEditorRef"
+          v-model="formData.snmp_oids"
+          :reset-key="snmpOidEditorResetKey"
+        />
       </template>
 
       <a-form-item field="collect_args" label="采集参数">
@@ -208,6 +206,7 @@ import type { FormInstance } from '@arco-design/web-vue'
 import { createStorage, updateStorage } from '@/api/ops/storage'
 import type { StorageCreateData, StorageItem } from '@/api/ops/storage'
 import { fetchServerList, type ServerItem } from '@/api/ops/server'
+import SnmpOidEditor from '../../components/SnmpOidEditor.vue'
 
 interface Props {
   visible: boolean
@@ -221,6 +220,8 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['update:visible', 'success'])
 
 const formRef = ref<FormInstance>()
+const snmpOidEditorRef = ref<InstanceType<typeof SnmpOidEditor>>()
+const snmpOidEditorResetKey = ref(0)
 const confirmLoading = ref(false)
 const serverOptions = ref<ServerItem[]>([])
 
@@ -297,6 +298,7 @@ watch(
           collect_args: props.record.collect_args || '',
           collect_interval: props.record.collect_interval || 60,
         })
+        snmpOidEditorResetKey.value += 1
       } else {
         Object.assign(formData, {
           name: '',
@@ -328,6 +330,7 @@ watch(
           collect_args: '',
           collect_interval: 60,
         })
+        snmpOidEditorResetKey.value += 1
       }
     }
   }
@@ -362,13 +365,8 @@ const handleOk = async () => {
         Message.warning('SNMP v2c 模式下请填写 community')
         return
       }
-      if (formData.snmp_oids?.trim()) {
-        try {
-          JSON.parse(formData.snmp_oids)
-        } catch {
-          Message.warning('SNMP OID 配置必须是合法 JSON')
-          return
-        }
+      if (!snmpOidEditorRef.value?.validate()) {
+        return
       }
     }