fetch(add): 账户管理
This commit is contained in:
@@ -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 = []
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user