fetch(add): 账户管理

This commit is contained in:
sexygoat
2026-01-23 17:18:24 +08:00
parent 339abca4c0
commit b53fea43c6
93 changed files with 7094 additions and 3153 deletions

View File

@@ -1,36 +1,17 @@
<template>
<div class="page-content">
<!-- 操作提示 -->
<ElAlert type="info" :closable="false" style="margin-bottom: 20px">
<template #title>
<div style="line-height: 1.8">
<p><strong>资产分配说明</strong></p>
<p>1. <strong>网卡批量分配</strong>仅分配选中的网卡资产</p>
<p>2. <strong>设备批量分配</strong>仅分配选中的设备资产</p>
<p>3. <strong>网卡+设备分配</strong>如果网卡有绑定设备将同时分配网卡和设备</p>
<p>4. 分配后资产所有权将转移至目标代理商</p>
</div>
</template>
</ElAlert>
<!-- 分配模式选择 -->
<ElCard shadow="never" style="margin-bottom: 20px">
<ElRadioGroup v-model="assignMode" size="large">
<ElRadioButton value="sim">网卡批量分配</ElRadioButton>
<ElRadioButton value="device">设备批量分配</ElRadioButton>
<ElRadioButton value="both">网卡+设备分配</ElRadioButton>
</ElRadioGroup>
</ElCard>
<!-- 网卡分配 -->
<ElCard v-if="assignMode === 'sim' || assignMode === 'both'" shadow="never" style="margin-bottom: 20px">
<ElCard v-if="assignMode === 'sim'" shadow="never" style="margin-bottom: 20px">
<template #header>
<div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 500">选择网卡资产</span>
<ElButton type="primary" size="small" :disabled="selectedSims.length === 0" @click="showAssignDialog('sim')">
分配选中的 {{ selectedSims.length }} 张网卡
</ElButton>
</div>
<span style="font-weight: 500">选择网卡资产</span>
</template>
<ElRow :gutter="12" style="margin-bottom: 16px">
@@ -50,9 +31,8 @@
</ElCol>
</ElRow>
<ArtTable :data="filteredSimData" index @selection-change="handleSimSelectionChange">
<ArtTable :data="filteredSimData" index>
<template #default>
<ElTableColumn type="selection" width="55" />
<ElTableColumn label="ICCID" prop="iccid" width="200" />
<ElTableColumn label="IMSI" prop="imsi" width="180" />
<ElTableColumn label="运营商" prop="operator" width="100">
@@ -63,7 +43,9 @@
<ElTableColumn label="状态" prop="status" width="100">
<template #default="scope">
<ElTag v-if="scope.row.status === 'active'" type="success" size="small">激活</ElTag>
<ElTag v-else-if="scope.row.status === 'inactive'" type="info" size="small">未激活</ElTag>
<ElTag v-else-if="scope.row.status === 'inactive'" type="info" size="small"
>未激活</ElTag
>
<ElTag v-else type="warning" size="small">停机</ElTag>
</template>
</ElTableColumn>
@@ -84,12 +66,7 @@
<!-- 设备分配 -->
<ElCard v-if="assignMode === 'device'" shadow="never">
<template #header>
<div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 500">选择设备资产</span>
<ElButton type="primary" size="small" :disabled="selectedDevices.length === 0" @click="showAssignDialog('device')">
分配选中的 {{ selectedDevices.length }} 个设备
</ElButton>
</div>
<span style="font-weight: 500">选择设备资产</span>
</template>
<ElRow :gutter="12" style="margin-bottom: 16px">
@@ -109,9 +86,8 @@
</ElCol>
</ElRow>
<ArtTable :data="filteredDeviceData" index @selection-change="handleDeviceSelectionChange">
<ArtTable :data="filteredDeviceData" index>
<template #default>
<ElTableColumn type="selection" width="55" />
<ElTableColumn label="设备编号" prop="deviceCode" width="180" />
<ElTableColumn label="设备名称" prop="deviceName" min-width="180" />
<ElTableColumn label="设备类型" prop="deviceType" width="120">
@@ -129,7 +105,9 @@
</ElTableColumn>
<ElTableColumn label="在线状态" prop="onlineStatus" width="100">
<template #default="scope">
<ElTag v-if="scope.row.onlineStatus === 'online'" type="success" size="small">在线</ElTag>
<ElTag v-if="scope.row.onlineStatus === 'online'" type="success" size="small"
>在线</ElTag
>
<ElTag v-else type="info" size="small">离线</ElTag>
</template>
</ElTableColumn>
@@ -143,21 +121,23 @@
<ElForm ref="formRef" :model="assignForm" :rules="assignRules" label-width="120px">
<ElFormItem label="分配类型">
<ElTag v-if="assignForm.type === 'sim'" type="primary">网卡资产</ElTag>
<ElTag v-else-if="assignForm.type === 'device'" type="success">设备资产</ElTag>
<ElTag v-else type="warning">网卡+设备</ElTag>
<ElTag v-else type="success">设备资产</ElTag>
</ElFormItem>
<ElFormItem label="分配数量">
<div>
<span v-if="assignForm.type === 'sim'" style="font-size: 18px; font-weight: 600; color: var(--el-color-primary)">
<span
v-if="assignForm.type === 'sim'"
style="font-size: 18px; font-weight: 600; color: var(--el-color-primary)"
>
{{ selectedSims.length }} 张网卡
</span>
<span v-else-if="assignForm.type === 'device'" style="font-size: 18px; font-weight: 600; color: var(--el-color-success)">
<span
v-else
style="font-size: 18px; font-weight: 600; color: var(--el-color-success)"
>
{{ selectedDevices.length }} 个设备
</span>
<span v-else style="font-size: 18px; font-weight: 600">
{{ selectedSims.length }} 张网卡 + {{ selectedSims.filter(s => s.deviceCode).length }} 个设备
</span>
</div>
</ElFormItem>
@@ -185,10 +165,6 @@
placeholder="请输入分配说明"
/>
</ElFormItem>
<ElAlert type="warning" :closable="false">
分配后资产所有权将转移至目标代理商原账号将无法管理这些资产
</ElAlert>
</ElForm>
<template #footer>
@@ -198,31 +174,6 @@
</div>
</template>
</ElDialog>
<!-- 分配记录 -->
<ElCard shadow="never" style="margin-top: 20px">
<template #header>
<span style="font-weight: 500">最近分配记录</span>
</template>
<ArtTable :data="assignHistory" index>
<template #default>
<ElTableColumn label="分配批次号" prop="batchNo" width="180" />
<ElTableColumn label="分配类型" prop="type" width="120">
<template #default="scope">
<ElTag v-if="scope.row.type === 'sim'" type="primary" size="small">网卡</ElTag>
<ElTag v-else-if="scope.row.type === 'device'" type="success" size="small">设备</ElTag>
<ElTag v-else type="warning" size="small">网卡+设备</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="分配数量" prop="quantity" width="100" />
<ElTableColumn label="目标代理商" prop="targetAgentName" min-width="150" />
<ElTableColumn label="分配说明" prop="remark" min-width="200" show-overflow-tooltip />
<ElTableColumn label="分配时间" prop="assignTime" width="180" />
<ElTableColumn label="操作人" prop="operator" width="100" />
</template>
</ArtTable>
</ElCard>
</div>
</template>
@@ -323,34 +274,13 @@
}
])
const assignHistory = ref([
{
id: '1',
batchNo: 'ASSIGN202601090001',
type: 'sim',
quantity: 100,
targetAgentName: '华东区总代理',
remark: '批量分配给华东区',
assignTime: '2026-01-09 10:00:00',
operator: 'admin'
},
{
id: '2',
batchNo: 'ASSIGN202601080001',
type: 'both',
quantity: 50,
targetAgentName: '华南区代理',
remark: '网卡和设备一起分配',
assignTime: '2026-01-08 14:00:00',
operator: 'admin'
}
])
const filteredSimData = computed(() => {
let data = simMockData.value
if (simSearchQuery.value) {
data = data.filter(
(item) => item.iccid.includes(simSearchQuery.value) || item.imsi.includes(simSearchQuery.value)
(item) =>
item.iccid.includes(simSearchQuery.value) || item.imsi.includes(simSearchQuery.value)
)
}
if (simStatusFilter.value) {
@@ -363,7 +293,9 @@
let data = deviceMockData.value
if (deviceSearchQuery.value) {
data = data.filter(
(item) => item.deviceCode.includes(deviceSearchQuery.value) || item.deviceName.includes(deviceSearchQuery.value)
(item) =>
item.deviceCode.includes(deviceSearchQuery.value) ||
item.deviceName.includes(deviceSearchQuery.value)
)
}
if (deviceTypeFilter.value) {
@@ -401,28 +333,6 @@
if (!formRef.value) return
await formRef.value.validate((valid) => {
if (valid) {
const agent = agentList.value.find((a) => a.id === assignForm.targetAgentId)
let quantity = 0
if (assignForm.type === 'sim') {
quantity = selectedSims.value.length
} else if (assignForm.type === 'device') {
quantity = selectedDevices.value.length
} else {
quantity = selectedSims.value.length
}
assignHistory.value.unshift({
id: Date.now().toString(),
batchNo: `ASSIGN${Date.now()}`,
type: assignForm.type,
quantity,
targetAgentName: agent?.agentName || '',
remark: assignForm.remark,
assignTime: new Date().toLocaleString('zh-CN'),
operator: 'admin'
})
assignDialogVisible.value = false
formRef.value.resetFields()
selectedSims.value = []

View File

@@ -36,7 +36,9 @@
<ElCard shadow="hover" class="stat-card">
<div class="stat-content">
<div class="stat-label">待处理</div>
<div class="stat-value" style="color: var(--el-color-warning)">{{ statistics.pending }}</div>
<div class="stat-value" style="color: var(--el-color-warning)">{{
statistics.pending
}}</div>
</div>
<el-icon class="stat-icon" style="color: var(--el-color-warning)"><Clock /></el-icon>
</ElCard>
@@ -45,7 +47,9 @@
<ElCard shadow="hover" class="stat-card">
<div class="stat-content">
<div class="stat-label">处理中</div>
<div class="stat-value" style="color: var(--el-color-primary)">{{ statistics.processing }}</div>
<div class="stat-value" style="color: var(--el-color-primary)">{{
statistics.processing
}}</div>
</div>
<el-icon class="stat-icon" style="color: var(--el-color-primary)"><Loading /></el-icon>
</ElCard>
@@ -54,16 +58,22 @@
<ElCard shadow="hover" class="stat-card">
<div class="stat-content">
<div class="stat-label">已完成</div>
<div class="stat-value" style="color: var(--el-color-success)">{{ statistics.completed }}</div>
<div class="stat-value" style="color: var(--el-color-success)">{{
statistics.completed
}}</div>
</div>
<el-icon class="stat-icon" style="color: var(--el-color-success)"><CircleCheck /></el-icon>
<el-icon class="stat-icon" style="color: var(--el-color-success)"
><CircleCheck
/></el-icon>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<ElCard shadow="hover" class="stat-card">
<div class="stat-content">
<div class="stat-label">已拒绝</div>
<div class="stat-value" style="color: var(--el-color-danger)">{{ statistics.rejected }}</div>
<div class="stat-value" style="color: var(--el-color-danger)">{{
statistics.rejected
}}</div>
</div>
<el-icon class="stat-icon" style="color: var(--el-color-danger)"><CircleClose /></el-icon>
</ElCard>
@@ -186,14 +196,17 @@
<ElTag v-if="validationResult === 'success'" type="success" size="small">
验证通过该卡可用
</ElTag>
<ElTag v-else type="danger" size="small">
验证失败{{ validationMessage }}
</ElTag>
<ElTag v-else type="danger" size="small"> 验证失败{{ validationMessage }} </ElTag>
</div>
</ElFormItem>
<ElFormItem label="备注">
<ElInput v-model="fillForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
<ElInput
v-model="fillForm.remark"
type="textarea"
:rows="3"
placeholder="请输入备注信息"
/>
</ElFormItem>
<ElAlert type="info" :closable="false">
@@ -235,7 +248,13 @@
<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Clock, Loading as LoadingIcon, CircleCheck, CircleClose } from '@element-plus/icons-vue'
import {
View,
Clock,
Loading as LoadingIcon,
CircleCheck,
CircleClose
} from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
defineOptions({ name: 'CardReplacementRequest' })
@@ -502,9 +521,9 @@
.stat-content {
.stat-label {
margin-bottom: 8px;
font-size: 14px;
color: var(--el-text-color-secondary);
margin-bottom: 8px;
}
.stat-value {