【代码优化】IoT: 数据桥梁

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

@@ -80,17 +80,21 @@ export interface RedisStreamMQConfig extends Config {
 }
 
 /** 数据桥梁类型 */
-// TODO @puhui999：枚举用 number 可以么？
 export const IoTDataBridgeConfigType = {
-  HTTP: '1',
-  TCP: '2',
-  WEBSOCKET: '3',
-  MQTT: '10',
-  DATABASE: '20',
-  REDIS_STREAM: '21',
-  ROCKETMQ: '30',
-  RABBITMQ: '31',
-  KAFKA: '32'
+  HTTP: 1,
+  TCP: 2,
+  WEBSOCKET: 3,
+  MQTT: 10,
+  DATABASE: 20,
+  REDIS_STREAM: 21,
+  ROCKETMQ: 30,
+  RABBITMQ: 31,
+  KAFKA: 32
+} as const
+
+export const IotDataBridgeDirectionEnum = {
+  INPUT: 1, // 输入
+  OUTPUT: 2 // 输出
 } as const
 
 // 数据桥梁 API

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

@@ -46,7 +46,7 @@
         v-if="showConfig(IoTDataBridgeConfigType.RABBITMQ)"
         v-model="formData.config"
       />
-      <RedisStreamMQConfigForm
+      <RedisStreamConfigForm
         v-if="showConfig(IoTDataBridgeConfigType.REDIS_STREAM)"
         v-model="formData.config"
       />
@@ -73,13 +73,19 @@
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getDictObj, getIntDictOptions } from '@/utils/dict'
-import { DataBridgeApi, DataBridgeVO, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
+import { CommonStatusEnum } from '@/utils/constants'
+import {
+  DataBridgeApi,
+  DataBridgeVO,
+  IoTDataBridgeConfigType,
+  IotDataBridgeDirectionEnum
+} from '@/api/iot/rule/databridge'
 import {
   HttpConfigForm,
   KafkaMQConfigForm,
   MqttConfigForm,
   RabbitMQConfigForm,
-  RedisStreamMQConfigForm,
+  RedisStreamConfigForm,
   RocketMQConfigForm
 } from './config'
 
@@ -94,9 +100,9 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref<DataBridgeVO>({
-  status: 0,
-  direction: 1, // TODO @puhui999:枚举类
-  type: 1, // TODO @puhui999:枚举类
+  status: CommonStatusEnum.ENABLE,
+  direction: IotDataBridgeDirectionEnum.INPUT,
+  type: IoTDataBridgeConfigType.HTTP,
   config: {} as any
 })
 const formRules = reactive({
@@ -139,9 +145,9 @@ const formRules = reactive({
 })
 
 const formRef = ref() // 表单 Ref
-const showConfig = computed(() => (val: string) => {
+const showConfig = computed(() => (val: number) => {
   const dict = getDictObj(DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM, formData.value.type)
-  return dict && dict.value + '' === val
+  return dict && dict.value + '' === val + ''
 }) // 显示对应的 Config 配置项
 
 /** 打开弹窗 */
@@ -196,10 +202,9 @@ const handleTypeChange = (val: number) => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    // TODO @puhui999：换成枚举值哈
-    status: 0,
-    direction: 1,
-    type: 1,
+    status: CommonStatusEnum.ENABLE,
+    direction: IotDataBridgeDirectionEnum.INPUT,
+    type: IoTDataBridgeConfigType.HTTP,
     config: {} as any
   }
   formRef.value?.resetFields()

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

@@ -73,7 +73,7 @@ onMounted(() => {
   }
 
   config.value = {
-    type: IoTDataBridgeConfigType.HTTP,
+    type: IoTDataBridgeConfigType.HTTP + '', // 序列化成对应类型时使用
     url: '',
     method: 'POST',
     headers: {},

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

@@ -34,7 +34,7 @@ onMounted(() => {
     return
   }
   config.value = {
-    type: IoTDataBridgeConfigType.KAFKA,
+    type: IoTDataBridgeConfigType.KAFKA + '', // 序列化成对应类型时使用
     bootstrapServers: '',
     username: '',
     password: '',

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

@@ -34,7 +34,7 @@ onMounted(() => {
     return
   }
   config.value = {
-    type: IoTDataBridgeConfigType.MQTT,
+    type: IoTDataBridgeConfigType.MQTT + '', // 序列化成对应类型时使用
     url: '',
     username: '',
     password: '',

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

@@ -49,7 +49,7 @@ onMounted(() => {
     return
   }
   config.value = {
-    type: IoTDataBridgeConfigType.RABBITMQ,
+    type: IoTDataBridgeConfigType.RABBITMQ + '', // 序列化成对应类型时使用
     host: '',
     port: 5672,
     virtualHost: '/',

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

@@ -1,4 +1,3 @@
-<!-- TODO @puhui999：去掉 MQ 关键字哈 -->
 <template>
   <el-form-item label="主机地址" prop="config.host">
     <el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
@@ -47,7 +46,7 @@ onMounted(() => {
     return
   }
   config.value = {
-    type: IoTDataBridgeConfigType.REDIS_STREAM,
+    type: IoTDataBridgeConfigType.REDIS_STREAM + '', // 序列化成对应类型时使用
     host: '',
     port: 6379,
     password: '',

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

@@ -45,7 +45,7 @@ onMounted(() => {
     return
   }
   config.value = {
-    type: IoTDataBridgeConfigType.ROCKETMQ,
+    type: IoTDataBridgeConfigType.ROCKETMQ + '', // 序列化成对应类型时使用
     nameServer: '',
     accessKey: '',
     secretKey: '',

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

@@ -3,7 +3,7 @@ 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'
+import RedisStreamConfigForm from './RedisStreamConfigForm.vue'
 
 export {
   HttpConfigForm,
@@ -11,5 +11,5 @@ export {
   RocketMQConfigForm,
   KafkaMQConfigForm,
   RabbitMQConfigForm,
-  RedisStreamMQConfigForm
+  RedisStreamConfigForm
 }