优化
This commit is contained in:
@@ -195,6 +195,8 @@ describe('PartnersView real API integration', () => {
|
||||
const sections = detailContent?.querySelectorAll('section')
|
||||
const otherInfo = sections?.item(sections.length - 1)
|
||||
expect(detailContent).not.toBeNull()
|
||||
expect(detailContent?.closest('.el-drawer')?.classList.contains('admin-density-drawer')).toBe(true)
|
||||
expect(detailContent?.querySelectorAll('.density-fields')).toHaveLength(3)
|
||||
expect(otherInfo?.querySelectorAll('.detail-grid > .detail-span')).toHaveLength(2)
|
||||
expect(otherInfo?.textContent).toContain('更新时间')
|
||||
expect(otherInfo?.textContent).toContain('长期合作单位')
|
||||
@@ -278,13 +280,10 @@ describe('PartnersView real API integration', () => {
|
||||
})
|
||||
|
||||
it('keeps all three row actions visible without a premature more menu', () => {
|
||||
expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail')
|
||||
expect(source).toContain("access.can('platform:counterparty:edit')\" size=\"small\" plain type=\"primary\"")
|
||||
expect(source).toContain("access.can('platform:counterparty:status')\" size=\"small\" plain")
|
||||
expect(source).toContain('<Eye :size="15" />详情')
|
||||
expect(source).toContain('<Pencil :size="15" />编辑')
|
||||
expect(source).toContain('<Power :size="15" />')
|
||||
expect(source).not.toContain('MoreHorizontal')
|
||||
expect(source).not.toContain('<el-button link type="primary" @click="openDetail')
|
||||
})
|
||||
})
|
||||
const actions = source.slice(source.indexOf('<template #actions='), source.indexOf('</template>', source.indexOf('<template #actions=')))
|
||||
expect(actions.match(/class="density-action"/g)).toHaveLength(3)
|
||||
expect(actions).toContain('>详情</el-button>')
|
||||
expect(actions).toContain('>编辑</el-button>')
|
||||
expect(actions).toContain(':data-tone=')
|
||||
expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
|
||||
})})
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import '@/styles/adminDensity.css'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { Building2, Eye, FileUp, MapPin, Pencil, Plus, Power, Save } from '@lucide/vue'
|
||||
import { Building2, FileUp, MapPin, Plus, Save } from '@lucide/vue'
|
||||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||||
import AdminPage from '@/shared/components/AdminPage.vue'
|
||||
import AppDrawer from '@/shared/components/AppDrawer.vue'
|
||||
@@ -327,7 +328,7 @@ async function toggleStatus(row: PlatformPartnerResource) {
|
||||
await ElMessageBox.confirm(
|
||||
`${action}后${nextStatus === 'ACTIVE' ? '可继续用于新业务' : '不再用于新业务，历史数据不受影响'}。`,
|
||||
`${action}“${row.partnerName}”`,
|
||||
{ type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: action, cancelButtonText: '取消' },
|
||||
{ customClass: 'admin-density-confirm', type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: action, cancelButtonText: '取消' },
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
@@ -370,7 +371,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminPage as="div" class="partners-page" spacing="normal">
|
||||
<AdminPage as="div" class="partners-page admin-density" spacing="normal">
|
||||
<ListPageLayout aria-label="往来单位管理">
|
||||
<template #toolbar>
|
||||
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="往来单位筛选" :fields="queryFields" preference-key="partners-query" @search="searchPartners" />
|
||||
@@ -403,10 +404,10 @@ onMounted(() => {
|
||||
>
|
||||
<template #toolbar-actions><div class="partners-primary-actions"><el-button v-if="access.can('platform:counterparty:import')" :disabled="loading" @click="openImport"><FileUp :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></template>
|
||||
<template #actions="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button size="small" plain type="primary" @click="openDetail(row as PlatformPartnerResource)"><Eye :size="15" />详情</el-button>
|
||||
<el-button v-if="access.can('platform:counterparty:edit')" size="small" plain type="primary" :disabled="loading" @click="openEdit(row as PlatformPartnerResource)"><Pencil :size="15" />编辑</el-button>
|
||||
<el-button v-if="access.can('platform:counterparty:status')" size="small" plain :disabled="loading" :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 class="table-actions density-actions">
|
||||
<el-button data-tone="neutral" class="density-action" size="small" @click="openDetail(row as PlatformPartnerResource)">详情</el-button>
|
||||
<el-button data-tone="neutral" class="density-action" v-if="access.can('platform:counterparty:edit')" size="small" :disabled="loading" @click="openEdit(row as PlatformPartnerResource)">编辑</el-button>
|
||||
<el-button class="density-action" v-if="access.can('platform:counterparty:status')" size="small" :disabled="loading" :data-tone="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="statusLoadingIds.has(String((row as PlatformPartnerResource).id))" @click="toggleStatus(row as PlatformPartnerResource)">{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #partner="{ row }"><div class="partner-cell"><span><Building2 :size="18" /></span><div><LineClampText :content="(row as PlatformPartnerResource).partnerName" /></div></div></template>
|
||||
@@ -422,30 +423,30 @@ onMounted(() => {
|
||||
v-model="editorOpen"
|
||||
:title="editorLabel"
|
||||
size="min(680px, 94vw)"
|
||||
class="business-drawer editor-drawer"
|
||||
class="editor-drawer admin-density admin-density-drawer"
|
||||
:confirm-loading="saving"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
|
||||
<FormSection title="单位信息"><div class="form-grid two-cols">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="density-form" :disabled="saving">
|
||||
<FormSection class="density-form-section" title="单位信息"><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>
|
||||
<el-form-item v-if="form.types.includes('CARRIER')" label="船司标准编码" prop="carrierCode" required><el-select v-model="form.carrierCode" placeholder="请选择船司标准编码" style="width:100%"><el-option v-for="option in carrierCodeOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
|
||||
</div></FormSection>
|
||||
<FormSection title="联系信息"><div class="form-grid two-cols">
|
||||
<FormSection class="density-form-section" title="联系信息"><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></FormSection>
|
||||
<FormSection title="地址信息"><div class="form-grid two-cols">
|
||||
<FormSection class="density-form-section" title="地址信息"><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></FormSection>
|
||||
<FormSection title="其他信息" :bordered="false"><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></FormSection>
|
||||
<FormSection class="density-form-section" title="其他信息" :bordered="false"><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></FormSection>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
@@ -455,22 +456,22 @@ onMounted(() => {
|
||||
</template>
|
||||
</AppDrawer>
|
||||
|
||||
<AppDrawer v-model="detailOpen" title="往来单位详情" size="min(680px, 94vw)" class="business-drawer detail-drawer" :loading="detailLoading" :show-footer="false">
|
||||
<AppDrawer v-model="detailOpen" title="往来单位详情" size="min(680px, 94vw)" class="detail-drawer admin-density admin-density-drawer" :loading="detailLoading" :show-footer="false">
|
||||
<div class="partner-detail">
|
||||
<DetailPageLayout v-if="detail" aria-label="往来单位详情">
|
||||
<FormSection title="单位信息"><dl class="detail-grid">
|
||||
<DetailPageLayout class="partner-detail-layout" v-if="detail" aria-label="往来单位详情">
|
||||
<FormSection class="density-form-section" title="单位信息"><dl class="detail-grid density-fields">
|
||||
<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>
|
||||
<div v-if="detail.types.includes('CARRIER')"><dt>船司标准编码</dt><dd>{{ formatCarrierCode(detail.carrierCode) }}</dd></div>
|
||||
</dl></FormSection>
|
||||
<FormSection title="联系与地址"><dl class="detail-grid">
|
||||
<FormSection class="density-form-section" title="联系与地址"><dl class="detail-grid density-fields">
|
||||
<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></FormSection>
|
||||
<FormSection title="其他信息" :bordered="false"><dl class="detail-grid">
|
||||
<FormSection class="density-form-section" title="其他信息" :bordered="false"><dl class="detail-grid density-fields">
|
||||
<div class="detail-span"><dt>更新时间</dt><dd>{{ formatUpdatedAt(detail.updatedAt) }}</dd></div>
|
||||
<div class="detail-span"><dt>备注</dt><dd>{{ detail.remark || '-' }}</dd></div>
|
||||
</dl></FormSection>
|
||||
@@ -478,7 +479,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</AppDrawer>
|
||||
|
||||
<BatchImportDialog
|
||||
<BatchImportDialog class="admin-density-dialog"
|
||||
v-model="importOpen"
|
||||
title="批量导入往来单位"
|
||||
entity-label="往来单位"
|
||||
@@ -491,20 +492,18 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.partner-detail-layout { gap: 0; }
|
||||
.partners-page { min-width: 0; }
|
||||
.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); }
|
||||
.partners-primary-actions, .partner-types { display: flex; flex-wrap: wrap; gap: var(--admin-space-3); }
|
||||
.partner-cell { display: flex; align-items: center; gap: var(--admin-space-4); }
|
||||
.partner-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: var(--admin-radius); background: #eef3fa; color: var(--cc-primary); }
|
||||
.partner-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.partner-cell :deep(.line-clamp-text) { width: 100%; }
|
||||
.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; padding: 20px 24px 28px; box-sizing: border-box; }
|
||||
.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; }
|
||||
.partner-detail { min-width: 0; }
|
||||
.partner-detail .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.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; }
|
||||
@media (max-width: 720px) {
|
||||
.partners-primary-actions :deep(.el-button) { width: 100%; min-height: 40px; }
|
||||
.partners-primary-actions { flex-direction: column; }
|
||||
|
||||
@@ -73,15 +73,13 @@ enableAutoUnmount(afterEach)
|
||||
afterAll(() => vi.unstubAllGlobals())
|
||||
|
||||
describe('ExpressCompaniesView query and table migration', () => {
|
||||
it('renders edit and status as colored outlined buttons with prototype icons', () => {
|
||||
expect(expressCompaniesSource).toContain('size="small"\n plain\n type="primary"')
|
||||
expect(expressCompaniesSource).toContain('size="small"\n plain\n :disabled="loading"\n :type=')
|
||||
expect(expressCompaniesSource).toContain('<Pencil :size="15" />编辑')
|
||||
expect(expressCompaniesSource).toContain('<Power :size="15" />')
|
||||
expect(expressCompaniesSource).not.toContain("access.can('platform:express:edit')\"\n link")
|
||||
expect(expressCompaniesSource).not.toContain("access.can('platform:express:status')\"\n link")
|
||||
it('renders edit and status as shared outlined text buttons', () => {
|
||||
const actions = expressCompaniesSource.slice(expressCompaniesSource.indexOf('<template #actions='), expressCompaniesSource.indexOf('</template>', expressCompaniesSource.indexOf('<template #actions=')))
|
||||
expect(actions.match(/class="density-action"/g)).toHaveLength(2)
|
||||
expect(actions).toContain('>编辑</el-button>')
|
||||
expect(actions).toContain(' :data-tone=')
|
||||
expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
|
||||
})
|
||||
|
||||
it('keeps operation first and exposes the prototype business columns separately', () => {
|
||||
const actionsIndex = expressCompaniesSource.indexOf("{ key: 'actions', label: '操作'")
|
||||
const nameIndex = expressCompaniesSource.indexOf("{ key: 'company', label: '公司名称'")
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import '@/styles/adminDensity.css'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { ExternalLink, FileUp, Pencil, Plus, Power, Save, Truck } from '@lucide/vue'
|
||||
import { ExternalLink, FileUp, Plus, Save, Truck } from '@lucide/vue'
|
||||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||||
import AdminPage from '@/shared/components/AdminPage.vue'
|
||||
import BatchImportDialog from '@/shared/components/BatchImportDialog.vue'
|
||||
@@ -250,7 +251,7 @@ async function toggleStatus(row: PlatformExpressCompanyResource) {
|
||||
await ElMessageBox.confirm(
|
||||
`确定${action}“${row.companyName}”吗？${nextStatus === 'INACTIVE' ? '停用后不会再作为可用快递公司。' : ''}`,
|
||||
`${action}快递公司`,
|
||||
{ type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
|
||||
{ customClass: 'admin-density-confirm', type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
@@ -280,7 +281,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminPage>
|
||||
<AdminPage class="admin-density">
|
||||
<div class="business-page express-company-page">
|
||||
<ListPageLayout ariaLabel="快递公司列表">
|
||||
<template #toolbar>
|
||||
@@ -311,25 +312,25 @@ onMounted(() => {
|
||||
>
|
||||
<template #toolbar-actions><div class="table-actions"><el-button v-if="access.can('platform:express:import')" :disabled="loading" @click="openImport"><FileUp :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></template>
|
||||
<template #actions="{ row }">
|
||||
<div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions">
|
||||
<el-button
|
||||
<div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions density-actions">
|
||||
<el-button data-tone="neutral" class="density-action"
|
||||
v-if="access.can('platform:express:edit')"
|
||||
size="small"
|
||||
plain
|
||||
type="primary"
|
||||
|
||||
|
||||
:disabled="loading"
|
||||
:loading="editLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
|
||||
@click="openEdit(row as PlatformExpressCompanyResource)"
|
||||
><Pencil :size="15" />编辑</el-button>
|
||||
<el-button
|
||||
>编辑</el-button>
|
||||
<el-button class="density-action"
|
||||
v-if="access.can('platform:express:status')"
|
||||
size="small"
|
||||
plain
|
||||
|
||||
:disabled="loading"
|
||||
:type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
|
||||
:data-tone="(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>
|
||||
>{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
|
||||
</div>
|
||||
<span v-else class="muted-value">仅查看</span>
|
||||
</template>
|
||||
@@ -349,7 +350,7 @@ onMounted(() => {
|
||||
</section>
|
||||
</ListPageLayout>
|
||||
|
||||
<BatchImportDialog
|
||||
<BatchImportDialog class="admin-density-dialog"
|
||||
v-model="importOpen"
|
||||
title="批量导入快递公司"
|
||||
entity-label="快递公司"
|
||||
@@ -361,18 +362,16 @@ onMounted(() => {
|
||||
@success="loadExpressCompanies"
|
||||
/>
|
||||
|
||||
<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">
|
||||
<FormSection title="基础信息">
|
||||
<h3>公司标识</h3>
|
||||
<el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="editor-drawer admin-density admin-density-drawer" :close-on-click-modal="false">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="density-form" :disabled="saving">
|
||||
<FormSection class="density-form-section" title="基础信息">
|
||||
<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>
|
||||
</FormSection>
|
||||
<FormSection title="服务配置">
|
||||
<h3>服务与查询</h3>
|
||||
<FormSection class="density-form-section" title="服务配置">
|
||||
<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>
|
||||
@@ -380,7 +379,7 @@ onMounted(() => {
|
||||
<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>
|
||||
</FormSection>
|
||||
<FormSection title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
|
||||
<FormSection class="density-form-section" title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
|
||||
</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"><Save :size="16" />保存快递公司</el-button></div></template>
|
||||
</el-drawer>
|
||||
@@ -389,19 +388,19 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.express-company-page { gap: 16px; }
|
||||
.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: 1px solid var(--cc-border); border-radius: 7px; background: #f8fafc; color: var(--cc-primary); }
|
||||
.express-company-page { gap: var(--admin-space-6); }
|
||||
.state-alert p { margin: var(--admin-space-2) 0 0; line-height: 1.55; }
|
||||
.state-alert .el-button { margin-top: var(--admin-space-4); }
|
||||
.express-company-cell { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4); }
|
||||
.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: #f8fafc; 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; }
|
||||
.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: 12px; text-decoration: none; }
|
||||
.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: var(--admin-font-caption); 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; }
|
||||
.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: var(--admin-font-caption); 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 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-3); }
|
||||
.panel-actions .el-button { margin-left: 0; }
|
||||
@media (max-width: 720px) {
|
||||
.panel-actions, .panel-actions .el-button { width: 100%; }
|
||||
|
||||
Reference in New Issue
Block a user