generated from Leo_Ding/web-template
认证列表
This commit is contained in:
qiuyuan
parent
8a5d6f510e
commit
4899e34c0a
@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="certification-table">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:scroll="{ x: getTableWidth() }"
|
||||
@change="handleTableChange"
|
||||
:row-key="record => record.id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 认证类型 -->
|
||||
<template v-if="column.key === 'certificationType'">
|
||||
<a-tag :color="record.certificationType === 'COMPANY' ? 'orange' : 'green'">
|
||||
{{ getCertificationTypeLabel(record.certificationType) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 认证状态 -->
|
||||
<template v-if="column.key === 'certificationStatus'">
|
||||
<div class="status-cell">
|
||||
<a-tag
|
||||
:color="getStatusColor(record.certificationStatus)"
|
||||
class="status-tag"
|
||||
>
|
||||
{{ getStatusLabel(record.certificationStatus) }}
|
||||
</a-tag>
|
||||
<!-- 显示失败原因 -->
|
||||
<div v-if="record.certificationStatus === 'CERTIFICATION_FAILED' && record.fail_reason"
|
||||
class="fail-reason">
|
||||
<a-tooltip :title="record.fail_reason">
|
||||
<info-circle-outlined style="color: #ff4d4f; margin-left: 4px;" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 个人认证字段 -->
|
||||
<template v-if="record.certificationType === 'USER'">
|
||||
<template v-if="column.key === 'name'">
|
||||
{{ record.name }}
|
||||
</template>
|
||||
<template v-if="column.key === 'idCard'">
|
||||
{{ record.idCard }}
|
||||
</template>
|
||||
<template v-if="column.key === 'certificationPeriod'">
|
||||
{{ record.certificationStart }} - {{ record.certificationEnd }}
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 企业认证字段 -->
|
||||
<template v-if="record.certificationType === 'COMPANY'">
|
||||
<template v-if="column.key === 'companyName'">
|
||||
<div class="text-truncate" :title="record.companyName">
|
||||
{{ record.companyName }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'unifiedSocialCreditCode'">
|
||||
{{ record.unifiedSocialCreditCode }}
|
||||
</template>
|
||||
<template v-if="column.key === 'companyContact'">
|
||||
<div v-if="record.identity === '企业法人'">
|
||||
{{ record.name }}（法人）
|
||||
</div>
|
||||
<div v-else-if="record.identity === '被授权人'">
|
||||
{{ record.name }}（被授权人）
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ record.name }}
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="$emit('edit', record)"
|
||||
:disabled="record.certificationStatus !== 'CERTIFICATION_DFFILED'"
|
||||
>
|
||||
审核
|
||||
</a-button>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="$emit('view', record)"
|
||||
>
|
||||
详情
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #emptyText>
|
||||
<div class="empty-content">
|
||||
<a-empty description="暂无认证数据" />
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
import { Empty, Tooltip } from 'ant-design-vue'
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { authenticationDict, authenticationTypeDict } from '@/enums/dict'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pagination: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
showType: {
|
||||
type: String,
|
||||
default: 'all', // all, personal, company
|
||||
validator: (value) => ['all', 'personal', 'company'].includes(value)
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['table-change', 'edit', 'view'])
|
||||
|
||||
// 状态颜色映射
|
||||
const statusColorMap = {
|
||||
PENDING_CERTIFICATION: 'orange',
|
||||
CERTIFICATION_DFFILED: 'blue',
|
||||
CERTIFICATION_PASSED: 'green',
|
||||
CERTIFICATION_FAILED: 'red',
|
||||
}
|
||||
|
||||
// 根据显示类型动态计算列
|
||||
const columns = computed(() => {
|
||||
const baseColumns = [
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'userName',
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
width: 130,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '认证类型',
|
||||
dataIndex: 'certificationType',
|
||||
key: 'certificationType',
|
||||
width: 100,
|
||||
filters: authenticationTypeDict.options.map(item => ({
|
||||
text: item.label,
|
||||
value: item.value
|
||||
})),
|
||||
onFilter: (value, record) => record.certificationType === value,
|
||||
},
|
||||
{
|
||||
title: '认证状态',
|
||||
dataIndex: 'certificationStatus',
|
||||
key: 'certificationStatus',
|
||||
width: 140,
|
||||
filters: authenticationDict.options.map(item => ({
|
||||
text: item.label,
|
||||
value: item.value
|
||||
})),
|
||||
onFilter: (value, record) => record.certificationStatus === value,
|
||||
},
|
||||
]
|
||||
|
||||
// 根据显示类型添加不同的列
|
||||
if (props.showType === 'all') {
|
||||
// 全部认证：显示所有列，用条件渲染控制显示内容
|
||||
return [
|
||||
...baseColumns,
|
||||
{
|
||||
title: '真实姓名/企业名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '证件号码/信用代码',
|
||||
dataIndex: 'idCard',
|
||||
key: 'idCard',
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '有效期/身份',
|
||||
dataIndex: 'certificationPeriod',
|
||||
key: 'certificationPeriod',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
]
|
||||
} else if (props.showType === 'personal') {
|
||||
// 个人认证：显示个人相关字段
|
||||
return [
|
||||
...baseColumns,
|
||||
{
|
||||
title: '真实姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '身份证号',
|
||||
dataIndex: 'idCard',
|
||||
key: 'idCard',
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '证件有效期',
|
||||
dataIndex: 'certificationPeriod',
|
||||
key: 'certificationPeriod',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '证件类型',
|
||||
dataIndex: 'documentType',
|
||||
key: 'documentType',
|
||||
width: 100,
|
||||
customRender: ({ text }) => text === '身份证' ? text : '其他',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
]
|
||||
} else if (props.showType === 'company') {
|
||||
// 企业认证：显示企业相关字段
|
||||
return [
|
||||
...baseColumns,
|
||||
{
|
||||
title: '企业名称',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName',
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '统一信用代码',
|
||||
dataIndex: 'unifiedSocialCreditCode',
|
||||
key: 'unifiedSocialCreditCode',
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '联系人身份',
|
||||
dataIndex: 'companyContact',
|
||||
key: 'companyContact',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '联系人姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '证件类型',
|
||||
dataIndex: 'companyDocumentType',
|
||||
key: 'companyDocumentType',
|
||||
width: 120,
|
||||
customRender: ({ text }) => text === '营业执照' ? text : '其他',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return baseColumns
|
||||
})
|
||||
|
||||
// 获取表格宽度
|
||||
const getTableWidth = () => {
|
||||
if (props.showType === 'personal') return 900
|
||||
if (props.showType === 'company') return 1100
|
||||
return 800
|
||||
}
|
||||
|
||||
// 获取认证类型标签
|
||||
const getCertificationTypeLabel = (type) => {
|
||||
return authenticationTypeDict.getLabel(type) || type
|
||||
}
|
||||
|
||||
// 获取状态标签
|
||||
const getStatusLabel = (status) => {
|
||||
return authenticationDict.getLabel(status) || status
|
||||
}
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status) => {
|
||||
return statusColorMap[status] || 'default'
|
||||
}
|
||||
|
||||
// 表格变化
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
emit('table-change', pagination)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.certification-table {
|
||||
:deep(.ant-table) {
|
||||
background: #fff;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.status-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.status-tag {
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 0 10px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
|
||||
&.ant-tag-orange {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.ant-tag-blue {
|
||||
background: #e6f4ff;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
&.ant-tag-green {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.ant-tag-red {
|
||||
background: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.fail-reason {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
padding: 48px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,254 +1,145 @@
|
||||
<template>
|
||||
<x-search-bar class="mb-8-2">
|
||||
<template #default="{ gutter, colSpan }">
|
||||
<a-form :model="searchFormData" layout="inline" :label-col="{ style: { width: '100px' } }">
|
||||
<a-row :gutter="gutter" :wrap="false">
|
||||
<!-- 每个字段占 6 栅格，共 4 个 -->
|
||||
<a-col :span="6">
|
||||
<a-form-item label="用户姓名" name="userName">
|
||||
<a-input v-model:value="searchFormData.userName" placeholder="请输入用户姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<div class="certification-management">
|
||||
<x-search-bar class="mb-8-2">
|
||||
<template #default="{ gutter, colSpan }">
|
||||
<a-form :model="searchFormData" layout="inline" :label-col="{ style: { width: '100px' } }">
|
||||
<a-row :gutter="gutter" :wrap="false">
|
||||
<a-col :span="6">
|
||||
<a-form-item label="用户姓名" name="userName">
|
||||
<a-input v-model:value="searchFormData.userName" placeholder="请输入用户姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="认证状态" name="status">
|
||||
<a-select v-model:value="searchFormData.status" placeholder="请选择认证状态">
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option v-for="item in authenticationDict.options" :key="item.value"
|
||||
:value="item.value">
|
||||
<a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
|
||||
<a-col :span="6">
|
||||
<a-form-item label="认证类型" name="certificationType">
|
||||
<a-select v-model:value="searchFormData.certificationType" placeholder="请选择认证类型">
|
||||
<a-select-option value="">全部类型</a-select-option>
|
||||
<a-select-option v-for="item in authenticationTypeDict.options" :key="item.value"
|
||||
:value="item.value">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="认证类型" name="ctfType">
|
||||
<a-select v-model:value="searchFormData.ctfType" placeholder="请选择认证类型">
|
||||
<a-select-option v-for="item in authenticationTypeDict.options" :key="item.value"
|
||||
:value="item.value">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="认证状态" name="status">
|
||||
<a-select v-model:value="searchFormData.status" placeholder="请选择认证状态">
|
||||
<a-select-option value="">全部状态</a-select-option>
|
||||
<a-select-option v-for="item in authenticationDict.options" :key="item.value"
|
||||
:value="item.value">
|
||||
<a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<!-- 操作按钮列：右对齐，占 6 栅格 -->
|
||||
<a-col :span="6" class="align-right">
|
||||
<a-space>
|
||||
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
|
||||
<a-button ghost type="primary" @click="handleSearch">
|
||||
{{ $t('button.search') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</x-search-bar>
|
||||
<a-col :span="6" class="align-right">
|
||||
<a-space>
|
||||
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
|
||||
<a-button ghost type="primary" @click="handleSearch">
|
||||
{{ $t('button.search') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</x-search-bar>
|
||||
|
||||
<a-row :gutter="8" :wrap="false">
|
||||
<a-col flex="auto">
|
||||
<a-card type="flex">
|
||||
<x-action-bar class="mb-8-2">
|
||||
<!-- <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
||||
<template #icon>
|
||||
<plus-outlined></plus-outlined>
|
||||
</template>
|
||||
添加图片
|
||||
</a-button> -->
|
||||
</x-action-bar>
|
||||
<a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
|
||||
:scroll="{ x: 1000 }" @change="onTableChange">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'certificationStatus'">
|
||||
<!-- 认证状态标签 -->
|
||||
<a-tag :color="getStatusColor(record.certificationStatus)" class="status-tag">
|
||||
{{ authenticationDict.getLabel(record.certificationStatus) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 普通横线标签页 -->
|
||||
<div class="table-container">
|
||||
<a-tabs v-model:activeKey="activeTab" type="line" @change="handleTabChange">
|
||||
<a-tab-pane key="all" tab="全部认证">
|
||||
<CertificationTable
|
||||
:data="allData"
|
||||
:loading="loading"
|
||||
:pagination="paginationState"
|
||||
@table-change="onTableChange"
|
||||
@edit="handleEdit"
|
||||
@view="handleViewDetail"
|
||||
:show-type="'all'"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="USER" tab="个人认证">
|
||||
<CertificationTable
|
||||
:data="personalData"
|
||||
:loading="loading"
|
||||
:pagination="paginationState"
|
||||
@table-change="onTableChange"
|
||||
@edit="handleEdit"
|
||||
@view="handleViewDetail"
|
||||
:show-type="'personal'"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="COMPANY" tab="企业认证">
|
||||
<CertificationTable
|
||||
:data="companyData"
|
||||
:loading="loading"
|
||||
:pagination="paginationState"
|
||||
@table-change="onTableChange"
|
||||
@edit="handleEdit"
|
||||
@view="handleViewDetail"
|
||||
:show-type="'company'"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<template v-if="column.key === 'action'">
|
||||
<x-action-button @click="handleEdit(record)">
|
||||
<a-tooltip>
|
||||
<template #title>用户审核</template>
|
||||
<edit-outlined />
|
||||
</a-tooltip>
|
||||
</x-action-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
|
||||
<edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { h } from 'vue'
|
||||
import { message, Modal, Tag } from 'ant-design-vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { message, Tabs } from 'ant-design-vue'
|
||||
import apis from '@/apis'
|
||||
import { formatUtcDateTime } from '@/utils/util'
|
||||
import { config } from '@/config'
|
||||
import { statusTypeEnum } from '@/enums/system'
|
||||
import { usePagination, useForm } from '@/hooks'
|
||||
import { usePagination } from '@/hooks'
|
||||
import EditDialog from './components/EditDialog.vue'
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
|
||||
import CertificationTable from './components/CertificationTable.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { authenticationDict, authenticationTypeDict } from '@/enums/dict'
|
||||
|
||||
const ATabs = Tabs
|
||||
const ATabPane = Tabs.TabPane
|
||||
|
||||
defineOptions({
|
||||
name: 'systemRole',
|
||||
name: 'certificationManagement',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 状态颜色映射 - 基于你的配置
|
||||
// 状态颜色映射
|
||||
const statusColorMap = {
|
||||
PENDING_CERTIFICATION: 'warning',
|
||||
CERTIFICATION_DFFILED: 'processing',
|
||||
CERTIFICATION_PASSED: 'success',
|
||||
CERTIFICATION_FAILED: 'error',
|
||||
PENDING_CERTIFICATION: 'orange',
|
||||
CERTIFICATION_DFFILED: 'blue',
|
||||
CERTIFICATION_PASSED: 'green',
|
||||
CERTIFICATION_FAILED: 'red',
|
||||
}
|
||||
|
||||
// 状态标签样式映射
|
||||
const statusStyleMap = {
|
||||
PENDING_CERTIFICATION: {
|
||||
bgColor: '#fff7e6',
|
||||
borderColor: '#ffd591',
|
||||
textColor: '#fa8c16'
|
||||
},
|
||||
CERTIFICATION_DFFILED: {
|
||||
bgColor: '#e6f4ff',
|
||||
borderColor: '#91caff',
|
||||
textColor: '#1677ff'
|
||||
},
|
||||
CERTIFICATION_PASSED: {
|
||||
bgColor: '#f6ffed',
|
||||
borderColor: '#b7eb8f',
|
||||
textColor: '#52c41a'
|
||||
},
|
||||
CERTIFICATION_FAILED: {
|
||||
bgColor: '#fff2f0',
|
||||
borderColor: '#ffccc7',
|
||||
textColor: '#ff4d4f'
|
||||
}
|
||||
}
|
||||
// 响应式数据
|
||||
const activeTab = ref('all')
|
||||
const allData = ref([])
|
||||
const personalData = ref([])
|
||||
const companyData = ref([])
|
||||
const editDialogRef = ref()
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'userName',
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '认证类型',
|
||||
dataIndex: 'certificationType',
|
||||
key: 'certificationType',
|
||||
width: 120,
|
||||
customRender: ({ text }) => authenticationTypeDict.getLabel(text) || text,
|
||||
},
|
||||
{
|
||||
title: '认证状态',
|
||||
dataIndex: 'certificationStatus',
|
||||
key: 'certificationStatus',
|
||||
width: 140,
|
||||
filters: authenticationDict.options.map( item => ({
|
||||
text: item.label,
|
||||
value: item.value
|
||||
})),
|
||||
onFilter: (value, record) => record.certificationStatus === value,
|
||||
customRender: ({ text }) => {
|
||||
const style = statusStyleMap[text] || {}
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
class: 'status-tag-wrapper',
|
||||
style: { display: 'inline-flex', alignItems: 'center' }
|
||||
},
|
||||
[
|
||||
// 状态圆点
|
||||
h('span', {
|
||||
class: 'status-dot',
|
||||
style: {
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: style.textColor || '#d9d9d9',
|
||||
marginRight: '6px',
|
||||
display: 'inline-block'
|
||||
}
|
||||
}),
|
||||
// 状态标签
|
||||
h(Tag, {
|
||||
color: getStatusColor(text),
|
||||
style: {
|
||||
margin: 0,
|
||||
fontSize: '12px',
|
||||
lineHeight: '20px',
|
||||
padding: '0 8px',
|
||||
backgroundColor: style.bgColor || '#fafafa',
|
||||
borderColor: style.borderColor || '#d9d9d9',
|
||||
color: style.textColor || '#00000073',
|
||||
borderRadius: '10px',
|
||||
fontWeight: 500
|
||||
}
|
||||
}, authenticationDict.getLabel(text) || text)
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提交时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
customRender: ({ text }) => formatUtcDateTime(text)
|
||||
},
|
||||
{
|
||||
title: t('button.action'),
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
]
|
||||
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } = usePagination()
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status) => {
|
||||
return statusColorMap[status] || 'default'
|
||||
}
|
||||
|
||||
// 带样式的下拉选项
|
||||
const styledStatusOptions = computed(() => {
|
||||
return authenticationDict.options.map(item => ({
|
||||
...item,
|
||||
color: getStatusColor(item.value)
|
||||
}))
|
||||
})
|
||||
|
||||
const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
|
||||
usePagination()
|
||||
const { resetForm } = useForm()
|
||||
const editDialogRef = ref()
|
||||
|
||||
// 初始加载
|
||||
getPageList()
|
||||
|
||||
/**
|
||||
* 获取用户列表
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function getPageList() {
|
||||
try {
|
||||
@ -263,25 +154,50 @@ async function getPageList() {
|
||||
.catch(() => {
|
||||
throw new Error()
|
||||
})
|
||||
|
||||
hideLoading()
|
||||
if (data.length > 0) {
|
||||
listData.value = data
|
||||
allData.value = data
|
||||
// 按认证类型分组
|
||||
personalData.value = data.filter(item => item.certificationType === 'USER')
|
||||
companyData.value = data.filter(item => item.certificationType === 'COMPANY')
|
||||
paginationState.total = total
|
||||
} else {
|
||||
allData.value = []
|
||||
personalData.value = []
|
||||
companyData.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
hideLoading()
|
||||
console.error('获取认证列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签页切换
|
||||
*/
|
||||
function handleTabChange(activeKey) {
|
||||
activeTab.value = activeKey
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑按钮点击
|
||||
*/
|
||||
function handleEdit({ id, certificationStatus }) {
|
||||
if (certificationStatus !== 'CERTIFICATION_DFFILED') {
|
||||
function handleEdit(record) {
|
||||
if (record.certificationStatus !== 'CERTIFICATION_DFFILED') {
|
||||
message.warning('该用户认证状态不是已提交，不能操作')
|
||||
return
|
||||
}
|
||||
editDialogRef.value?.handleEdit(id)
|
||||
editDialogRef.value?.handleEdit(record.id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看详情
|
||||
*/
|
||||
function handleViewDetail(record) {
|
||||
// 可以弹出详情模态框，展示完整的认证信息
|
||||
console.log('查看详情:', record)
|
||||
// 这里可以调用详情对话框组件
|
||||
}
|
||||
|
||||
/**
|
||||
@ -306,6 +222,7 @@ function handleResetSearch() {
|
||||
* 搜索
|
||||
*/
|
||||
function handleSearch() {
|
||||
resetPagination()
|
||||
getPageList()
|
||||
}
|
||||
|
||||
@ -318,77 +235,62 @@ async function onOk() {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.status-tag {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-1px);
|
||||
.certification-management {
|
||||
.table-container {
|
||||
background: #fff;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
|
||||
0 1px 6px -1px rgba(0, 0, 0, 0.02),
|
||||
0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag-wrapper {
|
||||
.status-dot {
|
||||
transition: all 0.3s;
|
||||
// 标签页样式
|
||||
:deep(.ant-tabs) {
|
||||
.ant-tabs-nav {
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
&::before {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
padding: 12px 0;
|
||||
margin: 0 32px 0 0;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: #1890ff;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// "已提交"状态的闪烁动画
|
||||
&[data-status="CERTIFICATION_DFFILED"] .status-dot {
|
||||
animation: blink 1.5s infinite;
|
||||
}
|
||||
|
||||
// "待认证"状态的呼吸动画
|
||||
&[data-status="PENDING_CERTIFICATION"] .status-dot {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
|
||||
.ant-tabs-content {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
|
||||
|
||||
.ant-space {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格样式优化
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
font-weight: 600;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr:hover > td) {
|
||||
background-color: #f6f8fa;
|
||||
.mb-8-2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user