195 lines
8.5 KiB
Vue
195 lines
8.5 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 搜索筛选区 -->
|
||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
|
||
<el-form-item label="用户姓名" prop="userName">
|
||
<el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable style="width: 200px" @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="真实姓名" prop="realName">
|
||
<el-input v-model="queryParams.realName" placeholder="请输入真实姓名" clearable style="width: 200px" @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="认证状态" prop="verificationStatus">
|
||
<el-select v-model="queryParams.verificationStatus" placeholder="请选择认证状态" clearable style="width: 160px">
|
||
<el-option label="待认证" value="PENDING" />
|
||
<el-option label="已认证" value="APPROVED" />
|
||
<el-option label="认证失败" value="REJECTED" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 操作按钮区 -->
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:verification:export']">导出</el-button>
|
||
</el-col>
|
||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<!-- 数据表格 -->
|
||
<el-table v-loading="loading" :data="verificationList">
|
||
<el-table-column label="认证ID" align="center" prop="verificationId" width="80" />
|
||
<el-table-column label="用户姓名" align="center" prop="userName" min-width="100" :show-overflow-tooltip="true" />
|
||
<el-table-column label="真实姓名" align="center" prop="realName" min-width="100" />
|
||
<el-table-column label="认证状态" align="center" prop="verificationStatus" width="110">
|
||
<template #default="scope">
|
||
<el-tag :type="getStatusTagType(scope.row.verificationStatus)">
|
||
{{ getStatusText(scope.row.verificationStatus) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="CA认证ID" align="center" prop="caVerificationId" min-width="200" :show-overflow-tooltip="true">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.caVerificationId || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="认证时间" align="center" prop="verificationTime" min-width="160">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.verificationTime ? parseTime(scope.row.verificationTime) : '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="拒绝原因" align="center" prop="rejectReason" min-width="160" :show-overflow-tooltip="true">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.rejectReason || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="提交时间" align="center" prop="createTime" min-width="160">
|
||
<template #default="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="100" fixed="right">
|
||
<template #default="scope">
|
||
<el-tooltip content="查看详情" placement="top">
|
||
<el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['system:verification:view:all']" />
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||
|
||
<!-- 身份认证详情对话框 -->
|
||
<el-dialog title="身份认证详情" v-model="detailOpen" width="650px" append-to-body>
|
||
<el-descriptions :column="2" border v-if="currentDetail">
|
||
<el-descriptions-item label="认证ID">{{ currentDetail.verificationId }}</el-descriptions-item>
|
||
<el-descriptions-item label="用户姓名">{{ currentDetail.userName || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="真实姓名" :span="2">{{ currentDetail.realName }}</el-descriptions-item>
|
||
<el-descriptions-item label="认证状态" :span="2">
|
||
<el-tag :type="getStatusTagType(currentDetail.verificationStatus)">
|
||
{{ getStatusText(currentDetail.verificationStatus) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="CA认证ID" :span="2">{{ currentDetail.caVerificationId || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="认证时间" :span="2">{{ currentDetail.verificationTime ? parseTime(currentDetail.verificationTime) : '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="拒绝原因" :span="2">{{ currentDetail.rejectReason || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="提交时间">{{ parseTime(currentDetail.createTime) }}</el-descriptions-item>
|
||
<el-descriptions-item label="更新时间">{{ parseTime(currentDetail.updateTime) }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<!-- 审核历史 -->
|
||
<div v-if="currentDetail && currentDetail.auditLogs && currentDetail.auditLogs.length > 0" style="margin-top: 20px">
|
||
<div style="font-weight: bold; margin-bottom: 10px; color: #606266;">审核历史</div>
|
||
<el-timeline>
|
||
<el-timeline-item
|
||
v-for="log in currentDetail.auditLogs"
|
||
:key="log.logId"
|
||
:timestamp="parseTime(log.operationTime)"
|
||
placement="top"
|
||
>
|
||
<el-card shadow="never" style="padding: 8px 12px;">
|
||
<div>
|
||
<span>状态变更：</span>
|
||
<el-tag size="small" :type="getStatusTagType(log.oldStatus)" style="margin-right: 4px">{{ getStatusText(log.oldStatus) }}</el-tag>
|
||
<el-icon><ArrowRight /></el-icon>
|
||
<el-tag size="small" :type="getStatusTagType(log.newStatus)" style="margin-left: 4px">{{ getStatusText(log.newStatus) }}</el-tag>
|
||
</div>
|
||
<div style="margin-top: 6px; color: #909399; font-size: 13px;">
|
||
操作人：{{ log.operatorName }}
|
||
<span v-if="log.operatorRoles" style="margin-left: 8px">（{{ log.operatorRoles }}）</span>
|
||
</div>
|
||
<div v-if="log.auditRemark" style="margin-top: 4px; color: #606266; font-size: 13px;">备注：{{ log.auditRemark }}</div>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-button @click="detailOpen = false">关 闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="IdentityVerification">
|
||
import { listIdentityVerifications, getIdentityVerificationDetail, exportIdentityVerifications } from '@/api/system/verification'
|
||
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
const verificationList = ref([])
|
||
const loading = ref(true)
|
||
const showSearch = ref(true)
|
||
const total = ref(0)
|
||
const detailOpen = ref(false)
|
||
const currentDetail = ref(null)
|
||
|
||
const data = reactive({
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
userName: undefined,
|
||
realName: undefined,
|
||
verificationStatus: undefined
|
||
}
|
||
})
|
||
|
||
const { queryParams } = toRefs(data)
|
||
|
||
function getStatusText(status) {
|
||
const map = { PENDING: '待认证', APPROVED: '已认证', REJECTED: '认证失败' }
|
||
return map[status] || status || '-'
|
||
}
|
||
|
||
function getStatusTagType(status) {
|
||
const map = { PENDING: 'warning', APPROVED: 'success', REJECTED: 'danger' }
|
||
return map[status] || 'info'
|
||
}
|
||
|
||
function getList() {
|
||
loading.value = true
|
||
listIdentityVerifications(queryParams.value).then(res => {
|
||
verificationList.value = res.rows
|
||
total.value = res.total
|
||
loading.value = false
|
||
}).catch(() => { loading.value = false })
|
||
}
|
||
|
||
function handleQuery() {
|
||
queryParams.value.pageNum = 1
|
||
getList()
|
||
}
|
||
|
||
function resetQuery() {
|
||
proxy.resetForm('queryRef')
|
||
handleQuery()
|
||
}
|
||
|
||
function handleDetail(row) {
|
||
getIdentityVerificationDetail(row.verificationId).then(res => {
|
||
currentDetail.value = res.data
|
||
detailOpen.value = true
|
||
})
|
||
}
|
||
|
||
function handleExport() {
|
||
proxy.download('system/user/verification/identity/export', { ...queryParams.value }, `identity_verification_${new Date().getTime()}.xlsx`)
|
||
}
|
||
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
</script>
|