ota 拓展功能-黑名单&灰色定向上线
This commit is contained in:
eafonyang
@@ -71,7 +71,20 @@
|
||||
<el-table-column prop="verName" label="版本名" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="model" label="设备型号" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="hw" label="硬件" width="70" />
|
||||
<el-table-column prop="url" label="包地址" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="url" label="包地址" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="url-cell">
|
||||
<span class="url-text" :title="row.url">{{ row.url }}</span>
|
||||
<el-icon
|
||||
class="url-copy-icon"
|
||||
title="复制包地址"
|
||||
@click.stop="handleCopyUrl(row)"
|
||||
>
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="force" label="强升" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.force === 1" type="danger" size="small">是</el-tag>
|
||||
@@ -89,11 +102,33 @@
|
||||
<el-tag v-else type="info" size="small">停用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="230" fixed="right">
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="success" size="small" class="ota-copy-btn" @click="handleCopy(scope.row)">复制</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
class="ota-row-actions-more"
|
||||
@command="(cmd) => handleMoreAction(cmd, scope.row)"
|
||||
>
|
||||
<el-button type="info" size="small">
|
||||
更多操作
|
||||
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="blacklist">
|
||||
<el-icon style="margin-right:4px"><Warning /></el-icon>黑名单
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="target">
|
||||
<el-icon style="margin-right:4px"><Aim /></el-icon>定向升级
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="delete" divided>
|
||||
<el-icon style="margin-right:4px;color:#f56c6c"><Delete /></el-icon>删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -112,6 +147,88 @@
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 黑名单弹窗 -->
|
||||
<el-dialog
|
||||
v-model="blackListDialogVisible"
|
||||
:title="`黑名单 - ${blackListOtaRow ? blackListOtaRow.verName + ' (' + (blackListOtaRow.model || '-') + ')' : ''}`"
|
||||
width="700px"
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="blacklist-dialog-toolbar">
|
||||
<div class="blacklist-add-form">
|
||||
<el-input
|
||||
v-model="newBlackMac"
|
||||
placeholder="MAC 地址，如 AA:BB:CC:DD:EE:FF"
|
||||
style="width: 320px"
|
||||
@keyup.enter="handleAddBlack"
|
||||
/>
|
||||
<el-button type="primary" :loading="blackListAddLoading" @click="handleAddBlack">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="blackListData"
|
||||
v-loading="blackListLoading"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%; margin-top: 12px"
|
||||
max-height="400"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="mac" label="MAC 地址" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatBlackDate(row.create_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="danger" size="small" @click="handleDeleteBlack(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 定向升级弹窗 -->
|
||||
<el-dialog
|
||||
v-model="targetDialogVisible"
|
||||
:title="`定向升级 - ${targetOtaRow ? targetOtaRow.verName + ' (' + (targetOtaRow.model || '-') + ')' : ''}`"
|
||||
width="700px"
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="target-dialog-toolbar">
|
||||
<div class="target-add-form">
|
||||
<el-input
|
||||
v-model="newTargetMac"
|
||||
placeholder="MAC 地址，如 AA:BB:CC:DD:EE:FF"
|
||||
style="width: 320px"
|
||||
@keyup.enter="handleAddTarget"
|
||||
/>
|
||||
<el-button type="primary" :loading="targetAddLoading" @click="handleAddTarget">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="targetDeviceData"
|
||||
v-loading="targetLoading"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%; margin-top: 12px"
|
||||
max-height="400"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="mac_addr" label="MAC 地址" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatBlackDate(row.create_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="danger" size="small" @click="handleDeleteTarget(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
@@ -249,8 +366,10 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Search, Refresh, Plus } from '@element-plus/icons-vue'
|
||||
import { Search, Refresh, Plus, CopyDocument, Warning, Aim, ArrowDown, Delete } from '@element-plus/icons-vue'
|
||||
import { getOtaList, createOta, updateOta, deleteOta, uploadOtaPackage } from '@/api/ota'
|
||||
import { getBlackList, createBlackList, deleteBlackList } from '@/api/blacklist'
|
||||
import { getOtaTargetDeviceList, createOtaTargetDevice, deleteOtaTargetDevice } from '@/api/otaTargetDevice'
|
||||
|
||||
const PACKAGE_UPLOAD_MODELS = ['Luxsin-X8', 'Luxsin-X9']
|
||||
|
||||
@@ -511,6 +630,206 @@ const handleCopy = (row) => {
|
||||
ElMessage.info('已复制当前行数据，请修改版本号等信息后保存')
|
||||
}
|
||||
|
||||
const handleCopyUrl = (row) => {
|
||||
const text = row.url || ''
|
||||
if (!text) {
|
||||
ElMessage.warning('包地址为空')
|
||||
return
|
||||
}
|
||||
navigator.clipboard.writeText(text).then(
|
||||
() => ElMessage.success('已复制包地址'),
|
||||
() => ElMessage.error('复制失败')
|
||||
)
|
||||
}
|
||||
|
||||
const blackListDialogVisible = ref(false)
|
||||
const blackListLoading = ref(false)
|
||||
const blackListAddLoading = ref(false)
|
||||
const blackListOtaRow = ref(null)
|
||||
const blackListData = ref([])
|
||||
const newBlackMac = ref('')
|
||||
|
||||
const macPattern = /^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/
|
||||
|
||||
function formatBlackDate(isoStr) {
|
||||
if (!isoStr) return ''
|
||||
const d = new Date(isoStr)
|
||||
const pad = (n) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
||||
}
|
||||
|
||||
const loadBlackList = async (otaId) => {
|
||||
blackListLoading.value = true
|
||||
try {
|
||||
const res = await getBlackList({ ota_id: otaId, skip: 0, limit: 1000 })
|
||||
if (res.code === 1 && res.data) {
|
||||
blackListData.value = res.data.items || []
|
||||
} else {
|
||||
blackListData.value = []
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
blackListData.value = []
|
||||
} finally {
|
||||
blackListLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleBlackList = (row) => {
|
||||
blackListOtaRow.value = row
|
||||
newBlackMac.value = ''
|
||||
blackListDialogVisible.value = true
|
||||
loadBlackList(row.id)
|
||||
}
|
||||
|
||||
const handleAddBlack = async () => {
|
||||
const mac = (newBlackMac.value || '').trim()
|
||||
if (!mac) {
|
||||
ElMessage.warning('请输入 MAC 地址')
|
||||
return
|
||||
}
|
||||
if (!macPattern.test(mac)) {
|
||||
ElMessage.warning('MAC 格式不正确，示例: AA:BB:CC:DD:EE:FF')
|
||||
return
|
||||
}
|
||||
blackListAddLoading.value = true
|
||||
try {
|
||||
const res = await createBlackList({ ota_id: blackListOtaRow.value.id, mac })
|
||||
if (res.code === 1) {
|
||||
ElMessage.success('已添加')
|
||||
newBlackMac.value = ''
|
||||
loadBlackList(blackListOtaRow.value.id)
|
||||
} else {
|
||||
ElMessage.error(res.msg || '添加失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('添加失败')
|
||||
} finally {
|
||||
blackListAddLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteBlack = (row) => {
|
||||
ElMessageBox.confirm(`确定删除该黑名单（MAC: ${row.mac}）吗？`, '提示', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消'
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
const res = await deleteBlackList(row.id)
|
||||
if (res.code === 1) {
|
||||
ElMessage.success('已删除')
|
||||
loadBlackList(blackListOtaRow.value.id)
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 定向升级弹窗状态与方法
|
||||
const targetDialogVisible = ref(false)
|
||||
const targetLoading = ref(false)
|
||||
const targetAddLoading = ref(false)
|
||||
const targetOtaRow = ref(null)
|
||||
const targetDeviceData = ref([])
|
||||
const newTargetMac = ref('')
|
||||
|
||||
const loadTargetDevices = async (otaId) => {
|
||||
targetLoading.value = true
|
||||
try {
|
||||
const res = await getOtaTargetDeviceList({ ota_id: otaId, skip: 0, limit: 1000 })
|
||||
if (res.code === 1 && res.data) {
|
||||
targetDeviceData.value = res.data.items || []
|
||||
} else {
|
||||
targetDeviceData.value = []
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
targetDeviceData.value = []
|
||||
} finally {
|
||||
targetLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleTargetDevice = (row) => {
|
||||
targetOtaRow.value = row
|
||||
newTargetMac.value = ''
|
||||
targetDialogVisible.value = true
|
||||
loadTargetDevices(row.id)
|
||||
}
|
||||
|
||||
const handleAddTarget = async () => {
|
||||
const mac = (newTargetMac.value || '').trim()
|
||||
if (!mac) {
|
||||
ElMessage.warning('请输入 MAC 地址')
|
||||
return
|
||||
}
|
||||
if (!macPattern.test(mac)) {
|
||||
ElMessage.warning('MAC 格式不正确，示例: AA:BB:CC:DD:EE:FF')
|
||||
return
|
||||
}
|
||||
targetAddLoading.value = true
|
||||
try {
|
||||
const res = await createOtaTargetDevice({ ota_id: targetOtaRow.value.id, mac_addr: mac })
|
||||
if (res.code === 1) {
|
||||
ElMessage.success('已添加')
|
||||
newTargetMac.value = ''
|
||||
loadTargetDevices(targetOtaRow.value.id)
|
||||
} else {
|
||||
ElMessage.error(res.msg || '添加失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('添加失败')
|
||||
} finally {
|
||||
targetAddLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteTarget = (row) => {
|
||||
ElMessageBox.confirm(`确定删除该定向设备（MAC: ${row.mac_addr}）吗？`, '提示', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消'
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
const res = await deleteOtaTargetDevice(row.id)
|
||||
if (res.code === 1) {
|
||||
ElMessage.success('已删除')
|
||||
loadTargetDevices(targetOtaRow.value.id)
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const handleMoreAction = (cmd, row) => {
|
||||
switch (cmd) {
|
||||
case 'blacklist':
|
||||
handleBlackList(row)
|
||||
break
|
||||
case 'target':
|
||||
handleTargetDevice(row)
|
||||
break
|
||||
case 'delete':
|
||||
handleDelete(row)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`确定删除 OTA「${row.verName}」（ID ${row.id}）吗？`, '提示', {
|
||||
type: 'warning',
|
||||
@@ -624,4 +943,60 @@ onMounted(() => {
|
||||
background-color: var(--el-color-success-light-3) !important;
|
||||
border-color: var(--el-color-success-light-3) !important;
|
||||
}
|
||||
|
||||
.url-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.url-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.url-copy-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.url-copy-icon:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.url-cell:hover .url-copy-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.blacklist-dialog-toolbar {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.blacklist-add-form {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.target-dialog-toolbar {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.target-add-form {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ota-row-actions-more {
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user