luo/gt-agent-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ui
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 59s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-25 15:21:40 +08:00
parent 63fe81b3da
commit 79a8edd455
1 changed files with 108 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/pages/agent-system/enterprise-devices/index.vue
View File

@@ -8,10 +8,9 @@ const enterpriseId = ref<number>(0)
const deviceList = ref<DeviceInfo[]>([]) const deviceList = ref<DeviceInfo[]>([])
const loading = ref(false) const loading = ref(false)
const searchKeyword = ref('') const searchKeyword = ref('')
const page = ref(1)
const filteredDevices = computed(() => { const pageSize = 20
return deviceList.value const hasMore = ref(true)
})
const stats = computed(() => { const stats = computed(() => {
const total = deviceList.value.length const total = deviceList.value.length
@@ -22,7 +21,13 @@ onMounted(() => {
loadEnterpriseDevices() loadEnterpriseDevices()
}) })
async function loadEnterpriseDevices() { async function loadEnterpriseDevices(isRefresh = false) {
if (isRefresh) {
page.value = 1
hasMore.value = true
deviceList.value = []
}
loading.value = true loading.value = true
try { try {
@@ -40,23 +45,29 @@ async function loadEnterpriseDevices() {
} }
const params: any = { const params: any = {
page: 1, page: page.value,
page_size: 100, page_size: pageSize,
} }
if (searchKeyword.value) { if (searchKeyword.value) {
params.virtual_no = searchKeyword.value params.virtual_no = searchKeyword.value
} }
const devicesData = await getEnterpriseDevices(enterpriseId.value, params) const devicesData = await getEnterpriseDevices(enterpriseId.value, params)
deviceList.value = devicesData?.items || [] const items = devicesData?.items || []
} if (page.value === 1) {
catch (error: any) { deviceList.value = items
} else {
deviceList.value.push(...items)
}
hasMore.value = items.length >= pageSize
page.value++
} catch (error: any) {
console.error('加载企业设备列表失败:', error) console.error('加载企业设备列表失败:', error)
if (error instanceof Error && error.message && !error.statusCode) { if (error instanceof Error && error.message && !error.statusCode) {
uni.$u.toast(error.message) uni.$u.toast(error.message)
} }
} } finally {
finally {
loading.value = false loading.value = false
} }
} }
@@ -81,96 +92,112 @@ function formatAuthorizedTime(time: string) {
} }
function handleSearch() { function handleSearch() {
deviceList.value = [] loadEnterpriseDevices(true)
loadEnterpriseDevices() }
function loadMore() {
if (hasMore.value && !loading.value) {
loadEnterpriseDevices()
}
}
function onScroll(e: any) {
const { scrollTop, scrollHeight, clientHeight } = e.target
if (scrollHeight - scrollTop - clientHeight < 100) {
loadMore()
}
} }
</script> </script>
<template> <template>
<view class="bg-[var(--bg-page)] min-h-screen pb-safe"> <view class="bg-page min-h-screen flex flex-col">
<view v-if="loading" class="pt-20 center"> <!-- 搜索区域 -->
<text class="text-14px text-[var(--text-secondary)]">加载中...</text> <view class="bg-white px-4 pt-4 pb-3">
<!-- 搜索框 -->
<view class="relative flex items-center">
<input
v-model="searchKeyword"
class="flex-1 h-10 bg-[#f1f5f9] rounded-full pl-4 pr-12 text-sm text-[#1e293b] placeholder-[#94a3b8]"
placeholder="搜索设备名称 / 设备型号 / 虚拟号"
@confirm="handleSearch"
/>
<view class="absolute right-1 flex items-center">
<view v-if="searchKeyword" class="w-8 h-8 flex items-center justify-center text-[#94a3b8]"
@click="searchKeyword = ''">
<i class="i-mdi-close-circle text-lg" />
</view>
<view class="w-8 h-8 flex items-center justify-center text-brand" @click="handleSearch">
<i class="i-mdi-magnify text-xl" />
</view>
</view>
</view>
<!-- 统计信息 -->
<view class="flex items-center justify-around gap-3 mt-3">
<view class="flex items-center gap-1">
<text class="text-12px text-[#999]">设备总数</text>
<text class="text-14px font-700 text-brand">{{ stats.total }}</text>
</view>
</view>
</view> </view>
<view v-else> <!-- 列表内容 -->
<view class="bg-brand px-4 py-3 mx-4 mt-4 rounded-12px"> <view class="flex-1 overflow-y-auto min-h-0" @scroll="onScroll">
<text class="text-11px text-white/60">企业授权设备</text> <view v-if="loading && deviceList.length === 0" class="pt-20 flex justify-center">
<text class="text-24px font-700 text-white block mt-1">{{ stats.total }}</text> <text class="text-14px text-[#64748b]">加载中...</text>
</view> </view>
<view class="px-4 mt-4"> <view v-else-if="deviceList.length > 0" class="px-4 pb-4">
<view class="flex items-center gap-2 mb-3"> <view
<input v-for="device in deviceList"
v-model="searchKeyword" :key="device.virtual_no"
class="flex-1 h-40px bg-[var(--bg-container)] rounded-full px-4 text-14px text-[var(--text-primary)]" class="bg-white rounded-12px p-4 mt-3"
placeholder="搜索设备名称 / 设备型号 / 虚拟号" @click="viewDeviceDetail(device)"
placeholder-class="text-[var(--text-quaternary)]" >
@confirm="handleSearch" <view class="flex items-center justify-between mb-2">
> <view class="flex items-center gap-2">
<view <text class="text-15px font-600 text-[#212121]">{{ device.device_name || '-' }}</text>
class="px-4 h-40px bg-[var(--brand-primary)] text-white text-14px rounded-full flex items-center justify-center" <text class="text-12px text-[#999]">{{ device.device_model || '-' }}</text>
@click="handleSearch" </view>
> <view class="px-3 py-1 rounded-full text-12px font-600 bg-[#e8f5e9] text-[#52c41a]">
搜索 已授权
</view>
</view> </view>
</view>
</view>
<view class="px-4"> <view class="text-12px text-[#666] mb-2">
<view v-if="filteredDevices.length > 0" class="space-y-3 pb-4"> 绑定卡数: {{ device.card_count || 0 }} 张
<view </view>
v-for="device in filteredDevices"
:key="device.virtual_no" <view class="text-12px text-[#999] mb-2">
class="bg-[var(--bg-container)] rounded-12px p-4" 虚拟号: {{ device.virtual_no || '-' }}
@click="viewDeviceDetail(device)" </view>
>
<view class="bg-[#f5f5f5] rounded-8px p-3">
<view class="flex items-center justify-between"> <view class="flex items-center justify-between">
<view> <text class="text-12px text-[#666]">授权时间</text>
<text class="text-15px font-600 text-[var(--text-primary)]">{{ device.device_name || '-' }}</text> <text class="text-12px font-600 text-[#212121]">
<text class="text-12px text-[var(--text-tertiary)] ml-2">{{ device.device_model || '-' }}</text> {{ formatAuthorizedTime(device.authorized_at) }}
</view> </text>
<view class="px-3 py-1 rounded-full text-12px font-600 bg-[#e8f5e9] text-[#52c41a]">
已授权
</view>
</view>
<view class="mt-3 text-12px text-[var(--text-tertiary)]">
绑定卡数: {{ device.card_count || 0 }} 张
</view>
<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-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>
</view> </view>
<view v-else class="pt-16 center"> <view v-if="loading" class="py-4 text-center">
<text class="text-14px text-[var(--text-secondary)]">{{ searchKeyword ? '未找到匹配的设备' : '暂无设备数据' }}</text> <text class="text-sm text-[#64748b]">加载中...</text>
</view>
<view v-else-if="!hasMore" class="py-4 text-center">
<text class="text-sm text-[#94a3b8]">没有更多了</text>
</view> </view>
</view> </view>
<view class="h-16" /> <view v-else class="pt-16 flex flex-col items-center">
<i class="i-mdi-package-variant-closed text-6xl text-[#cbd5e1] mb-3" />
<text class="text-base text-[#64748b] mb-1">暂无数据</text>
<text class="text-sm text-[#94a3b8]">{{ searchKeyword ? '未找到相关结果' : '暂无设备数据' }}</text>
</view>
</view> </view>
</view> </view>
</template> </template>
<style scoped> <style scoped>
.center {
display: flex;
align-items: center;
justify-content: center;
}
.space-y-3 > view:not(:last-child) {
margin-bottom: 12px;
}
</style> </style>