|
33 | 33 | />
|
34 | 34 | </el-select>
|
35 | 35 | </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> |
36 | 46 | <el-form-item>
|
37 | 47 | <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
38 | 48 | <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
50 | 60 |
|
51 | 61 | <!-- 列表 -->
|
52 | 62 | <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' }" |
98 | 127 | >
|
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 | + |
104 | 211 | <!-- 分页 -->
|
105 | 212 | <Pagination
|
106 | 213 | :total="total"
|
@@ -136,6 +243,8 @@ const queryParams = reactive({
|
136 | 243 | status: undefined
|
137 | 244 | })
|
138 | 245 | const queryFormRef = ref() // 搜索的表单
|
| 246 | +const defaultIconUrl = ref('/src/assets/svgs/iot/card-fill.svg') // 默认插件图标 |
| 247 | +const viewMode = ref<'card' | 'list'>('card') // 视图模式状态 |
139 | 248 |
|
140 | 249 | /** 查询列表 */
|
141 | 250 | const getList = async () => {
|
@@ -186,6 +295,23 @@ const handleDelete = async (id: number) => {
|
186 | 295 | } catch {}
|
187 | 296 | }
|
188 | 297 |
|
| 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 | +
|
189 | 315 | /** 初始化 **/
|
190 | 316 | onMounted(() => {
|
191 | 317 | getList()
|
|
0 commit comments