ota 拓展功能-黑名单&灰色定向上线
This commit is contained in:
eafonyang
@@ -0,0 +1,56 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 黑名单列表
|
||||
* @param {Object} params
|
||||
* @param {number} [params.skip]
|
||||
* @param {number} [params.limit]
|
||||
* @param {number} [params.ota_id]
|
||||
* @param {string} [params.model]
|
||||
* @param {string} [params.mac]
|
||||
*/
|
||||
export function getBlackList(params) {
|
||||
return request({
|
||||
url: '/blacklist/',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增黑名单
|
||||
* @param {Object} data
|
||||
* @param {number} data.ota_id
|
||||
* @param {string} data.mac
|
||||
*/
|
||||
export function createBlackList(data) {
|
||||
return request({
|
||||
url: '/blacklist/',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新黑名单
|
||||
* @param {number} id
|
||||
* @param {Object} data
|
||||
*/
|
||||
export function updateBlackList(id, data) {
|
||||
return request({
|
||||
url: `/blacklist/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除黑名单
|
||||
* @param {number} id
|
||||
*/
|
||||
export function deleteBlackList(id) {
|
||||
return request({
|
||||
url: `/blacklist/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 定向升级设备列表
|
||||
* @param {Object} params
|
||||
* @param {number} [params.skip]
|
||||
* @param {number} [params.limit]
|
||||
* @param {number} [params.ota_id]
|
||||
* @param {string} [params.model]
|
||||
* @param {string} [params.mac_addr]
|
||||
*/
|
||||
export function getOtaTargetDeviceList(params) {
|
||||
return request({
|
||||
url: '/ota-target-device/',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增定向升级设备
|
||||
* @param {Object} data
|
||||
* @param {number} data.ota_id
|
||||
* @param {string} data.mac_addr
|
||||
*/
|
||||
export function createOtaTargetDevice(data) {
|
||||
return request({
|
||||
url: '/ota-target-device/',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新定向升级设备
|
||||
* @param {number} id
|
||||
* @param {Object} data
|
||||
*/
|
||||
export function updateOtaTargetDevice(id, data) {
|
||||
return request({
|
||||
url: `/ota-target-device/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除定向升级设备
|
||||
* @param {number} id
|
||||
*/
|
||||
export function deleteOtaTargetDevice(id) {
|
||||
return request({
|
||||
url: `/ota-target-device/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -69,6 +69,14 @@
|
||||
<el-icon><Document /></el-icon>
|
||||
<span>OTA 管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/blacklist">
|
||||
<el-icon><Warning /></el-icon>
|
||||
<span>黑名单管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/ota-target-device">
|
||||
<el-icon><Aim /></el-icon>
|
||||
<span>定向升级</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="share-code">
|
||||
<template #title>
|
||||
@@ -145,7 +153,7 @@
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Headset, Collection, List, Upload, Document, Share, User } from '@element-plus/icons-vue'
|
||||
import { Headset, Collection, List, Upload, Document, Share, User, Warning, Aim } from '@element-plus/icons-vue'
|
||||
import { clearAuth, getUser, isSuperAdmin } from '@/utils/auth'
|
||||
import TabsView from '@/components/TabsView.vue'
|
||||
import SidebarLogo from '@/components/SidebarLogo.vue'
|
||||
@@ -165,7 +173,7 @@ const changePasswordVisible = ref(false)
|
||||
|
||||
function resolveOpenedMenus(path) {
|
||||
if (path.startsWith('/brand') || path.startsWith('/model')) return ['1']
|
||||
if (path.startsWith('/ota')) return ['upgrade']
|
||||
if (path.startsWith('/ota') || path.startsWith('/blacklist') || path.startsWith('/ota-target-device')) return ['upgrade']
|
||||
if (path.startsWith('/share-code')) return ['share-code']
|
||||
return []
|
||||
}
|
||||
@@ -182,6 +190,8 @@ const railNavItems = [
|
||||
{ path: '/brand', title: '品牌管理', icon: Collection },
|
||||
{ path: '/model', title: '型号管理', icon: List },
|
||||
{ path: '/ota', title: 'OTA 管理', icon: Document },
|
||||
{ path: '/blacklist', title: '黑名单', icon: Warning },
|
||||
{ path: '/ota-target-device', title: '定向升级', icon: Aim },
|
||||
{ path: '/share-code/log', title: '分享日志', icon: Share }
|
||||
]
|
||||
|
||||
@@ -194,7 +204,7 @@ const breadcrumbTitle = computed(() => {
|
||||
const breadcrumbSection = computed(() => {
|
||||
const path = route.path || ''
|
||||
if (path.startsWith('/brand') || path.startsWith('/model')) return '耳机管理'
|
||||
if (path.startsWith('/ota')) return '升级管理'
|
||||
if (path.startsWith('/ota') || path.startsWith('/blacklist') || path.startsWith('/ota-target-device')) return '升级管理'
|
||||
if (path.startsWith('/share-code')) return '分享码'
|
||||
if (path.startsWith('/system')) return '系统管理'
|
||||
return ''
|
||||
|
||||
@@ -40,6 +40,18 @@ const routes = [
|
||||
component: () => import('@/views/ota/index.vue'),
|
||||
meta: { title: 'OTA 管理', icon: 'upload' }
|
||||
},
|
||||
{
|
||||
path: '/blacklist',
|
||||
name: 'BlackList',
|
||||
component: () => import('@/views/blacklist/index.vue'),
|
||||
meta: { title: '黑名单管理', icon: 'document' }
|
||||
},
|
||||
{
|
||||
path: '/ota-target-device',
|
||||
name: 'OtaTargetDevice',
|
||||
component: () => import('@/views/ota-target-device/index.vue'),
|
||||
meta: { title: '定向升级', icon: 'document' }
|
||||
},
|
||||
{
|
||||
path: '/share-code/log',
|
||||
name: 'ShareCodeLog',
|
||||
|
||||
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="blacklist-container">
|
||||
<el-card class="search-card">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="OTA 版本">
|
||||
<el-select
|
||||
v-model="searchForm.ota_id"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 220px"
|
||||
>
|
||||
<el-option
|
||||
v-for="ota in otaOptions"
|
||||
:key="ota.id"
|
||||
:label="`#${ota.id} - ${ota.verName} (${ota.model || '-'})`"
|
||||
:value="ota.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备型号">
|
||||
<el-select
|
||||
v-model="searchForm.model"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option label="Luxsin-X8" value="Luxsin-X8" />
|
||||
<el-option label="Luxsin-X9" value="Luxsin-X9" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="MAC 地址">
|
||||
<el-input
|
||||
v-model="searchForm.mac"
|
||||
placeholder="模糊查询"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="table-card">
|
||||
<div class="card-header">
|
||||
<span class="title">黑名单列表</span>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增黑名单
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table-loading-host" v-loading="loading">
|
||||
<el-table :data="tableData" border stripe style="width: 100%">
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column label="OTA 版本" min-width="200" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.ota">#{{ row.ota.id }} - {{ row.ota.verName }} ({{ row.ota.model || '-' }})</span>
|
||||
<span v-else>OTA #{{ row.ota_id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mac" label="MAC 地址" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.create_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="520px"
|
||||
destroy-on-close
|
||||
@close="handleDialogClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="110px"
|
||||
class="blacklist-form"
|
||||
>
|
||||
<el-form-item label="OTA 版本" prop="ota_id">
|
||||
<el-select
|
||||
v-model="formData.ota_id"
|
||||
placeholder="请选择 OTA 版本"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="ota in otaOptions"
|
||||
:key="ota.id"
|
||||
:label="`#${ota.id} - ${ota.verName} (${ota.model || '-'})`"
|
||||
:value="ota.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="MAC 地址" prop="mac">
|
||||
<el-input
|
||||
v-model="formData.mac"
|
||||
placeholder="例如: AA:BB:CC:DD:EE:FF"
|
||||
maxlength="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Search, Refresh, Plus } from '@element-plus/icons-vue'
|
||||
import { getBlackList, createBlackList, updateBlackList, deleteBlackList } from '@/api/blacklist'
|
||||
import { getOtaList } from '@/api/ota'
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增黑名单')
|
||||
const formRef = ref(null)
|
||||
|
||||
const searchForm = reactive({
|
||||
ota_id: undefined,
|
||||
model: undefined,
|
||||
mac: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
const otaOptions = ref([])
|
||||
|
||||
function emptyForm() {
|
||||
return {
|
||||
id: null,
|
||||
ota_id: undefined,
|
||||
mac: ''
|
||||
}
|
||||
}
|
||||
|
||||
const formData = reactive(emptyForm())
|
||||
|
||||
const macPattern = /^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/
|
||||
|
||||
const formRules = {
|
||||
ota_id: [{ required: true, message: '请选择 OTA 版本', trigger: 'change' }],
|
||||
mac: [
|
||||
{ required: true, message: '请输入 MAC 地址', trigger: 'blur' },
|
||||
{
|
||||
pattern: macPattern,
|
||||
message: 'MAC 格式不正确，示例: AA:BB:CC:DD:EE:FF',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function formatDateTime(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())}`
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
Object.assign(formData, emptyForm())
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
skip: (pagination.page - 1) * pagination.pageSize,
|
||||
limit: pagination.pageSize,
|
||||
mac: searchForm.mac || undefined,
|
||||
model: searchForm.model || undefined
|
||||
}
|
||||
if (typeof searchForm.ota_id === 'number') {
|
||||
params.ota_id = searchForm.ota_id
|
||||
}
|
||||
const res = await getBlackList(params)
|
||||
if (res.code === 1 && res.data) {
|
||||
tableData.value = res.data.items || []
|
||||
pagination.total = res.data.total || 0
|
||||
} else if (res.code === 2) {
|
||||
tableData.value = []
|
||||
pagination.total = 0
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadOtaOptions = async () => {
|
||||
try {
|
||||
const res = await getOtaList({ skip: 0, limit: 1000 })
|
||||
if (res.code === 1 && res.data) {
|
||||
otaOptions.value = res.data.items || []
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载 OTA 列表失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.ota_id = undefined
|
||||
searchForm.model = undefined
|
||||
searchForm.mac = ''
|
||||
pagination.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增黑名单'
|
||||
resetForm()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
dialogTitle.value = '编辑黑名单'
|
||||
resetForm()
|
||||
Object.assign(formData, {
|
||||
id: row.id,
|
||||
ota_id: row.ota_id,
|
||||
mac: row.mac
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定删除该黑名单记录（ID ${row.id}，MAC: ${row.mac}）吗？`,
|
||||
'提示',
|
||||
{
|
||||
type: 'warning',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消'
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
try {
|
||||
const res = await deleteBlackList(row.id)
|
||||
if (res.code === 1) {
|
||||
ElMessage.success('已删除')
|
||||
loadData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const data = {
|
||||
ota_id: formData.ota_id,
|
||||
mac: (formData.mac || '').trim()
|
||||
}
|
||||
const res = formData.id
|
||||
? await updateBlackList(formData.id, data)
|
||||
: await createBlackList(data)
|
||||
if (res.code === 1) {
|
||||
ElMessage.success(formData.id ? '更新成功' : '创建成功')
|
||||
dialogVisible.value = false
|
||||
loadData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '操作失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('操作失败')
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDialogClose = () => {
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const handleSizeChange = () => {
|
||||
loadData()
|
||||
}
|
||||
const handlePageChange = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
loadOtaOptions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blacklist-container {
|
||||
height: 100%;
|
||||
}
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.table-card {
|
||||
min-height: 500px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.blacklist-form {
|
||||
padding-top: 16px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="target-device-container">
|
||||
<el-card class="search-card">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="OTA 版本">
|
||||
<el-select
|
||||
v-model="searchForm.ota_id"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 260px"
|
||||
>
|
||||
<el-option
|
||||
v-for="ota in otaOptions"
|
||||
:key="ota.id"
|
||||
:label="`#${ota.id} - ${ota.verName} (${ota.model || '-'})`"
|
||||
:value="ota.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备型号">
|
||||
<el-select
|
||||
v-model="searchForm.model"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option label="Luxsin-X8" value="Luxsin-X8" />
|
||||
<el-option label="Luxsin-X9" value="Luxsin-X9" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="MAC 地址">
|
||||
<el-input
|
||||
v-model="searchForm.mac_addr"
|
||||
placeholder="模糊查询"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="table-card">
|
||||
<div class="card-header">
|
||||
<span class="title">定向升级列表</span>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增定向设备
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table-loading-host" v-loading="loading">
|
||||
<el-table :data="tableData" border stripe style="width: 100%">
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column label="OTA 版本" min-width="220" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.ota">#{{ row.ota.id }} - {{ row.ota.verName }} ({{ row.ota.model || '-' }})</span>
|
||||
<span v-else>OTA #{{ row.ota_id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mac_addr" label="MAC 地址" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.create_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="520px"
|
||||
destroy-on-close
|
||||
@close="handleDialogClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="110px"
|
||||
class="target-device-form"
|
||||
>
|
||||
<el-form-item label="OTA 版本" prop="ota_id">
|
||||
<el-select
|
||||
v-model="formData.ota_id"
|
||||
placeholder="请选择 OTA 版本"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="ota in otaOptions"
|
||||
:key="ota.id"
|
||||
:label="`#${ota.id} - ${ota.verName} (${ota.model || '-'})`"
|
||||
:value="ota.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="MAC 地址" prop="mac_addr">
|
||||
<el-input
|
||||
v-model="formData.mac_addr"
|
||||
placeholder="例如: AA:BB:CC:DD:EE:FF"
|
||||
maxlength="17"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Search, Refresh, Plus } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getOtaTargetDeviceList,
|
||||
createOtaTargetDevice,
|
||||
updateOtaTargetDevice,
|
||||
deleteOtaTargetDevice
|
||||
} from '@/api/otaTargetDevice'
|
||||
import { getOtaList } from '@/api/ota'
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增定向设备')
|
||||
const formRef = ref(null)
|
||||
|
||||
const searchForm = reactive({
|
||||
ota_id: undefined,
|
||||
model: undefined,
|
||||
mac_addr: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
const otaOptions = ref([])
|
||||
|
||||
function emptyForm() {
|
||||
return {
|
||||
id: null,
|
||||
ota_id: undefined,
|
||||
mac_addr: ''
|
||||
}
|
||||
}
|
||||
|
||||
const formData = reactive(emptyForm())
|
||||
|
||||
const macPattern = /^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/
|
||||
|
||||
const formRules = {
|
||||
ota_id: [{ required: true, message: '请选择 OTA 版本', trigger: 'change' }],
|
||||
mac_addr: [
|
||||
{ required: true, message: '请输入 MAC 地址', trigger: 'blur' },
|
||||
{
|
||||
pattern: macPattern,
|
||||
message: 'MAC 格式不正确，示例: AA:BB:CC:DD:EE:FF',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function formatDateTime(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())}`
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
Object.assign(formData, emptyForm())
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
skip: (pagination.page - 1) * pagination.pageSize,
|
||||
limit: pagination.pageSize,
|
||||
mac_addr: searchForm.mac_addr || undefined,
|
||||
model: searchForm.model || undefined
|
||||
}
|
||||
if (typeof searchForm.ota_id === 'number') {
|
||||
params.ota_id = searchForm.ota_id
|
||||
}
|
||||
const res = await getOtaTargetDeviceList(params)
|
||||
if (res.code === 1 && res.data) {
|
||||
tableData.value = res.data.items || []
|
||||
pagination.total = res.data.total || 0
|
||||
} else if (res.code === 2) {
|
||||
tableData.value = []
|
||||
pagination.total = 0
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadOtaOptions = async () => {
|
||||
try {
|
||||
const res = await getOtaList({ skip: 0, limit: 1000 })
|
||||
if (res.code === 1 && res.data) {
|
||||
otaOptions.value = res.data.items || []
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载 OTA 列表失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.ota_id = undefined
|
||||
searchForm.model = undefined
|
||||
searchForm.mac_addr = ''
|
||||
pagination.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增定向设备'
|
||||
resetForm()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
dialogTitle.value = '编辑定向设备'
|
||||
resetForm()
|
||||
Object.assign(formData, {
|
||||
id: row.id,
|
||||
ota_id: row.ota_id,
|
||||
mac_addr: row.mac_addr
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定删除该定向设备（ID ${row.id}，MAC: ${row.mac_addr}）吗？`,
|
||||
'提示',
|
||||
{
|
||||
type: 'warning',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消'
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
try {
|
||||
const res = await deleteOtaTargetDevice(row.id)
|
||||
if (res.code === 1) {
|
||||
ElMessage.success('已删除')
|
||||
loadData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const data = {
|
||||
ota_id: formData.ota_id,
|
||||
mac_addr: (formData.mac_addr || '').trim()
|
||||
}
|
||||
const res = formData.id
|
||||
? await updateOtaTargetDevice(formData.id, data)
|
||||
: await createOtaTargetDevice(data)
|
||||
if (res.code === 1) {
|
||||
ElMessage.success(formData.id ? '更新成功' : '创建成功')
|
||||
dialogVisible.value = false
|
||||
loadData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '操作失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
ElMessage.error('操作失败')
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDialogClose = () => {
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const handleSizeChange = () => {
|
||||
loadData()
|
||||
}
|
||||
const handlePageChange = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
loadOtaOptions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.target-device-container {
|
||||
height: 100%;
|
||||
}
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.table-card {
|
||||
min-height: 500px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.target-device-form {
|
||||
padding-top: 16px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -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