feat: add snmp oid table editor ui

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

@@ -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>