Skip to content

phsl / admin

Go to a project
Commit 229594b1 by 安浩浩
Options

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

parent 5d32cc38
Showing with 84 additions and 90 deletions
src/api/iot/plugininfo/index.ts → src/api/iot/plugin/index.ts
import request from '@/config/axios'
// IoT 插件信息 VO
export interface PluginInfoVO {
// IoT 插件配置 VO
export interface PluginConfigVO {
id: number // 主键ID
pluginKey: string // 插件标识
name: string // 插件名称
......@@ -17,45 +17,35 @@ export interface PluginInfoVO {
script: string // 插件脚本
}
// IoT 插件信息 API
export const PluginInfoApi = {
// 查询IoT 插件信息分页
getPluginInfoPage: async (params: any) => {
return await request.get({ url: `/iot/plugin-info/page`, params })
// IoT 插件配置 API
export const PluginConfigApi = {
// 查询IoT 插件配置分页
getPluginConfigPage: async (params: any) => {
return await request.get({ url: `/iot/plugin-config/page`, params })
},
// 查询IoT 插件信息详情
getPluginInfo: async (id: number) => {
return await request.get({ url: `/iot/plugin-info/get?id=` + id })
// 查询IoT 插件配置详情
getPluginConfig: async (id: number) => {
return await request.get({ url: `/iot/plugin-config/get?id=` + id })
},
// 新增IoT 插件信息
createPluginInfo: async (data: PluginInfoVO) => {
return await request.post({ url: `/iot/plugin-info/create`, data })
// 新增IoT 插件配置
createPluginConfig: async (data: PluginConfigVO) => {
return await request.post({ url: `/iot/plugin-config/create`, data })
},
// 修改IoT 插件信息
updatePluginInfo: async (data: PluginInfoVO) => {
return await request.put({ url: `/iot/plugin-info/update`, data })
// 修改IoT 插件配置
updatePluginConfig: async (data: PluginConfigVO) => {
return await request.put({ url: `/iot/plugin-config/update`, data })
},
// 删除IoT 插件信息
deletePluginInfo: async (id: number) => {
return await request.delete({ url: `/iot/plugin-info/delete?id=` + id })
},
// 导出IoT 插件信息 Excel
exportPluginInfo: async (params) => {
return await request.download({ url: `/iot/plugin-info/export-excel`, params })
// 删除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-info/update-status`, data })
},
// 上传Jar包
uploadPluginFile: async (data: any) => {
return await request.post({ url: `/iot/plugin-info/upload-file`, data })
return await request.put({ url: `/iot/plugin-config/update-status`, data })
}
}
src/views/iot/plugin/PluginInfoForm.vue → src/views/iot/plugin/PluginConfigForm.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 插件信息 表单 */
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
......
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([]) // 文件列表
......
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)"
@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>
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 PluginInfoForm from './PluginInfoForm.vue'
import { PluginConfigApi, PluginConfigVO } from '@/api/iot/plugin'
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
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment