refactor: reuse snmp oid editor in security form

src/views/ops/pages/dc/security/components/FormDialog.vue

@@ -157,13 +157,11 @@
             </a-form-item>
           </a-col>
         </a-row>
-        <a-form-item field="snmp_oids" label="SNMP OID配置(JSON数组)">
+        <SnmpOidEditor
-          <a-textarea
+          ref="snmpOidEditorRef"
           v-model="formData.snmp_oids"
-            :rows="3"
+          :reset-key="snmpOidEditorResetKey"
-            placeholder='可留空使用默认模板，或填写如 [{"oid":"1.3.6.1.2.1.1.3.0","metric_name":"sys_uptime","metric_unit":"timeticks"}]'
         />
-        </a-form-item>
       </template>
 
       <a-row :gutter="20">
@@ -214,6 +212,7 @@ import type { FormInstance } from '@arco-design/web-vue'
 import { createSecurityService, updateSecurityService, SECURITY_TYPE_OPTIONS, type SecurityServiceFormData } from '@/api/ops/security'
 import { fetchPolicyOptions, type PolicyOptionItem } from '@/api/ops/alertPolicy'
 import { fetchServerList, type ServerItem } from '@/api/ops/server'
+import SnmpOidEditor from '../../components/SnmpOidEditor.vue'
 
 interface Props {
   visible: boolean
@@ -227,6 +226,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 policyOptions = ref<PolicyOptionItem[]>([])
 const serverOptions = ref<ServerItem[]>([])
@@ -336,6 +337,7 @@ watch(
           extra: props.record.extra || '',
           policy_ids: props.record.policy_ids || [],
         })
+        snmpOidEditorResetKey.value += 1
       } else {
         Object.assign(formData, {
           service_identity: '',
@@ -368,6 +370,7 @@ watch(
           extra: '',
           policy_ids: [],
         })
+        snmpOidEditorResetKey.value += 1
       }
     }
   }
@@ -402,15 +405,10 @@ const handleOk = async () => {
         Message.warning('SNMP v2c 模式下请填写 community')
         return
       }
-      if (formData.snmp_oids?.trim()) {
+      if (!snmpOidEditorRef.value?.validate()) {
-        try {
-          JSON.parse(formData.snmp_oids)
-        } catch {
-          Message.warning('SNMP OID配置必须是合法 JSON')
         return
       }
     }
-    }
 
     confirmLoading.value = true