generated from Leo_Ding/web-template
审核列表
This commit is contained in:
qiuyuan
parent
7e5f276930
commit
8a5d6f510e
@ -1,13 +1,7 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
//获取banner列表
|
||||
//获取审核列表
|
||||
export const getCertificationsList = (params) => request.basic.get('/api/v1/certifications', params)
|
||||
|
||||
//获取单个banner
|
||||
export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
|
||||
//创建banner
|
||||
export const createBanner = (data) => request.basic.post('/api/v1/banners', data)
|
||||
//更新banner
|
||||
export const updateBanner = (id, data) => request.basic.put(`/api/v1/banners/${id}`, data)
|
||||
//删除banner
|
||||
export const deleteBanner = (id) => request.basic.delete(`/api/v1/banners/${id}`)
|
||||
// 审核接口
|
||||
export const updateCertifications = (id, data) => request.basic.put(`/api/v1/certifications/${id}`, data)
|
||||
|
||||
@ -5,32 +5,16 @@
|
||||
<a-card class="mb-8-2">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="$t('pages.system.role.form.name')" name="name">
|
||||
<a-input v-model:value="formData.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="$t('pages.system.role.form.sequence')" name="sequence">
|
||||
<a-input :defaultValue="0" type="number" v-model:value="formData.sequence"></a-input>
|
||||
<a-form-item label="审核结果" name="check">
|
||||
<a-radio-group v-model:value="formData.check" :options="[
|
||||
{ label: '通过', value: true },
|
||||
{ label: '不通过', value: false },
|
||||
]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="$t('pages.system.role.form.status')" name="status">
|
||||
<a-radio-group v-model:value="formData.status" :options="[
|
||||
{ label: $t('pages.system.role.form.status.enabled'), value: 'enabled' },
|
||||
{ label: $t('pages.system.role.form.status.disabled'), value: 'disabled' },
|
||||
]"></a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'描述'">
|
||||
<a-textarea v-model:value="formData.description"></a-textarea>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="'上传图片'" name="permissions">
|
||||
<GxUpload :fileNumber="1" />
|
||||
<a-form-item label="审核不通过理由" name="fail_reason">
|
||||
<a-textarea v-model:value="formData.fail_reason" :disabled="formData.check === true" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -40,119 +24,103 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { config } from '@/config'
|
||||
import { ref, computed } from 'vue'
|
||||
import apis from '@/apis'
|
||||
import { useForm, useModal } from '@/hooks'
|
||||
import GxUpload from '@/components/GxUpload/index.vue'
|
||||
const emit = defineEmits(['ok'])
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const emit = defineEmits(['ok'])
|
||||
const { t } = useI18n()
|
||||
|
||||
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
|
||||
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
|
||||
const { t } = useI18n() // 解构出t方法
|
||||
const { formData, formRef, resetForm } = useForm()
|
||||
|
||||
const cancelText = ref(t('button.cancel'))
|
||||
const okText = ref(t('button.confirm'))
|
||||
formData.value.enabled='enabled'
|
||||
formRules.value = {
|
||||
name: { required: true, message: t('pages.system.role.form.name.placeholder') },
|
||||
code: { required: true, message: t('pages.system.role.form.code.placeholder') },
|
||||
status: { required: true, message: t('pages.system.role.form.status.placeholder') },
|
||||
|
||||
// 初始化表单数据
|
||||
formData.value = {
|
||||
check: true,
|
||||
fail_reason: '',
|
||||
id: null,
|
||||
}
|
||||
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
function handleCreate() {
|
||||
showModal({
|
||||
type: 'create',
|
||||
title: t('pages.system.role.add'),
|
||||
})
|
||||
// 动态校验规则：使用 validator
|
||||
const validateFailReason = (rule, value, callback) => {
|
||||
if (formData.value.check === false) {
|
||||
if (!value || value.trim() === '') {
|
||||
callback(new Error('请选择不通过时，必须填写不通过理由'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
} else {
|
||||
// 通过时不需要校验
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// 表单规则
|
||||
const formRules = computed(() => ({
|
||||
check: [{ required: true, message: '请选择审核结果' }],
|
||||
fail_reason: [{ validator: validateFailReason, trigger: 'blur' }],
|
||||
}))
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* 编辑（审核）
|
||||
*/
|
||||
async function handleEdit(record = {}) {
|
||||
async function handleEdit(id) {
|
||||
showModal({
|
||||
type: 'edit',
|
||||
title: t('pages.system.role.edit'),
|
||||
title: '用户审核',
|
||||
})
|
||||
|
||||
const { data, success } = await apis.role.getRole(record.id).catch()
|
||||
if (!success) {
|
||||
message.error(t('component.message.error.save'))
|
||||
hideModal()
|
||||
return
|
||||
}
|
||||
let menus = []
|
||||
if (data.menus) {
|
||||
for (let item of data.menus) {
|
||||
menus.push(item.menu_id)
|
||||
}
|
||||
}
|
||||
checkedKeys.value = menus
|
||||
formRecord.value = data
|
||||
formData.value = cloneDeep(data)
|
||||
formData.value.id = id
|
||||
// 可选：如果需要回显原数据，可在此处调用 API 获取详情并赋值
|
||||
// 比如：formData.value = await fetchCertificationDetail(id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定
|
||||
*/
|
||||
function handleOk() {
|
||||
formRef.value
|
||||
.validateFields()
|
||||
.then(async (values) => {
|
||||
try {
|
||||
showLoading()
|
||||
const params = {...values}
|
||||
let result = null
|
||||
switch (modal.value.type) {
|
||||
case 'create':
|
||||
result = await apis.banner.createBanner(params).catch(() => {
|
||||
throw new Error()
|
||||
})
|
||||
break
|
||||
case 'edit':
|
||||
result = await apis.banner.updateBanner(formData.value.id, params).catch(() => {
|
||||
throw new Error()
|
||||
})
|
||||
break
|
||||
}
|
||||
hideLoading()
|
||||
if (config('http.code.success') === result?.success) {
|
||||
hideModal()
|
||||
emit('ok')
|
||||
}
|
||||
} catch (error) {
|
||||
hideLoading()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading()
|
||||
})
|
||||
async function handleOk() {
|
||||
try {
|
||||
await formRef.value.validateFields()
|
||||
showLoading()
|
||||
|
||||
const params = {
|
||||
check: formData.value.check,
|
||||
fail_reason: formData.value.check ? null : formData.value.fail_reason?.trim(),
|
||||
}
|
||||
|
||||
const result = await apis.certifications.updateCertifications(formData.value.id, params)
|
||||
|
||||
hideLoading()
|
||||
if (result?.success) {
|
||||
message.success('操作成功')
|
||||
hideModal()
|
||||
emit('ok')
|
||||
}
|
||||
} catch (error) {
|
||||
hideLoading()
|
||||
// validateFields 失败会抛出异常，但已被 catch，无需额外处理
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
function handleCancel() {
|
||||
hideModal()
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭后
|
||||
*/
|
||||
function onAfterClose() {
|
||||
resetForm()
|
||||
hideLoading()
|
||||
// 重置表单数据（可选）
|
||||
formData.value = {
|
||||
check: true,
|
||||
fail_reason: '',
|
||||
id: null,
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleCreate,
|
||||
handleEdit,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
</script>
|
||||
@ -12,11 +12,13 @@
|
||||
|
||||
<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">
|
||||
{{ item.label }}
|
||||
<a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
@ -61,20 +63,21 @@
|
||||
<a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
|
||||
:scroll="{ x: 1000 }" @change="onTableChange">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- <template v-if="'action' === column.key">
|
||||
<x-action-button @click="$refs.editDialogRef.handleEdit(record)">
|
||||
<template v-if="column.key === 'certificationStatus'">
|
||||
<!-- 认证状态标签 -->
|
||||
<a-tag :color="getStatusColor(record.certificationStatus)" class="status-tag">
|
||||
{{ authenticationDict.getLabel(record.certificationStatus) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'action'">
|
||||
<x-action-button @click="handleEdit(record)">
|
||||
<a-tooltip>
|
||||
<template #title> {{ $t('pages.system.role.edit') }}</template>
|
||||
<template #title>用户审核</template>
|
||||
<edit-outlined />
|
||||
</a-tooltip>
|
||||
</x-action-button>
|
||||
<x-action-button @click="handleRemove(record)">
|
||||
<a-tooltip>
|
||||
<template #title> {{ $t('pages.system.delete') }}</template>
|
||||
<delete-outlined style="color: #ff4d4f" />
|
||||
</a-tooltip>
|
||||
</x-action-button>
|
||||
</template> -->
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
@ -85,8 +88,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { ref } from 'vue'
|
||||
import { h } from 'vue'
|
||||
import { message, Modal, Tag } from 'ant-design-vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import apis from '@/apis'
|
||||
import { formatUtcDateTime } from '@/utils/util'
|
||||
import { config } from '@/config'
|
||||
@ -100,11 +104,54 @@ import { authenticationDict, authenticationTypeDict } from '@/enums/dict'
|
||||
defineOptions({
|
||||
name: 'systemRole',
|
||||
})
|
||||
const { t } = useI18n() // 解构出t方法
|
||||
const { t } = useI18n()
|
||||
|
||||
// 状态颜色映射 - 基于你的配置
|
||||
const statusColorMap = {
|
||||
PENDING_CERTIFICATION: 'warning',
|
||||
CERTIFICATION_DFFILED: 'processing',
|
||||
CERTIFICATION_PASSED: 'success',
|
||||
CERTIFICATION_FAILED: 'error',
|
||||
}
|
||||
|
||||
// 状态标签样式映射
|
||||
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 columns = [
|
||||
// { title: '序号', dataIndex: 'id', width: 200 },
|
||||
{ title: '用户名', dataIndex: 'userName', width: 150 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'userName',
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '认证类型',
|
||||
dataIndex: 'certificationType',
|
||||
@ -116,12 +163,82 @@ const columns = [
|
||||
title: '认证状态',
|
||||
dataIndex: 'certificationStatus',
|
||||
key: 'certificationStatus',
|
||||
width: 120,
|
||||
customRender: ({ text }) => authenticationDict.getLabel(text) || text,
|
||||
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'
|
||||
},
|
||||
{ title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
|
||||
]
|
||||
|
||||
// 获取状态颜色
|
||||
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()
|
||||
@ -157,32 +274,14 @@ async function getPageList() {
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除
|
||||
* 编辑按钮点击
|
||||
*/
|
||||
function handleRemove({ id }) {
|
||||
Modal.confirm({
|
||||
title: t('pages.system.role.delTip'),
|
||||
content: t('button.confirm'),
|
||||
okText: t('button.confirm'),
|
||||
onOk: () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
; (async () => {
|
||||
try {
|
||||
const { success } = await apis.role.delRole(id).catch(() => {
|
||||
throw new Error()
|
||||
})
|
||||
if (config('http.code.success') === success) {
|
||||
resolve()
|
||||
message.success(t('component.message.success.delete'))
|
||||
await getPageList()
|
||||
}
|
||||
} catch (error) {
|
||||
reject()
|
||||
}
|
||||
})()
|
||||
})
|
||||
},
|
||||
})
|
||||
function handleEdit({ id, certificationStatus }) {
|
||||
if (certificationStatus !== 'CERTIFICATION_DFFILED') {
|
||||
message.warning('该用户认证状态不是已提交，不能操作')
|
||||
return
|
||||
}
|
||||
editDialogRef.value?.handleEdit(id)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -207,8 +306,6 @@ function handleResetSearch() {
|
||||
* 搜索
|
||||
*/
|
||||
function handleSearch() {
|
||||
// resetForm()
|
||||
// resetPagination()
|
||||
getPageList()
|
||||
}
|
||||
|
||||
@ -220,4 +317,78 @@ async function onOk() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<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);
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag-wrapper {
|
||||
.status-dot {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
// "已提交"状态的闪烁动画
|
||||
&[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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user