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

229594b1 · 安浩浩 · 5d32cc38 · 229594b1 · 229594b1 · 229594b1
Commit 229594b1 authored Feb 05, 2025 by 安浩浩
Showing with 84 additions and 90 deletions

src/api/iot/plugin/index.ts
+20 -30

src/views/iot/plugin/PluginConfigForm.vue
+7 -7

src/views/iot/plugin/detail/PluginImportForm.vue
+1 -1

src/views/iot/plugin/detail/index.vue
+25 -28

src/views/iot/plugin/index.vue
+31 -24

No files found.
--- a/src/api/iot/plugininfo/index.ts
+++ b/src/api/iot/plugininfo/index.ts
 import request from '@/config/axios'
-// IoT 插件信息 VO
+// IoT 插件配置 VO
-export interface PluginInfoVO {
+export interface PluginConfigVO {
  id: number // 主键ID
  pluginKey: string // 插件标识
  name: string // 插件名称
@@ -17,45 +17,35 @@ export interface PluginInfoVO {
  script: string // 插件脚本
 }
-// IoT 插件信息 API
+// IoT 插件配置 API
-export const PluginInfoApi = {
+export const PluginConfigApi = {
-  // 查询IoT 插件信息分页
+  // 查询IoT 插件配置分页
-  getPluginInfoPage: async (params: any) => {
+  getPluginConfigPage: async (params: any) => {
-    return await request.get({ url: `/iot/plugin-info/page`, params })
+    return await request.get({ url: `/iot/plugin-config/page`, params })
  },
-  // 查询IoT 插件信息详情
+  // 查询IoT 插件配置详情
-  getPluginInfo: async (id: number) => {
+  getPluginConfig: async (id: number) => {
-    return await request.get({ url: `/iot/plugin-info/get?id=` + id })
+    return await request.get({ url: `/iot/plugin-config/get?id=` + id })
  },
-  // 新增IoT 插件信息
+  // 新增IoT 插件配置
-  createPluginInfo: async (data: PluginInfoVO) => {
+  createPluginConfig: async (data: PluginConfigVO) => {
-    return await request.post({ url: `/iot/plugin-info/create`, data })
+    return await request.post({ url: `/iot/plugin-config/create`, data })
  },
-  // 修改IoT 插件信息
+  // 修改IoT 插件配置
-  updatePluginInfo: async (data: PluginInfoVO) => {
+  updatePluginConfig: async (data: PluginConfigVO) => {
-    return await request.put({ url: `/iot/plugin-info/update`, data })
+    return await request.put({ url: `/iot/plugin-config/update`, data })
  },
-  // 删除IoT 插件信息
+  // 删除IoT 插件配置
-  deletePluginInfo: async (id: number) => {
+  deletePluginConfig: async (id: number) => {
-    return await request.delete({ url: `/iot/plugin-info/delete?id=` + id })
+    return await request.delete({ url: `/iot/plugin-config/delete?id=` + id })
-  },
-  // 导出IoT 插件信息 Excel
-  exportPluginInfo: async (params) => {
-    return await request.download({ url: `/iot/plugin-info/export-excel`, params })
  },
  // 修改IoT 插件状态
  updatePluginStatus: async (data: any) => {
-    return await request.put({ url: `/iot/plugin-info/update-status`, data })
+    return await request.put({ url: `/iot/plugin-config/update-status`, data })
-  },
-  // 上传Jar包
-  uploadPluginFile: async (data: any) => {
-    return await request.post({ url: `/iot/plugin-info/upload-file`, data })
  }
 }
--- a/src/views/iot/plugin/PluginInfoForm.vue
+++ b/src/views/iot/plugin/PluginInfoForm.vue
@@ -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 插件信息 表单 */
+/** IoT 插件配置 表单 */
-defineOptions({ name: 'PluginInfoForm' })
+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

--- a/src/views/iot/plugin/detail/PluginImportForm.vue
+++ b/src/views/iot/plugin/detail/PluginImportForm.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([]) // 文件列表

--- a/src/views/iot/plugin/detail/index.vue
+++ b/src/views/iot/plugin/detail/index.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)"
+    :id="pluginConfig.id"
-    @success="getPluginInfo(Number(pluginInfo.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) => {
+const getPluginConfig = async (id: number) => {
-  pluginInfo.value = await PluginInfoApi.getPluginInfo(id)
+  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({
+    await PluginConfigApi.updatePluginStatus({
-      id: pluginInfo.value.id,
+      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>
--- a/src/views/iot/plugin/index.vue
+++ b/src/views/iot/plugin/index.vue
-<!-- TODO @芋艿：增加一个【运维管理】，然后把插件放过去？ -->
 <template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
@@ -51,7 +50,7 @@
          type="primary"
          plain
          @click="openForm('create')"
-          v-hasPermi="['iot:plugin-info:create']"
+          v-hasPermi="['iot:plugin-config:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
@@ -65,7 +64,7 @@
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column label="插件名称" align="center" prop="name" />
        <el-table-column label="插件标识" align="center" prop="pluginKey" />
-        <el-table-column label="jar 包" align="center" prop="file" />
+        <el-table-column label="jar 包" align="center" prop="fileName" />
        <el-table-column label="版本号" align="center" prop="version" />
        <el-table-column label="部署方式" align="center" prop="deployType">
          <template #default="scope">
@@ -103,7 +102,7 @@
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
-              v-hasPermi="['iot:plugin-info:update']"
+              v-hasPermi="['iot:plugin-config:update']"
            >
              编辑
            </el-button>
@@ -111,7 +110,7 @@
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
-              v-hasPermi="['iot:plugin-info:delete']"
+              v-hasPermi="['iot:plugin-config:delete']"
            >
              删除
            </el-button>
@@ -133,6 +132,24 @@
                  <el-image :src="defaultIconUrl" class="w-[18px] h-[18px]" />
                </div>
                <div class="text-[16px] font-600 flex-1">{{ item.name }}</div>
+                <!-- 添加插件状态标签 -->
+                <div class="inline-flex items-center">
+                  <div
+                    class="w-1 h-1 rounded-full mr-1.5"
+                    :class="
+                      item.status === 1
+                        ? 'bg-[var(--el-color-success)]'
+                        : 'bg-[var(--el-color-danger)]'
+                    "
+                  >
+                  </div>
+                  <el-text
+                    class="!text-xs font-bold"
+                    :type="item.status === 1 ? 'success' : 'danger'"
+                  >
+                    {{ item.status === 1 ? '开启' : '禁用' }}
+                  </el-text>
+                </div>
              </div>
              <!-- 信息区域 -->
@@ -156,16 +173,6 @@
                    <span class="text-[#717c8e] mr-2.5">部署方式</span>
                    <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="item.deployType" />
                  </div>
-                  <!-- TODO @haohao：这里【状态】要不去掉，变成：1）通过颜色，区分开启、禁用，类似 device 上线状态；2）开启、禁用操作，放到下面的“按钮”，3 个一排，好看电 -->
-                  <div class="mb-2.5 last:mb-0">
-                    <span class="text-[#717c8e] mr-2.5">状态</span>
-                    <el-switch
-                      v-model="item.status"
-                      :active-value="1"
-                      :inactive-value="0"
-                      @change="handleStatusChange(item.id, Number($event))"
-                    />
-                  </div>
                </div>
              </div>
@@ -179,7 +186,7 @@
                  type="primary"
                  plain
                  @click="openForm('update', item.id)"
-                  v-hasPermi="['iot:plugin-info:update']"
+                  v-hasPermi="['iot:plugin-config:update']"
                >
                  <Icon icon="ep:edit-pen" class="mr-1" />
                  编辑
@@ -220,23 +227,23 @@
  </ContentWrap>
  <!-- 表单弹窗：添加/修改 -->
-  <PluginInfoForm ref="formRef" @success="getList" />
+  <PluginConfigForm ref="formRef" @success="getList" />
 </template>
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
+import { PluginConfigApi, PluginConfigVO } from '@/api/iot/plugin'
-import PluginInfoForm from './PluginInfoForm.vue'
+import PluginConfigForm from './PluginConfigForm.vue'
-/** IoT 插件信息 列表 */
+/** IoT 插件配置 列表 */
 defineOptions({ name: 'IoTPlugin' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
-const list = ref<PluginInfoVO[]>([]) // 列表的数据
+const list = ref<PluginConfigVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
  pageNo: 1,
@@ -252,7 +259,7 @@ const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
 const getList = async () => {
  loading.value = true
  try {
-    const data = await PluginInfoApi.getPluginInfoPage(queryParams)
+    const data = await PluginConfigApi.getPluginConfigPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
@@ -290,7 +297,7 @@ const handleDelete = async (id: number) => {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
-    await PluginInfoApi.deletePluginInfo(id)
+    await PluginConfigApi.deletePluginConfig(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
@@ -303,7 +310,7 @@ const handleStatusChange = async (id: number, status: number) => {
    // 修改状态的二次确认
    const text = status === 1 ? '启用' : '停用'
    await message.confirm('确认要"' + text + '"插件吗?')
-    await PluginInfoApi.updatePluginStatus({
+    await PluginConfigApi.updatePluginStatus({
      id: id,
      status
    })