Skip to content

phsl / admin

Go to a project
Commit 77e0a763 by 安浩浩
Options

【功能完善】IOT: 更新插件信息字段名为“fileName”，新增视图模式切换功能，优化插件详情展示

parent 97364078
Showing with 193 additions and 54 deletions
src/api/iot/plugininfo/index.ts
...@@ -7,7 +7,7 @@ export interface PluginInfoVO { ...@@ -7,7 +7,7 @@ export interface PluginInfoVO {
name: string // 插件名称 name: string // 插件名称
description: string // 描述 description: string // 描述
deployType: number // 部署方式 deployType: number // 部署方式
file: string // 插件包文件名 fileName: string // 插件包文件名
version: string // 插件版本 version: string // 插件版本
type: number // 插件类型 type: number // 插件类型
protocol: string // 设备插件协议类型 protocol: string // 设备插件协议类型
......
src/views/iot/plugin/detail/index.vue
...@@ -55,7 +55,21 @@ import PluginImportForm from './PluginImportForm.vue' ...@@ -55,7 +55,21 @@ import PluginImportForm from './PluginImportForm.vue'
const message = useMessage() const message = useMessage()
const route = useRoute() const route = useRoute()
const pluginInfo = ref<PluginInfoVO>({}) const pluginInfo = ref<PluginInfoVO>({
id: 0,
pluginKey: '',
name: '',
description: '',
version: '',
status: 0,
deployType: 0,
fileName: '',
type: 0,
protocol: '',
configSchema: '',
config: '',
script: ''
})
const isInitialLoad = ref(true) // 初始化标志位 const isInitialLoad = ref(true) // 初始化标志位
onMounted(() => { onMounted(() => {
...@@ -98,4 +112,4 @@ const importFormRef = ref() ...@@ -98,4 +112,4 @@ const importFormRef = ref()
const handleImport = () => { const handleImport = () => {
importFormRef.value.open() importFormRef.value.open()
} }
</script> </script>
\ No newline at end of file
src/views/iot/plugin/index.vue
...@@ -33,6 +33,16 @@ ...@@ -33,6 +33,16 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="float-right !mr-0 !mb-0">
<el-button-group>
<el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
<Icon icon="ep:grid" />
</el-button>
<el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
<Icon icon="ep:list" />
</el-button>
</el-button-group>
</el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
...@@ -50,57 +60,154 @@ ...@@ -50,57 +60,154 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> <template v-if="viewMode === 'list'">
<el-table-column label="插件名称" align="center" prop="name" /> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="插件标识" align="center" prop="pluginKey" /> <el-table-column label="插件名称" align="center" prop="name" />
<el-table-column label="jar包" align="center" prop="file" /> <el-table-column label="插件标识" align="center" prop="pluginKey" />
<el-table-column label="版本号" align="center" prop="version" /> <el-table-column label="jar包" align="center" prop="file" />
<el-table-column label="部署方式" align="center" prop="deployType"> <el-table-column label="版本号" align="center" prop="version" />
<template #default="scope"> <el-table-column label="部署方式" align="center" prop="deployType">
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" /> <template #default="scope">
</template> <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" />
</el-table-column> </template>
<el-table-column label="状态" align="center" prop="status"> </el-table-column>
<template #default="scope"> <el-table-column label="状态" align="center" prop="status">
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_STATUS" :value="scope.row.status" /> <template #default="scope">
</template> <el-switch
</el-table-column> v-model="scope.row.status"
<el-table-column :active-value="1"
label="创建时间" :inactive-value="0"
align="center" @change="handleStatusChange(scope.row.id, Number($event))"
prop="createTime" />
:formatter="dateFormatter" </template>
width="180px" </el-table-column>
/> <el-table-column
<el-table-column label="操作" align="center" min-width="120px"> label="创建时间"
<template #default="scope"> align="center"
<el-button prop="createTime"
link :formatter="dateFormatter"
type="primary" width="180px"
@click="openDetail(scope.row.id)" />
v-hasPermi="['iot:product:query']" <el-table-column label="操作" align="center" min-width="120px">
> <template #default="scope">
查看 <el-button
</el-button> link
<el-button type="primary"
link @click="openDetail(scope.row.id)"
type="primary" v-hasPermi="['iot:product:query']"
@click="openForm('update', scope.row.id)" >
v-hasPermi="['iot:plugin-info:update']" 查看
> </el-button>
编辑 <el-button
</el-button> link
<el-button type="primary"
link @click="openForm('update', scope.row.id)"
type="danger" v-hasPermi="['iot:plugin-info:update']"
@click="handleDelete(scope.row.id)" >
v-hasPermi="['iot:plugin-info:delete']" 编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['iot:plugin-info:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<template v-if="viewMode === 'card'">
<el-row :gutter="16">
<el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
<el-card
class="h-full transition-colors relative overflow-hidden"
:body-style="{ padding: '0' }"
> >
删除 <div class="p-4 relative">
</el-button> <!-- 标题区域 -->
</template> <div class="flex items-center mb-3">
</el-table-column> <div class="mr-2.5 flex items-center">
</el-table> <el-image :src="defaultIconUrl" class="w-[18px] h-[18px]" />
</div>
<div class="text-[16px] font-600 flex-1">{{ item.name }}</div>
</div>
<!-- 信息区域 -->
<div class="flex items-center text-[14px]">
<div class="flex-1">
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">插件标识</span>
<span class="text-[#0b1d30] whitespace-normal break-all">{{
item.pluginKey
}}</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">jar包</span>
<span class="text-[#0b1d30]">{{ item.fileName }}</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">版本号</span>
<span class="text-[#0b1d30]">{{ item.version }}</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">部署方式</span>
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="item.deployType" />
</div>
<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>
<!-- 分隔线 -->
<el-divider class="!my-3" />
<!-- 按钮 -->
<div class="flex items-center px-0">
<el-button
class="flex-1 !px-2 !h-[32px] text-[13px]"
type="primary"
plain
@click="openForm('update', item.id)"
v-hasPermi="['iot:plugin-info:update']"
>
<Icon icon="ep:edit-pen" class="mr-1" />
编辑
</el-button>
<el-button
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
type="warning"
plain
@click="openDetail(item.id)"
>
<Icon icon="ep:view" class="mr-1" />
详情
</el-button>
<div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
<el-button
class="!px-2 !h-[32px] text-[13px]"
type="danger"
plain
@click="handleDelete(item.id)"
v-hasPermi="['iot:device:delete']"
>
<Icon icon="ep:delete" />
</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
</template>
<!-- 分页 --> <!-- 分页 -->
<Pagination <Pagination
:total="total" :total="total"
...@@ -136,6 +243,8 @@ const queryParams = reactive({ ...@@ -136,6 +243,8 @@ const queryParams = reactive({
status: undefined status: undefined
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const defaultIconUrl = ref('/src/assets/svgs/iot/card-fill.svg') // 默认插件图标
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
...@@ -186,6 +295,23 @@ const handleDelete = async (id: number) => { ...@@ -186,6 +295,23 @@ const handleDelete = async (id: number) => {
} catch {} } catch {}
} }
/** 处理状态变更 */
const handleStatusChange = async (id: number, status: number) => {
try {
// 修改状态的二次确认
const text = status === 1 ? '启用' : '停用'
await message.confirm('确认要"' + text + '"插件吗?')
await PluginInfoApi.updatePluginStatus({
id: id,
status
})
message.success('更新状态成功')
getList()
} catch (error) {
message.error('更新状态失败')
}
}
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(() => {
getList() getList()
......
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