优化构架
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import {
|
||||
downloadTenantQualification,
|
||||
getPlatformTenant,
|
||||
listPlatformTenants,
|
||||
listTenantQualifications,
|
||||
updatePlatformTenant,
|
||||
uploadPlatformTenantQualification,
|
||||
type PlatformTenantResource,
|
||||
} from '@/modules/iam'
|
||||
import { createPlatformExportTask } from '@/modules/downloads'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
import { useAuthStore } from '@/core/auth/auth'
|
||||
import CustomersView from './CustomersView.vue'
|
||||
|
||||
vi.mock('@/modules/iam', () => ({
|
||||
changePlatformTenantStatus: vi.fn(),
|
||||
createPlatformTenant: vi.fn(),
|
||||
downloadTenantQualification: vi.fn(),
|
||||
getPlatformTenant: vi.fn(),
|
||||
listPlatformTenantOrderCounts: vi.fn(),
|
||||
listPlatformTenants: vi.fn(),
|
||||
listTenantQualifications: vi.fn(),
|
||||
qualificationFileName: vi.fn((documentUrl: string) => documentUrl.split('/').at(-1) || '资质文件'),
|
||||
submitPlatformTenantReview: vi.fn(),
|
||||
updatePlatformTenant: vi.fn(),
|
||||
uploadPlatformTenantQualification: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/modules/downloads', () => ({ createPlatformExportTask: vi.fn() }))
|
||||
|
||||
class ResizeObserverStub implements ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
const fullTenant: PlatformTenantResource = {
|
||||
id: '8', tenantCode: 'TEN8', tenantName: '柏悦物流', status: 'PROFILE_REQUIRED',
|
||||
legalName: '柏悦物流有限公司', unifiedSocialCreditCode: '91440300MA5ABCDE12',
|
||||
contactName: '张三', contactPhone: '13800138000', contactEmail: 'ops@example.com',
|
||||
servicePackage: '基础版', contactWechat: 'baiyue-ops', salesOwnerName: '李四', paymentTermDays: 30,
|
||||
enterpriseType: '有限责任公司', establishedDate: '2020-01-01', registeredCapital: 1000,
|
||||
registeredCapitalCurrency: 'CNY', registeredAddress: '深圳市宝安区', internalRemark: '重点客户',
|
||||
createdAt: '2026-08-01T10:00:00', approvedAt: null,
|
||||
}
|
||||
|
||||
function tableButtonByText(text: string) {
|
||||
return [...document.querySelectorAll<HTMLButtonElement>('.el-table__body button')]
|
||||
.find((button) => button.textContent?.trim() === text)
|
||||
}
|
||||
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
describe('CustomersView', () => {
|
||||
let pinia: ReturnType<typeof createPinia>
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
|
||||
Object.defineProperty(URL, 'createObjectURL', { configurable: true, value: vi.fn(() => 'blob:qualification-preview') })
|
||||
Object.defineProperty(URL, 'revokeObjectURL', { configurable: true, value: vi.fn() })
|
||||
document.body.innerHTML = ''
|
||||
pinia = createPinia()
|
||||
setActivePinia(pinia)
|
||||
const auth = useAuthStore()
|
||||
auth.token = 'token'
|
||||
auth.permissions = ['platform:customer:list', 'platform:customer:view', 'platform:customer:edit', 'platform:customer:export']
|
||||
useAccessPreviewStore().initializeAfterLogin()
|
||||
vi.mocked(listPlatformTenants).mockResolvedValue({
|
||||
records: [{ ...fullTenant, contactPhone: '138****8000', contactEmail: 'o***@example.com' }],
|
||||
page: 1, size: 10, total: 1, pages: 1,
|
||||
})
|
||||
vi.mocked(getPlatformTenant).mockResolvedValue(fullTenant)
|
||||
vi.mocked(listTenantQualifications).mockResolvedValue([])
|
||||
vi.mocked(updatePlatformTenant).mockResolvedValue(fullTenant)
|
||||
vi.mocked(uploadPlatformTenantQualification).mockResolvedValue({
|
||||
qualificationId: 'qualification-1', reviewId: null, tenantStatus: 'PROFILE_REQUIRED', documentUrl: '/files/license.png',
|
||||
})
|
||||
vi.mocked(createPlatformExportTask).mockResolvedValue({ id: 'export-1', status: 'PENDING' } as never)
|
||||
})
|
||||
|
||||
it('loads the complete customer detail before editing masked list fields', async () => {
|
||||
mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
|
||||
await flushPromises()
|
||||
|
||||
tableButtonByText('编辑')?.click()
|
||||
await flushPromises()
|
||||
|
||||
expect(getPlatformTenant).toHaveBeenCalledWith(fullTenant.id)
|
||||
const phone = document.querySelector<HTMLInputElement>('input[placeholder="请输入手机号或固定电话"]')
|
||||
const email = document.querySelector<HTMLInputElement>('input[placeholder="如：contact@example.com"]')
|
||||
expect(phone?.value).toBe(fullTenant.contactPhone)
|
||||
expect(email?.value).toBe(fullTenant.contactEmail)
|
||||
})
|
||||
|
||||
it('shows an authenticated image preview for an uploaded qualification', async () => {
|
||||
vi.mocked(listTenantQualifications).mockResolvedValue([{
|
||||
id: 'qualification-1', tenantId: fullTenant.id, qualificationType: 'BUSINESS_LICENSE',
|
||||
certificateNo: fullTenant.unifiedSocialCreditCode, documentUrl: '/files/license.png',
|
||||
status: 'PENDING', reviewComment: null, validTo: null,
|
||||
}])
|
||||
vi.mocked(downloadTenantQualification).mockResolvedValue(new Blob(['image'], { type: 'image/png' }))
|
||||
|
||||
mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
|
||||
await flushPromises()
|
||||
tableButtonByText('编辑')?.click()
|
||||
await flushPromises()
|
||||
await flushPromises()
|
||||
|
||||
expect(downloadTenantQualification).toHaveBeenCalledWith(fullTenant.id, '/files/license.png')
|
||||
const preview = document.querySelector<HTMLImageElement>('img[alt="营业执照预览"]')
|
||||
expect(preview?.src).toBe('blob:qualification-preview')
|
||||
})
|
||||
|
||||
it('shows uploaded qualifications in customer detail and opens the full preview', async () => {
|
||||
vi.mocked(listTenantQualifications).mockResolvedValue([{
|
||||
id: 'qualification-1', tenantId: fullTenant.id, qualificationType: 'BUSINESS_LICENSE',
|
||||
certificateNo: fullTenant.unifiedSocialCreditCode, documentUrl: '/files/license.png',
|
||||
status: 'PENDING', reviewComment: null, validTo: null,
|
||||
}])
|
||||
vi.mocked(downloadTenantQualification).mockResolvedValue(new Blob(['image'], { type: 'image/png' }))
|
||||
|
||||
mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
|
||||
await flushPromises()
|
||||
tableButtonByText('详情')?.click()
|
||||
await flushPromises()
|
||||
await flushPromises()
|
||||
|
||||
const detailPreview = document.querySelector<HTMLButtonElement>('button[aria-label="查看营业执照：license.png"]')
|
||||
expect(detailPreview?.querySelector('img[alt="营业执照缩略图"]')).not.toBeNull()
|
||||
detailPreview?.click()
|
||||
await flushPromises()
|
||||
|
||||
expect(document.querySelector('.qualification-preview img[alt="license.png预览"]')).not.toBeNull()
|
||||
})
|
||||
|
||||
it('saves customer data and selected qualifications with one action', async () => {
|
||||
mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
|
||||
await flushPromises()
|
||||
tableButtonByText('编辑')?.click()
|
||||
await flushPromises()
|
||||
|
||||
const licenseFile = new File(['license'], 'license.png', { type: 'image/png' })
|
||||
const licenseInput = document.querySelector<HTMLInputElement>('.qualification-file input[type="file"]')
|
||||
Object.defineProperty(licenseInput, 'files', { configurable: true, value: [licenseFile] })
|
||||
licenseInput?.dispatchEvent(new Event('change', { bubbles: true }))
|
||||
await flushPromises()
|
||||
|
||||
const buttons = [...document.querySelectorAll<HTMLButtonElement>('button')]
|
||||
expect(buttons.some((button) => button.textContent?.trim() === '上传已选资质')).toBe(false)
|
||||
buttons.find((button) => button.textContent?.trim() === '保存资料和资质')?.click()
|
||||
await flushPromises()
|
||||
|
||||
expect(updatePlatformTenant).toHaveBeenCalledWith(fullTenant.id, expect.objectContaining({ tenantName: fullTenant.tenantName }))
|
||||
expect(uploadPlatformTenantQualification).toHaveBeenCalledWith(
|
||||
fullTenant.id,
|
||||
'BUSINESS_LICENSE',
|
||||
licenseFile,
|
||||
undefined,
|
||||
fullTenant.unifiedSocialCreditCode,
|
||||
false,
|
||||
)
|
||||
})
|
||||
|
||||
it('submits the current filters to the backend export service without loading every customer page', async () => {
|
||||
mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
|
||||
await flushPromises()
|
||||
|
||||
const exportButton = [...document.querySelectorAll<HTMLButtonElement>('button')]
|
||||
.find((button) => button.textContent?.trim() === '导出Excel')
|
||||
exportButton?.click()
|
||||
await flushPromises()
|
||||
|
||||
expect(createPlatformExportTask).toHaveBeenCalledWith({
|
||||
exportType: 'CUSTOMER_LIST', format: 'XLSX', taskName: '客户列表',
|
||||
parameters: { keyword: undefined, status: undefined },
|
||||
})
|
||||
expect(listPlatformTenants).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,669 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { Building2, CheckCircle2, Download, Eye, FileCheck2, FileText, FileUp, Pencil, Plus, Power } from '@lucide/vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
|
||||
import { createPlatformExportTask } from '@/modules/downloads'
|
||||
import {
|
||||
changePlatformTenantStatus,
|
||||
createPlatformTenant,
|
||||
downloadTenantQualification,
|
||||
getPlatformTenant,
|
||||
listPlatformTenantOrderCounts,
|
||||
listPlatformTenants,
|
||||
listTenantQualifications,
|
||||
qualificationFileName,
|
||||
submitPlatformTenantReview,
|
||||
updatePlatformTenant,
|
||||
uploadPlatformTenantQualification,
|
||||
type CreatePlatformTenantRequest,
|
||||
type PlatformQualificationType,
|
||||
type PlatformTenantQualification,
|
||||
type PlatformTenantResource,
|
||||
type PlatformTenantStatus,
|
||||
} from '@/modules/iam'
|
||||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||||
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
|
||||
type CustomerFilters = QueryModel & { keyword: string; status: PlatformTenantStatus | '' }
|
||||
type QualificationDraft = {
|
||||
type: PlatformQualificationType
|
||||
label: string
|
||||
required: boolean
|
||||
file: File | null
|
||||
validTo: string
|
||||
uploaded: boolean
|
||||
uploadedName: string
|
||||
documentUrl: string
|
||||
previewUrl: string
|
||||
previewKind: 'image' | 'pdf' | ''
|
||||
previewLoading: boolean
|
||||
previewFailed: boolean
|
||||
uploading: boolean
|
||||
error: string
|
||||
}
|
||||
type DetailQualificationPreview = {
|
||||
url: string
|
||||
kind: 'image' | 'pdf'
|
||||
loading: boolean
|
||||
failed: boolean
|
||||
}
|
||||
|
||||
const access = useAccessPreviewStore()
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const loading = ref(false)
|
||||
const exportSubmitting = ref(false)
|
||||
const loadError = ref<ApiErrorDetails | null>(null)
|
||||
const result = ref({ records: [] as PlatformTenantResource[], total: 0, pages: 0 })
|
||||
const orderCounts = ref<Record<string, number>>({})
|
||||
const rowActionId = ref('')
|
||||
const editorOpen = ref(false)
|
||||
const editorLoading = ref(false)
|
||||
const saving = ref(false)
|
||||
const submitting = ref(false)
|
||||
const savedFormSnapshot = ref('')
|
||||
const editingId = ref<string | null>(null)
|
||||
const editorStatus = ref<PlatformTenantStatus | null>(null)
|
||||
const formRef = ref<FormInstance>()
|
||||
const detailOpen = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const detail = ref<PlatformTenantResource | null>(null)
|
||||
const detailQualifications = ref<PlatformTenantQualification[]>([])
|
||||
const detailQualificationPreviews = ref<Record<string, DetailQualificationPreview>>({})
|
||||
const qualificationLoadError = ref('')
|
||||
const qualificationPreviewOpen = ref(false)
|
||||
const qualificationPreviewName = ref('')
|
||||
const qualificationPreviewUrl = ref('')
|
||||
const qualificationPreviewKind = ref<'image' | 'pdf' | ''>('')
|
||||
|
||||
const filters = ref<CustomerFilters>({ keyword: '', status: '' })
|
||||
const queryFields: QueryField[] = [
|
||||
{ key: 'keyword', type: 'input', placeholder: '公司名称、客户ID或联系人' },
|
||||
{ key: 'status', type: 'select', placeholder: '全部状态', options: [
|
||||
{ label: '待完善', value: 'PROFILE_REQUIRED' }, { label: '待审核', value: 'PENDING' },
|
||||
{ label: '启用', value: 'ACTIVE' }, { label: '已驳回', value: 'REJECTED' },
|
||||
{ label: '已停用', value: 'DISABLED' },
|
||||
] },
|
||||
]
|
||||
|
||||
const emptyForm = (): CreatePlatformTenantRequest => ({
|
||||
tenantName: '', legalName: '', unifiedSocialCreditCode: '', contactName: '', contactPhone: '',
|
||||
contactEmail: '', contactWechat: '', servicePackage: '基础版', salesOwnerName: '', paymentTermDays: 0,
|
||||
enterpriseType: '', establishedDate: null, registeredCapital: null, registeredCapitalCurrency: 'CNY',
|
||||
registeredAddress: '', internalRemark: '',
|
||||
})
|
||||
const form = ref(emptyForm())
|
||||
const rules: FormRules = {
|
||||
tenantName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
|
||||
legalName: [{ required: true, message: '请输入营业执照上的企业名称', trigger: 'blur' }],
|
||||
unifiedSocialCreditCode: [
|
||||
{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
|
||||
{ pattern: /^[0-9A-Z]{18}$/, message: '请输入 18 位大写字母或数字', trigger: 'blur' },
|
||||
],
|
||||
contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
|
||||
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
|
||||
contactEmail: [{ type: 'email', message: '请输入有效邮箱地址', trigger: 'blur' }],
|
||||
servicePackage: [{ required: true, message: '请选择客户套餐', trigger: 'change' }],
|
||||
paymentTermDays: [{ required: true, message: '请输入账期天数', trigger: 'change' }],
|
||||
}
|
||||
|
||||
function newQualificationDrafts(): QualificationDraft[] {
|
||||
const definitions: Array<Pick<QualificationDraft, 'type' | 'label' | 'required'>> = [
|
||||
{ type: 'BUSINESS_LICENSE', label: '营业执照', required: true },
|
||||
{ type: 'LEGAL_PERSON_ID', label: '法人身份证', required: true },
|
||||
{ type: 'FREIGHT_FORWARDER_CERTIFICATE', label: '货代资质证书', required: false },
|
||||
{ type: 'BANK_ACCOUNT_LICENSE', label: '银行开户许可证', required: false },
|
||||
]
|
||||
return definitions.map((item) => ({
|
||||
...item,
|
||||
file: null,
|
||||
validTo: '',
|
||||
uploaded: false,
|
||||
uploadedName: '',
|
||||
documentUrl: '',
|
||||
previewUrl: '',
|
||||
previewKind: '',
|
||||
previewLoading: false,
|
||||
previewFailed: false,
|
||||
uploading: false,
|
||||
error: '',
|
||||
}))
|
||||
}
|
||||
const qualifications = ref<QualificationDraft[]>(newQualificationDrafts())
|
||||
|
||||
const customerColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 245, fixed: 'left', slotName: 'actions' },
|
||||
{ prop: 'tenantCode', label: '客户ID', minWidth: 170 },
|
||||
{ key: 'company', label: '公司名称', minWidth: 230, slotName: 'company' },
|
||||
{ prop: 'unifiedSocialCreditCode', label: '统一社会信用代码', minWidth: 205, formatter: (row: PlatformTenantResource) => displayText(row.unifiedSocialCreditCode) },
|
||||
{ prop: 'contactName', label: '联系人', minWidth: 120, formatter: (row: PlatformTenantResource) => displayText(row.contactName) },
|
||||
{ prop: 'contactPhone', label: '电话', minWidth: 150, formatter: (row: PlatformTenantResource) => displayText(row.contactPhone) },
|
||||
{ prop: 'salesOwnerName', label: '销售人员', minWidth: 120, formatter: (row: PlatformTenantResource) => displayText(row.salesOwnerName) },
|
||||
{ prop: 'paymentTermDays', label: '账期(天)', width: 105, formatter: (row: PlatformTenantResource) => row.paymentTermDays ?? 0 },
|
||||
{ key: 'status', label: '状态', width: 110, slotName: 'status' },
|
||||
{ key: 'orderCount', label: '运单数', width: 100, slotName: 'orderCount' },
|
||||
{ prop: 'createdAt', label: '入驻时间', minWidth: 165, formatter: (row: PlatformTenantResource) => formatDate(row.createdAt) },
|
||||
]
|
||||
|
||||
let loadSequence = 0
|
||||
const editorTitle = computed(() => editingId.value ? '编辑客户' : '新增客户')
|
||||
const canUploadQualifications = computed(() => !editorStatus.value || ['PROFILE_REQUIRED', 'REJECTED'].includes(editorStatus.value))
|
||||
const canSubmitReview = computed(() => Boolean(editingId.value) && ['PROFILE_REQUIRED', 'REJECTED'].includes(editorStatus.value || ''))
|
||||
const uploadingQualifications = computed(() => qualifications.value.some((item) => item.uploading))
|
||||
const hasSelectedQualifications = computed(() => qualifications.value.some((item) => item.file))
|
||||
const hasUnsavedChanges = computed(() => Boolean(editingId.value) && JSON.stringify(form.value) !== savedFormSnapshot.value)
|
||||
function displayText(value?: string | null) { return value?.trim() || '—' }
|
||||
function formatDate(value?: string | null) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
|
||||
function statusMeta(status: PlatformTenantStatus) {
|
||||
if (status === 'ACTIVE') return { label: '启用', type: 'success' as const }
|
||||
if (status === 'PROFILE_REQUIRED') return { label: '待完善', type: 'info' as const }
|
||||
if (status === 'PENDING') return { label: '待审核', type: 'warning' as const }
|
||||
if (status === 'REJECTED') return { label: '已驳回', type: 'danger' as const }
|
||||
return { label: '已停用', type: 'info' as const }
|
||||
}
|
||||
|
||||
async function loadCustomers() {
|
||||
const sequence = ++loadSequence
|
||||
loading.value = true; loadError.value = null
|
||||
try {
|
||||
const pageResult = await listPlatformTenants({ page: page.value, size: pageSize.value, keyword: filters.value.keyword.trim() || undefined, status: filters.value.status || undefined })
|
||||
if (sequence !== loadSequence) return
|
||||
result.value = pageResult; orderCounts.value = {}
|
||||
if (access.can('platform:order:list') && pageResult.records.length) {
|
||||
try {
|
||||
const counts = await listPlatformTenantOrderCounts(pageResult.records.map((item) => item.id))
|
||||
if (sequence === loadSequence) orderCounts.value = Object.fromEntries(counts.map((item) => [String(item.tenantId), Number(item.orderCount)]))
|
||||
} catch { /* 主档可继续使用，运单服务失败时不显示模拟数量。 */ }
|
||||
}
|
||||
} catch (error) {
|
||||
if (sequence === loadSequence) loadError.value = getApiErrorDetails(error, '客户列表加载失败，请稍后重试')
|
||||
} finally { if (sequence === loadSequence) loading.value = false }
|
||||
}
|
||||
|
||||
function applyFilters() { if (page.value === 1) void loadCustomers(); else page.value = 1 }
|
||||
function clearDraftPreview(draft: QualificationDraft) {
|
||||
if (draft.previewUrl) URL.revokeObjectURL(draft.previewUrl)
|
||||
draft.previewUrl = ''
|
||||
draft.previewKind = ''
|
||||
draft.previewLoading = false
|
||||
draft.previewFailed = false
|
||||
}
|
||||
function clearQualificationPreviews() {
|
||||
for (const draft of qualifications.value) clearDraftPreview(draft)
|
||||
qualificationPreviewOpen.value = false
|
||||
qualificationPreviewName.value = ''
|
||||
qualificationPreviewUrl.value = ''
|
||||
qualificationPreviewKind.value = ''
|
||||
}
|
||||
function resetEditor() {
|
||||
clearQualificationPreviews()
|
||||
form.value = emptyForm(); qualifications.value = newQualificationDrafts(); qualificationLoadError.value = ''; savedFormSnapshot.value = ''
|
||||
}
|
||||
function openCreate() {
|
||||
editingId.value = null; editorStatus.value = null; resetEditor(); editorOpen.value = true
|
||||
nextTick(() => formRef.value?.clearValidate())
|
||||
}
|
||||
function mapTenantToForm(row: PlatformTenantResource): CreatePlatformTenantRequest {
|
||||
return {
|
||||
tenantName: row.tenantName, legalName: row.legalName || '', unifiedSocialCreditCode: row.unifiedSocialCreditCode || '',
|
||||
contactName: row.contactName || '', contactPhone: row.contactPhone || '', contactEmail: row.contactEmail || '',
|
||||
contactWechat: row.contactWechat || '', servicePackage: row.servicePackage || '基础版', salesOwnerName: row.salesOwnerName || '',
|
||||
paymentTermDays: Number(row.paymentTermDays ?? 0), enterpriseType: row.enterpriseType || '', establishedDate: row.establishedDate || null,
|
||||
registeredCapital: row.registeredCapital === null ? null : Number(row.registeredCapital),
|
||||
registeredCapitalCurrency: row.registeredCapitalCurrency || 'CNY', registeredAddress: row.registeredAddress || '',
|
||||
internalRemark: row.internalRemark || '',
|
||||
}
|
||||
}
|
||||
async function loadEditorQualifications(tenantId: number | string) {
|
||||
qualificationLoadError.value = ''
|
||||
try {
|
||||
const records = await listTenantQualifications(tenantId)
|
||||
for (const draft of qualifications.value) {
|
||||
const item = [...records].reverse().find((record) => record.qualificationType === draft.type && record.status !== 'REJECTED')
|
||||
if (item) {
|
||||
draft.uploaded = true
|
||||
draft.validTo = item.validTo || ''
|
||||
draft.documentUrl = item.documentUrl
|
||||
try { draft.uploadedName = qualificationFileName(item.documentUrl) }
|
||||
catch { draft.uploadedName = '已登记文件' }
|
||||
draft.previewKind = draft.uploadedName.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
|
||||
if (draft.previewKind === 'image') void loadQualificationPreview(draft, tenantId, false)
|
||||
}
|
||||
}
|
||||
} catch (error) { qualificationLoadError.value = getApiErrorMessage(error, '资质信息加载失败，可稍后重试') }
|
||||
}
|
||||
async function openEdit(row: PlatformTenantResource) {
|
||||
editingId.value = String(row.id); editorStatus.value = row.status; resetEditor(); form.value = mapTenantToForm(row)
|
||||
editorOpen.value = true; editorLoading.value = true
|
||||
try {
|
||||
const tenant = await getPlatformTenant(row.id)
|
||||
if (editingId.value !== String(row.id)) return
|
||||
editorStatus.value = tenant.status
|
||||
form.value = mapTenantToForm(tenant)
|
||||
savedFormSnapshot.value = JSON.stringify(form.value)
|
||||
await loadEditorQualifications(row.id)
|
||||
await nextTick(() => formRef.value?.clearValidate())
|
||||
} catch (error) {
|
||||
if (editingId.value === String(row.id)) editorOpen.value = false
|
||||
ElMessage.error(getApiErrorMessage(error, '客户完整资料加载失败，请稍后重试'))
|
||||
} finally {
|
||||
if (editingId.value === String(row.id)) editorLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectQualificationFile(event: Event, draft: QualificationDraft) {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0] || null
|
||||
draft.error = ''; draft.file = null; clearDraftPreview(draft)
|
||||
if (!file) return
|
||||
const extensionValid = /\.(pdf|jpe?g|png)$/i.test(file.name)
|
||||
const mimeValid = ['application/pdf', 'image/jpeg', 'image/png'].includes(file.type)
|
||||
if (!extensionValid || !mimeValid) { draft.error = '仅支持 PDF、JPG、PNG 文件'; input.value = ''; return }
|
||||
if (file.size > 10 * 1024 * 1024) { draft.error = '单个文件不能超过 10MB'; input.value = ''; return }
|
||||
draft.file = file
|
||||
draft.previewKind = file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
|
||||
draft.previewUrl = URL.createObjectURL(file)
|
||||
}
|
||||
|
||||
async function loadQualificationPreview(draft: QualificationDraft, tenantId: number | string, showError = true) {
|
||||
if (!draft.documentUrl || draft.previewLoading) return false
|
||||
draft.previewLoading = true
|
||||
try {
|
||||
const blob = await downloadTenantQualification(tenantId, draft.documentUrl)
|
||||
if (!blob.size) throw new Error('资质文件内容为空')
|
||||
if (!editorOpen.value || !qualifications.value.includes(draft)) return false
|
||||
clearDraftPreview(draft)
|
||||
draft.previewKind = blob.type === 'application/pdf' || draft.uploadedName.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
|
||||
draft.previewUrl = URL.createObjectURL(blob)
|
||||
return true
|
||||
} catch (error) {
|
||||
if (showError) ElMessage.error(getApiErrorMessage(error, '资质文件预览加载失败，请稍后重试'))
|
||||
return false
|
||||
} finally { draft.previewLoading = false }
|
||||
}
|
||||
|
||||
async function openQualificationPreview(draft: QualificationDraft) {
|
||||
if (draft.previewFailed) {
|
||||
if (!draft.uploaded || !editingId.value) {
|
||||
ElMessage.warning('该文件无法预览，请重新选择有效文件')
|
||||
return
|
||||
}
|
||||
clearDraftPreview(draft)
|
||||
draft.previewKind = draft.uploadedName.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
|
||||
}
|
||||
if (!draft.previewUrl && draft.uploaded && editingId.value) {
|
||||
await loadQualificationPreview(draft, editingId.value)
|
||||
}
|
||||
if (!draft.previewUrl || !draft.previewKind) return
|
||||
qualificationPreviewName.value = draft.file?.name || draft.uploadedName || draft.label
|
||||
qualificationPreviewUrl.value = draft.previewUrl
|
||||
qualificationPreviewKind.value = draft.previewKind
|
||||
qualificationPreviewOpen.value = true
|
||||
}
|
||||
|
||||
function handleQualificationPreviewError(draft: QualificationDraft) {
|
||||
draft.previewFailed = true
|
||||
if (qualificationPreviewUrl.value === draft.previewUrl) qualificationPreviewOpen.value = false
|
||||
}
|
||||
|
||||
function detailQualificationName(item: PlatformTenantQualification) {
|
||||
try { return qualificationFileName(item.documentUrl) }
|
||||
catch { return `${qualifications.value.find((draft) => draft.type === item.qualificationType)?.label || '资质'}文件` }
|
||||
}
|
||||
|
||||
function clearDetailQualificationPreviews() {
|
||||
for (const preview of Object.values(detailQualificationPreviews.value)) {
|
||||
if (preview.url) URL.revokeObjectURL(preview.url)
|
||||
}
|
||||
detailQualificationPreviews.value = {}
|
||||
qualificationPreviewOpen.value = false
|
||||
}
|
||||
|
||||
async function loadDetailQualificationPreview(item: PlatformTenantQualification, showError = true) {
|
||||
const key = String(item.id)
|
||||
const preview = detailQualificationPreviews.value[key]
|
||||
const tenantId = detail.value?.id
|
||||
if (!preview || !tenantId || !item.documentUrl || preview.loading) return false
|
||||
preview.loading = true
|
||||
try {
|
||||
const blob = await downloadTenantQualification(tenantId, item.documentUrl)
|
||||
if (!blob.size) throw new Error('资质文件内容为空')
|
||||
if (!detailOpen.value || detailQualificationPreviews.value[key] !== preview) return false
|
||||
if (preview.url) URL.revokeObjectURL(preview.url)
|
||||
preview.url = URL.createObjectURL(blob)
|
||||
preview.kind = blob.type === 'application/pdf' || detailQualificationName(item).toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
|
||||
preview.failed = false
|
||||
return true
|
||||
} catch (error) {
|
||||
preview.failed = true
|
||||
if (showError) ElMessage.error(getApiErrorMessage(error, '资质文件预览加载失败，请稍后重试'))
|
||||
return false
|
||||
} finally {
|
||||
if (detailQualificationPreviews.value[key] === preview) preview.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetailQualificationPreview(item: PlatformTenantQualification) {
|
||||
const preview = detailQualificationPreviews.value[String(item.id)]
|
||||
if (!preview) return
|
||||
if (preview.failed) {
|
||||
if (preview.url) URL.revokeObjectURL(preview.url)
|
||||
preview.url = ''
|
||||
preview.failed = false
|
||||
}
|
||||
if (!preview.url) await loadDetailQualificationPreview(item)
|
||||
if (!preview.url) return
|
||||
qualificationPreviewName.value = detailQualificationName(item)
|
||||
qualificationPreviewUrl.value = preview.url
|
||||
qualificationPreviewKind.value = preview.kind
|
||||
qualificationPreviewOpen.value = true
|
||||
}
|
||||
|
||||
function handleDetailQualificationPreviewError(item: PlatformTenantQualification) {
|
||||
const preview = detailQualificationPreviews.value[String(item.id)]
|
||||
if (!preview) return
|
||||
preview.failed = true
|
||||
if (qualificationPreviewUrl.value === preview.url) qualificationPreviewOpen.value = false
|
||||
}
|
||||
|
||||
async function uploadSelectedQualifications(tenantId: string) {
|
||||
const failures: string[] = []
|
||||
for (const draft of qualifications.value.filter((item) => item.file)) {
|
||||
draft.uploading = true; draft.error = ''
|
||||
try {
|
||||
const uploaded = await uploadPlatformTenantQualification(
|
||||
tenantId, draft.type, draft.file as File, draft.validTo || undefined,
|
||||
draft.type === 'BUSINESS_LICENSE' ? form.value.unifiedSocialCreditCode : undefined,
|
||||
draft.uploaded,
|
||||
)
|
||||
draft.uploaded = true
|
||||
draft.uploadedName = draft.file?.name || '已登记文件'
|
||||
draft.documentUrl = uploaded.documentUrl
|
||||
draft.file = null
|
||||
} catch (error) {
|
||||
draft.error = getApiErrorMessage(error, '上传失败，请重试'); failures.push(draft.label)
|
||||
} finally { draft.uploading = false }
|
||||
}
|
||||
return failures
|
||||
}
|
||||
|
||||
async function saveCustomer() {
|
||||
if (!formRef.value || !(await formRef.value.validate().catch(() => false))) return
|
||||
saving.value = true
|
||||
try {
|
||||
const hadSelectedQualifications = hasSelectedQualifications.value
|
||||
let saved: PlatformTenantResource
|
||||
if (editingId.value) {
|
||||
const { unifiedSocialCreditCode: _immutable, ...payload } = form.value
|
||||
saved = await updatePlatformTenant(editingId.value, payload)
|
||||
} else {
|
||||
saved = await createPlatformTenant(form.value)
|
||||
editingId.value = String(saved.id)
|
||||
}
|
||||
editorStatus.value = saved.status
|
||||
savedFormSnapshot.value = JSON.stringify(form.value)
|
||||
const failures = hadSelectedQualifications ? await uploadSelectedQualifications(String(saved.id)) : []
|
||||
if (failures.length) {
|
||||
ElMessage.warning(`客户资料已保存，但${failures.join('、')}上传失败；失败文件已保留，请修正后再次保存`)
|
||||
} else if (hadSelectedQualifications) {
|
||||
ElMessage.success('客户资料和已选资质已保存，尚未提交审核')
|
||||
} else {
|
||||
ElMessage.success('客户资料已保存，尚未提交审核')
|
||||
}
|
||||
await loadCustomers()
|
||||
} catch (error) { ElMessage.error(getApiErrorMessage(error, '客户资料保存失败，请稍后重试')) }
|
||||
finally { saving.value = false }
|
||||
}
|
||||
|
||||
async function submitReview() {
|
||||
if (!editingId.value) { ElMessage.warning('请先保存客户资料和资质文件'); return }
|
||||
if (!formRef.value || !(await formRef.value.validate().catch(() => false))) return
|
||||
if (hasUnsavedChanges.value) { ElMessage.warning('客户资料有未保存的修改，请先保存资料'); return }
|
||||
if (uploadingQualifications.value) { ElMessage.warning('资质文件正在上传，请稍候再提交审核'); return }
|
||||
if (hasSelectedQualifications.value) { ElMessage.warning('存在尚未保存的已选文件，请先点击“保存资料和资质”'); return }
|
||||
const missing = qualifications.value.filter((item) => item.required && !item.uploaded)
|
||||
for (const item of missing) item.error = `${item.label}为提交审核必填文件`
|
||||
if (missing.length) { ElMessage.warning('请先上传营业执照和法人身份证'); return }
|
||||
try {
|
||||
await ElMessageBox.confirm('提交后客户资料与资质将进入企业审核，审核完成前不能继续替换文件。确认提交吗？', '提交企业审核', { type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '继续完善' })
|
||||
submitting.value = true
|
||||
const saved = await submitPlatformTenantReview(editingId.value)
|
||||
editorStatus.value = saved.status; ElMessage.success('审核单已提交')
|
||||
editorOpen.value = false; await loadCustomers()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel' && error !== 'close') ElMessage.error(getApiErrorMessage(error, '提交审核失败，请稍后重试'))
|
||||
} finally { submitting.value = false }
|
||||
}
|
||||
|
||||
async function showDetail(row: PlatformTenantResource) {
|
||||
clearDetailQualificationPreviews()
|
||||
detail.value = row; detailQualifications.value = []; detailOpen.value = true; detailLoading.value = true
|
||||
try {
|
||||
const [tenant, records] = await Promise.all([getPlatformTenant(row.id), listTenantQualifications(row.id)])
|
||||
detail.value = tenant
|
||||
detailQualifications.value = records
|
||||
detailQualificationPreviews.value = Object.fromEntries(records.map((item) => {
|
||||
const kind = detailQualificationName(item).toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
|
||||
return [String(item.id), { url: '', kind, loading: false, failed: false } satisfies DetailQualificationPreview]
|
||||
}))
|
||||
for (const item of records) {
|
||||
if (detailQualificationPreviews.value[String(item.id)]?.kind === 'image') void loadDetailQualificationPreview(item, false)
|
||||
}
|
||||
} catch (error) { ElMessage.error(getApiErrorMessage(error, '客户详情加载失败')) }
|
||||
finally { detailLoading.value = false }
|
||||
}
|
||||
async function toggleStatus(row: PlatformTenantResource) {
|
||||
const next = row.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'; const verb = next === 'ACTIVE' ? '启用' : '停用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认${verb}客户“${row.tenantName}”吗？`, `${verb}客户`, { type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消' })
|
||||
rowActionId.value = String(row.id); await changePlatformTenantStatus(row.id, next)
|
||||
ElMessage.success(`客户已${verb}`); await loadCustomers()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel' && error !== 'close') ElMessage.error(getApiErrorMessage(error, `客户${verb}失败`))
|
||||
} finally { rowActionId.value = '' }
|
||||
}
|
||||
|
||||
async function exportCustomers() {
|
||||
exportSubmitting.value = true
|
||||
try {
|
||||
await createPlatformExportTask({
|
||||
exportType: 'CUSTOMER_LIST',
|
||||
format: 'XLSX',
|
||||
taskName: '客户列表',
|
||||
parameters: {
|
||||
keyword: filters.value.keyword.trim() || undefined,
|
||||
status: filters.value.status || undefined,
|
||||
},
|
||||
})
|
||||
ElMessage.success('导出任务已创建，可前往下载中心查看')
|
||||
} catch (error) { ElMessage.error(getApiErrorMessage(error, '客户导出任务创建失败')) }
|
||||
finally { exportSubmitting.value = false }
|
||||
}
|
||||
|
||||
watch([page, pageSize], () => { void loadCustomers() })
|
||||
watch(editorOpen, (open) => { if (!open) clearQualificationPreviews() })
|
||||
watch(detailOpen, (open) => { if (!open) clearDetailQualificationPreviews() })
|
||||
onBeforeUnmount(clearQualificationPreviews)
|
||||
onBeforeUnmount(clearDetailQualificationPreviews)
|
||||
onMounted(loadCustomers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="business-page customers-page">
|
||||
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户筛选" :fields="queryFields" @search="applyFilters" />
|
||||
<section v-if="loadError" class="surface-panel customers-error" role="alert"><div><strong>客户列表暂时无法加载</strong><p>{{ loadError.message }}</p><ApiErrorMeta :details="loadError" /></div><el-button type="primary" :loading="loading" @click="loadCustomers">重新加载</el-button></section>
|
||||
<section v-else class="surface-panel table-panel" :aria-busy="loading">
|
||||
<div class="customers-table-header"><div class="customers-table-heading"><h2>客户列表</h2><span>共 {{ result.total }} 个客户</span></div><div class="customers-table-actions"><el-button v-if="access.can('platform:customer:export')" :loading="exportSubmitting" :disabled="loading" @click="exportCustomers"><Download :size="16" />导出Excel</el-button><el-button v-if="access.can('platform:customer:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增客户</el-button></div></div>
|
||||
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户">
|
||||
<template #actions="{ row }"><div class="table-actions"><el-button v-if="access.can('platform:customer:view')" link type="primary" @click="showDetail(row as PlatformTenantResource)"><Eye :size="15" />详情</el-button><el-button v-if="access.can('platform:customer:view') && access.can('platform:customer:edit')" link type="primary" @click="openEdit(row as PlatformTenantResource)"><Pencil :size="15" />编辑</el-button><el-button v-if="access.can('platform:customer:status') && ['ACTIVE','DISABLED'].includes((row as PlatformTenantResource).status)" link :type="(row as PlatformTenantResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="rowActionId === String((row as PlatformTenantResource).id)" @click="toggleStatus(row as PlatformTenantResource)"><Power :size="15" />{{ (row as PlatformTenantResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button></div></template>
|
||||
<template #company="{ row }"><div class="customer-company-cell"><span><Building2 :size="18" /></span><strong>{{ (row as PlatformTenantResource).tenantName }}</strong></div></template>
|
||||
<template #status="{ row }"><el-tag :type="statusMeta((row as PlatformTenantResource).status).type" effect="light">{{ statusMeta((row as PlatformTenantResource).status).label }}</el-tag></template>
|
||||
<template #orderCount="{ row }">{{ access.can('platform:order:list') ? (orderCounts[String((row as PlatformTenantResource).id)] ?? '—') : '—' }}</template>
|
||||
</DataTable>
|
||||
</section>
|
||||
|
||||
<el-drawer v-model="editorOpen" :title="editorTitle" size="760px" class="business-drawer customer-editor" :close-on-click-modal="false">
|
||||
<el-form ref="formRef" v-loading="editorLoading" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="editorLoading || saving || submitting || uploadingQualifications">
|
||||
<div class="form-section"><h3>基础资料</h3><div class="form-grid two-cols">
|
||||
<el-form-item label="公司名称" prop="tenantName" required><el-input v-model="form.tenantName" placeholder="请输入工商登记公司名称" maxlength="128" /></el-form-item>
|
||||
<el-form-item label="营业执照企业名称" prop="legalName" required><el-input v-model="form.legalName" placeholder="请输入营业执照上的企业名称" maxlength="128" /></el-form-item>
|
||||
<el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" required><el-input v-model="form.unifiedSocialCreditCode" :disabled="Boolean(editingId)" placeholder="请输入18位大写字母或数字" maxlength="18" @input="form.unifiedSocialCreditCode = String($event).toUpperCase()" /></el-form-item>
|
||||
<el-form-item label="企业类型" prop="enterpriseType"><el-input v-model="form.enterpriseType" placeholder="如：有限责任公司" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="成立日期" prop="establishedDate"><el-date-picker v-model="form.establishedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择成立日期" :disabled-date="(date: Date) => date.getTime() > Date.now()" /></el-form-item>
|
||||
<el-form-item label="注册资本" prop="registeredCapital"><div class="capital-input"><el-input-number v-model="form.registeredCapital" :min="0" :precision="2" controls-position="right" /><el-select v-model="form.registeredCapitalCurrency" aria-label="注册资本币种"><el-option label="人民币 CNY" value="CNY" /><el-option label="美元 USD" value="USD" /><el-option label="港币 HKD" value="HKD" /></el-select></div></el-form-item>
|
||||
</div><el-form-item label="注册地址" prop="registeredAddress"><el-input v-model="form.registeredAddress" placeholder="请输入省市区、街道及门牌信息" maxlength="500" /></el-form-item></div>
|
||||
|
||||
<div class="form-section"><h3>联系与商务</h3><div class="form-grid two-cols">
|
||||
<el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入手机号或固定电话" maxlength="32" /></el-form-item>
|
||||
<el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item>
|
||||
<el-form-item label="联系微信" prop="contactWechat"><el-input v-model="form.contactWechat" placeholder="请输入联系人微信号" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="客户套餐" prop="servicePackage" required><el-select v-model="form.servicePackage"><el-option label="基础版" value="基础版" /><el-option label="专业版" value="专业版" /><el-option label="企业版" value="企业版" /></el-select></el-form-item>
|
||||
<el-form-item label="销售人员" prop="salesOwnerName"><el-input v-model="form.salesOwnerName" placeholder="请输入负责销售人员" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="账期(天)" prop="paymentTermDays" required><el-input-number v-model="form.paymentTermDays" :min="0" :max="365" controls-position="right" /></el-form-item>
|
||||
</div><el-form-item label="内部备注" prop="internalRemark"><el-input v-model="form.internalRemark" type="textarea" :rows="3" placeholder="请输入仅平台人员可见的客户备注" maxlength="1000" show-word-limit /></el-form-item></div>
|
||||
|
||||
<div class="form-section qualification-section"><div class="qualification-heading"><div><h3>资质文件</h3><p>先选择并上传文件；上传成功不会创建审核单，点击“提交审核”并确认后才会进入审核。</p></div><el-tag v-if="editorStatus" :type="statusMeta(editorStatus).type" effect="light">{{ statusMeta(editorStatus).label }}</el-tag></div>
|
||||
<div v-if="qualificationLoadError" class="qualification-load-error" role="alert">{{ qualificationLoadError }}<el-button v-if="editingId" link type="primary" @click="loadEditorQualifications(editingId)">重试</el-button></div>
|
||||
<div class="qualification-table" role="table" aria-label="客户资质文件">
|
||||
<div class="qualification-row qualification-header" role="row"><span role="columnheader">文件类型</span><span role="columnheader">上传文件</span><span role="columnheader">有效期</span></div>
|
||||
<div v-for="draft in qualifications" :key="draft.type" class="qualification-row" role="row">
|
||||
<div class="qualification-label" role="cell"><span v-if="draft.required" aria-hidden="true">*</span>{{ draft.label }}<CheckCircle2 v-if="draft.uploaded" :size="16" aria-label="已上传" /></div>
|
||||
<div class="qualification-file" role="cell">
|
||||
<button v-if="draft.file || draft.uploaded" type="button" class="qualification-preview-trigger" :class="{ 'is-loading': draft.previewLoading }" :disabled="draft.previewLoading" :aria-label="`预览${draft.label}：${draft.file?.name || draft.uploadedName}`" @click="openQualificationPreview(draft)">
|
||||
<img v-if="draft.previewUrl && draft.previewKind === 'image' && !draft.previewFailed" :src="draft.previewUrl" :alt="`${draft.label}预览`" @error="handleQualificationPreviewError(draft)" />
|
||||
<span v-else class="qualification-preview-placeholder"><FileText :size="20" /><small>{{ draft.previewKind === 'pdf' ? 'PDF' : '文件' }}</small></span>
|
||||
<span class="qualification-preview-action"><Eye :size="14" />{{ draft.previewLoading ? '读取中' : (draft.previewFailed ? '重试' : '查看') }}</span>
|
||||
</button>
|
||||
<div class="qualification-file-control"><label class="file-picker" :class="{ 'is-disabled': !canUploadQualifications || draft.uploading }"><FileUp :size="16" /><span>{{ draft.uploading ? '上传中' : (draft.file ? '已选择新文件' : (draft.uploaded ? '更换文件' : '选择文件')) }}</span><input type="file" accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png" :disabled="!canUploadQualifications || draft.uploading" @change="selectQualificationFile($event, draft)" /></label><span class="qualification-file-name" :title="draft.file?.name || draft.uploadedName">{{ draft.file?.name || draft.uploadedName || '未选择文件' }}</span><small v-if="draft.error" class="qualification-error" role="alert">{{ draft.error }}</small></div>
|
||||
</div>
|
||||
<div role="cell"><el-date-picker v-model="draft.validTo" type="date" value-format="YYYY-MM-DD" placeholder="请选择有效期" :disabled="!canUploadQualifications || draft.uploaded" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="qualification-hint">支持 PDF、JPG、PNG，单个文件不超过 10MB；<span>*</span> 为提交审核必填项。</p>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer><div class="drawer-footer customer-editor-footer"><span>保存资料时会一并上传已选资质；进入审核仍需点击“提交审核”并再次确认</span><div><el-button :disabled="editorLoading || saving || submitting || uploadingQualifications" @click="editorOpen = false">关闭</el-button><el-button :loading="saving" :disabled="editorLoading || submitting || uploadingQualifications" @click="saveCustomer">保存资料和资质</el-button><el-button v-if="canSubmitReview" type="primary" :loading="submitting" :disabled="editorLoading || saving || uploadingQualifications" @click="submitReview">提交审核</el-button></div></div></template>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog v-model="qualificationPreviewOpen" :title="qualificationPreviewName || '查看资质文件'" width="min(860px, calc(100vw - 28px))" class="qualification-preview-dialog" destroy-on-close>
|
||||
<div class="qualification-preview">
|
||||
<img v-if="qualificationPreviewUrl && qualificationPreviewKind === 'image'" :src="qualificationPreviewUrl" :alt="`${qualificationPreviewName}预览`" />
|
||||
<iframe v-else-if="qualificationPreviewUrl && qualificationPreviewKind === 'pdf'" :src="qualificationPreviewUrl" :title="`${qualificationPreviewName} PDF 预览`" />
|
||||
</div>
|
||||
<template #footer><el-button @click="qualificationPreviewOpen = false">关闭预览</el-button></template>
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer v-model="detailOpen" title="客户详情" size="620px" class="business-drawer">
|
||||
<div v-loading="detailLoading" class="customer-detail">
|
||||
<template v-if="detail">
|
||||
<div class="detail-title">
|
||||
<span><Building2 :size="22" /></span>
|
||||
<div><h3>{{ detail.tenantName }}</h3><p>{{ detail.tenantCode }}</p></div>
|
||||
<el-tag :type="statusMeta(detail.status).type" effect="light">{{ statusMeta(detail.status).label }}</el-tag>
|
||||
</div>
|
||||
|
||||
<section class="customer-detail-section" aria-labelledby="customer-profile-heading">
|
||||
<h4 id="customer-profile-heading">企业资料</h4>
|
||||
<dl class="customer-detail-grid">
|
||||
<div class="customer-detail-item is-wide"><dt>统一社会信用代码</dt><dd>{{ displayText(detail.unifiedSocialCreditCode) }}</dd></div>
|
||||
<div class="customer-detail-item"><dt>联系人</dt><dd>{{ displayText(detail.contactName) }}</dd></div>
|
||||
<div class="customer-detail-item"><dt>联系电话</dt><dd>{{ displayText(detail.contactPhone) }}</dd></div>
|
||||
<div class="customer-detail-item is-wide"><dt>联系邮箱</dt><dd>{{ displayText(detail.contactEmail) }}</dd></div>
|
||||
<div class="customer-detail-item"><dt>客户套餐</dt><dd>{{ displayText(detail.servicePackage) }}</dd></div>
|
||||
<div class="customer-detail-item"><dt>账期</dt><dd>{{ detail.paymentTermDays ?? 0 }} 天</dd></div>
|
||||
<div class="customer-detail-item"><dt>销售人员</dt><dd>{{ displayText(detail.salesOwnerName) }}</dd></div>
|
||||
<div class="customer-detail-item"><dt>入驻时间</dt><dd>{{ formatDate(detail.createdAt) }}</dd></div>
|
||||
<div class="customer-detail-item is-wide"><dt>注册地址</dt><dd>{{ displayText(detail.registeredAddress) }}</dd></div>
|
||||
<div class="customer-detail-item is-wide"><dt>内部备注</dt><dd>{{ displayText(detail.internalRemark) }}</dd></div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="customer-detail-section detail-qualification-list" aria-labelledby="customer-qualification-heading">
|
||||
<div class="detail-section-heading"><h4 id="customer-qualification-heading">资质文件</h4><span>共 {{ detailQualifications.length }} 份</span></div>
|
||||
<div v-if="detailQualifications.length" class="detail-qualification-items">
|
||||
<button v-for="item in detailQualifications" :key="String(item.id)" type="button" class="detail-qualification-item" :disabled="detailQualificationPreviews[String(item.id)]?.loading" :aria-label="`查看${qualifications.find((draft) => draft.type === item.qualificationType)?.label || item.qualificationType}：${detailQualificationName(item)}`" @click="openDetailQualificationPreview(item)">
|
||||
<span class="detail-qualification-icon">
|
||||
<img v-if="detailQualificationPreviews[String(item.id)]?.url && detailQualificationPreviews[String(item.id)]?.kind === 'image' && !detailQualificationPreviews[String(item.id)]?.failed" :src="detailQualificationPreviews[String(item.id)]?.url" :alt="`${qualifications.find((draft) => draft.type === item.qualificationType)?.label || item.qualificationType}缩略图`" @error="handleDetailQualificationPreviewError(item)" />
|
||||
<FileText v-else :size="20" />
|
||||
<small v-if="detailQualificationPreviews[String(item.id)]?.kind === 'pdf'">PDF</small>
|
||||
</span>
|
||||
<span class="detail-qualification-copy"><strong>{{ qualifications.find((draft) => draft.type === item.qualificationType)?.label || item.qualificationType }}</strong><small class="detail-qualification-file-name">{{ detailQualificationName(item) }}</small><small>{{ item.validTo ? `有效期至 ${item.validTo}` : '长期有效或未设置有效期' }}</small></span>
|
||||
<span class="detail-qualification-meta"><el-tag :type="item.status === 'APPROVED' ? 'success' : item.status === 'REJECTED' ? 'danger' : 'warning'" size="small" effect="light">{{ item.status === 'APPROVED' ? '已通过' : item.status === 'REJECTED' ? '已驳回' : '待审核' }}</el-tag><span><Eye :size="14" />{{ detailQualificationPreviews[String(item.id)]?.loading ? '读取中' : (detailQualificationPreviews[String(item.id)]?.failed ? '重试' : '查看') }}</span></span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="detail-empty-qualification"><FileCheck2 :size="20" /><span>暂未上传资质文件</span></div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.customers-error { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-color:#fecdca; background:#fffafa; }
|
||||
.customers-error strong { color:#7a271a; font-size:16px; } .customers-error p { margin:4px 0 0; color:#b54708; font-size:12px; overflow-wrap:anywhere; }
|
||||
.customers-table-header { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--cc-border); }
|
||||
.customers-table-heading { display:flex; min-width:0; align-items:baseline; gap:10px; } .customers-table-heading h2 { margin:0; color:var(--cc-text); font-size:16px; } .customers-table-heading span { color:var(--cc-muted); font-size:12px; white-space:nowrap; }
|
||||
.customers-table-actions { display:flex; flex-wrap:wrap; gap:8px; } .customers-table-actions :deep(.el-button + .el-button) { margin-left:0; }
|
||||
.customer-company-cell { display:flex; min-width:0; align-items:center; gap:10px; } .customer-company-cell > span,.detail-title > span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:7px; background:#eef4ff; color:var(--cc-primary); } .customer-company-cell strong { overflow:hidden; text-overflow:ellipsis; }
|
||||
.capital-input { display:grid; grid-template-columns:minmax(0,1fr) 130px; width:100%; gap:8px; } .capital-input :deep(.el-input-number),.capital-input :deep(.el-select) { width:100%; }
|
||||
.qualification-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .qualification-heading h3 { margin-bottom:4px; } .qualification-heading p,.qualification-hint { margin:0; color:var(--cc-muted); font-size:12px; line-height:1.6; } .qualification-hint { margin-top:12px; } .qualification-hint span,.qualification-label > span { color:var(--el-color-danger); }
|
||||
.qualification-table { overflow:hidden; margin-top:14px; border:1px solid var(--cc-border); border-radius:8px; } .qualification-row { display:grid; grid-template-columns:180px minmax(300px,1fr) 180px; min-width:0; border-top:1px solid var(--cc-border); } .qualification-row:first-child { border-top:0; } .qualification-row > * { display:flex; min-width:0; min-height:68px; align-items:center; padding:12px 14px; } .qualification-header { min-height:44px; background:#f7f8fc; color:var(--cc-muted); font-size:12px; font-weight:600; } .qualification-header > * { min-height:44px; }
|
||||
.qualification-label { gap:5px; font-weight:600; } .qualification-label svg { margin-left:auto; color:var(--el-color-success); }
|
||||
.qualification-file { gap:12px; } .qualification-file-control { display:flex; min-width:0; flex:1; flex-wrap:wrap; align-items:center; gap:8px; } .file-picker { position:relative; display:inline-flex; min-height:36px; flex:0 0 auto; align-items:center; gap:7px; overflow:hidden; padding:0 12px; border:1px solid var(--cc-border); border-radius:6px; background:#fff; color:var(--cc-text); cursor:pointer; } .file-picker:focus-within { outline:2px solid color-mix(in srgb,var(--cc-primary) 35%,transparent); outline-offset:2px; } .file-picker.is-disabled { cursor:not-allowed; opacity:.6; } .file-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:inherit; } .qualification-file-name { min-width:0; max-width:180px; overflow:hidden; color:var(--cc-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .qualification-error { width:100%; color:var(--el-color-danger); line-height:1.4; }
|
||||
.qualification-preview-trigger { position:relative; display:grid; width:68px; height:68px; flex:0 0 68px; overflow:hidden; place-items:center; padding:0; border:1px solid var(--cc-border); border-radius:6px; background:#f8fafc; color:var(--cc-muted); cursor:pointer; }
|
||||
.qualification-preview-trigger:hover { border-color:var(--cc-primary); color:var(--cc-primary); }
|
||||
.qualification-preview-trigger:focus-visible { outline:2px solid color-mix(in srgb,var(--cc-primary) 42%,transparent); outline-offset:2px; }
|
||||
.qualification-preview-trigger:disabled { cursor:wait; opacity:.72; }
|
||||
.qualification-preview-trigger img { width:100%; height:100%; object-fit:contain; background:#fff; }
|
||||
.qualification-preview-placeholder { display:grid; place-items:center; gap:2px; }
|
||||
.qualification-preview-placeholder small { font-size:10px; font-weight:700; }
|
||||
.qualification-preview-action { position:absolute; inset:auto 0 0; display:flex; min-height:22px; align-items:center; justify-content:center; gap:3px; background:rgba(23,32,51,.78); color:#fff; font-size:10px; }
|
||||
.qualification-preview { display:grid; max-height:min(70vh,760px); min-height:240px; place-items:center; overflow:auto; border:1px solid var(--cc-border); border-radius:6px; background:#f8fafc; }
|
||||
.qualification-preview img { display:block; max-width:100%; height:auto; }
|
||||
.qualification-preview iframe { width:100%; min-height:min(68vh,720px); border:0; background:#fff; }
|
||||
.qualification-load-error { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid #fecdca; border-radius:6px; background:#fffafa; color:#b42318; font-size:12px; }
|
||||
.customer-editor :deep(.el-drawer__body) { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
|
||||
.customer-editor :deep(.el-drawer__footer) { flex:0 0 auto; }
|
||||
.customer-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; } .customer-editor-footer > span { color:var(--cc-muted); font-size:12px; text-align:left; } .customer-editor-footer > div { display:flex; flex:0 0 auto; gap:8px; } .customer-editor-footer :deep(.el-button + .el-button) { margin-left:0; }
|
||||
.customer-detail { min-height:200px; padding:20px 24px 24px; }
|
||||
.detail-title { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:24px; padding:4px 0 20px; border-bottom:1px solid var(--cc-border); }
|
||||
.detail-title > span { width:44px; height:44px; border-radius:10px; }
|
||||
.detail-title h3 { margin:0; overflow:hidden; color:var(--cc-text); font-size:20px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.detail-title p { margin:4px 0 0; color:var(--cc-muted); font-size:12px; letter-spacing:.02em; }
|
||||
.customer-detail-section + .customer-detail-section { margin-top:24px; }
|
||||
.customer-detail-section h4 { margin:0 0 12px; color:var(--cc-text); font-size:14px; }
|
||||
.customer-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; margin:0; border:1px solid var(--cc-border); border-radius:10px; background:#fff; }
|
||||
.customer-detail-item { min-width:0; padding:13px 16px; border-bottom:1px solid var(--cc-border); }
|
||||
.customer-detail-item:nth-child(odd):not(.is-wide) { border-right:1px solid var(--cc-border); }
|
||||
.customer-detail-item.is-wide { grid-column:1 / -1; }
|
||||
.customer-detail-item:last-child { border-bottom:0; }
|
||||
.customer-detail-item dt { margin-bottom:5px; color:var(--cc-muted); font-size:12px; line-height:1.4; }
|
||||
.customer-detail-item dd { margin:0; color:var(--cc-text); font-size:14px; font-weight:600; line-height:1.55; overflow-wrap:anywhere; }
|
||||
.detail-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
|
||||
.detail-section-heading h4 { margin-bottom:12px; }
|
||||
.detail-section-heading span { color:var(--cc-muted); font-size:12px; }
|
||||
.detail-qualification-items { display:flex; flex-direction:column; gap:8px; }
|
||||
.detail-qualification-item { display:grid; width:100%; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--cc-border); border-radius:8px; background:#fff; color:inherit; text-align:left; cursor:pointer; }
|
||||
.detail-qualification-item:hover { border-color:color-mix(in srgb,var(--cc-primary) 48%,var(--cc-border)); background:#fbfdff; }
|
||||
.detail-qualification-item:focus-visible { outline:2px solid color-mix(in srgb,var(--cc-primary) 42%,transparent); outline-offset:2px; }
|
||||
.detail-qualification-item:disabled { cursor:wait; opacity:.75; }
|
||||
.detail-qualification-icon { display:grid; width:52px; height:52px; overflow:hidden; place-items:center; border-radius:8px; background:#eef4ff; color:var(--cc-primary); }
|
||||
.detail-qualification-icon img { width:100%; height:100%; object-fit:contain; background:#fff; }
|
||||
.detail-qualification-icon small { font-size:9px; font-weight:700; }
|
||||
.detail-qualification-copy { min-width:0; }
|
||||
.detail-qualification-item strong,.detail-qualification-item small { display:block; }
|
||||
.detail-qualification-item strong { color:var(--cc-text); font-size:13px; }
|
||||
.detail-qualification-item small { margin-top:4px; color:var(--cc-muted); font-size:11px; line-height:1.4; }
|
||||
.detail-qualification-file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.detail-qualification-meta { display:flex; align-items:flex-end; gap:8px; flex-direction:column; }
|
||||
.detail-qualification-meta > span { display:flex; align-items:center; gap:4px; color:var(--cc-primary); font-size:11px; font-weight:600; }
|
||||
.detail-empty-qualification { display:flex; min-height:88px; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--cc-border); border-radius:8px; background:#fafbfc; color:var(--cc-muted); font-size:12px; }
|
||||
@media (max-width:720px) { .customers-error,.customers-table-header,.customer-editor-footer { align-items:stretch; flex-direction:column; } .customers-table-actions { display:grid; grid-template-columns:1fr 1fr; } .customers-table-actions :deep(.el-button) { min-height:40px; margin:0; } .qualification-table { overflow-x:auto; } .qualification-row { min-width:640px; } .customer-editor-footer > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); width:100%; } .customer-editor-footer :deep(.el-button) { min-height:40px; margin:0; } .customer-detail { padding:16px; } .customer-detail-grid { grid-template-columns:1fr; } .customer-detail-item,.customer-detail-item:nth-child(odd):not(.is-wide) { grid-column:1; border-right:0; } .customer-detail-item:last-child { border-bottom:0; } }
|
||||
@media (max-width:480px) { .detail-qualification-item { grid-template-columns:44px minmax(0,1fr); } .detail-qualification-icon { width:44px; height:44px; } .detail-qualification-meta { grid-column:2; align-items:center; flex-direction:row; justify-content:space-between; } }
|
||||
@media (max-width:360px) { .customers-table-actions,.capital-input { grid-template-columns:1fr; } }
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import {
|
||||
approveEnterpriseReview,
|
||||
downloadTenantQualification,
|
||||
listEnterpriseReviews,
|
||||
listTenantQualifications,
|
||||
qualificationFileName,
|
||||
rejectEnterpriseReview,
|
||||
type EnterpriseReview,
|
||||
type PlatformTenantQualification,
|
||||
} from '@/modules/iam'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
import { useAuthStore } from '@/core/auth/auth'
|
||||
import EnterpriseReviewsView from './EnterpriseReviewsView.vue'
|
||||
|
||||
vi.mock('@/modules/iam', () => ({
|
||||
listEnterpriseReviews: vi.fn(),
|
||||
listTenantQualifications: vi.fn(),
|
||||
downloadTenantQualification: vi.fn(),
|
||||
qualificationFileName: vi.fn(() => 'test.png'),
|
||||
approveEnterpriseReview: vi.fn(),
|
||||
rejectEnterpriseReview: vi.fn(),
|
||||
}))
|
||||
|
||||
class ResizeObserverStub implements ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
const pendingReview: EnterpriseReview = {
|
||||
id: 202607290005,
|
||||
tenantId: 202607290002,
|
||||
tenantName: '深圳测试跨境科技有限公司',
|
||||
tenantCode: 'TEN202607290002',
|
||||
qualificationId: 202607290004,
|
||||
qualificationType: 'BUSINESS_LICENSE',
|
||||
certificateNo: '91440300XXXXXXXXXX',
|
||||
documentUrl: '/api/merchant/v1/files/qualifications/test.png',
|
||||
contactName: '张三',
|
||||
contactPhone: '13800138000',
|
||||
contactEmail: 'test01@example.com',
|
||||
submittedAt: '2026-07-29T10:00:00Z',
|
||||
status: 'PENDING',
|
||||
}
|
||||
|
||||
const pendingQualification: PlatformTenantQualification = {
|
||||
id: 202607290004,
|
||||
tenantId: pendingReview.tenantId,
|
||||
qualificationType: 'BUSINESS_LICENSE',
|
||||
certificateNo: '91440300XXXXXXXXXX',
|
||||
documentUrl: '/api/merchant/v1/files/qualifications/test.png',
|
||||
status: 'PENDING',
|
||||
reviewComment: null,
|
||||
}
|
||||
|
||||
async function mountView() {
|
||||
const pinia = createPinia()
|
||||
setActivePinia(pinia)
|
||||
const auth = useAuthStore()
|
||||
auth.token = 'token'
|
||||
auth.permissions = ['platform:customer:review', 'platform:customer:approve', 'platform:customer:reject']
|
||||
useAccessPreviewStore().initializeAfterLogin()
|
||||
const wrapper = mount(EnterpriseReviewsView, {
|
||||
attachTo: document.body,
|
||||
global: { plugins: [pinia, ElementPlus] },
|
||||
})
|
||||
await flushPromises()
|
||||
return wrapper
|
||||
}
|
||||
|
||||
function buttonByText(text: string) {
|
||||
return [...document.querySelectorAll<HTMLButtonElement>('button')]
|
||||
.find((button) => button.textContent?.trim() === text)
|
||||
}
|
||||
|
||||
function tableButtonByText(text: string) {
|
||||
return [...document.querySelectorAll<HTMLButtonElement>('.el-table__body button')]
|
||||
.find((button) => button.textContent?.trim() === text)
|
||||
}
|
||||
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
describe('EnterpriseReviewsView', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
|
||||
vi.mocked(listEnterpriseReviews).mockReset()
|
||||
vi.mocked(listTenantQualifications).mockReset()
|
||||
vi.mocked(downloadTenantQualification).mockReset()
|
||||
vi.mocked(downloadTenantQualification).mockResolvedValue(new Blob(['image'], { type: 'image/png' }))
|
||||
vi.mocked(approveEnterpriseReview).mockReset()
|
||||
vi.mocked(rejectEnterpriseReview).mockReset()
|
||||
vi.mocked(qualificationFileName).mockReset()
|
||||
vi.mocked(qualificationFileName).mockReturnValue('test.png')
|
||||
Object.defineProperty(URL, 'createObjectURL', { configurable: true, value: vi.fn(() => 'blob:qualification-preview') })
|
||||
Object.defineProperty(URL, 'revokeObjectURL', { configurable: true, value: vi.fn() })
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
|
||||
it('renders an honest empty state from the real review endpoint', async () => {
|
||||
vi.mocked(listEnterpriseReviews).mockResolvedValue([])
|
||||
|
||||
const wrapper = await mountView()
|
||||
|
||||
expect(listEnterpriseReviews).toHaveBeenCalledTimes(1)
|
||||
expect(wrapper.text()).toContain('暂无待审核企业')
|
||||
expect(wrapper.text()).toContain('共 0 条')
|
||||
})
|
||||
|
||||
it('shows review identity and submits approval with the review id', async () => {
|
||||
vi.mocked(listEnterpriseReviews).mockResolvedValue([pendingReview])
|
||||
vi.mocked(approveEnterpriseReview).mockResolvedValue(undefined)
|
||||
|
||||
const wrapper = await mountView()
|
||||
expect(wrapper.text()).toContain('深圳测试跨境科技有限公司')
|
||||
expect(wrapper.text()).toContain('91440300XXXXXXXXXX')
|
||||
|
||||
const approve = tableButtonByText('通过')
|
||||
expect(approve).toBeDefined()
|
||||
approve?.click()
|
||||
await flushPromises()
|
||||
|
||||
const confirm = buttonByText('确认通过')
|
||||
expect(confirm).toBeDefined()
|
||||
confirm?.click()
|
||||
await flushPromises()
|
||||
|
||||
expect(approveEnterpriseReview).toHaveBeenCalledWith(
|
||||
pendingReview.id,
|
||||
'企业资料与必填资质完整、清晰，审核通过',
|
||||
)
|
||||
expect(wrapper.text()).toContain('暂无待审核企业')
|
||||
expect(wrapper.text()).toContain('共 0 条')
|
||||
})
|
||||
|
||||
it('loads tenant qualifications when the reviewer opens the detail drawer', async () => {
|
||||
vi.mocked(listEnterpriseReviews).mockResolvedValue([pendingReview])
|
||||
vi.mocked(listTenantQualifications).mockResolvedValue([pendingQualification])
|
||||
|
||||
const wrapper = await mountView()
|
||||
tableButtonByText('详情')?.click()
|
||||
await flushPromises()
|
||||
|
||||
expect(listTenantQualifications).toHaveBeenCalledWith(pendingReview.tenantId)
|
||||
expect(downloadTenantQualification).toHaveBeenCalledWith(pendingReview.tenantId, pendingQualification.documentUrl)
|
||||
expect(wrapper.text()).toContain('信用代码：91440300XXXXXXXXXX')
|
||||
expect(document.querySelector<HTMLImageElement>('.qualification-thumbnail img')?.getAttribute('alt')).toBe('营业执照缩略图')
|
||||
})
|
||||
|
||||
it('keeps qualification loading recoverable without using a direct file link', async () => {
|
||||
vi.mocked(listEnterpriseReviews).mockResolvedValue([pendingReview])
|
||||
vi.mocked(listTenantQualifications).mockRejectedValue(new Error('qualification unavailable'))
|
||||
|
||||
const wrapper = await mountView()
|
||||
tableButtonByText('详情')?.click()
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.text()).toContain('资质暂时无法加载')
|
||||
expect(wrapper.text()).toContain('qualification unavailable')
|
||||
expect(wrapper.find('a[href*="qualifications"]').exists()).toBe(false)
|
||||
expect(buttonByText('重新加载')).toBeDefined()
|
||||
})
|
||||
|
||||
it('renders uploaded PDF qualifications in a PDF preview frame', async () => {
|
||||
vi.mocked(listEnterpriseReviews).mockResolvedValue([pendingReview])
|
||||
vi.mocked(listTenantQualifications).mockResolvedValue([pendingQualification])
|
||||
vi.mocked(downloadTenantQualification).mockResolvedValue(new Blob(['%PDF-1.4'], { type: 'application/pdf' }))
|
||||
vi.mocked(qualificationFileName).mockReturnValue('test.pdf')
|
||||
|
||||
await mountView()
|
||||
tableButtonByText('详情')?.click()
|
||||
await flushPromises()
|
||||
document.querySelector<HTMLButtonElement>('.qualification-thumbnail')?.click()
|
||||
await flushPromises()
|
||||
|
||||
const frame = document.querySelector<HTMLIFrameElement>('.qualification-preview iframe')
|
||||
expect(frame?.getAttribute('src')).toBe('blob:qualification-preview')
|
||||
expect(frame?.getAttribute('title')).toContain('PDF 预览')
|
||||
expect(downloadTenantQualification).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('keeps the page recoverable when the endpoint fails', async () => {
|
||||
vi.mocked(listEnterpriseReviews).mockRejectedValue(new Error('IAM unavailable'))
|
||||
|
||||
const wrapper = await mountView()
|
||||
|
||||
expect(wrapper.get('[role="alert"]').text()).toContain('审核列表暂时无法加载')
|
||||
expect(wrapper.get('[role="alert"]').text()).toContain('IAM unavailable')
|
||||
expect(buttonByText('重新加载')).toBeDefined()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,500 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { Eye, FileCheck2, FileText, ImageOff, LoaderCircle, ShieldCheck, ShieldX } from '@lucide/vue'
|
||||
import {
|
||||
approveEnterpriseReview,
|
||||
downloadTenantQualification,
|
||||
listEnterpriseReviews,
|
||||
listTenantQualifications,
|
||||
qualificationFileName,
|
||||
rejectEnterpriseReview,
|
||||
type EnterpriseReview,
|
||||
type PlatformTenantQualification,
|
||||
} from '@/modules/iam'
|
||||
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
|
||||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||||
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
|
||||
const access = useAccessPreviewStore()
|
||||
const loading = ref(false)
|
||||
const loadError = ref<ApiErrorDetails | null>(null)
|
||||
const reviews = ref<EnterpriseReview[]>([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
type ReviewFilters = QueryModel & { keyword: string }
|
||||
const filters = ref<ReviewFilters>({ keyword: '' })
|
||||
const appliedFilters = ref<ReviewFilters>({ keyword: '' })
|
||||
const queryFields: QueryField[] = [
|
||||
{ key: 'keyword', type: 'input', placeholder: '企业名称、企业编号、信用代码或审核单号' },
|
||||
]
|
||||
const detailOpen = ref(false)
|
||||
const selectedReview = ref<EnterpriseReview | null>(null)
|
||||
const qualifications = ref<PlatformTenantQualification[]>([])
|
||||
const qualificationsLoading = ref(false)
|
||||
const qualificationsError = ref<ApiErrorDetails | null>(null)
|
||||
const previewOpen = ref(false)
|
||||
const previewUrl = ref('')
|
||||
const previewName = ref('')
|
||||
const previewKind = ref<'image' | 'pdf' | ''>('')
|
||||
type QualificationAsset = { url: string; name: string; kind: 'image' | 'pdf' }
|
||||
const qualificationAssets = ref<Record<string, QualificationAsset>>({})
|
||||
const qualificationAssetLoadingIds = ref<string[]>([])
|
||||
const qualificationAssetErrorIds = ref<string[]>([])
|
||||
const qualificationAssetRequests = new Map<string, Promise<QualificationAsset | undefined>>()
|
||||
const decisionOpen = ref(false)
|
||||
const submitting = ref(false)
|
||||
const decision = reactive({ type: 'approve' as 'approve' | 'reject', comment: '' })
|
||||
const decisionFormRef = ref<FormInstance>()
|
||||
const decisionRules: FormRules = {
|
||||
comment: [{
|
||||
validator: (_rule, value, callback) => {
|
||||
if (typeof value === 'string' && value.trim()) {
|
||||
callback()
|
||||
return
|
||||
}
|
||||
callback(new Error('请填写审核说明或驳回原因'))
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
}],
|
||||
}
|
||||
|
||||
const filteredReviews = computed(() => {
|
||||
const query = appliedFilters.value.keyword.trim().toLowerCase()
|
||||
if (!query) return reviews.value
|
||||
return reviews.value.filter((review) => [
|
||||
review.tenantName,
|
||||
review.tenantCode,
|
||||
review.certificateNo,
|
||||
String(review.tenantId),
|
||||
String(review.id),
|
||||
].some((value) => value?.toLowerCase().includes(query)))
|
||||
})
|
||||
|
||||
const pagedReviews = computed(() => {
|
||||
const start = (page.value - 1) * pageSize.value
|
||||
return filteredReviews.value.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
const reviewColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 250, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'company', label: '企业', minWidth: 230, slotName: 'company' },
|
||||
{ key: 'qualification', label: '资质', minWidth: 210, slotName: 'qualification' },
|
||||
{ key: 'contact', label: '联系人', minWidth: 180, slotName: 'contact' },
|
||||
{ key: 'submittedAt', label: '提交时间', minWidth: 175, slotName: 'submittedAt' },
|
||||
{ key: 'status', label: '状态', width: 110, slotName: 'status' },
|
||||
]
|
||||
|
||||
function displayText(value: unknown) {
|
||||
return typeof value === 'string' && value.trim() ? value : '—'
|
||||
}
|
||||
|
||||
function formatDate(value?: string | null) {
|
||||
if (!value) return '—'
|
||||
const date = new Date(value)
|
||||
return Number.isNaN(date.getTime()) ? value : date.toLocaleString('zh-CN', { hour12: false })
|
||||
}
|
||||
|
||||
function qualificationName(value?: string | null) {
|
||||
const names: Record<string, string> = {
|
||||
BUSINESS_LICENSE: '营业执照',
|
||||
LEGAL_PERSON_ID: '法人身份证',
|
||||
FREIGHT_FORWARDER_CERTIFICATE: '货代资质证书',
|
||||
BANK_ACCOUNT_LICENSE: '银行开户许可证',
|
||||
}
|
||||
return value ? (names[value] || value) : '—'
|
||||
}
|
||||
|
||||
function qualificationStatus(status: PlatformTenantQualification['status']) {
|
||||
if (status === 'APPROVED') return { label: '已通过', tone: 'is-success' }
|
||||
if (status === 'REJECTED') return { label: '已驳回', tone: 'is-danger' }
|
||||
return { label: '待审核', tone: 'is-warning' }
|
||||
}
|
||||
|
||||
async function loadReviews() {
|
||||
loading.value = true
|
||||
loadError.value = null
|
||||
try {
|
||||
reviews.value = await listEnterpriseReviews()
|
||||
} catch (error) {
|
||||
loadError.value = getApiErrorDetails(error, '审核列表加载失败，请稍后重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function searchReviews() {
|
||||
appliedFilters.value = { ...filters.value }
|
||||
page.value = 1
|
||||
void loadReviews()
|
||||
}
|
||||
|
||||
async function loadSelectedQualifications() {
|
||||
const tenantId = selectedReview.value?.tenantId
|
||||
if (!tenantId) return
|
||||
previewOpen.value = false
|
||||
clearQualificationAssets()
|
||||
qualificationsLoading.value = true
|
||||
qualificationsError.value = null
|
||||
qualifications.value = []
|
||||
try {
|
||||
const result = await listTenantQualifications(tenantId)
|
||||
if (selectedReview.value?.tenantId === tenantId) {
|
||||
qualifications.value = result
|
||||
preloadQualificationAssets(result, tenantId)
|
||||
}
|
||||
} catch (error) {
|
||||
if (selectedReview.value?.tenantId === tenantId) {
|
||||
qualificationsError.value = getApiErrorDetails(error, '资质列表加载失败，请稍后重试')
|
||||
}
|
||||
} finally {
|
||||
if (selectedReview.value?.tenantId === tenantId) qualificationsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openDetail(review: EnterpriseReview) {
|
||||
selectedReview.value = review
|
||||
detailOpen.value = true
|
||||
void loadSelectedQualifications()
|
||||
}
|
||||
|
||||
function clearPreview() {
|
||||
previewUrl.value = ''
|
||||
previewName.value = ''
|
||||
previewKind.value = ''
|
||||
}
|
||||
|
||||
function qualificationKey(qualification: PlatformTenantQualification) {
|
||||
return String(qualification.id)
|
||||
}
|
||||
|
||||
function clearQualificationAssets() {
|
||||
Object.values(qualificationAssets.value).forEach((asset) => URL.revokeObjectURL(asset.url))
|
||||
qualificationAssets.value = {}
|
||||
qualificationAssetLoadingIds.value = []
|
||||
qualificationAssetErrorIds.value = []
|
||||
qualificationAssetRequests.clear()
|
||||
clearPreview()
|
||||
}
|
||||
|
||||
async function loadQualificationAsset(
|
||||
qualification: PlatformTenantQualification,
|
||||
tenantId: number | string,
|
||||
) {
|
||||
const key = qualificationKey(qualification)
|
||||
const cached = qualificationAssets.value[key]
|
||||
if (cached) return cached
|
||||
|
||||
const pending = qualificationAssetRequests.get(key)
|
||||
if (pending) return pending
|
||||
|
||||
qualificationAssetLoadingIds.value = [...qualificationAssetLoadingIds.value, key]
|
||||
qualificationAssetErrorIds.value = qualificationAssetErrorIds.value.filter((id) => id !== key)
|
||||
|
||||
const request = (async () => {
|
||||
const blob = await downloadTenantQualification(tenantId, qualification.documentUrl)
|
||||
if (!blob.size) throw new Error('资质文件内容为空')
|
||||
const name = qualificationFileName(qualification.documentUrl)
|
||||
const asset: QualificationAsset = {
|
||||
url: URL.createObjectURL(blob),
|
||||
name,
|
||||
kind: blob.type === 'application/pdf' || name.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image',
|
||||
}
|
||||
const isCurrent = detailOpen.value
|
||||
&& selectedReview.value?.tenantId === tenantId
|
||||
&& qualifications.value.some((item) => qualificationKey(item) === key && item.documentUrl === qualification.documentUrl)
|
||||
if (!isCurrent) {
|
||||
URL.revokeObjectURL(asset.url)
|
||||
return undefined
|
||||
}
|
||||
qualificationAssets.value = { ...qualificationAssets.value, [key]: asset }
|
||||
return asset
|
||||
})()
|
||||
|
||||
qualificationAssetRequests.set(key, request)
|
||||
try {
|
||||
return await request
|
||||
} catch (error) {
|
||||
if (detailOpen.value && selectedReview.value?.tenantId === tenantId) {
|
||||
qualificationAssetErrorIds.value = [...new Set([...qualificationAssetErrorIds.value, key])]
|
||||
}
|
||||
throw error
|
||||
} finally {
|
||||
qualificationAssetLoadingIds.value = qualificationAssetLoadingIds.value.filter((id) => id !== key)
|
||||
if (qualificationAssetRequests.get(key) === request) qualificationAssetRequests.delete(key)
|
||||
}
|
||||
}
|
||||
|
||||
function preloadQualificationAssets(items: PlatformTenantQualification[], tenantId: number | string) {
|
||||
items.forEach((qualification) => {
|
||||
if (qualification.documentUrl) {
|
||||
void loadQualificationAsset(qualification, tenantId).catch(() => undefined)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function previewQualification(qualification: PlatformTenantQualification) {
|
||||
const tenantId = selectedReview.value?.tenantId
|
||||
if (!tenantId || !qualification.documentUrl) return
|
||||
try {
|
||||
const asset = await loadQualificationAsset(qualification, tenantId)
|
||||
if (!asset) return
|
||||
previewUrl.value = asset.url
|
||||
previewName.value = asset.name
|
||||
previewKind.value = asset.kind
|
||||
previewOpen.value = true
|
||||
} catch (error) {
|
||||
ElMessage.error(getApiErrorMessage(error, '资质文件加载失败，请稍后重试'))
|
||||
}
|
||||
}
|
||||
|
||||
function openDecision(review: EnterpriseReview, type: 'approve' | 'reject') {
|
||||
selectedReview.value = review
|
||||
decision.type = type
|
||||
decision.comment = type === 'approve' ? '企业资料与必填资质完整、清晰，审核通过' : ''
|
||||
decisionOpen.value = true
|
||||
void nextTick(() => decisionFormRef.value?.clearValidate('comment'))
|
||||
}
|
||||
|
||||
async function submitDecision() {
|
||||
const review = selectedReview.value
|
||||
const form = decisionFormRef.value
|
||||
if (!review || !form || submitting.value) return
|
||||
const valid = await form.validate().then(() => true).catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
if (decision.type === 'approve') {
|
||||
await approveEnterpriseReview(review.id, decision.comment.trim())
|
||||
} else {
|
||||
await rejectEnterpriseReview(review.id, decision.comment.trim())
|
||||
}
|
||||
reviews.value = reviews.value.filter((item) => item.id !== review.id)
|
||||
decisionOpen.value = false
|
||||
detailOpen.value = false
|
||||
ElMessage.success(decision.type === 'approve' ? '企业资料已审核通过' : '企业资料已驳回')
|
||||
} catch (error) {
|
||||
ElMessage.error(getApiErrorMessage(error, '审核提交失败，请稍后重试'))
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [access.can('platform:customer:approve'), access.can('platform:customer:reject')],
|
||||
([canApprove, canReject]) => {
|
||||
if ((decision.type === 'approve' && !canApprove) || (decision.type === 'reject' && !canReject)) {
|
||||
decisionOpen.value = false
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(previewOpen, (open) => {
|
||||
if (!open) clearPreview()
|
||||
})
|
||||
|
||||
watch(detailOpen, (open) => {
|
||||
if (!open) {
|
||||
previewOpen.value = false
|
||||
clearQualificationAssets()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(loadReviews)
|
||||
onBeforeUnmount(clearQualificationAssets)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="business-page enterprise-review-page">
|
||||
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="企业审核筛选" :fields="queryFields" @search="searchReviews" />
|
||||
|
||||
<section v-if="loadError" class="surface-panel review-error" role="alert">
|
||||
<ShieldX :size="22" />
|
||||
<div><strong>审核列表暂时无法加载</strong><p>{{ loadError.message }}</p><ApiErrorMeta :details="loadError" /></div>
|
||||
<el-button type="primary" @click="loadReviews">重新加载</el-button>
|
||||
</section>
|
||||
|
||||
<section v-else class="surface-panel table-panel" :aria-busy="loading">
|
||||
<DataTable
|
||||
v-model:page="page"
|
||||
v-model:page-size="pageSize"
|
||||
:data="pagedReviews"
|
||||
:columns="reviewColumns"
|
||||
:loading="loading"
|
||||
:total="filteredReviews.length"
|
||||
aria-label="企业审核列表"
|
||||
row-key="id"
|
||||
empty-text="暂无待审核企业"
|
||||
>
|
||||
<template #actions="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button link type="primary" @click="openDetail(row as EnterpriseReview)"><Eye :size="15" />详情</el-button>
|
||||
<el-button v-if="access.can('platform:customer:approve')" link type="success" @click="openDecision(row as EnterpriseReview, 'approve')"><ShieldCheck :size="15" />通过</el-button>
|
||||
<el-button v-if="access.can('platform:customer:reject')" link type="danger" @click="openDecision(row as EnterpriseReview, 'reject')"><ShieldX :size="15" />驳回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #company="{ row }"><div class="primary-cell"><strong>{{ displayText((row as EnterpriseReview).tenantName) }}</strong><span>{{ displayText((row as EnterpriseReview).tenantCode) }} · 租户 {{ (row as EnterpriseReview).tenantId }}</span></div></template>
|
||||
<template #qualification="{ row }"><div class="primary-cell"><strong>{{ qualificationName((row as EnterpriseReview).qualificationType) }}</strong><span>{{ displayText((row as EnterpriseReview).certificateNo) }}</span></div></template>
|
||||
<template #contact="{ row }"><div class="primary-cell"><strong>{{ displayText((row as EnterpriseReview).contactName) }}</strong><span>{{ displayText((row as EnterpriseReview).contactPhone) }}</span></div></template>
|
||||
<template #submittedAt="{ row }">{{ formatDate((row as EnterpriseReview).submittedAt ?? (row as EnterpriseReview).createdAt) }}</template>
|
||||
<template #status><span class="status-badge is-warning"><i />待审核</span></template>
|
||||
</DataTable>
|
||||
</section>
|
||||
|
||||
<el-drawer v-model="detailOpen" title="企业审核详情" size="620px" class="business-drawer">
|
||||
<template v-if="selectedReview">
|
||||
<div class="detail-identity">
|
||||
<span><FileCheck2 :size="20" /></span>
|
||||
<div><h2>{{ displayText(selectedReview.tenantName) }}</h2><p>审核单 {{ selectedReview.id }} · 租户 {{ selectedReview.tenantId }}</p></div>
|
||||
<span class="status-badge is-warning"><i />待审核</span>
|
||||
</div>
|
||||
<section class="detail-section">
|
||||
<h3>企业与联系人</h3>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="企业编号">{{ displayText(selectedReview.tenantCode) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人">{{ displayText(selectedReview.contactName) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ displayText(selectedReview.contactPhone) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系邮箱">{{ displayText(selectedReview.contactEmail) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</section>
|
||||
<section class="detail-section">
|
||||
<h3>资质文件</h3>
|
||||
<div class="qualification-state" :aria-busy="qualificationsLoading">
|
||||
<div v-if="qualificationsLoading" v-loading="true" class="qualification-loading">正在读取该企业资质…</div>
|
||||
<div v-else-if="qualificationsError" class="qualification-error" role="alert">
|
||||
<div><strong>资质暂时无法加载</strong><p>{{ qualificationsError.message }}</p><ApiErrorMeta :details="qualificationsError" /></div>
|
||||
<el-button type="primary" plain @click="loadSelectedQualifications">重新加载</el-button>
|
||||
</div>
|
||||
<el-empty v-else-if="qualifications.length === 0" :image-size="64" description="该企业暂未提交资质" />
|
||||
<div v-else class="qualification-list">
|
||||
<article v-for="qualification in qualifications" :key="qualification.id" class="qualification-item">
|
||||
<button
|
||||
type="button"
|
||||
class="qualification-thumbnail"
|
||||
:disabled="!qualification.documentUrl"
|
||||
:aria-label="qualification.documentUrl ? `查看${qualificationName(qualification.qualificationType)}大图` : `${qualificationName(qualification.qualificationType)}未上传文件`"
|
||||
@click="previewQualification(qualification)"
|
||||
>
|
||||
<img
|
||||
v-if="qualificationAssets[qualificationKey(qualification)]?.kind === 'image'"
|
||||
:src="qualificationAssets[qualificationKey(qualification)]?.url"
|
||||
:alt="`${qualificationName(qualification.qualificationType)}缩略图`"
|
||||
/>
|
||||
<span v-else-if="qualificationAssets[qualificationKey(qualification)]?.kind === 'pdf'" class="thumbnail-placeholder">
|
||||
<FileText :size="24" />
|
||||
<small>PDF</small>
|
||||
</span>
|
||||
<span v-else-if="qualificationAssetLoadingIds.includes(qualificationKey(qualification))" class="thumbnail-placeholder" role="status">
|
||||
<LoaderCircle :size="22" class="is-spinning" />
|
||||
<small>加载中</small>
|
||||
</span>
|
||||
<span v-else-if="qualificationAssetErrorIds.includes(qualificationKey(qualification))" class="thumbnail-placeholder is-error">
|
||||
<ImageOff :size="22" />
|
||||
<small>重新加载</small>
|
||||
</span>
|
||||
<span v-else class="thumbnail-placeholder">
|
||||
<FileText :size="22" />
|
||||
<small>未上传</small>
|
||||
</span>
|
||||
<span v-if="qualificationAssets[qualificationKey(qualification)]" class="thumbnail-action" aria-hidden="true"><Eye :size="15" /></span>
|
||||
</button>
|
||||
<div class="qualification-copy">
|
||||
<div><strong>{{ qualificationName(qualification.qualificationType) }}</strong><span class="status-badge" :class="qualificationStatus(qualification.status).tone"><i />{{ qualificationStatus(qualification.status).label }}</span></div>
|
||||
<p>信用代码：{{ displayText(qualification.certificateNo) }}</p>
|
||||
<p v-if="qualification.reviewComment">审核意见：{{ qualification.reviewComment }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<p class="detail-note">请核对企业名称、统一社会信用代码和营业执照内容。通过后企业获得下单资格；驳回时必须说明原因。</p>
|
||||
</section>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="detailOpen = false">关闭</el-button>
|
||||
<el-button v-if="selectedReview && access.can('platform:customer:reject')" type="danger" plain @click="openDecision(selectedReview, 'reject')">驳回</el-button>
|
||||
<el-button v-if="selectedReview && access.can('platform:customer:approve')" type="success" @click="openDecision(selectedReview, 'approve')">审核通过</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog v-model="previewOpen" :title="previewName || '查看资质文件'" width="min(860px, calc(100vw - 28px))" class="qualification-preview-dialog" destroy-on-close>
|
||||
<div class="qualification-preview">
|
||||
<img v-if="previewUrl && previewKind === 'image'" :src="previewUrl" :alt="`${previewName}预览`" />
|
||||
<iframe v-else-if="previewUrl && previewKind === 'pdf'" :src="previewUrl" :title="`${previewName} PDF 预览`" />
|
||||
</div>
|
||||
<template #footer><el-button @click="previewOpen = false">关闭预览</el-button></template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="decisionOpen" :title="decision.type === 'approve' ? '确认审核通过' : '确认驳回企业资料'" width="min(520px, calc(100vw - 28px))" class="review-decision-dialog" :close-on-click-modal="false">
|
||||
<div v-if="selectedReview" class="decision-summary">
|
||||
<strong>{{ displayText(selectedReview.tenantName) }}</strong>
|
||||
<span>审核单 {{ selectedReview.id }}</span>
|
||||
</div>
|
||||
<el-form ref="decisionFormRef" :model="decision" :rules="decisionRules" label-position="top">
|
||||
<el-form-item prop="comment" :label="decision.type === 'approve' ? '审核说明' : '驳回原因'" required>
|
||||
<el-input v-model="decision.comment" type="textarea" :rows="4" maxlength="300" show-word-limit :placeholder="decision.type === 'approve' ? '请填写审核通过说明' : '请明确说明需要企业修改的内容'" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button :disabled="submitting" @click="decisionOpen = false">取消</el-button>
|
||||
<el-button :type="decision.type === 'approve' ? 'success' : 'danger'" :loading="submitting" @click="submitDecision">{{ decision.type === 'approve' ? '确认通过' : '确认驳回' }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.review-error { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; border-color: #fecdca; background: #fffafa; color: #b42318; }
|
||||
.review-error strong { color: #7a271a; font-size: 13px; }
|
||||
.review-error p { margin: 4px 0 0; color: #b54708; font-size: 12px; }
|
||||
.qualification-state { min-height: 112px; }
|
||||
.qualification-loading { display: grid; min-height: 112px; place-items: center; color: var(--cc-muted); font-size: 12px; }
|
||||
.qualification-error { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid #fecdca; border-radius: 6px; background: #fffafa; }
|
||||
.qualification-error strong { color: #7a271a; font-size: 13px; }
|
||||
.qualification-error p { margin: 4px 0 0; color: #b54708; font-size: 12px; overflow-wrap: anywhere; }
|
||||
.qualification-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.qualification-item { display: grid; min-width: 0; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
|
||||
.qualification-thumbnail { position: relative; display: grid; width: 112px; height: 84px; place-items: center; overflow: hidden; padding: 0; border: 1px solid #d5dce7; border-radius: 6px; background: #f8fafc; color: #475467; cursor: zoom-in; }
|
||||
.qualification-thumbnail:not(:disabled):hover { border-color: var(--cc-primary); }
|
||||
.qualification-thumbnail:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }
|
||||
.qualification-thumbnail:disabled { cursor: not-allowed; opacity: .72; }
|
||||
.qualification-thumbnail > img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
|
||||
.thumbnail-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: #667085; }
|
||||
.thumbnail-placeholder small { font-size: 10px; line-height: 1; }
|
||||
.thumbnail-placeholder.is-error { color: #b42318; }
|
||||
.thumbnail-action { position: absolute; top: 6px; right: 6px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(23, 32, 51, .78); color: #fff; }
|
||||
.is-spinning { animation: thumbnail-spin 1s linear infinite; }
|
||||
.qualification-copy { min-width: 0; }
|
||||
.qualification-copy > div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
|
||||
.qualification-copy strong { overflow-wrap: anywhere; font-size: 13px; }
|
||||
.qualification-copy p { margin: 5px 0 0; color: var(--cc-muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
|
||||
.qualification-preview { display: grid; max-height: min(70vh, 760px); min-height: 240px; place-items: center; overflow: auto; border: 1px solid var(--cc-border); border-radius: 6px; background: #f8fafc; }
|
||||
.qualification-preview img { display: block; max-width: 100%; height: auto; }
|
||||
.qualification-preview iframe { width: 100%; min-height: min(68vh, 720px); border: 0; background: #fff; }
|
||||
.decision-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border-radius: 8px; background: #f8fafc; }
|
||||
.decision-summary > * { min-width: 0; overflow-wrap: anywhere; }
|
||||
.decision-summary strong { color: #172033; font-size: 13px; }
|
||||
.decision-summary span { color: var(--cc-muted); font-size: 11px; }
|
||||
:deep(.review-decision-dialog .el-form-item__error) { line-height: 1.45; overflow-wrap: anywhere; }
|
||||
@media (max-width: 720px) {
|
||||
.review-error { grid-template-columns: auto minmax(0, 1fr); }
|
||||
.review-error .el-button { grid-column: 1 / -1; min-height: 44px; }
|
||||
.qualification-error { align-items: stretch; flex-direction: column; }
|
||||
.qualification-error .el-button { min-height: 44px; }
|
||||
.decision-summary { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
.qualification-item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
|
||||
.qualification-thumbnail { width: 96px; height: 76px; }
|
||||
}
|
||||
@keyframes thumbnail-spin { to { transform: rotate(360deg); } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.is-spinning { animation: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
export const customerRoutes = [
|
||||
{
|
||||
path: 'customers',
|
||||
name: 'customers',
|
||||
component: () => import('@/modules/customers/pages/CustomersView.vue'),
|
||||
meta: { title: '客户管理', description: '维护客户企业资料、合作状态和注册审核', permission: 'platform:customer:list' },
|
||||
},
|
||||
{
|
||||
path: 'customers/reviews',
|
||||
name: 'enterprise-reviews',
|
||||
component: () => import('@/modules/customers/pages/EnterpriseReviewsView.vue'),
|
||||
meta: { title: '企业审核', description: '核验企业资质并维护客户下单资格', permission: 'platform:customer:review' },
|
||||
},
|
||||
] satisfies RouteRecordRaw[]
|
||||
Reference in New Issue
Block a user