【代码重构】IoT：重构插件配置管理，替换 PluginInfo 为 PluginConfig

Author: haohaoMT

src/api/iot/plugin/index.ts

@@ -0,0 +1,51 @@
+import request from '@/config/axios'
+
+// IoT 插件配置 VO
+export interface PluginConfigVO {
+  id: number // 主键ID
+  pluginKey: string // 插件标识
+  name: string // 插件名称
+  description: string // 描述
+  deployType: number // 部署方式
+  fileName: string // 插件包文件名
+  version: string // 插件版本
+  type: number // 插件类型
+  protocol: string // 设备插件协议类型
+  status: number // 状态
+  configSchema: string // 插件配置项描述信息
+  config: string // 插件配置信息
+  script: string // 插件脚本
+}
+
+// IoT 插件配置 API
+export const PluginConfigApi = {
+  // 查询IoT 插件配置分页
+  getPluginConfigPage: async (params: any) => {
+    return await request.get({ url: `/iot/plugin-config/page`, params })
+  },
+
+  // 查询IoT 插件配置详情
+  getPluginConfig: async (id: number) => {
+    return await request.get({ url: `/iot/plugin-config/get?id=` + id })
+  },
+
+  // 新增IoT 插件配置
+  createPluginConfig: async (data: PluginConfigVO) => {
+    return await request.post({ url: `/iot/plugin-config/create`, data })
+  },
+
+  // 修改IoT 插件配置
+  updatePluginConfig: async (data: PluginConfigVO) => {
+    return await request.put({ url: `/iot/plugin-config/update`, data })
+  },
+
+  // 删除IoT 插件配置
+  deletePluginConfig: async (id: number) => {
+    return await request.delete({ url: `/iot/plugin-config/delete?id=` + id })
+  },
+
+  // 修改IoT 插件状态
+  updatePluginStatus: async (data: any) => {
+    return await request.put({ url: `/iot/plugin-config/update-status`, data })
+  }
+}

src/api/iot/plugininfo/index.ts

@@ -29,10 +29,10 @@
 </template>
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
+import { PluginConfigApi, PluginConfigVO } from '@/api/iot/plugin'
 
