html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-08-12 14:57:02 +08:00
parent 975e0057e3
commit 1ee5a2dec7
10 changed files with 85 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/customers/pages/CustomersView.vue
+39 -40
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch, type Component } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Building2, CheckCircle2, Download, Eye, FileText, FileUp, KeyRound, LogIn, MoreHorizontal, Pencil, Plus, Power, Save, ShieldCheck, ShieldX, Trash2 } from '@lucide/vue'
import { CheckCircle2, Download, Eye, FileText, FileUp, KeyRound, LogIn, Pencil, Plus, Power, Save, ShieldCheck, ShieldX, Trash2 } 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'
@@ -187,16 +187,16 @@ const creditCodeEstablished = ref(false)
const unifiedSocialCreditCodePattern = /^[0-9A-Z]{18}$/
const customerColumns: DataTableColumn[] = [
{ key: 'actions', label: '操作', minWidth: 280, slotName: 'actions' },
{ key: 'tenantCode', prop: 'tenantCode', label: '客户编号', minWidth: 170 },
{ key: 'company', label: '公司名称', minWidth: 230, slotName: 'company' },
{ key: 'unifiedSocialCreditCode', prop: 'unifiedSocialCreditCode', label: '统一社会信用代码', minWidth: 205, defaultVisible: false, formatter: (row: PlatformTenantResource) => displayText(row.unifiedSocialCreditCode) },
{ key: 'actions', label: '操作', width: 620, slotName: 'actions' },
{ key: 'tenantCode', prop: 'tenantCode', label: '客户编号', width: 220, className: 'customer-code-column' },
{ key: 'company', label: '公司名称', width: 250, slotName: 'company' },
{ key: 'unifiedSocialCreditCode', prop: 'unifiedSocialCreditCode', label: '统一社会信用代码', width: 220, formatter: (row: PlatformTenantResource) => displayText(row.unifiedSocialCreditCode) },
{ key: 'contactName', prop: 'contactName', label: '联系人', minWidth: 120, formatter: (row: PlatformTenantResource) => displayText(row.contactName) },
{ key: 'contactPhone', prop: 'contactPhone', label: '电话', minWidth: 150, formatter: (row: PlatformTenantResource) => displayText(row.contactPhone) },
{ key: 'salesOwnerName', prop: 'salesOwnerName', label: '销售人员', minWidth: 120, defaultVisible: false, formatter: (row: PlatformTenantResource) => displayText(row.salesOwnerName) },
{ key: 'paymentTermDays', prop: 'paymentTermDays', label: '账期(天)', width: 105, defaultVisible: false, formatter: (row: PlatformTenantResource) => row.paymentTermDays ?? 0 },
{ key: 'salesOwnerName', prop: 'salesOwnerName', label: '销售人员', minWidth: 120, formatter: (row: PlatformTenantResource) => displayText(row.salesOwnerName) },
{ key: 'paymentTermDays', 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', defaultVisible: false },
{ key: 'orderCount', label: '运单数', width: 100, slotName: 'orderCount' },
{ key: 'createdAt', prop: 'createdAt', label: '入驻时间', minWidth: 165, formatter: (row: PlatformTenantResource) => formatDate(row.createdAt) },
]
@@ -645,11 +645,6 @@ function hasReviewAction(row: PlatformTenantResource) {
&& access.can('platform:customer:review')
&& (access.can('platform:customer:approve') || access.can('platform:customer:reject'))
}
function customerPrimaryActionCount(row: PlatformTenantResource) {
return Number(access.can('platform:customer:view'))
+ Number(access.can('platform:customer:view') && access.can('platform:customer:edit'))
+ Number(hasReviewAction(row))
}
function customerSecondaryActions(row: PlatformTenantResource): CustomerRowAction[] {
return [
...(canResetPassword(row) ? ['reset-password' as const] : []),
@@ -658,18 +653,6 @@ function customerSecondaryActions(row: PlatformTenantResource): CustomerRowActio
...(canArchive() ? ['delete' as const] : []),
]
}
function directCustomerActions(row: PlatformTenantResource) {
return customerSecondaryActions(row).slice(0, Math.max(0, 3 - customerPrimaryActionCount(row)))
}
function moreCustomerActions(row: PlatformTenantResource) {
return customerSecondaryActions(row).slice(Math.max(0, 3 - customerPrimaryActionCount(row)))
}
function customerMoreActionsLabel(row: PlatformTenantResource) {
const identifier = [row.tenantName, row.tenantCode]
.map((value) => String(value ?? '').trim())
.find(Boolean)
return `更多客户操作：${identifier || '当前客户'}`
}
function customerActionLabel(row: PlatformTenantResource, action: CustomerRowAction) {
if (action === 'reset-password') return '重置密码'
if (action === 'impersonate') return '跳转登录'
@@ -962,25 +945,17 @@ onMounted(() => { void loadCustomers() })
</template>
<section v-if="!loadError" class="surface-panel table-panel" :aria-busy="loading">
<div v-if="reviewLoadError" class="review-sync-error" role="alert"><div><ShieldX :size="17" /><span>{{ reviewLoadError.message }}</span></div><el-button link type="primary" @click="reloadPendingReviews">重新加载待审核客户</el-button></div>
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" preference-key="customers-table" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户">
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" preference-key="customers-table" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户" class="customer-list-table" :stripe="true" border>
<template #toolbar-actions><div class="customers-table-actions"><el-button v-if="access.can('platform:customer:export') && access.can('platform:download:list')" :loading="exportSubmitting" :disabled="loading || exportSubmitting" @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></template>
<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="hasReviewAction(row as PlatformTenantResource)" link type="warning" :disabled="reviewSubmitting" @click="openDecision(row as PlatformTenantResource, access.can('platform:customer:approve') ? 'approve' : 'reject')"><ShieldCheck :size="15" />审核</el-button>
<el-button v-for="action in directCustomerActions(row as PlatformTenantResource)" :key="action" link :type="customerActionType(row as PlatformTenantResource, action)" :disabled="customerActionDisabled(action)" @click="handleMoreAction(row as PlatformTenantResource, action)"><component :is="customerRowActionIcons[action]" :size="15" />{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-button>
<el-dropdown v-if="moreCustomerActions(row as PlatformTenantResource).length" trigger="click" :disabled="rowActionId === String((row as PlatformTenantResource).id)" popper-class="customer-action-menu" @command="handleMoreAction(row as PlatformTenantResource, String($event))">
<el-button link type="primary" :aria-label="customerMoreActionsLabel(row as PlatformTenantResource)" :title="customerMoreActionsLabel(row as PlatformTenantResource)"><MoreHorizontal :size="16" /></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="action in moreCustomerActions(row as PlatformTenantResource)" :key="action" :command="action" :disabled="customerActionDisabled(action)" :divided="action === 'delete'" :class="{ 'customer-action-menu__danger': action === 'delete' }"><component :is="customerRowActionIcons[action]" :size="15" />{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button v-if="access.can('platform:customer:view')" class="customer-action-button customer-action-detail" size="small" @click="showDetail(row as PlatformTenantResource)"><Eye :size="14" />详情</el-button>
<el-button v-if="access.can('platform:customer:view') && access.can('platform:customer:edit')" class="customer-action-button customer-action-edit" size="small" @click="openEdit(row as PlatformTenantResource)"><Pencil :size="14" />编辑</el-button>
<el-button v-if="hasReviewAction(row as PlatformTenantResource)" class="customer-action-button customer-action-review" size="small" :disabled="reviewSubmitting" @click="openDecision(row as PlatformTenantResource, access.can('platform:customer:approve') ? 'approve' : 'reject')"><ShieldCheck :size="14" />审核</el-button>
<el-button v-for="action in customerSecondaryActions(row as PlatformTenantResource)" :key="action" :class="[`customer-action-button`, `customer-action-${action}`, { 'is-enable': action === 'status' && (row as PlatformTenantResource).status !== 'ACTIVE', 'is-disable': action === 'status' && (row as PlatformTenantResource).status === 'ACTIVE' }]" size="small" :disabled="customerActionDisabled(action)" @click="handleMoreAction(row as PlatformTenantResource, action)"><component :is="customerRowActionIcons[action]" :size="14" />{{ customerActionLabel(row as PlatformTenantResource, action) }}</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 #company="{ row }"><strong class="customer-company-name">{{ (row as PlatformTenantResource).tenantName }}</strong></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>
<template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 个客户</span></template>
@@ -1096,7 +1071,31 @@ onMounted(() => { void loadCustomers() })
:global(.customer-action-menu .el-dropdown-menu__item) { min-height:40px; gap:8px; }
:global(.customer-action-menu .customer-action-menu__danger) { color:var(--el-color-danger); }
.review-sync-error { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid #fecdca; background:#fffafa; color:#b42318; font-size:12px; } .review-sync-error > div { display:flex; min-width:0; align-items:center; gap:8px; } .review-sync-error span { overflow-wrap:anywhere; }
.customer-company-cell { display:flex; min-width:0; align-items:center; gap:10px; } .customer-company-cell > 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; }
.customer-company-name { display:block; overflow:hidden; color:#334155; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.customers-table-actions :deep(.el-button--primary) { border:0; background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%); box-shadow:0 4px 12px rgba(102,126,234,.3); }
.customers-table-actions :deep(.el-button--default) { border-color:rgba(102,126,234,.22); }
:deep(.customer-list-table .el-table__header-wrapper th) { background:#f7f9fc; }
:deep(.customer-list-table .el-table) { --el-table-border-color:#e5eaf1; --el-table-row-hover-bg-color:rgba(102,126,234,.06); border:1px solid #e5eaf1; border-radius:0; overflow:hidden; }
:deep(.customer-list-table .el-table__inner-wrapper::before) { background:#e5eaf1; }
:deep(.customer-list-table .el-table__body tr.el-table__row--striped > td) { background:#fbfcff; }
:deep(.customer-list-table .el-table__body tr:hover > td) { background:rgba(102,126,234,.06) !important; }
:deep(.customer-list-table .el-table__body td), :deep(.customer-list-table .el-table__header th) { border-right:1px solid #edf1f5; }
:deep(.customer-list-table .el-table__body td:last-child), :deep(.customer-list-table .el-table__header th:last-child) { border-right:0; }
:deep(.customer-list-table .customer-code-column .cell) { white-space:nowrap; }
:deep(.customer-list-table .customer-action-button) { min-height:28px; margin:0; padding:5px 9px; border-radius:8px; font-size:12px; font-weight:650; box-shadow:0 2px 6px rgba(15,23,42,.06); }
:deep(.customer-list-table .customer-action-detail) { border-color:#bfdbfe; background:#eff6ff; color:#2563eb; }
:deep(.customer-list-table .customer-action-edit) { border-color:#c7d2fe; background:#eef2ff; color:#667eea; }
:deep(.customer-list-table .customer-action-review) { border-color:#fed7aa; background:#fff7ed; color:#ea580c; }
:deep(.customer-list-table .customer-action-reset-password) { border-color:#ddd6fe; background:#f5f3ff; color:#7c3aed; }
:deep(.customer-list-table .customer-action-impersonate) { border-color:#bae6fd; background:#f0f9ff; color:#0369a1; }
:deep(.customer-list-table .customer-action-status.is-enable) { border-color:#bbf7d0; background:#f0fdf4; color:#16a34a; }
:deep(.customer-list-table .customer-action-status.is-disable), :deep(.customer-list-table .customer-action-delete) { border-color:#fecaca; background:#fef2f2; color:#dc2626; }
:deep(.customer-list-table .customer-action-button:hover) { filter:brightness(.97); transform:none; box-shadow:0 2px 6px rgba(15,23,42,.06); }
:deep(.customer-list-table .el-tag) { border:0; border-radius:12px; font-weight:650; }
:deep(.customer-list-table .el-tag--success) { background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(22,163,74,.1)); color:#16a34a; }
:deep(.customer-list-table .el-tag--warning) { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,88,12,.1)); color:#ea580c; }
:deep(.customer-list-table .el-tag--danger) { background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1)); color:#dc2626; }
:deep(.customer-list-table .el-tag--info) { background:linear-gradient(135deg,rgba(102,126,234,.15),rgba(118,75,162,.1)); color:#667eea; }
.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; justify-content:flex-end; margin-bottom:12px; } .qualification-hint { margin:12px 0 0; color:var(--cc-muted); font-size:12px; line-height:1.6; } .qualification-hint span,.qualification-label > span { color:var(--el-color-danger); }
.qualification-credit-code { max-width:420px; margin-top:16px; } .qualification-credit-code small,.field-hint { display:block; margin-top:6px; color:var(--cc-muted); font-size:11px; line-height:1.5; }