Skip to content

Commit 8730056

Browse files
haohaoMThaohaoMT
committed
【功能新增】IoT：增加插件信息管理功能，包括插件信息接口和表单组件
1 parent 3ea61c5 commit 8730056

File tree

5 files changed

+462
-1
lines changed

5 files changed

+462
-1
lines changed

‎src/api/iot/plugininfo/index.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import request from '@/config/axios'
2+
3+
// IoT 插件信息 VO
4+
export interface PluginInfoVO {
5+
id: number // 主键ID
6+
pluginId: string // 插件包id
7+
name: string // 插件名称
8+
description: string // 描述
9+
deployType: number // 部署方式
10+
file: string // 插件包文件名
11+
version: string // 插件版本
12+
type: number // 插件类型
13+
protocol: string // 设备插件协议类型
14+
status: number // 状态
15+
configSchema: string // 插件配置项描述信息
16+
config: string // 插件配置信息
17+
script: string // 插件脚本
18+
}
19+
20+
// IoT 插件信息 API
21+
export const PluginInfoApi = {
22+
// 查询IoT 插件信息分页
23+
getPluginInfoPage: async (params: any) => {
24+
return await request.get({ url: `/iot/plugin-info/page`, params })
25+
},
26+
27+
// 查询IoT 插件信息详情
28+
getPluginInfo: async (id: number) => {
29+
return await request.get({ url: `/iot/plugin-info/get?id=` + id })
30+
},
31+
32+
// 新增IoT 插件信息
33+
createPluginInfo: async (data: PluginInfoVO) => {
34+
return await request.post({ url: `/iot/plugin-info/create`, data })
35+
},
36+
37+
// 修改IoT 插件信息
38+
updatePluginInfo: async (data: PluginInfoVO) => {
39+
return await request.put({ url: `/iot/plugin-info/update`, data })
40+
},
41+
42+
// 删除IoT 插件信息
43+
deletePluginInfo: async (id: number) => {
44+
return await request.delete({ url: `/iot/plugin-info/delete?id=` + id })
45+
},
46+
47+
// 导出IoT 插件信息 Excel
48+
exportPluginInfo: async (params) => {
49+
return await request.download({ url: `/iot/plugin-info/export-excel`, params })
50+
}
51+
}

‎src/utils/dict.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,5 +239,8 @@ export enum DICT_TYPE {
239239
IOT_PRODUCT_FUNCTION_TYPE = 'iot_product_function_type', // IOT 产品功能类型
240240
IOT_DATA_TYPE = 'iot_data_type', // IOT 数据类型
241241
IOT_UNIT_TYPE = 'iot_unit_type', // IOT 单位类型
242-
IOT_RW_TYPE = 'iot_rw_type' // IOT 读写类型
242+
IOT_RW_TYPE = 'iot_rw_type', // IOT 读写类型
243+
IOT_PLUGIN_DEPLOY_TYPE = 'iot_plugin_deploy_type', // IOT 插件部署类型
244+
IOT_PLUGIN_STATUS = 'iot_plugin_status', // IOT 插件状态
245+
IOT_PLUGIN_TYPE = 'iot_plugin_type' // IOT 插件类型
243246
}

