543 lines
18 KiB
Vue
543 lines
18 KiB
Vue
<template>
|
||
<div class="page-content">
|
||
<!-- 搜索和筛选区 -->
|
||
<ElRow :gutter="12">
|
||
<ElCol :xs="24" :sm="12" :lg="6">
|
||
<ElInput v-model="searchQuery" placeholder="申请单号/ICCID" clearable />
|
||
</ElCol>
|
||
<ElCol :xs="24" :sm="12" :lg="6">
|
||
<ElSelect v-model="statusFilter" placeholder="状态筛选" clearable style="width: 100%">
|
||
<ElOption label="全部" value="" />
|
||
<ElOption label="待处理" value="pending" />
|
||
<ElOption label="处理中" value="processing" />
|
||
<ElOption label="已完成" value="completed" />
|
||
<ElOption label="已拒绝" value="rejected" />
|
||
</ElSelect>
|
||
</ElCol>
|
||
<ElCol :xs="24" :sm="12" :lg="6">
|
||
<ElDatePicker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width: 100%"
|
||
/>
|
||
</ElCol>
|
||
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
||
<ElButton v-ripple @click="handleSearch">搜索</ElButton>
|
||
<ElButton v-ripple @click="exportData">导出</ElButton>
|
||
</ElCol>
|
||
</ElRow>
|
||
|
||
<!-- 统计卡片 -->
|
||
<ElRow :gutter="20" style="margin: 20px 0">
|
||
<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-warning)">{{
|
||
statistics.pending
|
||
}}</div>
|
||
</div>
|
||
<el-icon class="stat-icon" style="color: var(--el-color-warning)"><Clock /></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-primary)">{{
|
||
statistics.processing
|
||
}}</div>
|
||
</div>
|
||
<el-icon class="stat-icon" style="color: var(--el-color-primary)"><Loading /></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-success)">{{
|
||
statistics.completed
|
||
}}</div>
|
||
</div>
|
||
<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>
|
||
<el-icon class="stat-icon" style="color: var(--el-color-danger)"><CircleClose /></el-icon>
|
||
</ElCard>
|
||
</ElCol>
|
||
</ElRow>
|
||
|
||
<!-- 换卡申请列表 -->
|
||
<ArtTable :data="filteredData" index>
|
||
<template #default>
|
||
<ElTableColumn label="申请单号" prop="requestNo" width="180" />
|
||
<ElTableColumn label="旧卡ICCID" prop="oldIccid" width="200" />
|
||
<ElTableColumn label="申请人" prop="applicant" width="120" />
|
||
<ElTableColumn label="联系电话" prop="phone" width="130" />
|
||
<ElTableColumn label="换卡原因" prop="reason" min-width="180" show-overflow-tooltip />
|
||
<ElTableColumn label="新卡ICCID" prop="newIccid" width="200">
|
||
<template #default="scope">
|
||
<ElTag v-if="scope.row.newIccid" type="success" size="small">
|
||
{{ scope.row.newIccid }}
|
||
</ElTag>
|
||
<span v-else style="color: var(--el-text-color-secondary)">待填充</span>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="状态" prop="status" width="100">
|
||
<template #default="scope">
|
||
<ElTag v-if="scope.row.status === 'pending'" type="warning">待处理</ElTag>
|
||
<ElTag v-else-if="scope.row.status === 'processing'" type="primary">处理中</ElTag>
|
||
<ElTag v-else-if="scope.row.status === 'completed'" type="success">已完成</ElTag>
|
||
<ElTag v-else type="danger">已拒绝</ElTag>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="申请时间" prop="applyTime" width="180" />
|
||
<ElTableColumn fixed="right" label="操作" width="240">
|
||
<template #default="scope">
|
||
<el-button link :icon="View" @click="viewDetail(scope.row)">详情</el-button>
|
||
<el-button
|
||
v-if="scope.row.status === 'pending'"
|
||
link
|
||
type="primary"
|
||
@click="handleProcess(scope.row)"
|
||
>
|
||
处理
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.status === 'processing'"
|
||
link
|
||
type="success"
|
||
@click="fillNewIccid(scope.row)"
|
||
>
|
||
填充新卡
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.status === 'pending'"
|
||
link
|
||
type="danger"
|
||
@click="handleReject(scope.row)"
|
||
>
|
||
拒绝
|
||
</el-button>
|
||
</template>
|
||
</ElTableColumn>
|
||
</template>
|
||
</ArtTable>
|
||
|
||
<!-- 详情对话框 -->
|
||
<ElDialog v-model="detailDialogVisible" title="换卡申请详情" width="800px" align-center>
|
||
<ElDescriptions :column="2" border>
|
||
<ElDescriptionsItem label="申请单号">{{ currentRequest.requestNo }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="申请人">{{ currentRequest.applicant }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="联系电话">{{ currentRequest.phone }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="申请时间">{{ currentRequest.applyTime }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="旧卡ICCID" :span="2">
|
||
<ElTag type="warning">{{ currentRequest.oldIccid }}</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="新卡ICCID" :span="2">
|
||
<ElTag v-if="currentRequest.newIccid" type="success">{{ currentRequest.newIccid }}</ElTag>
|
||
<span v-else style="color: var(--el-text-color-secondary)">待填充</span>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="换卡原因" :span="2">
|
||
{{ currentRequest.reason }}
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="详细说明" :span="2">
|
||
{{ currentRequest.description || '无' }}
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="状态">
|
||
<ElTag v-if="currentRequest.status === 'pending'" type="warning">待处理</ElTag>
|
||
<ElTag v-else-if="currentRequest.status === 'processing'" type="primary">处理中</ElTag>
|
||
<ElTag v-else-if="currentRequest.status === 'completed'" type="success">已完成</ElTag>
|
||
<ElTag v-else type="danger">已拒绝</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="处理人">
|
||
{{ currentRequest.processor || '-' }}
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="处理时间" :span="2">
|
||
{{ currentRequest.processTime || '-' }}
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem v-if="currentRequest.rejectReason" label="拒绝原因" :span="2">
|
||
<span style="color: var(--el-color-danger)">{{ currentRequest.rejectReason }}</span>
|
||
</ElDescriptionsItem>
|
||
</ElDescriptions>
|
||
|
||
<template #footer>
|
||
<ElButton @click="detailDialogVisible = false">关闭</ElButton>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 填充新卡对话框 -->
|
||
<ElDialog v-model="fillDialogVisible" title="填充新卡ICCID" width="500px" align-center>
|
||
<ElForm ref="fillFormRef" :model="fillForm" :rules="fillRules" label-width="100px">
|
||
<ElFormItem label="旧卡ICCID">
|
||
<ElInput :value="currentRequest.oldIccid" disabled />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="新卡ICCID" prop="newIccid">
|
||
<ElInput v-model="fillForm.newIccid" placeholder="请输入新卡ICCID" maxlength="20" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="验证新卡">
|
||
<ElButton @click="validateNewIccid">验证ICCID</ElButton>
|
||
<div v-if="validationResult" style="margin-top: 8px">
|
||
<ElTag v-if="validationResult === 'success'" type="success" size="small">
|
||
验证通过，该卡可用
|
||
</ElTag>
|
||
<ElTag v-else type="danger" size="small"> 验证失败，{{ validationMessage }} </ElTag>
|
||
</div>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="备注">
|
||
<ElInput
|
||
v-model="fillForm.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入备注信息"
|
||
/>
|
||
</ElFormItem>
|
||
|
||
<ElAlert type="info" :closable="false">
|
||
填充新卡后，系统将自动完成换卡操作，旧卡将被停用
|
||
</ElAlert>
|
||
</ElForm>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="fillDialogVisible = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handleFillSubmit">确认填充</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 拒绝对话框 -->
|
||
<ElDialog v-model="rejectDialogVisible" title="拒绝换卡申请" width="500px" align-center>
|
||
<ElForm ref="rejectFormRef" :model="rejectForm" :rules="rejectRules" label-width="100px">
|
||
<ElFormItem label="拒绝原因" prop="reason">
|
||
<ElInput
|
||
v-model="rejectForm.reason"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请输入拒绝原因"
|
||
/>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="rejectDialogVisible = false">取消</ElButton>
|
||
<ElButton type="danger" @click="handleRejectSubmit">确认拒绝</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<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 type { FormInstance, FormRules } from 'element-plus'
|
||
|
||
defineOptions({ name: 'CardReplacementRequest' })
|
||
|
||
interface ReplacementRequest {
|
||
id: string
|
||
requestNo: string
|
||
oldIccid: string
|
||
newIccid?: string
|
||
applicant: string
|
||
phone: string
|
||
reason: string
|
||
description?: string
|
||
status: 'pending' | 'processing' | 'completed' | 'rejected'
|
||
applyTime: string
|
||
processor?: string
|
||
processTime?: string
|
||
rejectReason?: string
|
||
}
|
||
|
||
const searchQuery = ref('')
|
||
const statusFilter = ref('')
|
||
const dateRange = ref<[Date, Date] | null>(null)
|
||
const detailDialogVisible = ref(false)
|
||
const fillDialogVisible = ref(false)
|
||
const rejectDialogVisible = ref(false)
|
||
const fillFormRef = ref<FormInstance>()
|
||
const rejectFormRef = ref<FormInstance>()
|
||
const validationResult = ref<string>('')
|
||
const validationMessage = ref('')
|
||
|
||
const statistics = reactive({
|
||
pending: 15,
|
||
processing: 8,
|
||
completed: 102,
|
||
rejected: 5
|
||
})
|
||
|
||
const fillForm = reactive({
|
||
newIccid: '',
|
||
remark: ''
|
||
})
|
||
|
||
const fillRules = reactive<FormRules>({
|
||
newIccid: [
|
||
{ required: true, message: '请输入新卡ICCID', trigger: 'blur' },
|
||
{ len: 20, message: 'ICCID长度必须为20位', trigger: 'blur' }
|
||
]
|
||
})
|
||
|
||
const rejectForm = reactive({
|
||
reason: ''
|
||
})
|
||
|
||
const rejectRules = reactive<FormRules>({
|
||
reason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]
|
||
})
|
||
|
||
const mockData = ref<ReplacementRequest[]>([
|
||
{
|
||
id: '1',
|
||
requestNo: 'REP202601090001',
|
||
oldIccid: '89860123456789012345',
|
||
applicant: '张三',
|
||
phone: '13800138000',
|
||
reason: '卡片损坏',
|
||
description: '卡片物理损坏无法使用',
|
||
status: 'pending',
|
||
applyTime: '2026-01-09 09:30:00'
|
||
},
|
||
{
|
||
id: '2',
|
||
requestNo: 'REP202601080002',
|
||
oldIccid: '89860123456789012346',
|
||
newIccid: '89860123456789012350',
|
||
applicant: '李四',
|
||
phone: '13900139000',
|
||
reason: '信号不稳定',
|
||
description: '长期信号不稳定，影响使用',
|
||
status: 'processing',
|
||
applyTime: '2026-01-08 14:20:00',
|
||
processor: 'admin'
|
||
},
|
||
{
|
||
id: '3',
|
||
requestNo: 'REP202601070003',
|
||
oldIccid: '89860123456789012347',
|
||
newIccid: '89860123456789012351',
|
||
applicant: '王五',
|
||
phone: '13700137000',
|
||
reason: '卡片丢失',
|
||
description: '卡片意外丢失',
|
||
status: 'completed',
|
||
applyTime: '2026-01-07 10:00:00',
|
||
processor: 'admin',
|
||
processTime: '2026-01-07 15:30:00'
|
||
},
|
||
{
|
||
id: '4',
|
||
requestNo: 'REP202601060004',
|
||
oldIccid: '89860123456789012348',
|
||
applicant: '赵六',
|
||
phone: '13600136000',
|
||
reason: '套餐到期',
|
||
description: '套餐到期需要换新卡',
|
||
status: 'rejected',
|
||
applyTime: '2026-01-06 11:00:00',
|
||
processor: 'admin',
|
||
processTime: '2026-01-06 12:00:00',
|
||
rejectReason: '套餐到期应该续费而不是换卡'
|
||
}
|
||
])
|
||
|
||
const currentRequest = ref<ReplacementRequest>({
|
||
id: '',
|
||
requestNo: '',
|
||
oldIccid: '',
|
||
applicant: '',
|
||
phone: '',
|
||
reason: '',
|
||
status: 'pending',
|
||
applyTime: ''
|
||
})
|
||
|
||
const filteredData = computed(() => {
|
||
let data = mockData.value
|
||
|
||
if (searchQuery.value) {
|
||
data = data.filter(
|
||
(item) =>
|
||
item.requestNo.includes(searchQuery.value) ||
|
||
item.oldIccid.includes(searchQuery.value) ||
|
||
(item.newIccid && item.newIccid.includes(searchQuery.value))
|
||
)
|
||
}
|
||
|
||
if (statusFilter.value) {
|
||
data = data.filter((item) => item.status === statusFilter.value)
|
||
}
|
||
|
||
return data
|
||
})
|
||
|
||
const handleSearch = () => {}
|
||
|
||
const exportData = () => {
|
||
ElMessage.success('数据导出中...')
|
||
}
|
||
|
||
const viewDetail = (row: ReplacementRequest) => {
|
||
currentRequest.value = { ...row }
|
||
detailDialogVisible.value = true
|
||
}
|
||
|
||
const handleProcess = (row: ReplacementRequest) => {
|
||
ElMessageBox.confirm('确定要处理该换卡申请吗？', '处理确认', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'info'
|
||
}).then(() => {
|
||
row.status = 'processing'
|
||
row.processor = 'admin'
|
||
ElMessage.success('已标记为处理中')
|
||
})
|
||
}
|
||
|
||
const fillNewIccid = (row: ReplacementRequest) => {
|
||
currentRequest.value = { ...row }
|
||
fillForm.newIccid = ''
|
||
fillForm.remark = ''
|
||
validationResult.value = ''
|
||
fillDialogVisible.value = true
|
||
}
|
||
|
||
const validateNewIccid = () => {
|
||
if (!fillForm.newIccid) {
|
||
ElMessage.warning('请先输入新卡ICCID')
|
||
return
|
||
}
|
||
|
||
if (fillForm.newIccid.length !== 20) {
|
||
validationResult.value = 'error'
|
||
validationMessage.value = 'ICCID长度必须为20位'
|
||
return
|
||
}
|
||
|
||
// 模拟验证
|
||
setTimeout(() => {
|
||
const exists = mockData.value.some((item) => item.oldIccid === fillForm.newIccid)
|
||
if (exists) {
|
||
validationResult.value = 'error'
|
||
validationMessage.value = '该ICCID已被使用'
|
||
} else {
|
||
validationResult.value = 'success'
|
||
validationMessage.value = ''
|
||
ElMessage.success('验证通过')
|
||
}
|
||
}, 500)
|
||
}
|
||
|
||
const handleFillSubmit = async () => {
|
||
if (!fillFormRef.value) return
|
||
|
||
if (validationResult.value !== 'success') {
|
||
ElMessage.warning('请先验证新卡ICCID')
|
||
return
|
||
}
|
||
|
||
await fillFormRef.value.validate((valid) => {
|
||
if (valid) {
|
||
const index = mockData.value.findIndex((item) => item.id === currentRequest.value.id)
|
||
if (index !== -1) {
|
||
mockData.value[index].newIccid = fillForm.newIccid
|
||
mockData.value[index].status = 'completed'
|
||
mockData.value[index].processTime = new Date().toLocaleString('zh-CN')
|
||
|
||
statistics.processing--
|
||
statistics.completed++
|
||
}
|
||
|
||
fillDialogVisible.value = false
|
||
ElMessage.success('新卡填充成功，换卡操作已完成')
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleReject = (row: ReplacementRequest) => {
|
||
currentRequest.value = { ...row }
|
||
rejectForm.reason = ''
|
||
rejectDialogVisible.value = true
|
||
}
|
||
|
||
const handleRejectSubmit = async () => {
|
||
if (!rejectFormRef.value) return
|
||
await rejectFormRef.value.validate((valid) => {
|
||
if (valid) {
|
||
const index = mockData.value.findIndex((item) => item.id === currentRequest.value.id)
|
||
if (index !== -1) {
|
||
mockData.value[index].status = 'rejected'
|
||
mockData.value[index].rejectReason = rejectForm.reason
|
||
mockData.value[index].processor = 'admin'
|
||
mockData.value[index].processTime = new Date().toLocaleString('zh-CN')
|
||
|
||
statistics.pending--
|
||
statistics.rejected++
|
||
}
|
||
|
||
rejectDialogVisible.value = false
|
||
ElMessage.success('已拒绝该换卡申请')
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-content {
|
||
.stat-card {
|
||
:deep(.el-card__body) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
}
|
||
|
||
.stat-content {
|
||
.stat-label {
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 40px;
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
</style>
|