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

065cb816 · puhui999 · fd0b7be8 · 065cb816 · 065cb816 · 065cb816
Commit 065cb816 authored Mar 09, 2025 by puhui999
6 changed files
--- a/src/views/iot/rule/databridge/IoTDataBridgeForm.vue
+++ b/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)

--- a/src/views/iot/rule/databridge/config/MqttConfigForm.vue
+++ b/src/views/iot/rule/databridge/config/MqttConfigForm.vue
 <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">

--- a/src/views/iot/rule/databridge/config/RabbitMQConfigForm.vue
+++ b/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="请输入虚拟主机" />

--- a/src/views/iot/rule/databridge/config/RedisStreamMQConfigForm.vue
+++ b/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="请输入主题" />

--- a/src/views/iot/rule/databridge/config/components/KeyValueEditor.vue
+++ b/src/views/iot/rule/databridge/config/components/KeyValueEditor.vue
 <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(() => {
+watch(
-  if (isEmpty(props.modelValue)) {
+  () => props.modelValue,
-    return
+  (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>
--- a/src/views/iot/rule/databridge/index.vue
+++ b/src/views/iot/rule/databridge/index.vue
@@ -116,7 +116,6 @@
          <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"
@@ -124,7 +123,7 @@
        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']"