优化构架
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { http } from '@/shared/api/http'
|
||||
import {
|
||||
changePlatformPartnerStatus,
|
||||
createPlatformPartner,
|
||||
downloadPlatformPartnerImportTemplate,
|
||||
getPlatformPartner,
|
||||
importPlatformPartners,
|
||||
listPlatformPartners,
|
||||
updatePlatformPartner,
|
||||
type SavePlatformPartnerRequest,
|
||||
} from './platformPartners'
|
||||
|
||||
vi.mock('@/shared/api/http', () => ({
|
||||
http: { get: vi.fn(), post: vi.fn(), put: vi.fn(), patch: vi.fn() },
|
||||
unwrapApiResponse: <T>(response: { data: T }) => response.data,
|
||||
}))
|
||||
|
||||
const payload: SavePlatformPartnerRequest = {
|
||||
partnerCode: 'CUS-001',
|
||||
partnerName: '测试往来单位',
|
||||
partnerType: 'CUSTOMER',
|
||||
types: ['CUSTOMER', 'SHIPPER'],
|
||||
contactName: '测试联系人',
|
||||
contactPhone: '13800000000',
|
||||
contactEmail: null,
|
||||
countryCode: 'CN',
|
||||
province: '广东省',
|
||||
city: '深圳市',
|
||||
district: null,
|
||||
addressLine: '测试地址 1 号',
|
||||
postalCode: null,
|
||||
status: 'ACTIVE',
|
||||
remark: '测试档案',
|
||||
}
|
||||
|
||||
describe('platform partner API', () => {
|
||||
beforeEach(() => vi.clearAllMocks())
|
||||
|
||||
it('queries the platform partner page with tenant and filters', async () => {
|
||||
vi.mocked(http.get).mockResolvedValue({ code: '200', message: 'success', data: { records: [], page: '1', size: '20', total: '1', pages: '1' } })
|
||||
|
||||
const result = await listPlatformPartners(10001, { page: 1, size: 20, keyword: '测试', type: 'CUSTOMER', status: 'ACTIVE' })
|
||||
|
||||
expect(http.get).toHaveBeenCalledWith('/platform/v1/partners', {
|
||||
params: { tenantId: 10001, page: 1, size: 20, keyword: '测试', type: 'CUSTOMER', status: 'ACTIVE' },
|
||||
})
|
||||
expect(result).toMatchObject({ page: 1, size: 20, total: 1, pages: 1 })
|
||||
})
|
||||
|
||||
it('uses the backend create, update and status contracts', async () => {
|
||||
vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'success', data: '19001' })
|
||||
vi.mocked(http.put).mockResolvedValue({ code: '200', message: 'success', data: null })
|
||||
vi.mocked(http.patch).mockResolvedValue({ code: '200', message: 'success', data: null })
|
||||
|
||||
await createPlatformPartner(10001, payload)
|
||||
await updatePlatformPartner(10001, '19001', payload)
|
||||
await changePlatformPartnerStatus(10001, '19001', 'INACTIVE')
|
||||
|
||||
expect(http.post).toHaveBeenCalledWith('/platform/v1/partners', payload, { params: { tenantId: 10001 } })
|
||||
expect(http.put).toHaveBeenCalledWith('/platform/v1/partners/19001', payload, { params: { tenantId: 10001 } })
|
||||
expect(http.patch).toHaveBeenCalledWith('/platform/v1/partners/19001/status', { status: 'INACTIVE' }, { params: { tenantId: 10001 } })
|
||||
})
|
||||
|
||||
it('normalizes legacy detail types and uses import contracts', async () => {
|
||||
vi.mocked(http.get)
|
||||
.mockResolvedValueOnce({ code: '200', message: 'success', data: {
|
||||
id: '19001', tenantId: 10001, partnerCode: 'CUS-001', partnerName: '测试单位',
|
||||
partnerType: 'BOTH', contactName: '张三', contactPhone: '13800000000', contactEmail: null,
|
||||
countryCode: 'CN', province: null, city: '深圳市', district: null, addressLine: '测试地址',
|
||||
postalCode: null, status: 'ACTIVE',
|
||||
} })
|
||||
.mockResolvedValueOnce(new Blob(['template']))
|
||||
vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'success', data: {
|
||||
fileName: 'partners.xlsx', totalRows: 1, importedRows: 1, success: true, errors: [],
|
||||
} })
|
||||
|
||||
const detail = await getPlatformPartner(10001, '19001')
|
||||
const template = await downloadPlatformPartnerImportTemplate()
|
||||
const file = new File(['xlsx'], 'partners.xlsx')
|
||||
const result = await importPlatformPartners(10001, file)
|
||||
|
||||
expect(detail.types).toEqual(['CUSTOMER', 'SUPPLIER'])
|
||||
expect(detail.dataScopeId).toBe(10001)
|
||||
expect(template).toBeInstanceOf(Blob)
|
||||
expect(result.success).toBe(true)
|
||||
expect(http.get).toHaveBeenNthCalledWith(1, '/platform/v1/partners/19001', { params: { tenantId: 10001 } })
|
||||
expect(http.get).toHaveBeenNthCalledWith(2, '/platform/v1/partners/import-template', { responseType: 'blob' })
|
||||
expect(http.post).toHaveBeenCalledWith('/platform/v1/partners/import', expect.any(FormData), { params: { tenantId: 10001 } })
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,164 @@
|
||||
import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
|
||||
|
||||
export type PlatformPartnerType = 'CUSTOMER' | 'SUPPLIER' | 'CARRIER' | 'CUSTOMS_BROKER' | 'SHIPPER' | 'CONSIGNEE'
|
||||
export type PlatformPartnerLegacyType = PlatformPartnerType | 'BOTH'
|
||||
export type PlatformPartnerStatus = 'ACTIVE' | 'INACTIVE'
|
||||
|
||||
export interface PlatformPartnerResource {
|
||||
id: number | string
|
||||
tenantId: number | string
|
||||
dataScopeId: number | string
|
||||
partnerCode: string
|
||||
partnerName: string
|
||||
partnerType: PlatformPartnerLegacyType
|
||||
types: PlatformPartnerType[]
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactEmail: string | null
|
||||
countryCode: string
|
||||
province: string | null
|
||||
city: string
|
||||
district: string | null
|
||||
addressLine: string
|
||||
postalCode: string | null
|
||||
status: PlatformPartnerStatus
|
||||
remark: string | null
|
||||
createdAt?: string | null
|
||||
updatedAt?: string | null
|
||||
}
|
||||
|
||||
export interface PlatformPartnerPage {
|
||||
records: PlatformPartnerResource[]
|
||||
page: number
|
||||
size: number
|
||||
total: number
|
||||
pages: number
|
||||
}
|
||||
|
||||
type PlatformPartnerPagePayload = Omit<PlatformPartnerPage, 'page' | 'size' | 'total' | 'pages'> & {
|
||||
page: number | string
|
||||
size: number | string
|
||||
total: number | string
|
||||
pages: number | string
|
||||
}
|
||||
|
||||
export interface PlatformPartnerQuery {
|
||||
page: number
|
||||
size: number
|
||||
keyword?: string
|
||||
type?: PlatformPartnerType
|
||||
status?: PlatformPartnerStatus
|
||||
}
|
||||
|
||||
export interface SavePlatformPartnerRequest {
|
||||
partnerCode: string
|
||||
partnerName: string
|
||||
partnerType: PlatformPartnerType
|
||||
types: PlatformPartnerType[]
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactEmail: string | null
|
||||
countryCode: string
|
||||
province: string | null
|
||||
city: string
|
||||
district: string | null
|
||||
addressLine: string
|
||||
postalCode: string | null
|
||||
status: PlatformPartnerStatus
|
||||
remark: string | null
|
||||
}
|
||||
|
||||
export interface PlatformPartnerImportError {
|
||||
row: number
|
||||
field: string
|
||||
message: string
|
||||
}
|
||||
|
||||
export interface PlatformPartnerImportResult {
|
||||
fileName: string
|
||||
totalRows: number
|
||||
importedRows: number
|
||||
success: boolean
|
||||
errors: PlatformPartnerImportError[]
|
||||
}
|
||||
|
||||
const basePath = '/platform/v1/partners'
|
||||
|
||||
function normalizePartner(resource: PlatformPartnerResource): PlatformPartnerResource {
|
||||
const legacyTypes: PlatformPartnerType[] = resource.partnerType === 'BOTH'
|
||||
? ['CUSTOMER', 'SUPPLIER']
|
||||
: [resource.partnerType]
|
||||
return {
|
||||
...resource,
|
||||
dataScopeId: resource.dataScopeId ?? resource.tenantId,
|
||||
types: resource.types?.length ? resource.types : legacyTypes,
|
||||
remark: resource.remark ?? null,
|
||||
}
|
||||
}
|
||||
|
||||
export async function listPlatformPartners(tenantId: number, query: PlatformPartnerQuery) {
|
||||
const response = await http.get<ApiEnvelope<PlatformPartnerPagePayload>, ApiEnvelope<PlatformPartnerPagePayload>>(basePath, {
|
||||
params: { tenantId, ...query },
|
||||
})
|
||||
const page = unwrapApiResponse(response)
|
||||
return {
|
||||
...page,
|
||||
records: page.records.map(normalizePartner),
|
||||
page: Number(page.page),
|
||||
size: Number(page.size),
|
||||
total: Number(page.total),
|
||||
pages: Number(page.pages),
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPlatformPartner(tenantId: number, partnerId: number | string) {
|
||||
const response = await http.get<ApiEnvelope<PlatformPartnerResource>, ApiEnvelope<PlatformPartnerResource>>(
|
||||
`${basePath}/${partnerId}`,
|
||||
{ params: { tenantId } },
|
||||
)
|
||||
return normalizePartner(unwrapApiResponse(response))
|
||||
}
|
||||
|
||||
export async function downloadPlatformPartnerImportTemplate() {
|
||||
return http.get<Blob, Blob>(`${basePath}/import-template`, { responseType: 'blob' })
|
||||
}
|
||||
|
||||
export async function importPlatformPartners(tenantId: number, file: File) {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
const response = await http.post<ApiEnvelope<PlatformPartnerImportResult>, ApiEnvelope<PlatformPartnerImportResult>>(
|
||||
`${basePath}/import`,
|
||||
form,
|
||||
{ params: { tenantId } },
|
||||
)
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
|
||||
export async function createPlatformPartner(tenantId: number, payload: SavePlatformPartnerRequest) {
|
||||
const response = await http.post<ApiEnvelope<number | string>, ApiEnvelope<number | string>>(basePath, payload, {
|
||||
params: { tenantId },
|
||||
})
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
|
||||
export async function updatePlatformPartner(
|
||||
tenantId: number,
|
||||
partnerId: number | string,
|
||||
payload: SavePlatformPartnerRequest,
|
||||
) {
|
||||
const response = await http.put<ApiEnvelope<null>, ApiEnvelope<null>>(`${basePath}/${partnerId}`, payload, {
|
||||
params: { tenantId },
|
||||
})
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
|
||||
export async function changePlatformPartnerStatus(
|
||||
tenantId: number,
|
||||
partnerId: number | string,
|
||||
status: PlatformPartnerStatus,
|
||||
) {
|
||||
const response = await http.patch<ApiEnvelope<null>, ApiEnvelope<null>>(`${basePath}/${partnerId}/status`, { status }, {
|
||||
params: { tenantId },
|
||||
})
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
|
||||
import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import {
|
||||
listPlatformPartners,
|
||||
type PlatformPartnerResource,
|
||||
} from '@/modules/master-data/counterparties/api/platformPartners'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
import { useAuthStore } from '@/core/auth/auth'
|
||||
import PartnersView from './PartnersView.vue'
|
||||
|
||||
vi.mock('@/modules/master-data/counterparties/api/platformPartners', () => ({
|
||||
listPlatformPartners: vi.fn(),
|
||||
createPlatformPartner: vi.fn(),
|
||||
getPlatformPartner: vi.fn(),
|
||||
downloadPlatformPartnerImportTemplate: vi.fn(),
|
||||
importPlatformPartners: vi.fn(),
|
||||
updatePlatformPartner: vi.fn(),
|
||||
changePlatformPartnerStatus: vi.fn(),
|
||||
}))
|
||||
|
||||
class ResizeObserverStub implements ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
function createMemoryStorage(): Storage {
|
||||
const values = new Map<string, string>()
|
||||
return {
|
||||
get length() { return values.size },
|
||||
clear: () => values.clear(),
|
||||
getItem: (key) => values.get(key) ?? null,
|
||||
key: (index) => [...values.keys()][index] ?? null,
|
||||
removeItem: (key) => values.delete(key),
|
||||
setItem: (key, value) => values.set(key, value),
|
||||
}
|
||||
}
|
||||
|
||||
const partner: PlatformPartnerResource = {
|
||||
id: '19001',
|
||||
tenantId: 10001,
|
||||
dataScopeId: 10001,
|
||||
partnerCode: 'CUS-001',
|
||||
partnerName: '深圳示例贸易有限公司',
|
||||
partnerType: 'CUSTOMER',
|
||||
types: ['CUSTOMER', 'SHIPPER'],
|
||||
contactName: '张三',
|
||||
contactPhone: '13800138000',
|
||||
contactEmail: 'contact@example.com',
|
||||
countryCode: 'CN',
|
||||
province: '广东省',
|
||||
city: '深圳市',
|
||||
district: '宝安区',
|
||||
addressLine: '航城街道示例路 1 号',
|
||||
postalCode: '518000',
|
||||
status: 'ACTIVE',
|
||||
remark: '长期合作单位',
|
||||
updatedAt: '2026-07-30T22:45:00',
|
||||
}
|
||||
|
||||
async function mountView() {
|
||||
vi.stubGlobal('localStorage', createMemoryStorage())
|
||||
vi.stubGlobal('sessionStorage', createMemoryStorage())
|
||||
const pinia = createPinia()
|
||||
setActivePinia(pinia)
|
||||
const auth = useAuthStore()
|
||||
auth.token = 'token'
|
||||
auth.permissions = [
|
||||
'platform:counterparty:list',
|
||||
'platform:counterparty:create',
|
||||
'platform:counterparty:edit',
|
||||
'platform:counterparty:status',
|
||||
]
|
||||
useAccessPreviewStore().initializeAfterLogin()
|
||||
const wrapper = mount(PartnersView, {
|
||||
attachTo: document.body,
|
||||
global: { plugins: [pinia, ElementPlus] },
|
||||
})
|
||||
await flushPromises()
|
||||
return wrapper
|
||||
}
|
||||
|
||||
enableAutoUnmount(afterEach)
|
||||
afterAll(() => vi.unstubAllGlobals())
|
||||
|
||||
describe('PartnersView real API integration', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
|
||||
document.body.innerHTML = ''
|
||||
vi.mocked(listPlatformPartners).mockReset().mockResolvedValue({
|
||||
records: [partner], page: 1, size: 20, total: 1, pages: 1,
|
||||
})
|
||||
})
|
||||
|
||||
it('loads the fixed tenant page and renders the real partner fields', async () => {
|
||||
const wrapper = await mountView()
|
||||
|
||||
expect(listPlatformPartners).toHaveBeenCalledWith(10001, {
|
||||
page: 1, size: 20, keyword: undefined, type: undefined, status: undefined,
|
||||
})
|
||||
expect(wrapper.text()).toContain('深圳示例贸易有限公司')
|
||||
expect(wrapper.text()).toContain('CUS-001')
|
||||
expect(wrapper.text()).toContain('contact@example.com')
|
||||
expect(wrapper.text()).toContain('广东省 深圳市 宝安区 航城街道示例路 1 号')
|
||||
expect(wrapper.text()).not.toContain('往来单位总数')
|
||||
expect(wrapper.text()).not.toContain('往来单位档案')
|
||||
expect(wrapper.find('.query-toolbar').exists()).toBe(true)
|
||||
expect(wrapper.find('.data-table').exists()).toBe(true)
|
||||
expect(wrapper.find('.table-panel').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('updates filters locally and only requests after search', async () => {
|
||||
const wrapper = await mountView()
|
||||
const keywordInput = wrapper.find('input[placeholder="单位名称、编码、联系人或电话"]')
|
||||
|
||||
await keywordInput.setValue('深圳')
|
||||
await flushPromises()
|
||||
expect(listPlatformPartners).toHaveBeenCalledTimes(1)
|
||||
|
||||
const searchButton = wrapper.findAll('button').find((button) => button.text().trim() === '查询')
|
||||
expect(searchButton).toBeDefined()
|
||||
await searchButton?.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(listPlatformPartners).toHaveBeenCalledTimes(2)
|
||||
expect(listPlatformPartners).toHaveBeenLastCalledWith(10001, {
|
||||
page: 1, size: 20, keyword: '深圳', type: undefined, status: undefined,
|
||||
})
|
||||
})
|
||||
|
||||
it('shows useful placeholders and visible required markers in the create form', async () => {
|
||||
const wrapper = await mountView()
|
||||
const createButton = wrapper.findAll('button').find((button) => button.text().trim() === '新增往来单位')
|
||||
expect(createButton).toBeDefined()
|
||||
await createButton?.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(document.querySelector('input[placeholder="请输入工商登记或常用单位名称"]')).not.toBeNull()
|
||||
expect(document.querySelector('input[placeholder="请输入主要联系人姓名"]')).not.toBeNull()
|
||||
expect(document.querySelector('textarea[placeholder="请输入街道、园区、楼栋及门牌信息"]')).not.toBeNull()
|
||||
expect(document.querySelectorAll('.el-form-item.is-required').length).toBe(9)
|
||||
})
|
||||
|
||||
it('shows a recoverable API failure without demo data', async () => {
|
||||
vi.mocked(listPlatformPartners).mockRejectedValueOnce(new Error('Gateway unavailable'))
|
||||
const wrapper = await mountView()
|
||||
|
||||
expect(wrapper.text()).toContain('往来单位列表暂时无法加载')
|
||||
expect(wrapper.text()).toContain('Gateway unavailable')
|
||||
expect(wrapper.text()).toContain('重新加载')
|
||||
expect(wrapper.text()).not.toContain('深圳示例贸易有限公司')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,565 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadFile } from 'element-plus'
|
||||
import { Building2, Download, Eye, MapPin, Pencil, Plus, Power, Upload } from '@lucide/vue'
|
||||
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 { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
|
||||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||||
import {
|
||||
changePlatformPartnerStatus,
|
||||
createPlatformPartner,
|
||||
downloadPlatformPartnerImportTemplate,
|
||||
getPlatformPartner,
|
||||
importPlatformPartners,
|
||||
listPlatformPartners,
|
||||
updatePlatformPartner,
|
||||
type PlatformPartnerImportResult,
|
||||
type PlatformPartnerResource,
|
||||
type PlatformPartnerStatus,
|
||||
type PlatformPartnerLegacyType,
|
||||
type PlatformPartnerType,
|
||||
type SavePlatformPartnerRequest,
|
||||
} from '@/modules/master-data/counterparties/api/platformPartners'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
|
||||
const fixedTenantId = 10001
|
||||
const pageSize = ref(20)
|
||||
const access = useAccessPreviewStore()
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const editorOpen = ref(false)
|
||||
const detailOpen = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const detail = ref<PlatformPartnerResource | null>(null)
|
||||
const importOpen = ref(false)
|
||||
const importFile = ref<File | null>(null)
|
||||
const importing = ref(false)
|
||||
const downloadingTemplate = ref(false)
|
||||
const importResult = ref<PlatformPartnerImportResult | null>(null)
|
||||
const formRef = ref<FormInstance>()
|
||||
const rows = ref<PlatformPartnerResource[]>([])
|
||||
const page = ref(1)
|
||||
const total = ref(0)
|
||||
const loadError = ref<ApiErrorDetails | null>(null)
|
||||
const statusLoadingIds = ref(new Set<string>())
|
||||
|
||||
type PartnerFilters = QueryModel & {
|
||||
keyword: string
|
||||
type: PlatformPartnerType | ''
|
||||
status: PlatformPartnerStatus | ''
|
||||
}
|
||||
|
||||
const filters = ref<PartnerFilters>({
|
||||
keyword: '',
|
||||
type: '',
|
||||
status: '',
|
||||
})
|
||||
const appliedFilters = ref<PartnerFilters>({ ...filters.value })
|
||||
const queryFields: QueryField[] = [
|
||||
{ key: 'keyword', type: 'input', placeholder: '单位名称、编码、联系人或电话' },
|
||||
{
|
||||
key: 'type',
|
||||
type: 'select',
|
||||
placeholder: '全部类型',
|
||||
options: [
|
||||
{ label: '客户', value: 'CUSTOMER' },
|
||||
{ label: '供应商', value: 'SUPPLIER' },
|
||||
{ label: '承运商', value: 'CARRIER' },
|
||||
{ label: '报关行', value: 'CUSTOMS_BROKER' },
|
||||
{ label: '发货单位', value: 'SHIPPER' },
|
||||
{ label: '收货单位', value: 'CONSIGNEE' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
type: 'select',
|
||||
placeholder: '全部状态',
|
||||
options: [
|
||||
{ label: '启用', value: 'ACTIVE' },
|
||||
{ label: '停用', value: 'INACTIVE' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
interface PartnerForm extends SavePlatformPartnerRequest {
|
||||
id: string
|
||||
}
|
||||
|
||||
const emptyForm = (): PartnerForm => ({
|
||||
id: '',
|
||||
partnerCode: '',
|
||||
partnerName: '',
|
||||
partnerType: 'CUSTOMER',
|
||||
types: ['CUSTOMER'],
|
||||
contactName: '',
|
||||
contactPhone: '',
|
||||
contactEmail: null,
|
||||
countryCode: 'CN',
|
||||
province: null,
|
||||
city: '',
|
||||
district: null,
|
||||
addressLine: '',
|
||||
postalCode: null,
|
||||
status: 'ACTIVE',
|
||||
remark: null,
|
||||
})
|
||||
const form = reactive<PartnerForm>(emptyForm())
|
||||
const editorLabel = computed(() => form.id ? '编辑往来单位' : '新增往来单位')
|
||||
const editorPermission = computed(() => form.id ? 'platform:counterparty:edit' : 'platform:counterparty:create')
|
||||
const { captureBaseline } = useUnsavedWorkRegistration({
|
||||
key: 'partner-editor',
|
||||
label: editorLabel,
|
||||
isOpen: editorOpen,
|
||||
model: form,
|
||||
requiredPermission: editorPermission,
|
||||
})
|
||||
|
||||
const rules: FormRules<PartnerForm> = {
|
||||
partnerCode: [{ required: true, whitespace: true, message: '请输入往来单位编码', trigger: 'blur' }],
|
||||
partnerName: [{ required: true, whitespace: true, message: '请输入往来单位名称', trigger: 'blur' }],
|
||||
types: [{ required: true, type: 'array', min: 1, message: '请至少选择一个单位类型', trigger: 'change' }],
|
||||
contactName: [{ required: true, whitespace: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contactPhone: [{ required: true, whitespace: true, message: '请输入联系电话', trigger: 'blur' }],
|
||||
contactEmail: [{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }],
|
||||
countryCode: [
|
||||
{ required: true, whitespace: true, message: '请输入国家二字码', trigger: 'blur' },
|
||||
{ pattern: /^[A-Z]{2}$/, message: '国家码须为两个大写英文字母', trigger: 'blur' },
|
||||
],
|
||||
city: [{ required: true, whitespace: true, message: '请输入城市', trigger: 'blur' }],
|
||||
addressLine: [{ required: true, whitespace: true, message: '请输入详细地址', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const typeLabels: Record<PlatformPartnerType, string> = {
|
||||
CUSTOMER: '客户',
|
||||
SUPPLIER: '供应商',
|
||||
CARRIER: '承运商',
|
||||
CUSTOMS_BROKER: '报关行',
|
||||
SHIPPER: '发货单位',
|
||||
CONSIGNEE: '收货单位',
|
||||
}
|
||||
const typeOptions = Object.entries(typeLabels).map(([value, label]) => ({ value: value as PlatformPartnerType, label }))
|
||||
function partnerTypeLabel(type: PlatformPartnerLegacyType) {
|
||||
return type === 'BOTH' ? '客户 / 供应商' : typeLabels[type]
|
||||
}
|
||||
const partnerColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 210, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'partner', label: '往来单位', minWidth: 210, slotName: 'partner' },
|
||||
{ key: 'type', label: '类型', minWidth: 115, slotName: 'type' },
|
||||
{ key: 'contact', label: '联系人', minWidth: 165, slotName: 'contact' },
|
||||
{ key: 'address', label: '地址', minWidth: 240, slotName: 'address' },
|
||||
{ key: 'status', label: '状态', width: 90, slotName: 'status' },
|
||||
{ prop: 'updatedAt', label: '更新时间', minWidth: 140, formatter: (row: PlatformPartnerResource) => formatUpdatedAt(row.updatedAt) },
|
||||
]
|
||||
|
||||
watch(
|
||||
() => access.can(editorPermission.value),
|
||||
(canWrite) => {
|
||||
if (canWrite || !editorOpen.value) return
|
||||
editorOpen.value = false
|
||||
Object.assign(form, emptyForm())
|
||||
},
|
||||
{ flush: 'sync' },
|
||||
)
|
||||
|
||||
function queryParams() {
|
||||
return {
|
||||
page: page.value,
|
||||
size: pageSize.value,
|
||||
keyword: appliedFilters.value.keyword.trim() || undefined,
|
||||
type: appliedFilters.value.type || undefined,
|
||||
status: appliedFilters.value.status || undefined,
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPartners() {
|
||||
loading.value = true
|
||||
loadError.value = null
|
||||
try {
|
||||
const result = await listPlatformPartners(fixedTenantId, queryParams())
|
||||
rows.value = result.records
|
||||
total.value = result.total
|
||||
} catch (error) {
|
||||
loadError.value = getApiErrorDetails(error, '往来单位加载失败，请稍后重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function searchPartners(model: QueryModel) {
|
||||
appliedFilters.value = {
|
||||
keyword: String(model.keyword || ''),
|
||||
type: (model.type || '') as PlatformPartnerType | '',
|
||||
status: (model.status || '') as PlatformPartnerStatus | '',
|
||||
}
|
||||
if (page.value === 1) {
|
||||
void loadPartners()
|
||||
return
|
||||
}
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
Object.assign(form, emptyForm())
|
||||
captureBaseline()
|
||||
editorOpen.value = true
|
||||
requestAnimationFrame(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
function nullable(value: string | null) {
|
||||
return value?.trim() || null
|
||||
}
|
||||
|
||||
function openEdit(row: PlatformPartnerResource) {
|
||||
Object.assign(form, {
|
||||
id: String(row.id),
|
||||
partnerCode: row.partnerCode,
|
||||
partnerName: row.partnerName,
|
||||
partnerType: row.types[0],
|
||||
types: [...row.types],
|
||||
contactName: row.contactName,
|
||||
contactPhone: row.contactPhone,
|
||||
contactEmail: row.contactEmail,
|
||||
countryCode: row.countryCode,
|
||||
province: row.province,
|
||||
city: row.city,
|
||||
district: row.district,
|
||||
addressLine: row.addressLine,
|
||||
postalCode: row.postalCode,
|
||||
status: row.status,
|
||||
remark: row.remark,
|
||||
})
|
||||
captureBaseline()
|
||||
editorOpen.value = true
|
||||
requestAnimationFrame(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
function savePayload(): SavePlatformPartnerRequest {
|
||||
const types = [...form.types]
|
||||
return {
|
||||
partnerCode: form.partnerCode.trim(),
|
||||
partnerName: form.partnerName.trim(),
|
||||
partnerType: types[0],
|
||||
types,
|
||||
contactName: form.contactName.trim(),
|
||||
contactPhone: form.contactPhone.trim(),
|
||||
contactEmail: nullable(form.contactEmail),
|
||||
countryCode: form.countryCode.trim().toUpperCase(),
|
||||
province: nullable(form.province),
|
||||
city: form.city.trim(),
|
||||
district: nullable(form.district),
|
||||
addressLine: form.addressLine.trim(),
|
||||
postalCode: nullable(form.postalCode),
|
||||
status: form.status,
|
||||
remark: nullable(form.remark),
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetail(row: PlatformPartnerResource) {
|
||||
detailOpen.value = true
|
||||
detailLoading.value = true
|
||||
detail.value = null
|
||||
try {
|
||||
detail.value = await getPlatformPartner(fixedTenantId, row.id)
|
||||
} catch (error) {
|
||||
const meta = getApiErrorDetails(error, '往来单位详情加载失败')
|
||||
ElMessage.error(meta.requestId ? `${meta.message}（requestId: ${meta.requestId}）` : meta.message)
|
||||
detailOpen.value = false
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openImport() {
|
||||
importFile.value = null
|
||||
importResult.value = null
|
||||
importOpen.value = true
|
||||
}
|
||||
|
||||
function selectImportFile(uploadFile: UploadFile) {
|
||||
importFile.value = uploadFile.raw ?? null
|
||||
importResult.value = null
|
||||
}
|
||||
|
||||
function removeImportFile() {
|
||||
importFile.value = null
|
||||
}
|
||||
|
||||
async function downloadTemplate() {
|
||||
downloadingTemplate.value = true
|
||||
try {
|
||||
const blob = await downloadPlatformPartnerImportTemplate()
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = '往来单位导入模板-v1.xlsx'
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
} catch (error) {
|
||||
ElMessage.error(getApiErrorDetails(error, '模板下载失败，请重试').message)
|
||||
} finally {
|
||||
downloadingTemplate.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitImport() {
|
||||
if (!importFile.value) {
|
||||
ElMessage.warning('请先选择 XLSX 文件')
|
||||
return
|
||||
}
|
||||
importing.value = true
|
||||
importResult.value = null
|
||||
try {
|
||||
importResult.value = await importPlatformPartners(fixedTenantId, importFile.value)
|
||||
if (importResult.value.success) {
|
||||
ElMessage.success(`成功导入 ${importResult.value.importedRows} 条往来单位`)
|
||||
await loadPartners()
|
||||
}
|
||||
} catch (error) {
|
||||
const meta = getApiErrorDetails(error, '往来单位导入失败，请重试')
|
||||
ElMessage.error(meta.requestId ? `${meta.message}（requestId: ${meta.requestId}）` : meta.message)
|
||||
} finally {
|
||||
importing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function downloadImportErrors() {
|
||||
if (!importResult.value?.errors.length) return
|
||||
const escapeCsv = (value: string | number) => `"${String(value).replaceAll('"', '""')}"`
|
||||
const rows = [
|
||||
['行号', '字段', '原因'],
|
||||
...importResult.value.errors.map((error) => [error.row || '-', error.field, error.message]),
|
||||
]
|
||||
const csv = rows.map((row) => row.map(escapeCsv).join(',')).join('\r\n')
|
||||
const url = URL.createObjectURL(new Blob(['\ufeff', csv], { type: 'text/csv;charset=utf-8' }))
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `${importResult.value.fileName.replace(/\.xlsx$/i, '')}-错误报告.csv`
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
async function savePartner() {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = savePayload()
|
||||
if (form.id) {
|
||||
await updatePlatformPartner(fixedTenantId, form.id, payload)
|
||||
ElMessage.success('往来单位已更新')
|
||||
} else {
|
||||
await createPlatformPartner(fixedTenantId, payload)
|
||||
ElMessage.success('往来单位已新增')
|
||||
}
|
||||
editorOpen.value = false
|
||||
await loadPartners()
|
||||
} catch (error) {
|
||||
const details = getApiErrorDetails(error, '往来单位保存失败，请重试')
|
||||
ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleStatus(row: PlatformPartnerResource) {
|
||||
const nextStatus: PlatformPartnerStatus = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
|
||||
const action = nextStatus === 'ACTIVE' ? '启用' : '停用'
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`${action}后${nextStatus === 'ACTIVE' ? '可继续用于新业务' : '不再用于新业务，历史数据不受影响'}。`,
|
||||
`${action}“${row.partnerName}”`,
|
||||
{ type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: action, cancelButtonText: '取消' },
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
const id = String(row.id)
|
||||
statusLoadingIds.value = new Set(statusLoadingIds.value).add(id)
|
||||
try {
|
||||
await changePlatformPartnerStatus(fixedTenantId, row.id, nextStatus)
|
||||
ElMessage.success(`往来单位已${action}`)
|
||||
await loadPartners()
|
||||
} catch (error) {
|
||||
const details = getApiErrorDetails(error, `往来单位${action}失败，请重试`)
|
||||
ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
|
||||
} finally {
|
||||
const next = new Set(statusLoadingIds.value)
|
||||
next.delete(id)
|
||||
statusLoadingIds.value = next
|
||||
}
|
||||
}
|
||||
|
||||
function formatUpdatedAt(value?: string | null) {
|
||||
return value ? value.replace('T', ' ').slice(0, 16) : '-'
|
||||
}
|
||||
|
||||
watch([page, pageSize], () => { void loadPartners() })
|
||||
|
||||
onMounted(loadPartners)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="business-page partners-page">
|
||||
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="往来单位筛选" :fields="queryFields" @search="searchPartners" />
|
||||
|
||||
<section v-if="loadError" class="surface-panel partners-error" role="alert">
|
||||
<div>
|
||||
<strong>往来单位列表暂时无法加载</strong>
|
||||
<p>{{ loadError.message }}</p>
|
||||
<ApiErrorMeta :details="loadError" />
|
||||
</div>
|
||||
<el-button type="primary" :loading="loading" @click="loadPartners">重新加载</el-button>
|
||||
</section>
|
||||
|
||||
<section v-else class="surface-panel table-panel" :aria-busy="loading">
|
||||
<div class="partners-table-header">
|
||||
<div class="partners-table-heading">
|
||||
<h2>往来单位列表</h2>
|
||||
<span>共 {{ total }} 个往来单位</span>
|
||||
</div>
|
||||
<div class="partners-primary-actions">
|
||||
<el-button v-if="access.can('platform:counterparty:import')" :disabled="loading" @click="openImport"><Upload :size="16" />批量导入</el-button>
|
||||
<el-button v-if="access.can('platform:counterparty: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="rows"
|
||||
:columns="partnerColumns"
|
||||
:loading="loading"
|
||||
:total="total"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
aria-label="往来单位列表"
|
||||
row-key="id"
|
||||
empty-text="暂无符合条件的往来单位"
|
||||
>
|
||||
<template #actions="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button link type="primary" @click="openDetail(row as PlatformPartnerResource)"><Eye :size="15" />详情</el-button>
|
||||
<el-button v-if="access.can('platform:counterparty:edit')" link type="primary" @click="openEdit(row as PlatformPartnerResource)"><Pencil :size="15" />编辑</el-button>
|
||||
<el-button v-if="access.can('platform:counterparty:status')" link :type="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="statusLoadingIds.has(String((row as PlatformPartnerResource).id))" @click="toggleStatus(row as PlatformPartnerResource)"><Power :size="15" />{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #partner="{ row }"><div class="partner-cell"><span><Building2 :size="18" /></span><div><strong>{{ (row as PlatformPartnerResource).partnerName }}</strong><small>{{ (row as PlatformPartnerResource).partnerCode }}</small></div></div></template>
|
||||
<template #type="{ row }"><div class="partner-types"><el-tag v-for="type in (row as PlatformPartnerResource).types" :key="type" effect="plain">{{ partnerTypeLabel(type) }}</el-tag></div></template>
|
||||
<template #contact="{ row }"><strong>{{ (row as PlatformPartnerResource).contactName }}</strong><span class="partner-subline">{{ (row as PlatformPartnerResource).contactPhone }}</span><span v-if="(row as PlatformPartnerResource).contactEmail" class="partner-subline">{{ (row as PlatformPartnerResource).contactEmail }}</span></template>
|
||||
<template #address="{ row }"><div class="partner-address"><MapPin :size="15" /><span>{{ [(row as PlatformPartnerResource).province, (row as PlatformPartnerResource).city, (row as PlatformPartnerResource).district, (row as PlatformPartnerResource).addressLine].filter(Boolean).join(' ') }}</span></div></template>
|
||||
<template #status="{ row }"><el-tag :type="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
|
||||
<template #pagination-left />
|
||||
</DataTable>
|
||||
</section>
|
||||
|
||||
<el-drawer v-model="editorOpen" :title="editorLabel" size="680px" class="business-drawer editor-drawer" :close-on-click-modal="false">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
|
||||
<div class="form-section"><h3>单位信息</h3><div class="form-grid two-cols">
|
||||
<el-form-item label="单位编码" prop="partnerCode" required><el-input v-model="form.partnerCode" placeholder="如：CUS-001" maxlength="50" /></el-form-item>
|
||||
<el-form-item label="单位名称" prop="partnerName" required><el-input v-model="form.partnerName" placeholder="请输入工商登记或常用单位名称" maxlength="128" /></el-form-item>
|
||||
<el-form-item label="单位类型" prop="types" required><el-select v-model="form.types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择一个或多个单位类型"><el-option v-for="option in typeOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
|
||||
<el-form-item label="状态" prop="status" required><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item>
|
||||
</div></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>
|
||||
</div></div>
|
||||
<div class="form-section"><h3>地址信息</h3><div class="form-grid two-cols">
|
||||
<el-form-item label="国家二字码" prop="countryCode" required><el-input v-model="form.countryCode" placeholder="如：CN" maxlength="2" @input="form.countryCode = String($event).toUpperCase()" /></el-form-item>
|
||||
<el-form-item label="省 / 州" prop="province"><el-input v-model="form.province" placeholder="如：广东省" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="城市" prop="city" required><el-input v-model="form.city" placeholder="如：深圳市" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="区 / 县" prop="district"><el-input v-model="form.district" placeholder="如：宝安区" maxlength="64" /></el-form-item>
|
||||
<el-form-item label="邮政编码" prop="postalCode"><el-input v-model="form.postalCode" placeholder="如：518000" maxlength="20" /></el-form-item>
|
||||
</div><el-form-item label="详细地址" prop="addressLine" required><el-input v-model="form.addressLine" type="textarea" :rows="3" placeholder="请输入街道、园区、楼栋及门牌信息" maxlength="255" show-word-limit /></el-form-item></div>
|
||||
<div class="form-section"><h3>其他信息</h3><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内部说明（选填）" maxlength="500" show-word-limit /></el-form-item></div>
|
||||
</el-form>
|
||||
<template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="savePartner">保存往来单位</el-button></div></template>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer v-model="detailOpen" title="往来单位详情" size="680px" class="business-drawer detail-drawer">
|
||||
<div v-loading="detailLoading" class="partner-detail">
|
||||
<template v-if="detail">
|
||||
<section><h3>单位信息</h3><dl class="detail-grid">
|
||||
<div><dt>单位编码</dt><dd>{{ detail.partnerCode }}</dd></div>
|
||||
<div><dt>单位名称</dt><dd>{{ detail.partnerName }}</dd></div>
|
||||
<div><dt>状态</dt><dd><el-tag :type="detail.status === 'ACTIVE' ? 'success' : 'info'">{{ detail.status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></dd></div>
|
||||
<div><dt>单位类型</dt><dd class="partner-types"><el-tag v-for="type in detail.types" :key="type" effect="plain">{{ partnerTypeLabel(type) }}</el-tag></dd></div>
|
||||
</dl></section>
|
||||
<section><h3>联系与地址</h3><dl class="detail-grid">
|
||||
<div><dt>联系人</dt><dd>{{ detail.contactName }}</dd></div><div><dt>联系电话</dt><dd>{{ detail.contactPhone }}</dd></div>
|
||||
<div><dt>联系邮箱</dt><dd>{{ detail.contactEmail || '-' }}</dd></div><div><dt>邮政编码</dt><dd>{{ detail.postalCode || '-' }}</dd></div>
|
||||
<div class="detail-span"><dt>详细地址</dt><dd>{{ [detail.countryCode, detail.province, detail.city, detail.district, detail.addressLine].filter(Boolean).join(' ') }}</dd></div>
|
||||
</dl></section>
|
||||
<section><h3>其他信息</h3><dl class="detail-grid">
|
||||
<div><dt>数据范围</dt><dd>{{ detail.dataScopeId }}</dd></div><div><dt>更新时间</dt><dd>{{ formatUpdatedAt(detail.updatedAt) }}</dd></div>
|
||||
<div class="detail-span"><dt>备注</dt><dd>{{ detail.remark || '-' }}</dd></div>
|
||||
</dl></section>
|
||||
</template>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog v-model="importOpen" title="批量导入往来单位" width="min(720px, calc(100vw - 32px))" :close-on-click-modal="!importing" :close-on-press-escape="!importing">
|
||||
<div class="import-content">
|
||||
<div class="import-guide"><strong>使用标准模板导入</strong><p>仅新增档案，最多 1000 行。服务端会整批校验；任一行有误时不会写入任何数据。</p><el-button :loading="downloadingTemplate" @click="downloadTemplate"><Download :size="16" />下载 XLSX 模板</el-button></div>
|
||||
<el-upload accept=".xlsx" :auto-upload="false" :limit="1" :on-change="selectImportFile" :on-remove="removeImportFile">
|
||||
<el-button><Upload :size="16" />选择 XLSX 文件</el-button>
|
||||
<template #tip><div class="el-upload__tip">文件不得超过 5MB，请勿修改模板版本或表头。</div></template>
|
||||
</el-upload>
|
||||
<div v-if="importResult" :class="['import-result', importResult.success ? 'is-success' : 'is-error']" role="status">
|
||||
<div class="import-result-heading"><strong>{{ importResult.success ? `已成功导入 ${importResult.importedRows} 条记录` : `发现 ${importResult.errors.length} 个问题，未写入数据` }}</strong><el-button v-if="importResult.errors.length" size="small" @click="downloadImportErrors"><Download :size="15" />下载错误报告</el-button></div>
|
||||
<el-table v-if="importResult.errors.length" :data="importResult.errors" max-height="260" size="small">
|
||||
<el-table-column prop="row" label="行号" width="70"><template #default="{ row }">{{ row.row || '-' }}</template></el-table-column>
|
||||
<el-table-column prop="field" label="字段" width="120" /><el-table-column prop="message" label="原因" min-width="240" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer><el-button :disabled="importing" @click="importOpen = false">关闭</el-button><el-button type="primary" :loading="importing" :disabled="!importFile" @click="submitImport">开始导入</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.partners-error { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-color: #fecdca; background: #fffafa; }
|
||||
.partners-error strong { color: #7a271a; font-size: 13px; }
|
||||
.partners-error p { margin: 4px 0 0; color: #b54708; font-size: 12px; overflow-wrap: anywhere; }
|
||||
.partners-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); }
|
||||
.partners-table-heading { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
|
||||
.partners-table-heading h2 { margin: 0; color: var(--cc-text); font-size: 16px; line-height: 1.4; }
|
||||
.partners-table-heading span { color: var(--cc-muted); font-size: 12px; white-space: nowrap; }
|
||||
.partners-primary-actions, .partner-types { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.partner-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.partner-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
|
||||
.partner-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.partner-cell strong { overflow-wrap: anywhere; }
|
||||
.partner-cell small, .partner-subline { display: block; color: var(--cc-muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
|
||||
.partner-address { display: flex; align-items: flex-start; gap: 7px; line-height: 1.55; overflow-wrap: anywhere; }
|
||||
.partner-address svg { flex: 0 0 15px; margin-top: 3px; color: var(--cc-muted); }
|
||||
.partner-detail { min-height: 180px; }
|
||||
.partner-detail section + section { margin-top: 24px; }
|
||||
.partner-detail h3 { margin: 0 0 12px; color: var(--cc-text); font-size: 15px; }
|
||||
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-border); }
|
||||
.detail-grid > div { min-width: 0; padding: 12px 14px; background: #fff; }
|
||||
.detail-grid .detail-span { grid-column: 1 / -1; }
|
||||
.detail-grid dt { margin-bottom: 5px; color: var(--cc-muted); font-size: 12px; }
|
||||
.detail-grid dd { margin: 0; color: var(--cc-text); line-height: 1.55; overflow-wrap: anywhere; }
|
||||
.import-content { display: grid; gap: 18px; }
|
||||
.import-guide { padding: 16px; border: 1px solid #d8e2f0; border-radius: 8px; background: #f8fbff; }
|
||||
.import-guide p { margin: 6px 0 14px; color: var(--cc-muted); font-size: 13px; line-height: 1.6; }
|
||||
.import-result { display: grid; gap: 12px; padding: 14px; border: 1px solid; border-radius: 8px; }
|
||||
.import-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
.import-result.is-success { border-color: #a6f4c5; background: #f6fef9; color: #067647; }
|
||||
.import-result.is-error { border-color: #fecdca; background: #fffafa; color: #b42318; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.partners-error { align-items: stretch; flex-direction: column; }
|
||||
.partners-error .el-button { min-height: 44px; }
|
||||
.partners-table-header { align-items: stretch; flex-direction: column; }
|
||||
.partners-table-header .el-button { width: 100%; min-height: 40px; }
|
||||
.partners-primary-actions { flex-direction: column; }
|
||||
.detail-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.detail-grid .detail-span { grid-column: auto; }
|
||||
.import-result-heading { align-items: stretch; flex-direction: column; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { http } from '@/shared/api/http'
|
||||
import {
|
||||
changePlatformExpressCompanyStatus,
|
||||
createPlatformExpressCompany,
|
||||
downloadPlatformExpressCompanyImportTemplate,
|
||||
getPlatformExpressCompany,
|
||||
importPlatformExpressCompanies,
|
||||
listPlatformExpressCompanies,
|
||||
updatePlatformExpressCompany,
|
||||
type SavePlatformExpressCompanyRequest,
|
||||
} from './platformExpressCompanies'
|
||||
|
||||
vi.mock('@/shared/api/http', () => ({
|
||||
http: { get: vi.fn(), post: vi.fn(), put: vi.fn(), patch: vi.fn() },
|
||||
unwrapApiResponse: <T>(response: { data: T }) => response.data,
|
||||
}))
|
||||
|
||||
const payload: SavePlatformExpressCompanyRequest = {
|
||||
companyCode: 'SF',
|
||||
companyName: '顺丰速运',
|
||||
servicePhone: '95338',
|
||||
website: 'https://www.sf-express.com',
|
||||
trackingUrlTemplate: 'https://example.com/track/{trackingNo}',
|
||||
status: 'ACTIVE',
|
||||
remark: null,
|
||||
}
|
||||
|
||||
describe('platform express company API', () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(http.get).mockReset()
|
||||
vi.mocked(http.post).mockReset()
|
||||
vi.mocked(http.put).mockReset()
|
||||
vi.mocked(http.patch).mockReset()
|
||||
})
|
||||
|
||||
it('uses the implemented list and detail contracts', async () => {
|
||||
const page = { records: [], page: '1', size: '20', total: '0', pages: '0' }
|
||||
vi.mocked(http.get)
|
||||
.mockResolvedValueOnce({ code: '200', message: 'success', data: page })
|
||||
.mockResolvedValueOnce({ code: '200', message: 'success', data: { id: '19001' } })
|
||||
|
||||
await expect(listPlatformExpressCompanies(10001, 2, 20, ' 顺丰 ', 'ACTIVE')).resolves.toEqual({
|
||||
records: [],
|
||||
page: 1,
|
||||
size: 20,
|
||||
total: 0,
|
||||
pages: 0,
|
||||
})
|
||||
await expect(getPlatformExpressCompany(10001, '19001')).resolves.toEqual({ id: '19001' })
|
||||
expect(http.get).toHaveBeenNthCalledWith(1, '/platform/v1/express-companies', {
|
||||
params: { tenantId: 10001, page: 2, size: 20, keyword: '顺丰', status: 'ACTIVE' },
|
||||
})
|
||||
expect(http.get).toHaveBeenNthCalledWith(2, '/platform/v1/express-companies/19001', {
|
||||
params: { tenantId: 10001 },
|
||||
})
|
||||
})
|
||||
|
||||
it('uses the implemented create, update, and status contracts', async () => {
|
||||
vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'success', data: '19001' })
|
||||
vi.mocked(http.put).mockResolvedValue({ code: '200', message: 'success', data: null })
|
||||
vi.mocked(http.patch).mockResolvedValue({ code: '200', message: 'success', data: null })
|
||||
|
||||
await expect(createPlatformExpressCompany(10001, payload)).resolves.toBe('19001')
|
||||
await expect(updatePlatformExpressCompany(10001, '19001', payload)).resolves.toBeNull()
|
||||
await expect(changePlatformExpressCompanyStatus(10001, '19001', 'INACTIVE')).resolves.toBeNull()
|
||||
|
||||
expect(http.post).toHaveBeenCalledWith('/platform/v1/express-companies', payload, { params: { tenantId: 10001 } })
|
||||
expect(http.put).toHaveBeenCalledWith('/platform/v1/express-companies/19001', payload, { params: { tenantId: 10001 } })
|
||||
expect(http.patch).toHaveBeenCalledWith(
|
||||
'/platform/v1/express-companies/19001/status',
|
||||
{ status: 'INACTIVE' },
|
||||
{ params: { tenantId: 10001 } },
|
||||
)
|
||||
})
|
||||
|
||||
it('downloads the standard template as a blob', async () => {
|
||||
const template = new Blob(['xlsx'], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
||||
vi.mocked(http.get).mockResolvedValue(template)
|
||||
|
||||
await expect(downloadPlatformExpressCompanyImportTemplate()).resolves.toBe(template)
|
||||
expect(http.get).toHaveBeenCalledWith('/platform/v1/express-companies/import-template', { responseType: 'blob' })
|
||||
})
|
||||
|
||||
it('uploads the selected XLSX file as multipart form data', async () => {
|
||||
const result = { fileName: 'express.xlsx', totalRows: 2, importedRows: 2, success: true, errors: [] }
|
||||
vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'success', data: result })
|
||||
const file = new File(['xlsx'], 'express.xlsx', {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
})
|
||||
|
||||
await expect(importPlatformExpressCompanies(10001, file)).resolves.toEqual(result)
|
||||
expect(http.post).toHaveBeenCalledOnce()
|
||||
const [path, body, config] = vi.mocked(http.post).mock.calls[0]!
|
||||
expect(path).toBe('/platform/v1/express-companies/import')
|
||||
expect(body).toBeInstanceOf(FormData)
|
||||
expect((body as FormData).get('file')).toBe(file)
|
||||
expect(config).toEqual({ params: { tenantId: 10001 } })
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,129 @@
|
||||
import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
|
||||
|
||||
export type PlatformExpressCompanyStatus = 'ACTIVE' | 'INACTIVE'
|
||||
|
||||
export interface PlatformExpressCompanyResource {
|
||||
id: number | string
|
||||
tenantId: number | string
|
||||
companyCode: string
|
||||
companyName: string
|
||||
servicePhone: string | null
|
||||
website: string | null
|
||||
trackingUrlTemplate: string | null
|
||||
status: PlatformExpressCompanyStatus
|
||||
remark: string | null
|
||||
createdAt?: string | null
|
||||
updatedAt?: string | null
|
||||
}
|
||||
|
||||
export interface PlatformExpressCompanyPage {
|
||||
records: PlatformExpressCompanyResource[]
|
||||
page: number
|
||||
size: number
|
||||
total: number
|
||||
pages: number
|
||||
}
|
||||
|
||||
export interface SavePlatformExpressCompanyRequest {
|
||||
companyCode: string
|
||||
companyName: string
|
||||
servicePhone: string | null
|
||||
website: string | null
|
||||
trackingUrlTemplate: string | null
|
||||
status: PlatformExpressCompanyStatus
|
||||
remark: string | null
|
||||
}
|
||||
|
||||
export interface PlatformExpressCompanyImportError {
|
||||
row: number
|
||||
field: string
|
||||
message: string
|
||||
}
|
||||
|
||||
export interface PlatformExpressCompanyImportResult {
|
||||
fileName: string
|
||||
totalRows: number
|
||||
importedRows: number
|
||||
success: boolean
|
||||
errors: PlatformExpressCompanyImportError[]
|
||||
}
|
||||
|
||||
const basePath = '/platform/v1/express-companies'
|
||||
|
||||
export async function listPlatformExpressCompanies(
|
||||
tenantId: number,
|
||||
page = 1,
|
||||
size = 20,
|
||||
keyword = '',
|
||||
status: PlatformExpressCompanyStatus | '' = '',
|
||||
) {
|
||||
const response = await http.get<ApiEnvelope<PlatformExpressCompanyPage>, ApiEnvelope<PlatformExpressCompanyPage>>(basePath, {
|
||||
params: {
|
||||
tenantId,
|
||||
page,
|
||||
size,
|
||||
keyword: keyword.trim() || undefined,
|
||||
status: status || undefined,
|
||||
},
|
||||
})
|
||||
const result = unwrapApiResponse(response)
|
||||
return {
|
||||
...result,
|
||||
page: Number(result.page),
|
||||
size: Number(result.size),
|
||||
total: Number(result.total),
|
||||
pages: Number(result.pages),
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPlatformExpressCompany(tenantId: number, id: number | string) {
|
||||
const response = await http.get<ApiEnvelope<PlatformExpressCompanyResource>, ApiEnvelope<PlatformExpressCompanyResource>>(
|
||||
`${basePath}/${id}`,
|
||||
{ params: { tenantId } },
|
||||
)
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
|
||||
export async function createPlatformExpressCompany(tenantId: number, payload: SavePlatformExpressCompanyRequest) {
|
||||
const response = await http.post<ApiEnvelope<number | string>, ApiEnvelope<number | string>>(basePath, payload, {
|
||||
params: { tenantId },
|
||||
})
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
|
||||
export async function updatePlatformExpressCompany(
|
||||
tenantId: number,
|
||||
id: number | string,
|
||||
payload: SavePlatformExpressCompanyRequest,
|
||||
) {
|
||||
const response = await http.put<ApiEnvelope<null>, ApiEnvelope<null>>(`${basePath}/${id}`, payload, {
|
||||
params: { tenantId },
|
||||
})
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
|
||||
export async function changePlatformExpressCompanyStatus(
|
||||
tenantId: number,
|
||||
id: number | string,
|
||||
status: PlatformExpressCompanyStatus,
|
||||
) {
|
||||
const response = await http.patch<ApiEnvelope<null>, ApiEnvelope<null>>(`${basePath}/${id}/status`, { status }, {
|
||||
params: { tenantId },
|
||||
})
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
|
||||
export async function downloadPlatformExpressCompanyImportTemplate() {
|
||||
return http.get<Blob, Blob>(`${basePath}/import-template`, { responseType: 'blob' })
|
||||
}
|
||||
|
||||
export async function importPlatformExpressCompanies(tenantId: number, file: File) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const response = await http.post<ApiEnvelope<PlatformExpressCompanyImportResult>, ApiEnvelope<PlatformExpressCompanyImportResult>>(
|
||||
`${basePath}/import`,
|
||||
formData,
|
||||
{ params: { tenantId } },
|
||||
)
|
||||
return unwrapApiResponse(response)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import ElementPlus from 'element-plus'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
|
||||
import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
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 ExpressCompaniesView from './ExpressCompaniesView.vue'
|
||||
|
||||
vi.mock('@/modules/master-data/express-companies/api/platformExpressCompanies', () => ({
|
||||
listPlatformExpressCompanies: vi.fn(),
|
||||
createPlatformExpressCompany: vi.fn(),
|
||||
updatePlatformExpressCompany: vi.fn(),
|
||||
changePlatformExpressCompanyStatus: vi.fn(),
|
||||
}))
|
||||
|
||||
class ResizeObserverStub implements ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
function createMemoryStorage(): Storage {
|
||||
const values = new Map<string, string>()
|
||||
return {
|
||||
get length() { return values.size },
|
||||
clear: () => values.clear(),
|
||||
getItem: (key) => values.get(key) ?? null,
|
||||
key: (index) => [...values.keys()][index] ?? null,
|
||||
removeItem: (key) => values.delete(key),
|
||||
setItem: (key, value) => values.set(key, value),
|
||||
}
|
||||
}
|
||||
|
||||
const company: PlatformExpressCompanyResource = {
|
||||
id: '19001',
|
||||
tenantId: 10001,
|
||||
companyCode: 'SF',
|
||||
companyName: '顺丰速运',
|
||||
servicePhone: '95338',
|
||||
website: 'https://www.sf-express.com',
|
||||
trackingUrlTemplate: 'https://example.com/track/{trackingNo}',
|
||||
status: 'ACTIVE',
|
||||
remark: '测试数据',
|
||||
updatedAt: '2026-07-31T10:20:00',
|
||||
}
|
||||
|
||||
async function mountView() {
|
||||
vi.stubGlobal('localStorage', createMemoryStorage())
|
||||
vi.stubGlobal('sessionStorage', createMemoryStorage())
|
||||
const pinia = createPinia()
|
||||
setActivePinia(pinia)
|
||||
const auth = useAuthStore()
|
||||
auth.token = 'token'
|
||||
auth.permissions = ['platform:express:list', 'platform:express:create', 'platform:express:edit', 'platform:express:status']
|
||||
useAccessPreviewStore().initializeAfterLogin()
|
||||
const wrapper = mount(ExpressCompaniesView, {
|
||||
attachTo: document.body,
|
||||
global: { plugins: [pinia, ElementPlus] },
|
||||
})
|
||||
await flushPromises()
|
||||
return wrapper
|
||||
}
|
||||
|
||||
enableAutoUnmount(afterEach)
|
||||
afterAll(() => vi.unstubAllGlobals())
|
||||
|
||||
describe('ExpressCompaniesView query and table migration', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
|
||||
document.body.innerHTML = ''
|
||||
vi.mocked(listPlatformExpressCompanies).mockReset().mockResolvedValue({
|
||||
records: [company], page: 1, size: 20, total: 1, pages: 1,
|
||||
})
|
||||
})
|
||||
|
||||
it('renders the shared toolbar and data table without a summary strip', async () => {
|
||||
const wrapper = await mountView()
|
||||
|
||||
expect(wrapper.find('.query-toolbar').exists()).toBe(true)
|
||||
expect(wrapper.find('.data-table').exists()).toBe(true)
|
||||
expect(wrapper.text()).toContain('顺丰速运')
|
||||
expect(wrapper.find('.metric-strip').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not request with edited filters until search is submitted', async () => {
|
||||
const wrapper = await mountView()
|
||||
await wrapper.find('input[placeholder="快递公司名称或编码"]').setValue('顺丰')
|
||||
await flushPromises()
|
||||
expect(listPlatformExpressCompanies).toHaveBeenCalledTimes(1)
|
||||
|
||||
const searchButton = wrapper.findAll('button').find((button) => button.text().trim() === '查询')
|
||||
await searchButton?.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(listPlatformExpressCompanies).toHaveBeenLastCalledWith(10001, 1, 20, '顺丰', '')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,560 @@
|
||||
<script setup lang="ts">
|
||||
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'
|
||||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||||
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
||||
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
|
||||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||||
import {
|
||||
changePlatformExpressCompanyStatus,
|
||||
createPlatformExpressCompany,
|
||||
downloadPlatformExpressCompanyImportTemplate,
|
||||
getPlatformExpressCompany,
|
||||
importPlatformExpressCompanies,
|
||||
listPlatformExpressCompanies,
|
||||
updatePlatformExpressCompany,
|
||||
type PlatformExpressCompanyImportResult,
|
||||
type PlatformExpressCompanyResource,
|
||||
type PlatformExpressCompanyStatus,
|
||||
type SavePlatformExpressCompanyRequest,
|
||||
} from '@/modules/master-data/express-companies/api/platformExpressCompanies'
|
||||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||||
|
||||
const fixedTenantId = 10001
|
||||
const access = useAccessPreviewStore()
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const editorOpen = ref(false)
|
||||
const importOpen = ref(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const fileInputRef = ref<HTMLInputElement>()
|
||||
const rows = ref<PlatformExpressCompanyResource[]>([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const total = ref(0)
|
||||
const loadError = ref<ApiErrorDetails | null>(null)
|
||||
const statusLoadingIds = ref(new Set<string>())
|
||||
const editLoadingIds = ref(new Set<string>())
|
||||
const downloadingTemplate = ref(false)
|
||||
const importing = ref(false)
|
||||
const importFile = ref<File | null>(null)
|
||||
const importResult = ref<PlatformExpressCompanyImportResult | null>(null)
|
||||
const importError = ref<ApiErrorDetails | null>(null)
|
||||
type ExpressCompanyFilters = QueryModel & {
|
||||
keyword: string
|
||||
status: PlatformExpressCompanyStatus | ''
|
||||
}
|
||||
const filters = ref<ExpressCompanyFilters>({ keyword: '', status: '' })
|
||||
const appliedFilters = ref<ExpressCompanyFilters>({ ...filters.value })
|
||||
const queryFields: QueryField[] = [
|
||||
{ key: 'keyword', type: 'input', placeholder: '快递公司名称或编码', props: { maxlength: 128, 'aria-label': '快递公司关键词' } },
|
||||
{
|
||||
key: 'status',
|
||||
type: 'select',
|
||||
placeholder: '全部状态',
|
||||
props: { 'aria-label': '快递公司状态' },
|
||||
options: [
|
||||
{ label: '启用', value: 'ACTIVE' },
|
||||
{ label: '停用', value: 'INACTIVE' },
|
||||
],
|
||||
},
|
||||
]
|
||||
let loadSequence = 0
|
||||
|
||||
const emptyForm = (): SavePlatformExpressCompanyRequest & { id: string } => ({
|
||||
id: '',
|
||||
companyCode: '',
|
||||
companyName: '',
|
||||
servicePhone: null,
|
||||
website: null,
|
||||
trackingUrlTemplate: null,
|
||||
status: 'ACTIVE',
|
||||
remark: null,
|
||||
})
|
||||
const form = reactive(emptyForm())
|
||||
const rules: FormRules<typeof form> = {
|
||||
companyCode: [{ required: true, message: '请输入快递公司编码', trigger: 'blur' }],
|
||||
companyName: [{ required: true, message: '请输入快递公司名称', trigger: 'blur' }],
|
||||
website: [{ type: 'url', message: '请输入以 http:// 或 https:// 开头的完整网址', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
|
||||
}
|
||||
const editorTitle = computed(() => form.id ? '编辑快递公司' : '新增快递公司')
|
||||
const editorPermission = computed(() => form.id ? 'platform:express:edit' : 'platform:express:create')
|
||||
const displayedImportErrors = computed(() => importResult.value?.errors.slice(0, 100) || [])
|
||||
const { captureBaseline } = useUnsavedWorkRegistration({
|
||||
key: 'express-company-editor',
|
||||
label: editorTitle,
|
||||
isOpen: editorOpen,
|
||||
model: form,
|
||||
requiredPermission: editorPermission,
|
||||
})
|
||||
|
||||
watch(
|
||||
() => access.can(editorPermission.value),
|
||||
(canWrite) => {
|
||||
if (canWrite || !editorOpen.value) return
|
||||
editorOpen.value = false
|
||||
Object.assign(form, emptyForm())
|
||||
},
|
||||
{ flush: 'sync' },
|
||||
)
|
||||
|
||||
function optionalText(value: string | null) {
|
||||
const trimmed = value?.trim()
|
||||
return trimmed || null
|
||||
}
|
||||
|
||||
function safeHttpUrl(value: string | null) {
|
||||
if (!value) return null
|
||||
try {
|
||||
const url = new URL(value)
|
||||
return ['http:', 'https:'].includes(url.protocol) ? url.toString() : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function formatUpdatedAt(value?: string | null) {
|
||||
return value?.replace('T', ' ').slice(0, 16) || '—'
|
||||
}
|
||||
|
||||
const expressCompanyColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 170, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'company', label: '快递公司', minWidth: 210, slotName: 'company' },
|
||||
{ prop: 'servicePhone', label: '客服电话', minWidth: 130, formatter: (row: PlatformExpressCompanyResource) => row.servicePhone || '—' },
|
||||
{ key: 'website', label: '官方网站', minWidth: 210, slotName: 'website' },
|
||||
{ key: 'trackingUrlTemplate', label: '轨迹查询模板', minWidth: 260, slotName: 'trackingUrlTemplate' },
|
||||
{ key: 'remark', label: '备注', minWidth: 200, slotName: 'remark' },
|
||||
{ prop: 'updatedAt', label: '更新时间', minWidth: 150, formatter: (row: PlatformExpressCompanyResource) => formatUpdatedAt(row.updatedAt) },
|
||||
{ key: 'status', label: '状态', width: 100, slotName: 'status' },
|
||||
]
|
||||
|
||||
async function loadExpressCompanies() {
|
||||
const sequence = ++loadSequence
|
||||
loading.value = true
|
||||
loadError.value = null
|
||||
try {
|
||||
const result = await listPlatformExpressCompanies(
|
||||
fixedTenantId,
|
||||
page.value,
|
||||
pageSize.value,
|
||||
appliedFilters.value.keyword,
|
||||
appliedFilters.value.status,
|
||||
)
|
||||
if (sequence !== loadSequence) return
|
||||
rows.value = result.records
|
||||
total.value = result.total
|
||||
} catch (error) {
|
||||
if (sequence !== loadSequence) return
|
||||
rows.value = []
|
||||
total.value = 0
|
||||
loadError.value = getApiErrorDetails(error, '快递公司加载失败，请稍后重试')
|
||||
} finally {
|
||||
if (sequence === loadSequence) loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function applyFilters(model: QueryModel) {
|
||||
appliedFilters.value = {
|
||||
keyword: String(model.keyword || ''),
|
||||
status: (model.status || '') as PlatformExpressCompanyStatus | '',
|
||||
}
|
||||
if (page.value === 1) {
|
||||
void loadExpressCompanies()
|
||||
return
|
||||
}
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
Object.assign(form, emptyForm())
|
||||
captureBaseline()
|
||||
editorOpen.value = true
|
||||
void formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
function assignEditor(row: PlatformExpressCompanyResource) {
|
||||
Object.assign(form, {
|
||||
id: String(row.id),
|
||||
companyCode: row.companyCode,
|
||||
companyName: row.companyName,
|
||||
servicePhone: row.servicePhone,
|
||||
website: row.website,
|
||||
trackingUrlTemplate: row.trackingUrlTemplate,
|
||||
status: row.status,
|
||||
remark: row.remark,
|
||||
})
|
||||
captureBaseline()
|
||||
editorOpen.value = true
|
||||
void formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
async function openEdit(row: PlatformExpressCompanyResource) {
|
||||
const id = String(row.id)
|
||||
const pending = new Set(editLoadingIds.value)
|
||||
pending.add(id)
|
||||
editLoadingIds.value = pending
|
||||
try {
|
||||
assignEditor(await getPlatformExpressCompany(fixedTenantId, row.id))
|
||||
} catch (error) {
|
||||
const details = getApiErrorDetails(error, '快递公司详情加载失败，请稍后重试')
|
||||
ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
|
||||
} finally {
|
||||
const next = new Set(editLoadingIds.value)
|
||||
next.delete(id)
|
||||
editLoadingIds.value = next
|
||||
}
|
||||
}
|
||||
|
||||
function openImport() {
|
||||
importFile.value = null
|
||||
importResult.value = null
|
||||
importError.value = null
|
||||
if (fileInputRef.value) fileInputRef.value.value = ''
|
||||
importOpen.value = true
|
||||
}
|
||||
|
||||
function saveBlob(blob: Blob, fileName: string) {
|
||||
const url = URL.createObjectURL(blob)
|
||||
const anchor = document.createElement('a')
|
||||
anchor.href = url
|
||||
anchor.download = fileName
|
||||
anchor.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
async function downloadImportTemplate() {
|
||||
downloadingTemplate.value = true
|
||||
try {
|
||||
const blob = await downloadPlatformExpressCompanyImportTemplate()
|
||||
saveBlob(blob, '快递公司批量导入模板-v1.xlsx')
|
||||
} catch (error) {
|
||||
const details = getApiErrorDetails(error, '导入模板下载失败，请稍后重试')
|
||||
ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
|
||||
} finally {
|
||||
downloadingTemplate.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectImportFile(event: Event) {
|
||||
const file = (event.target as HTMLInputElement).files?.[0] || null
|
||||
importResult.value = null
|
||||
importError.value = null
|
||||
if (!file) {
|
||||
importFile.value = null
|
||||
return
|
||||
}
|
||||
if (!file.name.toLowerCase().endsWith('.xlsx')) {
|
||||
importFile.value = null
|
||||
ElMessage.error('请选择 .xlsx 格式的标准模板文件')
|
||||
if (fileInputRef.value) fileInputRef.value.value = ''
|
||||
return
|
||||
}
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
importFile.value = null
|
||||
ElMessage.error('导入文件不能超过 5MB')
|
||||
if (fileInputRef.value) fileInputRef.value.value = ''
|
||||
return
|
||||
}
|
||||
importFile.value = file
|
||||
}
|
||||
|
||||
async function submitImport() {
|
||||
if (!importFile.value) {
|
||||
ElMessage.warning('请先选择填写完成的 XLSX 文件')
|
||||
return
|
||||
}
|
||||
importing.value = true
|
||||
importError.value = null
|
||||
importResult.value = null
|
||||
try {
|
||||
const result = await importPlatformExpressCompanies(fixedTenantId, importFile.value)
|
||||
importResult.value = result
|
||||
if (result.success) {
|
||||
ElMessage.success(`成功导入 ${result.importedRows} 家快递公司`)
|
||||
importFile.value = null
|
||||
if (fileInputRef.value) fileInputRef.value.value = ''
|
||||
await loadExpressCompanies()
|
||||
}
|
||||
} catch (error) {
|
||||
importError.value = getApiErrorDetails(error, '快递公司导入失败，请稍后重试')
|
||||
} finally {
|
||||
importing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function downloadImportErrors() {
|
||||
if (!importResult.value?.errors.length) return
|
||||
const csvCell = (value: string | number) => `"${String(value).replaceAll('"', '""')}"`
|
||||
const lines = [
|
||||
['行号', '字段', '错误原因'].map(csvCell).join(','),
|
||||
...importResult.value.errors.map((item) => [item.row || '文件', item.field, item.message].map(csvCell).join(',')),
|
||||
]
|
||||
saveBlob(new Blob([`\ufeff${lines.join('\r\n')}`], { type: 'text/csv;charset=utf-8' }), '快递公司导入错误报告.csv')
|
||||
}
|
||||
|
||||
function buildPayload(): SavePlatformExpressCompanyRequest {
|
||||
return {
|
||||
companyCode: form.companyCode.trim(),
|
||||
companyName: form.companyName.trim(),
|
||||
servicePhone: optionalText(form.servicePhone),
|
||||
website: optionalText(form.website),
|
||||
trackingUrlTemplate: optionalText(form.trackingUrlTemplate),
|
||||
status: form.status,
|
||||
remark: optionalText(form.remark),
|
||||
}
|
||||
}
|
||||
|
||||
async function saveExpressCompany() {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = buildPayload()
|
||||
if (form.id) await updatePlatformExpressCompany(fixedTenantId, form.id, payload)
|
||||
else await createPlatformExpressCompany(fixedTenantId, payload)
|
||||
editorOpen.value = false
|
||||
ElMessage.success(form.id ? '快递公司资料已更新' : '快递公司已创建')
|
||||
await loadExpressCompanies()
|
||||
} catch (error) {
|
||||
const details = getApiErrorDetails(error, '快递公司保存失败，请检查后重试')
|
||||
ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleStatus(row: PlatformExpressCompanyResource) {
|
||||
const nextStatus: PlatformExpressCompanyStatus = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
|
||||
const action = nextStatus === 'ACTIVE' ? '启用' : '停用'
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定${action}“${row.companyName}”吗？${nextStatus === 'INACTIVE' ? '停用后不会再作为可用快递公司。' : ''}`,
|
||||
`${action}快递公司`,
|
||||
{ type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
const id = String(row.id)
|
||||
const pending = new Set(statusLoadingIds.value)
|
||||
pending.add(id)
|
||||
statusLoadingIds.value = pending
|
||||
try {
|
||||
await changePlatformExpressCompanyStatus(fixedTenantId, row.id, nextStatus)
|
||||
ElMessage.success(`已${action}${row.companyName}`)
|
||||
await loadExpressCompanies()
|
||||
} catch (error) {
|
||||
const details = getApiErrorDetails(error, `${action}快递公司失败`)
|
||||
ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
|
||||
} finally {
|
||||
const next = new Set(statusLoadingIds.value)
|
||||
next.delete(id)
|
||||
statusLoadingIds.value = next
|
||||
}
|
||||
}
|
||||
|
||||
watch([page, pageSize], () => { void loadExpressCompanies() })
|
||||
|
||||
onMounted(() => {
|
||||
void loadExpressCompanies()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="business-page express-company-page">
|
||||
<el-alert v-if="loadError" type="error" :closable="false" show-icon class="state-alert">
|
||||
<template #title>快递公司加载失败</template>
|
||||
<p>{{ loadError.message }}</p>
|
||||
<ApiErrorMeta :details="loadError" />
|
||||
<el-button size="small" @click="loadExpressCompanies">重新查询</el-button>
|
||||
</el-alert>
|
||||
|
||||
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="快递公司筛选" :fields="queryFields" @search="applyFilters" />
|
||||
|
||||
<section class="surface-panel table-panel">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<h2>快递公司列表</h2>
|
||||
<p>共 {{ total }} 家快递公司</p>
|
||||
</div>
|
||||
<div class="panel-actions">
|
||||
<el-button v-if="access.can('platform:express:import')" @click="openImport"><Upload :size="16" />批量导入</el-button>
|
||||
<el-button v-if="access.can('platform:express:create')" type="primary" @click="openCreate"><Plus :size="16" />新增快递公司</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable
|
||||
v-model:page="page"
|
||||
v-model:page-size="pageSize"
|
||||
:data="rows"
|
||||
:columns="expressCompanyColumns"
|
||||
:loading="loading"
|
||||
:total="total"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
aria-label="快递公司列表"
|
||||
row-key="id"
|
||||
:empty-text="appliedFilters.keyword.trim() || appliedFilters.status ? '暂无符合筛选条件的快递公司' : '暂无快递公司档案'"
|
||||
>
|
||||
<template #actions="{ row }">
|
||||
<div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions">
|
||||
<el-button
|
||||
v-if="access.can('platform:express:edit')"
|
||||
link
|
||||
type="primary"
|
||||
: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
|
||||
:type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
|
||||
:loading="statusLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
|
||||
@click="toggleStatus(row as PlatformExpressCompanyResource)"
|
||||
><Power :size="15" />{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
|
||||
</div>
|
||||
<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 #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>
|
||||
</template>
|
||||
<template #trackingUrlTemplate="{ row }"><code class="tracking-template">{{ (row as PlatformExpressCompanyResource).trackingUrlTemplate || '—' }}</code></template>
|
||||
<template #remark="{ row }"><span class="remark-cell">{{ (row as PlatformExpressCompanyResource).remark || '—' }}</span></template>
|
||||
<template #status="{ row }"><el-tag :type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
|
||||
<template #empty>
|
||||
<el-empty v-if="!loading" :description="appliedFilters.keyword.trim() || appliedFilters.status ? '暂无符合筛选条件的快递公司' : '暂无快递公司档案'">
|
||||
<el-button v-if="!appliedFilters.keyword.trim() && !appliedFilters.status && access.can('platform:express:create')" type="primary" @click="openCreate"><Plus :size="16" />新增第一家快递公司</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
<template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 家快递公司</span></template>
|
||||
</DataTable>
|
||||
</section>
|
||||
|
||||
<el-dialog
|
||||
v-model="importOpen"
|
||||
title="批量导入快递公司"
|
||||
width="min(680px, calc(100vw - 32px))"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="!importing"
|
||||
:show-close="!importing"
|
||||
class="import-dialog"
|
||||
>
|
||||
<div class="import-flow">
|
||||
<section class="import-step">
|
||||
<div class="step-heading"><span>1</span><div><strong>下载标准模板</strong><p>请勿修改模板版本或表头，仅填写模板中的数据行。</p></div></div>
|
||||
<el-button :loading="downloadingTemplate" @click="downloadImportTemplate"><Download :size="16" />下载模板</el-button>
|
||||
</section>
|
||||
<section class="import-step">
|
||||
<div class="step-heading"><span>2</span><div><strong>选择填写后的文件</strong><p>仅支持 .xlsx，最大 5MB、1000 行；本期只新增，不更新已有档案。</p></div></div>
|
||||
<label class="file-picker" :class="{ disabled: importing }">
|
||||
<input ref="fileInputRef" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :disabled="importing" @change="selectImportFile" />
|
||||
<FileSpreadsheet :size="20" />
|
||||
<span>{{ importFile?.name || '选择 XLSX 文件' }}</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<el-alert type="info" :closable="false" show-icon title="整批校验通过后才会写入；任一行有误时整批不写入。" />
|
||||
<el-alert v-if="importError" type="error" :closable="false" show-icon title="导入请求失败">
|
||||
<p>{{ importError.message }}</p>
|
||||
<ApiErrorMeta :details="importError" />
|
||||
</el-alert>
|
||||
<el-alert v-if="importResult?.success" type="success" :closable="false" show-icon :title="`导入完成：成功新增 ${importResult.importedRows} 家快递公司`" />
|
||||
|
||||
<section v-if="importResult && !importResult.success" class="import-errors" aria-live="polite">
|
||||
<div class="error-heading">
|
||||
<div><strong>校验未通过，未写入任何数据</strong><p>发现 {{ importResult.errors.length }} 项问题，请修正后重新上传。</p></div>
|
||||
<el-button size="small" @click="downloadImportErrors"><Download :size="14" />下载错误报告</el-button>
|
||||
</div>
|
||||
<div class="error-list">
|
||||
<div v-for="(item, index) in displayedImportErrors" :key="`${item.row}-${item.field}-${index}`" class="error-item">
|
||||
<span>{{ item.row > 0 ? `第 ${item.row} 行` : '文件' }}</span>
|
||||
<strong>{{ item.field }}</strong>
|
||||
<p>{{ item.message }}</p>
|
||||
</div>
|
||||
<p v-if="importResult.errors.length > displayedImportErrors.length" class="error-overflow-note">
|
||||
仅展示前 {{ displayedImportErrors.length }} 项，完整内容请下载错误报告。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :disabled="importing" @click="importOpen = false">关闭</el-button>
|
||||
<el-button type="primary" :loading="importing" :disabled="!importFile" @click="submitImport"><Upload :size="16" />开始导入</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="business-drawer editor-drawer" :close-on-click-modal="false">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
|
||||
<div class="form-section">
|
||||
<h3>公司标识</h3>
|
||||
<div class="form-grid two-cols">
|
||||
<el-form-item label="快递公司编码" prop="companyCode" required><el-input v-model.trim="form.companyCode" maxlength="50" placeholder="例如 SF" /></el-form-item>
|
||||
<el-form-item label="快递公司名称" prop="companyName" required><el-input v-model.trim="form.companyName" maxlength="128" placeholder="例如 顺丰速运" /></el-form-item>
|
||||
</div>
|
||||
<el-form-item label="状态" prop="status" required><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item>
|
||||
</div>
|
||||
<div class="form-section">
|
||||
<h3>服务与查询</h3>
|
||||
<div class="form-grid two-cols">
|
||||
<el-form-item label="客服电话"><el-input v-model.trim="form.servicePhone" maxlength="32" placeholder="例如 95338" /></el-form-item>
|
||||
<el-form-item label="官方网站" prop="website"><el-input v-model.trim="form.website" maxlength="255" placeholder="https://www.example.com" /></el-form-item>
|
||||
</div>
|
||||
<el-form-item label="轨迹查询地址模板"><el-input v-model.trim="form.trackingUrlTemplate" maxlength="500" placeholder="https://example.com/track/{trackingNo}" /></el-form-item>
|
||||
<p class="form-help">可使用 <code>{trackingNo}</code> 作为快递单号占位符；一期不包含轨迹订阅和自动回传。</p>
|
||||
</div>
|
||||
<div class="form-section"><h3>备注</h3><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></div>
|
||||
</el-form>
|
||||
<template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveExpressCompany">保存快递公司</el-button></div></template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.state-alert p { margin: 6px 0 0; line-height: 1.55; }
|
||||
.state-alert .el-button { margin-top: 10px; }
|
||||
.express-company-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
|
||||
.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
|
||||
.express-company-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.express-company-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.express-company-cell small { color: var(--cc-muted); font-size: 11px; }
|
||||
.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: 12px; text-decoration: none; }
|
||||
.external-link:hover { text-decoration: underline; }
|
||||
.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
|
||||
.remark-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
||||
.form-help code { color: #475467; font-family: "Cascadia Code", Consolas, monospace; }
|
||||
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|
||||
.panel-actions .el-button { margin-left: 0; }
|
||||
.import-flow { display: grid; gap: 16px; }
|
||||
.import-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fafbfc; }
|
||||
.step-heading { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
|
||||
.step-heading > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--cc-primary); color: #fff; font-size: 12px; font-weight: 700; }
|
||||
.step-heading strong, .error-heading strong { color: var(--cc-text); font-size: 14px; }
|
||||
.step-heading p, .error-heading p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
|
||||
.file-picker { display: inline-flex; min-width: 180px; max-width: 260px; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; color: var(--cc-primary); cursor: pointer; }
|
||||
.file-picker:hover { border-color: var(--cc-primary); }
|
||||
.file-picker:focus-within { outline: 2px solid color-mix(in srgb, var(--cc-primary) 28%, transparent); outline-offset: 2px; }
|
||||
.file-picker.disabled { cursor: not-allowed; opacity: .6; }
|
||||
.file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
|
||||
.file-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.import-flow .el-alert p { margin: 5px 0 0; }
|
||||
.import-errors { overflow: hidden; border: 1px solid #f4c7c7; border-radius: 8px; }
|
||||
.error-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #fff5f5; }
|
||||
.error-list { max-height: 220px; overflow: auto; }
|
||||
.error-item { display: grid; grid-template-columns: 72px 130px minmax(0, 1fr); gap: 10px; padding: 10px 16px; border-top: 1px solid #f4dddd; font-size: 12px; }
|
||||
.error-item span { color: #b42318; font-weight: 600; }
|
||||
.error-item p { margin: 0; overflow-wrap: anywhere; }
|
||||
.error-overflow-note { margin: 0; padding: 10px 16px; border-top: 1px solid #f4dddd; color: var(--cc-muted); font-size: 12px; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.panel-actions, .panel-actions .el-button { width: 100%; }
|
||||
.import-step, .error-heading { align-items: stretch; flex-direction: column; }
|
||||
.file-picker, .import-step > .el-button { width: 100%; max-width: none; }
|
||||
.error-item { grid-template-columns: 64px minmax(0, 1fr); }
|
||||
.error-item p { grid-column: 1 / -1; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
export const masterDataRoutes = [
|
||||
{
|
||||
path: 'master-data/express-companies',
|
||||
name: 'express-companies',
|
||||
component: () => import('@/modules/master-data/express-companies/pages/ExpressCompaniesView.vue'),
|
||||
meta: { title: '快递公司', description: '查询平台可用的快递公司档案与公开联系信息', permission: 'platform:express:list' },
|
||||
},
|
||||
{
|
||||
path: 'master-data/counterparties',
|
||||
name: 'counterparties',
|
||||
component: () => import('@/modules/master-data/counterparties/pages/PartnersView.vue'),
|
||||
meta: { title: '往来单位', description: '维护客户、供应商及客户/供应商双重类型单位档案', permission: 'platform:counterparty:list' },
|
||||
},
|
||||
] satisfies RouteRecordRaw[]
|
||||
Reference in New Issue
Block a user