Skip to content

Commit 77e0a76

Browse files
committed
【功能完善】IOT: 更新插件信息字段名为“fileName”,新增视图模式切换功能,优化插件详情展示
1 parent 9736407 commit 77e0a76

File tree

3 files changed

+193
-53
lines changed

3 files changed

+193
-53
lines changed

src/api/iot/plugininfo/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface PluginInfoVO {
77
name: string // 插件名称
88
description: string // 描述
99
deployType: number // 部署方式
10-
file: string // 插件包文件名
10+
fileName: string // 插件包文件名
1111
version: string // 插件版本
1212
type: number // 插件类型
1313
protocol: string // 设备插件协议类型

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,21 @@ import PluginImportForm from './PluginImportForm.vue'
5555
5656
const message = useMessage()
5757
const route = useRoute()
58-
const pluginInfo = ref<PluginInfoVO>({})
58+
const pluginInfo = ref<PluginInfoVO>({
59+
id: 0,
60+
pluginKey: '',
61+
name: '',
62+
description: '',
63+
version: '',
64+
status: 0,
65+
deployType: 0,
66+
fileName: '',
67+
type: 0,
68+
protocol: '',
69+
configSchema: '',
70+
config: '',
71+
script: ''
72+
})
5973
const isInitialLoad = ref(true) // 初始化标志位
6074
6175
onMounted(() => {
@@ -98,4 +112,4 @@ const importFormRef = ref()
98112
const handleImport = () => {
99113
importFormRef.value.open()
100114
}
101-
</script>
115+
</script>

src/views/iot/plugin/index.vue

Lines changed: 176 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@
3333
/>
3434
</el-select>
3535
</el-form-item>
36+
<el-form-item class="float-right !mr-0 !mb-0">
37+
<el-button-group>
38+
<el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
39+
<Icon icon="ep:grid" />
40+
</el-button>
41+
<el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
42+
<Icon icon="ep:list" />
43+
</el-button>
44+
</el-button-group>
45+
</el-form-item>
3646
<el-form-item>
3747
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
3848
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -50,57 +60,154 @@
5060

5161
<!-- 列表 -->
5262
<ContentWrap>
53-
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
54-
<el-table-column label="插件名称" align="center" prop="name" />
55-
<el-table-column label="插件标识" align="center" prop="pluginKey" />
56-
<el-table-column label="jar包" align="center" prop="file" />
57-
<el-table-column label="版本号" align="center" prop="version" />
58-
<el-table-column label="部署方式" align="center" prop="deployType">
59-
<template #default="scope">
60-
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" />
61-
</template>
62-
</el-table-column>
63-
<el-table-column label="状态" align="center" prop="status">
64-
<template #default="scope">
65-
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_STATUS" :value="scope.row.status" />
66-
</template>
67-
</el-table-column>
68-
<el-table-column
69-
label="创建时间"
70-
align="center"
71-
prop="createTime"
72-
:formatter="dateFormatter"
73-
width="180px"
74-
/>
75-
<el-table-column label="操作" align="center" min-width="120px">
76-
<template #default="scope">
77-
<el-button
78-
link
79-
type="primary"
80-
@click="openDetail(scope.row.id)"
81-
v-hasPermi="['iot:product:query']"
82-
>
83-
查看
84-
</el-button>
85-
<el-button
86-
link
87-
type="primary"
88-
@click="openForm('update', scope.row.id)"
89-
v-hasPermi="['iot:plugin-info:update']"
90-
>
91-
编辑
92-
</el-button>
93-
<el-button
94-
link
95-
type="danger"
96-
@click="handleDelete(scope.row.id)"
97-
v-hasPermi="['iot:plugin-info:delete']"
63+
<template v-if="viewMode === 'list'">
64+
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
65+
<el-table-column label="插件名称" align="center" prop="name" />
66+
<el-table-column label="插件标识" align="center" prop="pluginKey" />
67+
<el-table-column label="jar包" align="center" prop="file" />
68+
<el-table-column label="版本号" align="center" prop="version" />
69+
<el-table-column label="部署方式" align="center" prop="deployType">
70+
<template #default="scope">
71+
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" />
72+
</template>
73+
</el-table-column>
74+
<el-table-column label="状态" align="center" prop="status">
75+
<template #default="scope">
76+
<el-switch
77+
v-model="scope.row.status"
78+
:active-value="1"
79+
:inactive-value="0"
80+
@change="handleStatusChange(scope.row.id, Number($event))"
81+
/>
82+
</template>
83+
</el-table-column>
84+
<el-table-column
85+
label="创建时间"
86+
align="center"
87+
prop="createTime"
88+
:formatter="dateFormatter"
89+
width="180px"
90+
/>
91+
<el-table-column label="操作" align="center" min-width="120px">
92+
<template #default="scope">
93+
<el-button
94+
link
95+
type="primary"
96+
@click="openDetail(scope.row.id)"
97+
v-hasPermi="['iot:product:query']"
98+
>
99+
查看
100+
</el-button>
101+
<el-button
102+
link
103+
type="primary"
104+
@click="openForm('update', scope.row.id)"
105+
v-hasPermi="['iot:plugin-info:update']"
106+
>
107+
编辑
108+
</el-button>
109+
<el-button
110+
link
111+
type="danger"
112+
@click="handleDelete(scope.row.id)"
113+
v-hasPermi="['iot:plugin-info:delete']"
114+
>
115+
删除
116+
</el-button>
117+
</template>
118+
</el-table-column>
119+
</el-table>
120+
</template>
121+
<template v-if="viewMode === 'card'">
122+
<el-row :gutter="16">
123+
<el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
124+
<el-card
125+
class="h-full transition-colors relative overflow-hidden"
126+
:body-style="{ padding: '0' }"
98127
>
99-
删除
100-
</el-button>
101-
</template>
102-
</el-table-column>
103-
</el-table>
128+
<div class="p-4 relative">
129+
<!-- 标题区域 -->
130+
<div class="flex items-center mb-3">
131+
<div class="mr-2.5 flex items-center">
132+
<el-image :src="defaultIconUrl" class="w-[18px] h-[18px]" />
133+
</div>
134+
<div class="text-[16px] font-600 flex-1">{{ item.name }}</div>
135+
</div>
136+
137+
<!-- 信息区域 -->
138+
<div class="flex items-center text-[14px]">
139+
<div class="flex-1">
140+
<div class="mb-2.5 last:mb-0">
141+
<span class="text-[#717c8e] mr-2.5">插件标识</span>
142+
<span class="text-[#0b1d30] whitespace-normal break-all">{{
143+
item.pluginKey
144+
}}</span>
145+
</div>
146+
<div class="mb-2.5 last:mb-0">
147+
<span class="text-[#717c8e] mr-2.5">jar包</span>
148+
<span class="text-[#0b1d30]">{{ item.fileName }}</span>
149+
</div>
150+
<div class="mb-2.5 last:mb-0">
151+
<span class="text-[#717c8e] mr-2.5">版本号</span>
152+
<span class="text-[#0b1d30]">{{ item.version }}</span>
153+
</div>
154+
<div class="mb-2.5 last:mb-0">
155+
<span class="text-[#717c8e] mr-2.5">部署方式</span>
156+
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="item.deployType" />
157+
</div>
158+
<div class="mb-2.5 last:mb-0">
159+
<span class="text-[#717c8e] mr-2.5">状态</span>
160+
<el-switch
161+
v-model="item.status"
162+
:active-value="1"
163+
:inactive-value="0"
164+
@change="handleStatusChange(item.id, Number($event))"
165+
/>
166+
</div>
167+
</div>
168+
</div>
169+
170+
<!-- 分隔线 -->
171+
<el-divider class="!my-3" />
172+
173+
<!-- 按钮 -->
174+
<div class="flex items-center px-0">
175+
<el-button
176+
class="flex-1 !px-2 !h-[32px] text-[13px]"
177+
type="primary"
178+
plain
179+
@click="openForm('update', item.id)"
180+
v-hasPermi="['iot:plugin-info:update']"
181+
>
182+
<Icon icon="ep:edit-pen" class="mr-1" />
183+
编辑
184+
</el-button>
185+
<el-button
186+
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
187+
type="warning"
188+
plain
189+
@click="openDetail(item.id)"
190+
>
191+
<Icon icon="ep:view" class="mr-1" />
192+
详情
193+
</el-button>
194+
<div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
195+
<el-button
196+
class="!px-2 !h-[32px] text-[13px]"
197+
type="danger"
198+
plain
199+
@click="handleDelete(item.id)"
200+
v-hasPermi="['iot:device:delete']"
201+
>
202+
<Icon icon="ep:delete" />
203+
</el-button>
204+
</div>
205+
</div>
206+
</el-card>
207+
</el-col>
208+
</el-row>
209+
</template>
210+
104211
<!-- 分页 -->
105212
<Pagination
106213
:total="total"
@@ -136,6 +243,8 @@ const queryParams = reactive({
136243
status: undefined
137244
})
138245
const queryFormRef = ref() // 搜索的表单
246+
const defaultIconUrl = ref('/src/assets/svgs/iot/card-fill.svg') // 默认插件图标
247+
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
139248
140249
/** 查询列表 */
141250
const getList = async () => {
@@ -186,6 +295,23 @@ const handleDelete = async (id: number) => {
186295
} catch {}
187296
}
188297
298+
/** 处理状态变更 */
299+
const handleStatusChange = async (id: number, status: number) => {
300+
try {
301+
// 修改状态的二次确认
302+
const text = status === 1 ? '启用' : '停用'
303+
await message.confirm('确认要"' + text + '"插件吗?')
304+
await PluginInfoApi.updatePluginStatus({
305+
id: id,
306+
status
307+
})
308+
message.success('更新状态成功')
309+
getList()
310+
} catch (error) {
311+
message.error('更新状态失败')
312+
}
313+
}
314+
189315
/** 初始化 **/
190316
onMounted(() => {
191317
getList()

0 commit comments

Comments
 (0)