【功能完善】IoT: 数据桥梁配置

src/api/iot/rule/databridge/index.ts

@@ -79,6 +79,19 @@ export interface RedisStreamMQConfig extends Config {
   topic: string
 }
 
+/** 数据桥梁类型 */
+export const IoTDataBridgeConfigType = {
+  HTTP: 'HTTP',
+  TCP: 'TCP',
+  WEBSOCKET: 'WEBSOCKET',
+  MQTT: 'MQTT',
+  DATABASE: 'DATABASE',
+  REDIS_STREAM: 'REDIS_STREAM',
+  ROCKETMQ: 'ROCKETMQ',
+  RABBITMQ: 'RABBITMQ',
+  KAFKA: 'KAFKA'
+} as const
+
 // IoT 数据桥梁 API
 export const DataBridgeApi = {
   // 查询IoT 数据桥梁分页

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

@@ -33,7 +33,24 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="桥梁配置" prop="config">
-        <!--        <el-input v-model="formData.config" placeholder="请输入桥梁配置" />-->
+        <HttpConfigForm v-if="showConfig(IoTDataBridgeConfigType.HTTP)" v-model="formData.config" />
+        <MqttConfigForm v-if="showConfig(IoTDataBridgeConfigType.MQTT)" v-model="formData.config" />
+        <RocketMQConfigForm
+          v-if="showConfig(IoTDataBridgeConfigType.ROCKETMQ)"
+          v-model="formData.config"
+        />
+        <KafkaMQConfigForm
+          v-if="showConfig(IoTDataBridgeConfigType.KAFKA)"
+          v-model="formData.config"
+        />
+        <RabbitMQConfigForm
+          v-if="showConfig(IoTDataBridgeConfigType.RABBITMQ)"
+          v-model="formData.config"
+        />
+        <RedisStreamMQConfigForm
+          v-if="showConfig(IoTDataBridgeConfigType.REDIS_STREAM)"
+          v-model="formData.config"
+        />
       </el-form-item>
       <el-form-item label="桥梁描述" prop="description">
         <el-input v-model="formData.description" height="150px" type="textarea" />
@@ -57,8 +74,16 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { DataBridgeApi, DataBridgeVO } from '@/api/iot/rule/databridge'
+import { DICT_TYPE, getDictLabel, getIntDictOptions } from '@/utils/dict'
+import { DataBridgeApi, DataBridgeVO, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
+import {
+  HttpConfigForm,
+  KafkaMQConfigForm,
+  MqttConfigForm,
+  RabbitMQConfigForm,
+  RedisStreamMQConfigForm,
+  RocketMQConfigForm
+} from './config'
 
 /** IoT 数据桥梁 表单 */
 defineOptions({ name: 'IoTDataBridgeForm' })
@@ -73,16 +98,22 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref<DataBridgeVO>({
   status: 0,
   direction: 1,
-  type: 1
+  type: 1,
+  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' }]
+  type: [{ required: true, message: '桥梁类型不能为空', trigger: 'change' }],
+  'config.bootstrapServers': [{ required: true, message: '服务地址不能为空', trigger: 'blur' }],
+  'config.topic': [{ required: true, 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)
+  return label && label === val
+}) // 显示对应的 Config 配置项
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -130,7 +161,8 @@ const resetForm = () => {
   formData.value = {
     status: 0,
     direction: 1,
-    type: 1
+    type: 1,
+    config: {} as any
   }
   formRef.value?.resetFields()
 }

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

+<template>
+  <el-form-item label="请求地址" prop="config.url">
+    <el-input v-model="config.url" placeholder="请输入请求地址" />
+  </el-form-item>
+  <el-form-item label="请求方法" prop="config.method">
+    <el-select v-model="config.method" placeholder="请选择请求方法">
+      <el-option label="GET" value="GET" />
+      <el-option label="POST" value="POST" />
+      <el-option label="PUT" value="PUT" />
+      <el-option label="DELETE" value="DELETE" />
+    </el-select>
+  </el-form-item>
+  <el-form-item label="请求头" prop="config.headers">
+    <el-input
+      v-model="headersStr"
+      placeholder="请输入请求头，格式为 JSON"
+      type="textarea"
+      @input="handleHeadersChange"
+    />
+  </el-form-item>
+  <el-form-item label="请求参数" prop="config.query">
+    <el-input
+      v-model="queryStr"
+      placeholder="请输入请求参数，格式为 JSON"
+      type="textarea"
+      @input="handleQueryChange"
+    />
+  </el-form-item>
+  <el-form-item label="请求体" prop="config.body">
+    <el-input v-model="config.body" placeholder="请输入请求体" type="textarea" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { HttpConfig, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({ name: 'HttpConfigForm' })
+
+const props = defineProps<{
+  modelValue: HttpConfig
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<HttpConfig>
+
+const headersStr = ref('{}')
+const queryStr = ref('{}')
+
+/** 组件初始化 */
+onMounted(() => {
+  config.value = {
+    type: IoTDataBridgeConfigType.HTTP,
+    url: '',
+    method: 'GET',
+    headers: {},
+    query: {},
+    body: ''
+  }
+
+  // 初始化字符串形式
+  headersStr.value = JSON.stringify(config.value.headers || {}, null, 2)
+  queryStr.value = JSON.stringify(config.value.query || {}, null, 2)
+})
+
+// 处理headers输入变化
+const handleHeadersChange = (val: string) => {
+  try {
+    config.value.headers = JSON.parse(val)
+  } catch (e) {
+    // 解析失败，保留原始字符串
+  }
+}
+
+// 处理query输入变化
+const handleQueryChange = (val: string) => {
+  try {
+    config.value.query = JSON.parse(val)
+  } catch (e) {
+    // 解析失败，保留原始字符串
+  }
+}
+</script>

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

+<template>
+  <el-form-item label="服务地址" prop="config.bootstrapServers">
+    <el-input v-model="config.bootstrapServers" placeholder="请输入服务地址，如：localhost:9092" />
+  </el-form-item>
+  <el-form-item label="用户名" prop="config.username">
+    <el-input v-model="config.username" 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="启用SSL" prop="config.ssl">
+    <el-switch v-model="config.ssl" />
+  </el-form-item>
+  <el-form-item label="主题" prop="config.topic">
+    <el-input v-model="config.topic" placeholder="请输入主题" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { IoTDataBridgeConfigType, KafkaMQConfig } from '@/api/iot/rule/databridge'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({ name: 'KafkaMQConfigForm' })
+
+const props = defineProps<{
+  modelValue: KafkaMQConfig
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<KafkaMQConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  config.value = {
+    type: IoTDataBridgeConfigType.KAFKA,
+    bootstrapServers: '',
+    username: '',
+    password: '',
+    ssl: false,
+    topic: ''
+  }
+})
+</script>

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

+<template>
+  <el-form-item label="MQTT服务地址" prop="config.url">
+    <el-input v-model="config.url" placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883" />
+  </el-form-item>
+  <el-form-item label="用户名" prop="config.username">
+    <el-input v-model="config.username" 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="客户端ID" prop="config.clientId">
+    <el-input v-model="config.clientId" placeholder="请输入客户端ID" />
+  </el-form-item>
+  <el-form-item label="主题" prop="config.topic">
+    <el-input v-model="config.topic" placeholder="请输入主题" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { IoTDataBridgeConfigType, MqttConfig } from '@/api/iot/rule/databridge'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({ name: 'MqttConfigForm' })
+
+const props = defineProps<{
+  modelValue: MqttConfig
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<MqttConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  config.value = {
+    type: IoTDataBridgeConfigType.MQTT,
+    url: '',
+    username: '',
+    password: '',
+    clientId: '',
+    topic: ''
+  }
+})
+</script>

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

+<template>
+  <el-form-item label="主机地址" prop="config.host">
+    <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-form-item>
+  <el-form-item label="虚拟主机" prop="config.virtualHost">
+    <el-input v-model="config.virtualHost" placeholder="请输入虚拟主机" />
+  </el-form-item>
+  <el-form-item label="用户名" prop="config.username">
+    <el-input v-model="config.username" 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.exchange">
+    <el-input v-model="config.exchange" placeholder="请输入交换机" />
+  </el-form-item>
+  <el-form-item label="路由键" prop="config.routingKey">
+    <el-input v-model="config.routingKey" placeholder="请输入路由键" />
+  </el-form-item>
+  <el-form-item label="队列" prop="config.queue">
+    <el-input v-model="config.queue" placeholder="请输入队列" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { IoTDataBridgeConfigType, RabbitMQConfig } from '@/api/iot/rule/databridge'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({ name: 'RabbitMQConfigForm' })
+
+const props = defineProps<{
+  modelValue: RabbitMQConfig
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<RabbitMQConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  config.value = {
+    type: IoTDataBridgeConfigType.RABBITMQ,
+    host: '',
+    port: 5672,
+    virtualHost: '/',
+    username: '',
+    password: '',
+    exchange: '',
+    routingKey: '',
+    queue: ''
+  }
+})
+</script>

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

+<template>
+  <el-form-item label="主机地址" prop="config.host">
+    <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-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-form-item>
+  <el-form-item label="主题" prop="config.topic">
+    <el-input v-model="config.topic" placeholder="请输入主题" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { IoTDataBridgeConfigType, RedisStreamMQConfig } from '@/api/iot/rule/databridge'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({ name: 'RedisStreamMQConfigForm' })
+
+const props = defineProps<{
+  modelValue: RedisStreamMQConfig
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<RedisStreamMQConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  config.value = {
+    type: IoTDataBridgeConfigType.REDIS_STREAM,
+    host: '',
+    port: 6379,
+    password: '',
+    database: 0,
+    topic: ''
+  }
+})
+</script>

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

+<template>
+  <el-form-item label="命名服务地址" prop="config.nameServer">
+    <el-input v-model="config.nameServer" placeholder="请输入命名服务地址，如：127.0.0.1:9876" />
+  </el-form-item>
+  <el-form-item label="Access Key" prop="config.accessKey">
+    <el-input v-model="config.accessKey" placeholder="请输入Access Key" />
+  </el-form-item>
+  <el-form-item label="Secret Key" prop="config.secretKey">
+    <el-input
+      v-model="config.secretKey"
+      placeholder="请输入Secret Key"
+      show-password
+      type="password"
+    />
+  </el-form-item>
+  <el-form-item label="消费组" prop="config.group">
+    <el-input v-model="config.group" placeholder="请输入消费组" />
+  </el-form-item>
+  <el-form-item label="主题" prop="config.topic">
+    <el-input v-model="config.topic" placeholder="请输入主题" />
+  </el-form-item>
+  <el-form-item label="标签" prop="config.tags">
+    <el-input v-model="config.tags" placeholder="请输入标签" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { IoTDataBridgeConfigType, RocketMQConfig } from '@/api/iot/rule/databridge'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({ name: 'RocketMQConfigForm' })
+
+const props = defineProps<{
+  modelValue: RocketMQConfig
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<RocketMQConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  config.value = {
+    type: IoTDataBridgeConfigType.ROCKETMQ,
+    nameServer: '',
+    accessKey: '',
+    secretKey: '',
+    group: '',
+    topic: '',
+    tags: ''
+  }
+})
+</script>

src/views/iot/rule/databridge/config/index.ts

+import HttpConfigForm from './HttpConfigForm.vue'
+import MqttConfigForm from './MqttConfigForm.vue'
+import RocketMQConfigForm from './RocketMQConfigForm.vue'
+import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
+import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
+import RedisStreamMQConfigForm from './RedisStreamMQConfigForm.vue'
+
+export {
+  HttpConfigForm,
+  MqttConfigForm,
+  RocketMQConfigForm,
+  KafkaMQConfigForm,
+  RabbitMQConfigForm,
+  RedisStreamMQConfigForm
+}