【代码优化】IoT: 数据桥梁配置编辑优化

Author: puhui999

src/views/iot/rule/databridge/IoTDataBridgeForm.vue

@@ -5,7 +5,7 @@
       v-loading="formLoading"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
+      label-width="120px"
     >
       <el-form-item label="桥梁名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入桥梁名称" />
@@ -100,13 +100,44 @@ const formData = ref<DataBridgeVO>({
   config: {} as any
 })
 const formRules = reactive({
+  // 通用字段
   name: [{ required: true, message: '桥梁名称不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '桥梁状态不能为空', trigger: 'blur' }],
   direction: [{ required: true, message: '桥梁方向不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '桥梁类型不能为空', trigger: 'change' }],
+  // HTTP 配置
+  'config.url': [{ required: true, message: '请求地址不能为空', trigger: 'blur' }],
+  'config.method': [{ required: true, message: '请求方法不能为空', trigger: 'blur' }],
+  // MQTT 配置
+  'config.username': [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+  'config.password': [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+  'config.clientId': [{ required: true, message: '客户端ID不能为空', trigger: 'blur' }],
+  'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }],
+  // RocketMQ 配置
+  'config.nameServer': [{ required: true, message: 'NameServer 地址不能为空', trigger: 'blur' }],
+  'config.accessKey': [{ required: true, message: 'AccessKey 不能为空', trigger: 'blur' }],
+  'config.secretKey': [{ required: true, message: 'SecretKey 不能为空', trigger: 'blur' }],
+  'config.group': [{ required: true, message: '消费组不能为空', trigger: 'blur' }],
+  // Kafka 配置
   'config.bootstrapServers': [{ required: true, message: '服务地址不能为空', trigger: 'blur' }],
-  'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }]
+  'config.ssl': [{ required: true, message: 'SSL 配置不能为空', trigger: 'change' }],
+  // RabbitMQ 配置
+  'config.host': [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
+  'config.port': [
+    { required: true, message: '端口不能为空', trigger: 'blur' },
+    { type: 'number', min: 1, max: 65535, message: '端口号范围 1-65535', trigger: 'blur' }
+  ],
+  'config.virtualHost': [{ required: true, message: '虚拟主机不能为空', trigger: 'blur' }],
+  'config.exchange': [{ required: true, message: '交换机不能为空', trigger: 'blur' }],
+  'config.routingKey': [{ required: true, message: '路由键不能为空', trigger: 'blur' }],
+  'config.queue': [{ required: true, message: '队列不能为空', trigger: 'blur' }],
+  // Redis Stream 配置
+  'config.database': [
+    { required: true, message: '数据库索引不能为空', trigger: 'blur' },
+    { type: 'number', min: 0, message: '数据库索引必须是非负整数', trigger: 'blur' }
+  ]
 })
+
 const formRef = ref() // 表单 Ref
 const showConfig = computed(() => (val: string) => {
   const label = getDictLabel(DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM, formData.value.type)

src/views/iot/rule/databridge/config/MqttConfigForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item label="MQTT服务地址" prop="config.url">
+  <el-form-item label="服务地址" prop="config.url">
     <el-input v-model="config.url" placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883" />
   </el-form-item>
   <el-form-item label="用户名" prop="config.username">

src/views/iot/rule/databridge/config/RabbitMQConfigForm.vue

@@ -3,7 +3,13 @@
     <el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
   </el-form-item>
   <el-form-item label="端口" prop="config.port">
-    <el-input-number v-model="config.port" :max="65535" :min="1" placeholder="请输入端口" />
+    <el-input-number
+      v-model="config.port"
+      :max="65535"
+      :min="1"
+      controls-position="right"
+      placeholder="请输入端口"
+    />
   </el-form-item>
   <el-form-item label="虚拟主机" prop="config.virtualHost">
     <el-input v-model="config.virtualHost" placeholder="请输入虚拟主机" />

src/views/iot/rule/databridge/config/RedisStreamMQConfigForm.vue

@@ -3,13 +3,25 @@
     <el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
   </el-form-item>
   <el-form-item label="端口" prop="config.port">
-    <el-input-number v-model="config.port" :max="65535" :min="1" placeholder="请输入端口" />
+    <el-input-number
+      v-model="config.port"
+      :max="65535"
+      :min="1"
+      controls-position="right"
+      placeholder="请输入端口"
+    />
   </el-form-item>
   <el-form-item label="密码" prop="config.password">
     <el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
   </el-form-item>
   <el-form-item label="数据库" prop="config.database">
-    <el-input-number v-model="config.database" :max="15" :min="0" placeholder="请输入数据库索引" />
+    <el-input-number
+      v-model="config.database"
+      :max="15"
+      :min="0"
+      controls-position="right"
+      placeholder="请输入数据库索引"
+    />
   </el-form-item>
   <el-form-item label="主题" prop="config.topic">
     <el-input v-model="config.topic" placeholder="请输入主题" />

src/views/iot/rule/databridge/config/components/KeyValueEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-for="(item, index) in items" :key="index" class="flex mb-2">
+  <div v-for="(item, index) in items" :key="index" class="flex mb-2 w-full">
     <el-input v-model="item.key" class="mr-2" placeholder="键" />
     <el-input v-model="item.value" placeholder="值" />
     <el-button class="ml-2" text type="danger" @click="removeItem(index)">
@@ -61,11 +61,14 @@ const updateModelValue = () => {
 
 // 监听项目变化
 watch(items, updateModelValue, { deep: true })
-onMounted(() => {
-  if (isEmpty(props.modelValue)) {
-    return
+watch(
+  () => props.modelValue,
+  (val) => {
+    // 列表有值后以列表中的值为准
+    if (isEmpty(val) || !isEmpty(items.value)) {
+      return
+    }
+    items.value = Object.entries(props.modelValue).map(([key, value]) => ({ key, value }))
   }
-
-  items.value = Object.entries(props.modelValue).map(([key, value]) => ({ key, value }))
-})
+)
 </script>

src/views/iot/rule/databridge/index.vue

@@ -116,15 +116,14 @@
           <dict-tag :type="DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM" :value="scope.row.type" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="桥梁配置" prop="config" />
       <el-table-column
         :formatter="dateFormatter"
         align="center"
         label="创建时间"
         prop="createTime"
         width="180px"
       />
-      <el-table-column align="center" label="操作" min-width="120px">
+      <el-table-column align="center" fixed="right" label="操作" width="120px">
         <template #default="scope">
           <el-button
             v-hasPermi="['iot:data-bridge:update']"