优化
This commit is contained in:
@@ -51,7 +51,7 @@ export interface PlatformExpressCompanyImportResult {
|
||||
const basePath = '/platform/v1/express-companies'
|
||||
|
||||
export async function listPlatformExpressCompanies(
|
||||
tenantId: number | string,
|
||||
tenantId: number | string | undefined,
|
||||
page = 1,
|
||||
size = 20,
|
||||
keyword = '',
|
||||
|
||||
@@ -5,8 +5,8 @@ import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from 'vites
|
||||
import { listPlatformExpressCompanies, type PlatformExpressCompanyResource } from '@/modules/master-data/express-companies/api/platformExpressCompanies'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
import { useAuthStore } from '@/core/auth/auth'
|
||||
import QueryToolbar from '@/shared/components/QueryToolbar.vue'
|
||||
import { listPlatformTenants, type PlatformTenantResource } from '../../../iam/api/platformIam'
|
||||
import PlatformTenantSelector from '../../../iam/components/PlatformTenantSelector.vue'
|
||||
import ExpressCompaniesView from './ExpressCompaniesView.vue'
|
||||
|
||||
vi.mock('@/modules/master-data/express-companies/api/platformExpressCompanies', () => ({
|
||||
@@ -95,9 +95,12 @@ describe('ExpressCompaniesView query and table migration', () => {
|
||||
const wrapper = await mountView()
|
||||
|
||||
expect(wrapper.find('.query-toolbar').exists()).toBe(true)
|
||||
expect(wrapper.find('input[aria-label="所属企业"]').exists()).toBe(true)
|
||||
expect(wrapper.find('.data-table').exists()).toBe(true)
|
||||
expect(wrapper.text()).toContain('顺丰速运')
|
||||
expect(wrapper.text()).toContain('全部企业 · 共 1 家快递公司')
|
||||
expect(wrapper.find('.metric-strip').exists()).toBe(false)
|
||||
expect(listPlatformExpressCompanies).toHaveBeenCalledWith(undefined, 1, 20, '', '')
|
||||
})
|
||||
|
||||
it('does not request with edited filters until search is submitted', async () => {
|
||||
@@ -110,13 +113,16 @@ describe('ExpressCompaniesView query and table migration', () => {
|
||||
await searchButton?.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(listPlatformExpressCompanies).toHaveBeenLastCalledWith(10001, 1, 20, '顺丰', '')
|
||||
expect(listPlatformExpressCompanies).toHaveBeenLastCalledWith(undefined, 1, 20, '顺丰', '')
|
||||
})
|
||||
|
||||
it('preserves a snowflake tenant id as a string when switching enterprises', async () => {
|
||||
const wrapper = await mountView()
|
||||
|
||||
wrapper.findComponent(PlatformTenantSelector).vm.$emit('update:modelValue', snowflakeTenantId)
|
||||
const toolbar = wrapper.findComponent(QueryToolbar)
|
||||
const model = { tenantId: snowflakeTenantId, keyword: '', status: '' }
|
||||
toolbar.vm.$emit('update:modelValue', model)
|
||||
toolbar.vm.$emit('search', model)
|
||||
await flushPromises()
|
||||
|
||||
expect(listPlatformExpressCompanies).toHaveBeenLastCalledWith(snowflakeTenantId, 1, 20, '', '')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { Download, ExternalLink, FileSpreadsheet, Pencil, Plus, Power, Truck, Upload } from '@lucide/vue'
|
||||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
type SavePlatformExpressCompanyRequest,
|
||||
} from '@/modules/master-data/express-companies/api/platformExpressCompanies'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
import { PlatformTenantSelector } from '@/modules/iam'
|
||||
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
|
||||
|
||||
const access = useAccessPreviewStore()
|
||||
const loading = ref(false)
|
||||
@@ -34,8 +34,9 @@ const rows = ref<PlatformExpressCompanyResource[]>([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const total = ref(0)
|
||||
const selectedTenantId = ref('')
|
||||
const loadedTenantId = ref<string | null>(null)
|
||||
const tenants = ref<PlatformTenantResource[]>([])
|
||||
const tenantLoadError = ref<ApiErrorDetails | null>(null)
|
||||
const editorTenantId = ref('')
|
||||
const loadError = ref<ApiErrorDetails | null>(null)
|
||||
const statusLoadingIds = ref(new Set<string>())
|
||||
const editLoadingIds = ref(new Set<string>())
|
||||
@@ -45,12 +46,21 @@ const importFile = ref<File | null>(null)
|
||||
const importResult = ref<PlatformExpressCompanyImportResult | null>(null)
|
||||
const importError = ref<ApiErrorDetails | null>(null)
|
||||
type ExpressCompanyFilters = QueryModel & {
|
||||
tenantId: string
|
||||
keyword: string
|
||||
status: PlatformExpressCompanyStatus | ''
|
||||
}
|
||||
const filters = ref<ExpressCompanyFilters>({ keyword: '', status: '' })
|
||||
const filters = ref<ExpressCompanyFilters>({ tenantId: '', keyword: '', status: '' })
|
||||
const appliedFilters = ref<ExpressCompanyFilters>({ ...filters.value })
|
||||
const queryFields: QueryField[] = [
|
||||
const queryFields = computed<QueryField[]>(() => [
|
||||
{
|
||||
key: 'tenantId',
|
||||
type: 'select',
|
||||
width: 180,
|
||||
placeholder: tenantLoadError.value ? '企业列表加载失败' : '全部企业',
|
||||
props: { 'aria-label': '所属企业', filterable: true, disabled: Boolean(tenantLoadError.value) },
|
||||
options: tenants.value.map((tenant) => ({ value: String(tenant.id), label: `${tenant.tenantName}(${tenant.tenantCode || tenant.id})` })),
|
||||
},
|
||||
{ key: 'keyword', type: 'input', placeholder: '快递公司名称或编码', props: { maxlength: 128, 'aria-label': '快递公司关键词' } },
|
||||
{
|
||||
key: 'status',
|
||||
@@ -62,7 +72,7 @@ const queryFields: QueryField[] = [
|
||||
{ label: '停用', value: 'INACTIVE' },
|
||||
],
|
||||
},
|
||||
]
|
||||
])
|
||||
let loadSequence = 0
|
||||
|
||||
const emptyForm = (): SavePlatformExpressCompanyRequest & { id: string } => ({
|
||||
@@ -93,15 +103,12 @@ const { captureBaseline } = useUnsavedWorkRegistration({
|
||||
requiredPermission: editorPermission,
|
||||
})
|
||||
|
||||
const tenantReady = computed(() => Boolean(selectedTenantId.value)
|
||||
&& loadedTenantId.value === selectedTenantId.value
|
||||
&& !loading.value)
|
||||
const tenantSwitchDisabled = computed(() => editorOpen.value
|
||||
|| importOpen.value
|
||||
|| saving.value
|
||||
|| importing.value
|
||||
|| editLoadingIds.value.size > 0
|
||||
|| statusLoadingIds.value.size > 0)
|
||||
const selectedEnterpriseId = computed(() => appliedFilters.value.tenantId)
|
||||
const targetEnterpriseId = computed(() => filters.value.tenantId)
|
||||
const selectedEnterpriseName = computed(() => {
|
||||
if (!selectedEnterpriseId.value) return '全部企业'
|
||||
return tenants.value.find((tenant) => String(tenant.id) === selectedEnterpriseId.value)?.tenantName || `企业 ${selectedEnterpriseId.value}`
|
||||
})
|
||||
|
||||
watch(
|
||||
() => access.can(editorPermission.value),
|
||||
@@ -135,6 +142,7 @@ function formatUpdatedAt(value?: string | null) {
|
||||
const expressCompanyColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 170, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'company', label: '快递公司', minWidth: 210, slotName: 'company' },
|
||||
{ key: 'tenant', label: '所属企业', minWidth: 190, showOverflowTooltip: true, slotName: 'tenant' },
|
||||
{ prop: 'servicePhone', label: '客服电话', minWidth: 130, formatter: (row: PlatformExpressCompanyResource) => row.servicePhone || '—' },
|
||||
{ key: 'website', label: '官方网站', minWidth: 210, slotName: 'website' },
|
||||
{ key: 'trackingUrlTemplate', label: '轨迹查询模板', minWidth: 260, slotName: 'trackingUrlTemplate' },
|
||||
@@ -143,27 +151,50 @@ const expressCompanyColumns: DataTableColumn[] = [
|
||||
{ key: 'status', label: '状态', width: 100, slotName: 'status' },
|
||||
]
|
||||
|
||||
function apiTenantId(value: string) {
|
||||
function apiTenantId(value: string | undefined) {
|
||||
if (!value) return undefined
|
||||
const numeric = Number(value)
|
||||
return Number.isSafeInteger(numeric) ? numeric : value
|
||||
}
|
||||
|
||||
function requireCurrentTenant() {
|
||||
if (!tenantReady.value) {
|
||||
ElMessage.warning('快递公司数据尚未加载完成,请稍后重试')
|
||||
function requireSelectedEnterprise(action: string) {
|
||||
if (!targetEnterpriseId.value) {
|
||||
ElMessage.warning(`请先在筛选条件中选择所属企业,再${action}`)
|
||||
return null
|
||||
}
|
||||
return apiTenantId(selectedTenantId.value)
|
||||
return apiTenantId(targetEnterpriseId.value)!
|
||||
}
|
||||
|
||||
async function loadExpressCompanies(tenantId = selectedTenantId.value) {
|
||||
if (!tenantId) return
|
||||
function tenantName(tenantId: number | string) {
|
||||
return tenants.value.find((tenant) => String(tenant.id) === String(tenantId))?.tenantName || `企业 ${tenantId}`
|
||||
}
|
||||
|
||||
async function loadTenants() {
|
||||
tenantLoadError.value = null
|
||||
try {
|
||||
const records: PlatformTenantResource[] = []
|
||||
let currentPage = 1
|
||||
let pages = 1
|
||||
do {
|
||||
const result = await listPlatformTenants({ page: currentPage, size: 200 })
|
||||
records.push(...result.records)
|
||||
pages = Math.max(1, result.pages)
|
||||
currentPage += 1
|
||||
} while (currentPage <= pages)
|
||||
tenants.value = records
|
||||
} catch (error) {
|
||||
tenants.value = []
|
||||
tenantLoadError.value = getApiErrorDetails(error, '企业列表加载失败,暂时无法按所属企业筛选')
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExpressCompanies() {
|
||||
const sequence = ++loadSequence
|
||||
loading.value = true
|
||||
loadError.value = null
|
||||
try {
|
||||
const result = await listPlatformExpressCompanies(
|
||||
apiTenantId(tenantId),
|
||||
apiTenantId(appliedFilters.value.tenantId),
|
||||
page.value,
|
||||
pageSize.value,
|
||||
appliedFilters.value.keyword,
|
||||
@@ -172,7 +203,6 @@ async function loadExpressCompanies(tenantId = selectedTenantId.value) {
|
||||
if (sequence !== loadSequence) return
|
||||
rows.value = result.records
|
||||
total.value = result.total
|
||||
loadedTenantId.value = tenantId
|
||||
} catch (error) {
|
||||
if (sequence !== loadSequence) return
|
||||
rows.value = []
|
||||
@@ -185,6 +215,7 @@ async function loadExpressCompanies(tenantId = selectedTenantId.value) {
|
||||
|
||||
function applyFilters(model: QueryModel) {
|
||||
appliedFilters.value = {
|
||||
tenantId: String(model.tenantId || ''),
|
||||
keyword: String(model.keyword || ''),
|
||||
status: (model.status || '') as PlatformExpressCompanyStatus | '',
|
||||
}
|
||||
@@ -196,7 +227,9 @@ function applyFilters(model: QueryModel) {
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
if (!requireCurrentTenant()) return
|
||||
const tenantId = requireSelectedEnterprise('新增快递公司')
|
||||
if (!tenantId) return
|
||||
editorTenantId.value = String(tenantId)
|
||||
Object.assign(form, emptyForm())
|
||||
captureBaseline()
|
||||
editorOpen.value = true
|
||||
@@ -220,8 +253,8 @@ function assignEditor(row: PlatformExpressCompanyResource) {
|
||||
}
|
||||
|
||||
async function openEdit(row: PlatformExpressCompanyResource) {
|
||||
const tenantId = requireCurrentTenant()
|
||||
if (!tenantId) return
|
||||
const tenantId = apiTenantId(String(row.tenantId))!
|
||||
editorTenantId.value = String(row.tenantId)
|
||||
const id = String(row.id)
|
||||
const pending = new Set(editLoadingIds.value)
|
||||
pending.add(id)
|
||||
@@ -239,6 +272,7 @@ async function openEdit(row: PlatformExpressCompanyResource) {
|
||||
}
|
||||
|
||||
function openImport() {
|
||||
if (!requireSelectedEnterprise('批量导入')) return
|
||||
importFile.value = null
|
||||
importResult.value = null
|
||||
importError.value = null
|
||||
@@ -292,7 +326,7 @@ function selectImportFile(event: Event) {
|
||||
}
|
||||
|
||||
async function submitImport() {
|
||||
const tenantId = requireCurrentTenant()
|
||||
const tenantId = requireSelectedEnterprise('批量导入')
|
||||
if (!tenantId) return
|
||||
if (!importFile.value) {
|
||||
ElMessage.warning('请先选择填写完成的 XLSX 文件')
|
||||
@@ -340,7 +374,7 @@ function buildPayload(): SavePlatformExpressCompanyRequest {
|
||||
}
|
||||
|
||||
async function saveExpressCompany() {
|
||||
const tenantId = requireCurrentTenant()
|
||||
const tenantId = form.id ? apiTenantId(editorTenantId.value) : requireSelectedEnterprise('新增快递公司')
|
||||
if (!tenantId) return
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
@@ -361,8 +395,7 @@ async function saveExpressCompany() {
|
||||
}
|
||||
|
||||
async function toggleStatus(row: PlatformExpressCompanyResource) {
|
||||
const tenantId = requireCurrentTenant()
|
||||
if (!tenantId) return
|
||||
const tenantId = apiTenantId(String(row.tenantId))!
|
||||
const nextStatus: PlatformExpressCompanyStatus = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
|
||||
const action = nextStatus === 'ACTIVE' ? '启用' : '停用'
|
||||
try {
|
||||
@@ -393,23 +426,20 @@ async function toggleStatus(row: PlatformExpressCompanyResource) {
|
||||
}
|
||||
|
||||
watch([page, pageSize], () => { void loadExpressCompanies() })
|
||||
watch(selectedTenantId, (tenantId) => {
|
||||
editorOpen.value = false
|
||||
importOpen.value = false
|
||||
importFile.value = null
|
||||
importResult.value = null
|
||||
importError.value = null
|
||||
rows.value = []
|
||||
total.value = 0
|
||||
loadedTenantId.value = null
|
||||
page.value = 1
|
||||
void loadExpressCompanies(tenantId)
|
||||
onMounted(() => {
|
||||
void loadTenants()
|
||||
void loadExpressCompanies()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="business-page express-company-page">
|
||||
<PlatformTenantSelector v-model="selectedTenantId" :disabled="tenantSwitchDisabled" />
|
||||
<el-alert v-if="tenantLoadError" type="warning" :closable="false" show-icon class="state-alert">
|
||||
<template #title>所属企业列表加载失败</template>
|
||||
<p>{{ tenantLoadError.message }};快递公司仍按全部企业展示。</p>
|
||||
<ApiErrorMeta :details="tenantLoadError" />
|
||||
<el-button size="small" @click="loadTenants">重新加载企业列表</el-button>
|
||||
</el-alert>
|
||||
<el-alert v-if="loadError" type="error" :closable="false" show-icon class="state-alert">
|
||||
<template #title>快递公司加载失败</template>
|
||||
<p>{{ loadError.message }}</p>
|
||||
@@ -423,11 +453,11 @@ watch(selectedTenantId, (tenantId) => {
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<h2>快递公司列表</h2>
|
||||
<p>租户 {{ selectedTenantId || '—' }} · 共 {{ total }} 家快递公司</p>
|
||||
<p>{{ selectedEnterpriseName }} · 共 {{ total }} 家快递公司</p>
|
||||
</div>
|
||||
<div class="panel-actions">
|
||||
<el-button v-if="access.can('platform:express:import')" :disabled="!tenantReady" @click="openImport"><Upload :size="16" />批量导入</el-button>
|
||||
<el-button v-if="access.can('platform:express:create')" type="primary" :disabled="!tenantReady" @click="openCreate"><Plus :size="16" />新增快递公司</el-button>
|
||||
<el-button v-if="access.can('platform:express:import')" :disabled="loading" @click="openImport"><Upload :size="16" />批量导入</el-button>
|
||||
<el-button v-if="access.can('platform:express:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增快递公司</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable
|
||||
@@ -448,14 +478,14 @@ watch(selectedTenantId, (tenantId) => {
|
||||
v-if="access.can('platform:express:edit')"
|
||||
link
|
||||
type="primary"
|
||||
:disabled="!tenantReady"
|
||||
:disabled="loading"
|
||||
:loading="editLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
|
||||
@click="openEdit(row as PlatformExpressCompanyResource)"
|
||||
><Pencil :size="15" />编辑</el-button>
|
||||
<el-button
|
||||
v-if="access.can('platform:express:status')"
|
||||
link
|
||||
:disabled="!tenantReady"
|
||||
:disabled="loading"
|
||||
:type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
|
||||
:loading="statusLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
|
||||
@click="toggleStatus(row as PlatformExpressCompanyResource)"
|
||||
@@ -464,6 +494,7 @@ watch(selectedTenantId, (tenantId) => {
|
||||
<span v-else class="muted-value">仅查看</span>
|
||||
</template>
|
||||
<template #company="{ row }"><div class="express-company-cell"><span><Truck :size="17" /></span><div><strong>{{ (row as PlatformExpressCompanyResource).companyName }}</strong><small>{{ (row as PlatformExpressCompanyResource).companyCode }}</small></div></div></template>
|
||||
<template #tenant="{ row }"><span>{{ tenantName((row as PlatformExpressCompanyResource).tenantId) }}</span></template>
|
||||
<template #website="{ row }">
|
||||
<a v-if="safeHttpUrl((row as PlatformExpressCompanyResource).website)" class="external-link" :href="safeHttpUrl((row as PlatformExpressCompanyResource).website)!" target="_blank" rel="noopener noreferrer">访问官网<ExternalLink :size="13" /></a>
|
||||
<span v-else class="muted-value">{{ (row as PlatformExpressCompanyResource).website || '—' }}</span>
|
||||
|
||||
Reference in New Issue
Block a user