ota 拓展功能-黑名单&灰色定向上线
This commit is contained in:
eafonyang
@@ -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>
|
||||
Reference in New Issue
Block a user