feat(iot): 前端新增 Database 数据目的配置表单

1. DatabaseConfigForm.vue: 新增 Database 配置表单(JDBC地址/用户名/密码/目标表名)
2. config/index.ts: 导出 DatabaseConfigForm 组件
3. DataSinkForm.vue: 引入 DatabaseConfigForm 条件渲染和校验规则
4. api/sink/index.ts: 添加 DatabaseConfig 接口和联合类型

src/api/iot/rule/data/sink/index.ts

@@ -13,6 +13,7 @@ export interface DataSinkVO {
     | TcpConfig
     | WebSocketConfig
     | MqttConfig
+    | DatabaseConfig
     | RocketMQConfig
     | KafkaMQConfig
     | RabbitMQConfig
@@ -73,6 +74,14 @@ export interface MqttConfig extends Config {
   topic: string
 }
 
+/** Database 配置 */
+export interface DatabaseConfig extends Config {
+  jdbcUrl: string
+  username: string
+  password: string
+  tableName: string
+}
+
 /** RocketMQ 配置 */
 export interface RocketMQConfig extends Config {
   nameServer: string

src/views/iot/rule/data/sink/DataSinkForm.vue

@@ -30,6 +30,10 @@
         v-model="formData.config"
       />
       <MqttConfigForm v-if="IotDataSinkTypeEnum.MQTT === formData.type" v-model="formData.config" />
+      <DatabaseConfigForm
+        v-if="IotDataSinkTypeEnum.DATABASE === formData.type"
+        v-model="formData.config"
+      />
       <RocketMQConfigForm
         v-if="IotDataSinkTypeEnum.ROCKETMQ === formData.type"
         v-model="formData.config"
@@ -69,6 +73,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import { DataSinkApi, DataSinkVO, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
 import {
+  DatabaseConfigForm,
   HttpConfigForm,
   KafkaMQConfigForm,
   MqttConfigForm,
@@ -116,6 +121,9 @@ const formRules = reactive({
   'config.password': [{ required: true, message: '密码不能为空', trigger: 'blur' }],
   'config.clientId': [{ required: true, message: '客户端 ID 不能为空', trigger: 'blur' }],
   'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }],
+  // Database 配置
+  'config.jdbcUrl': [{ required: true, message: 'JDBC 连接地址不能为空', trigger: 'blur' }],
+  'config.tableName': [{ required: true, message: '目标表名不能为空', trigger: 'blur' }],
   // RocketMQ 配置
   'config.nameServer': [{ required: true, message: 'NameServer 地址不能为空', trigger: 'blur' }],
   'config.accessKey': [{ required: true, message: 'AccessKey 不能为空', trigger: 'blur' }],

src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-form-item label="JDBC 地址" prop="config.jdbcUrl">
+    <el-input
+      v-model="config.jdbcUrl"
+      placeholder="请输入JDBC连接地址，如：jdbc:mysql://localhost:3306/iot_data"
+    />
+  </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.tableName">
+    <el-input v-model="config.tableName" placeholder="请输入目标表名，如：iot_device_message_sink" />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { DatabaseConfig, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
+import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'DatabaseConfigForm' })
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<DatabaseConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return
+  }
+  config.value = {
+    type: IotDataSinkTypeEnum.DATABASE + '', // 序列化成对应类型时使用
+    jdbcUrl: '',
+    username: '',
+    password: '',
+    tableName: ''
+  }
+})
+</script>

src/views/iot/rule/data/sink/config/index.ts

@@ -2,6 +2,7 @@ import HttpConfigForm from './HttpConfigForm.vue'
 import TcpConfigForm from './TcpConfigForm.vue'
 import WebSocketConfigForm from './WebSocketConfigForm.vue'
 import MqttConfigForm from './MqttConfigForm.vue'
+import DatabaseConfigForm from './DatabaseConfigForm.vue'
 import RocketMQConfigForm from './RocketMQConfigForm.vue'
 import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
 import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
@@ -12,6 +13,7 @@ export {
   TcpConfigForm,
   WebSocketConfigForm,
   MqttConfigForm,
+  DatabaseConfigForm,
   RocketMQConfigForm,
   KafkaMQConfigForm,
   RabbitMQConfigForm,