fix: 优化界面以及更新接口
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 1m27s

This commit is contained in:
sexygoat
2026-04-15 11:54:43 +08:00
parent 0d0b5ec14a
commit 91d7d4c21f
30 changed files with 1863 additions and 1742 deletions

View File

@@ -4,48 +4,33 @@ import { getUserInfo } from '@/api/auth'
import { getEnterpriseDevices } from '@/api/enterprise'
import type { DeviceInfo } from '@/api/enterprise'
// 企业ID (用于调用企业接口)
const enterpriseId = ref<number>(0)
// 设备列表
const deviceList = ref<DeviceInfo[]>([])
// 加载状态
const loading = ref(false)
// 搜索关键词
const searchKeyword = ref('')
// 不再需要状态筛选
// 直接显示设备列表 (搜索由后端处理)
const filteredDevices = computed(() => {
return deviceList.value
})
// 统计数据
const stats = computed(() => {
const total = deviceList.value.length
return { total }
})
// 页面加载
onMounted(() => {
loadEnterpriseDevices()
})
// 加载企业设备列表
async function loadEnterpriseDevices() {
loading.value = true
try {
// 1. 获取企业ID (优先从本地存储获取)
if (!enterpriseId.value) {
const userInfo = uni.getStorageSync('user_info')
if (userInfo?.enterprise_id) {
enterpriseId.value = userInfo.enterprise_id
} else {
// 如果本地存储没有,则调用接口获取
const apiUserInfo = await getUserInfo()
if (!apiUserInfo.enterprise_id) {
throw new Error('未找到企业ID')
@@ -54,12 +39,10 @@ async function loadEnterpriseDevices() {
}
}
// 2. 获取企业设备列表 (支持分页和虚拟号搜索)
const params: any = {
page: 1,
page_size: 100, // 暂时获取更多数据,因为没有分页加载
page_size: 100,
}
// 添加虚拟号搜索支持
if (searchKeyword.value) {
params.virtual_no = searchKeyword.value
}
@@ -69,35 +52,21 @@ async function loadEnterpriseDevices() {
}
catch (error: any) {
console.error('加载企业设备列表失败:', error)
// 如果是前端逻辑错误(非 API 错误),需要手动显示提示
if (error instanceof Error && error.message && !error.statusCode) {
uni.$u.toast(error.message)
}
// API 请求错误已由拦截器统一处理
}
finally {
loading.value = false
}
}
// 查看设备详情
function viewDeviceDetail(device: any) {
// 跳转到资产详情页
uni.navigateTo({
url: `/pages/agent-system/asset-search/index?virtual_no=${device.virtual_no}`,
})
}
// 获取设备型号图标
function getDeviceModelIcon(model: string) {
// 根据设备型号返回不同图标
if (model?.includes('WM')) {
return 'i-mdi-router-wireless'
}
return 'i-mdi-devices'
}
// 格式化授权时间
function formatAuthorizedTime(time: string) {
if (!time) return '-'
try {
@@ -111,178 +80,85 @@ function formatAuthorizedTime(time: string) {
}
}
// 清空搜索
function clearSearch() {
searchKeyword.value = ''
deviceList.value = []
loadEnterpriseDevices()
}
// 执行搜索
function handleSearch() {
deviceList.value = []
loadEnterpriseDevices()
}
// 刷新列表
function refreshList() {
deviceList.value = []
loadEnterpriseDevices()
}
</script>
<template>
<view class="bg-[#fafafa] min-h-screen pb-safe">
<!-- 加载中 -->
<view class="bg-[var(--bg-page)] min-h-screen pb-safe">
<view v-if="loading" class="pt-20 center">
<i class="i-mdi-loading animate-spin text-40px text-[#999]" />
<text class="text-14px text-[var(--text-secondary)]">加载中...</text>
</view>
<!-- 内容区域 -->
<view v-else class="px-4 pt-4">
<!-- 搜索框 -->
<view class="mb-3">
<view class="bg-white rounded-12px shadow-[0_2px_12px_rgba(0,0,0,0.06)] overflow-hidden">
<view class="flex items-center px-4 py-3 gap-2">
<i class="i-mdi-magnify text-20px text-[#999]" />
<input
v-model="searchKeyword"
class="flex-1 text-14px text-[#212121] placeholder:text-[#999]"
placeholder="搜索设备名称 / 设备型号 / 虚拟号"
@confirm="handleSearch"
>
<view
v-if="searchKeyword"
class="ml-1 min-w-32px min-h-32px flex items-center justify-center"
@click="clearSearch"
>
<i class="i-mdi-close-circle text-18px text-[#999]" />
</view>
<view
class="px-4 py-2 bg-[#ff6700] text-white text-13px font-600 rounded-8px min-h-32px flex items-center justify-center"
@click="handleSearch"
>
搜索
</view>
<view v-else>
<view class="bg-brand px-4 py-3 mx-4 mt-4 rounded-12px">
<text class="text-11px text-white/60">企业授权设备</text>
<text class="text-24px font-700 text-white block mt-1">{{ stats.total }}</text>
</view>
<view class="px-4 mt-4">
<view class="flex items-center gap-2 mb-3">
<input
v-model="searchKeyword"
class="flex-1 h-40px bg-[var(--bg-container)] rounded-full px-4 text-14px text-[var(--text-primary)]"
placeholder="搜索设备名称 / 设备型号 / 虚拟号"
placeholder-class="text-[var(--text-quaternary)]"
@confirm="handleSearch"
>
<view
class="px-4 h-40px bg-[var(--brand-primary)] text-white text-14px rounded-full flex items-center justify-center"
@click="handleSearch"
>
搜索
</view>
</view>
</view>
<!-- 统计卡片 -->
<view class="bg-white rounded-12px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3">
<view class="flex items-center justify-between">
<view class="flex items-center gap-2">
<i class="i-mdi-devices text-24px text-[#ff6700]" />
<text class="text-15px font-600 text-[#212121]">
企业授权设备
</text>
</view>
<view class="text-right">
<text class="text-12px text-[#999] block">
总计
</text>
<text class="text-24px font-700 text-[#ff6700]">
{{ stats.total }}
</text>
</view>
</view>
</view>
<!-- 设备列表 -->
<view v-if="filteredDevices.length > 0" class="space-y-3 pb-4">
<view
v-for="device in filteredDevices"
:key="device.virtual_no"
class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] overflow-hidden"
@click="viewDeviceDetail(device)"
>
<!-- 顶部状态栏 -->
<view class="px-4 pt-4 pb-3 border-b-1px border-[#f5f5f5]">
<view class="flex items-center justify-between mb-2">
<view class="flex items-center gap-2">
<i
:class="[
getDeviceModelIcon(device.device_model),
'text-24px text-[#212121]',
]"
/>
<view>
<text class="text-16px font-700 text-[#212121] block">
{{ device.device_name || '-' }}
</text>
<text class="text-11px text-[#999]">
{{ device.device_model || '-' }}
</text>
</view>
<view class="px-4">
<view v-if="filteredDevices.length > 0" class="space-y-3 pb-4">
<view
v-for="device in filteredDevices"
:key="device.virtual_no"
class="bg-[var(--bg-container)] rounded-12px p-4"
@click="viewDeviceDetail(device)"
>
<view class="flex items-center justify-between">
<view>
<text class="text-15px font-600 text-[var(--text-primary)]">{{ device.device_name || '-' }}</text>
<text class="text-12px text-[var(--text-tertiary)] ml-2">{{ device.device_model || '-' }}</text>
</view>
<view class="px-3 py-1 rounded-8px text-12px font-600 bg-[#e8f5e9] text-[#2e7d32]">
<view class="px-3 py-1 rounded-full text-12px font-600 bg-[#e8f5e9] text-[#52c41a]">
已授权
</view>
</view>
<text class="text-12px text-[#999]">
<view class="mt-3 text-12px text-[var(--text-tertiary)]">
绑定卡数: {{ device.card_count || 0 }}
</text>
</view>
<!-- 设备信息 -->
<view class="px-4 py-3">
<view class="space-y-2">
<!-- 虚拟号 -->
<view class="flex items-start justify-between">
<text class="text-12px text-[#999] w-70px">虚拟号</text>
<text class="flex-1 text-13px font-600 text-[#212121] text-right break-all">
{{ device.virtual_no || '-' }}
</text>
</view>
<!-- 设备型号 -->
<view class="flex items-start justify-between">
<text class="text-12px text-[#999] w-70px">设备型号</text>
<text class="flex-1 text-13px text-[#212121] text-right">
{{ device.device_model || '-' }}
</text>
</view>
<!-- 绑定卡数 -->
<view class="flex items-start justify-between">
<text class="text-12px text-[#999] w-70px">绑定卡数</text>
<text class="flex-1 text-13px font-600 text-[#ff6700] text-right">
{{ device.card_count || 0 }}
</text>
</view>
</view>
</view>
<!-- 授权时间 -->
<view class="px-4 pb-4">
<view class="bg-[#f5f5f5] rounded-12px p-3">
<view class="mt-3 text-13px text-[var(--text-secondary)]">
<text class="mr-4">虚拟号: {{ device.virtual_no || '-' }}</text>
</view>
<view class="mt-3 bg-[var(--bg-muted)] rounded-8px p-3">
<view class="flex items-center justify-between">
<text class="text-11px text-[#999]">
授权时间
</text>
<text class="text-12px font-600 text-[#212121]">
<text class="text-12px text-[var(--text-secondary)]">授权时间</text>
<text class="text-12px font-600 text-[var(--text-primary)]">
{{ formatAuthorizedTime(device.authorized_at) }}
</text>
</view>
</view>
</view>
</view>
<view v-else class="pt-16 center">
<text class="text-14px text-[var(--text-secondary)]">{{ searchKeyword ? '未找到匹配的设备' : '暂无设备数据' }}</text>
</view>
</view>
<!-- 空状态 -->
<view v-else class="pt-20 center flex-col">
<i class="i-mdi-devices-off text-80px text-[#ddd] mb-4" />
<text class="text-15px text-[#999] mb-2">
{{ searchKeyword ? '未找到匹配的设备' : '暂无设备数据' }}
</text>
<text class="text-12px text-[#ccc]">
{{ searchKeyword ? '请尝试其他搜索关键词' : '请联系管理员添加设备' }}
</text>
</view>
<!-- 底部留白 -->
<view class="h-8" />
<view class="h-16" />
</view>
</view>
</template>
@@ -297,21 +173,4 @@ function refreshList() {
.space-y-3 > view:not(:last-child) {
margin-bottom: 12px;
}
.space-y-2 > view:not(:last-child) {
margin-bottom: 8px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
</style>