-/** IoT 插件信息 表单 */
-defineOptions({ name: 'PluginInfoForm' })
+/** IoT 插件配置 表单 */
+defineOptions({ name: 'PluginConfigForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -62,7 +62,7 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await PluginInfoApi.getPluginInfo(id)
+      formData.value = await PluginConfigApi.getPluginConfig(id)
     } finally {
       formLoading.value = false
     }
@@ -78,12 +78,12 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as PluginInfoVO
+    const data = formData.value as unknown as PluginConfigVO
     if (formType.value === 'create') {
-      await PluginInfoApi.createPluginInfo(data)
+      await PluginConfigApi.createPluginConfig(data)
       message.success(t('common.createSuccess'))
     } else {
-      await PluginInfoApi.updatePluginInfo(data)
+      await PluginConfigApi.updatePluginConfig(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -103,4 +103,4 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
-</script>
+</script>

src/views/iot/plugin/PluginInfoForm.vue renamed to src/views/iot/plugin/PluginConfigForm.vue

@@ -36,7 +36,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
 const uploadRef = ref()
 const importUrl =
-  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/iot/plugin-info/upload-file'
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/iot/plugin-config/upload-file'
 const uploadHeaders = ref() // 上传 Header 头
 const fileList = ref([]) // 文件列表
 

src/views/iot/plugin/detail/PluginImportForm.vue

@@ -12,24 +12,25 @@
     <ContentWrap class="mt-10px">
       <el-descriptions :column="2" direction="horizontal">
         <el-descriptions-item label="插件名称">
-          {{ pluginInfo.name }}
+          {{ pluginConfig.name }}
         </el-descriptions-item>
         <el-descriptions-item label="插件标识">
-          {{ pluginInfo.pluginKey }}
+          {{ pluginConfig.pluginKey }}
         </el-descriptions-item>
         <el-descriptions-item label="版本号">
-          {{ pluginInfo.version }}
+          {{ pluginConfig.version }}
         </el-descriptions-item>
         <el-descriptions-item label="状态">
           <el-switch
-            v-model="pluginInfo.status"
+            v-model="pluginConfig.status"
             :active-value="1"
             :inactive-value="0"
+            :disabled="pluginConfig.id <= 0"
             @change="handleStatusChange"
           />
         </el-descriptions-item>
         <el-descriptions-item label="插件描述">
-          {{ pluginInfo.description }}
+          {{ pluginConfig.description }}
         </el-descriptions-item>
       </el-descriptions>
     </ContentWrap>
@@ -45,23 +46,22 @@
   <!-- TODO @haohao：插件实例的前端展示：底部要不要加个分页，展示运行中的实力？默认勾选，只展示 state 为在线的 -->
 
   <!-- 插件导入对话框 -->
-  <!-- TODO @haohao：Number 尽量不用。因为有用户会使用 snowflake、或者 string 的时候，会有问题 -->
   <PluginImportForm
     ref="importFormRef"
-    :id="Number(pluginInfo.id)"
-    @success="getPluginInfo(Number(pluginInfo.id))"
+    :id="pluginConfig.id"
+    @success="getPluginConfig(pluginConfig.id)"
   />
 </template>
 
 <script lang="ts" setup>
-import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
+import { PluginConfigApi, PluginConfigVO } from '@/api/iot/plugin'
 import { useRoute } from 'vue-router'
 import { onMounted, ref } from 'vue'
 import PluginImportForm from './PluginImportForm.vue'
 
 const message = useMessage()
 const route = useRoute()
-const pluginInfo = ref<PluginInfoVO>({
+const pluginConfig = ref<PluginConfigVO>({
   id: 0,
   pluginKey: '',
   name: '',
@@ -76,41 +76,30 @@ const pluginInfo = ref<PluginInfoVO>({
   config: '',
   script: ''
 })
-// TODO @haohao：这里可以改成 pluginInfo.id > 0 去判断，然后 handleStatusChange disable 按钮
-const isInitialLoad = ref(true) // 初始化标志位
-
-onMounted(() => {
-  const id = Number(route.params.id)
-  if (id) {
-    getPluginInfo(id).then(() => {
-      isInitialLoad.value = false // 数据加载完成后，设置标志位为 false
-    })
-  }
-})
 
 /** 获取插件详情 */
-const getPluginInfo = async (id: number) => {
-  pluginInfo.value = await PluginInfoApi.getPluginInfo(id)
+const getPluginConfig = async (id: number) => {
+  pluginConfig.value = await PluginConfigApi.getPluginConfig(id)
 }
 
 /** 处理状态变更 */
 const handleStatusChange = async (status: number) => {
-  if (isInitialLoad.value) {
+  if (pluginConfig.value.id <= 0) {
     return
   }
   try {
     // 修改状态的二次确认
     const text = status === 1 ? '启用' : '停用'
     await message.confirm('确认要"' + text + '"插件吗?')
-    await PluginInfoApi.updatePluginStatus({
-      id: pluginInfo.value.id,
+    await PluginConfigApi.updatePluginStatus({
+      id: pluginConfig.value.id,
       status
     })
     message.success('更新状态成功')
     // 获取详情
-    await getPluginInfo(pluginInfo.value.id)
+    await getPluginConfig(pluginConfig.value.id)
   } catch (error) {
-    pluginInfo.value.status = status === 1 ? 0 : 1
+    pluginConfig.value.status = status === 1 ? 0 : 1
     message.error('更新状态失败')
   }
 }
@@ -120,4 +109,12 @@ const importFormRef = ref()
 const handleImport = () => {
   importFormRef.value.open()
 }
+
+/** 初始化插件详情 */
+onMounted(() => {
+  const id = Number(route.params.id)
+  if (id) {
+    getPluginConfig(id)
+  }
+})
 </script>