‎src/views/iot/plugininfo/PluginInfoForm.vue

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="100px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="插件名称" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入插件名称" />
12+
</el-form-item>
13+
<el-form-item label="部署方式" prop="deployType">
14+
<el-select v-model="formData.deployType" placeholder="请选择部署方式">
15+
<el-option
16+
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE)"
17+
:key="dict.value"
18+
:label="dict.label"
19+
:value="dict.value"
20+
/>
21+
</el-select>
22+
</el-form-item>
23+
</el-form>
24+
<template #footer>
25+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
26+
<el-button @click="dialogVisible = false">取 消</el-button>
27+
</template>
28+
</Dialog>
29+
</template>
30+
<script setup lang="ts">
31+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
32+
import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
33+
34+
/** IoT 插件信息 表单 */
35+
defineOptions({ name: 'PluginInfoForm' })
36+
37+
const { t } = useI18n() // 国际化
38+
const message = useMessage() // 消息弹窗
39+
40+
const dialogVisible = ref(false) // 弹窗的是否展示
41+
const dialogTitle = ref('') // 弹窗的标题
42+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
43+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
44+
const formData = ref({
45+
id: undefined,
46+
name: undefined,
47+
deployType: undefined
48+
})
49+
const formRules = reactive({
50+
name: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
51+
deployType: [{ required: true, message: '部署方式不能为空', trigger: 'change' }]
52+
})
53+
const formRef = ref() // 表单 Ref
54+
55+
/** 打开弹窗 */
56+
const open = async (type: string, id?: number) => {
57+
dialogVisible.value = true
58+
dialogTitle.value = t('action.' + type)
59+
formType.value = type
60+
resetForm()
61+
// 修改时，设置数据
62+
if (id) {
63+
formLoading.value = true
64+
try {
65+
formData.value = await PluginInfoApi.getPluginInfo(id)
66+
} finally {
67+
formLoading.value = false
68+
}
69+
}
70+
}
71+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
72+
73+
/** 提交表单 */
74+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
75+
const submitForm = async () => {
76+
// 校验表单
77+
await formRef.value.validate()
78+
// 提交请求
79+
formLoading.value = true
80+
try {
81+
const data = formData.value as unknown as PluginInfoVO
82+
if (formType.value === 'create') {
83+
await PluginInfoApi.createPluginInfo(data)
84+
message.success(t('common.createSuccess'))
85+
} else {
86+
await PluginInfoApi.updatePluginInfo(data)
87+
message.success(t('common.updateSuccess'))
88+
}
89+
dialogVisible.value = false
90+
// 发送操作成功的事件
91+
emit('success')
92+
} finally {
93+
formLoading.value = false
94+
}
95+
}
96+
97+
/** 重置表单 */
98+
const resetForm = () => {
99+
formData.value = {
100+
id: undefined,
101+
name: undefined,
102+
deployType: undefined
103+
}
104+
formRef.value?.resetFields()
105+
}
106+
</script>

‎src/views/iot/plugininfo/detail.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<ContentWrap>
3+
<el-descriptions title="插件详情" :column="2" border>
4+
<el-descriptions-item label="插件名称">{{ pluginInfo.name }}</el-descriptions-item>
5+
<el-descriptions-item label="组件ID">{{ pluginInfo.pluginId }}</el-descriptions-item>
6+
<el-descriptions-item label="Jar包">{{ pluginInfo.file }}</el-descriptions-item>
7+
<el-descriptions-item label="版本号">{{ pluginInfo.version }}</el-descriptions-item>
8+
<el-descriptions-item label="部署方式">
9+
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="pluginInfo.deployType" />
10+
</el-descriptions-item>
11+
<el-descriptions-item label="状态">
12+
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_STATUS" :value="pluginInfo.status" />
13+
</el-descriptions-item>
14+
</el-descriptions>
15+
<el-button type="primary" @click="goBack">返回</el-button>
16+
</ContentWrap>
17+
</template>
18+
19+
<script setup lang="ts">
20+
import { DICT_TYPE } from '@/utils/dict'
21+
import { dateFormatter } from '@/utils/formatTime'
22+
import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
23+
import { useRoute, useRouter } from 'vue-router'
24+
25+
const route = useRoute()
26+
const router = useRouter()
27+
const pluginInfo = ref<PluginInfoVO>({})
28+
29+
const getPluginInfo = async (id: number) => {
30+
const data = await PluginInfoApi.getPluginInfo(id)
31+
pluginInfo.value = data
32+
}
33+
34+
const goBack = () => {
35+
router.back()
36+
}
37+
38+
onMounted(() => {
39+
const id = Number(route.params.id)
40+
if (id) {
41+
getPluginInfo(id)
42+
}
43+
})
44+
</script>

0 commit comments

Comments
 (0)