优化

2026-09-30 14:01:58 +08:00
parent f14e1a2ea3
commit 8c51e9c1cf
109 changed files with 1525 additions and 651 deletions
@@ -139,12 +139,12 @@ describe('PartnersView real API integration', () => {
    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)
+    expect(wrapper.find('.el-table').exists()).toBe(true)
    expect(wrapper.find('.query-toolbar__actions').text()).not.toContain('新增往来单位')
    expect(wrapper.find('.data-table__business-actions').text()).toContain('新增往来单位')
-    expect(wrapper.find('.data-table__toolbar-start').exists()).toBe(false)
+    expect(wrapper.get('.data-table__toolbar-start h1').text()).toBe('往来单位')
    expect(wrapper.find('.data-table__pagination-left').text()).toContain('平台公共数据 · 共 1 个往来单位')
-    expect(wrapper.find('.list-page-layout__state').exists()).toBe(false)
+    expect(wrapper.find('.data-table__notices').exists()).toBe(false)
    const detailButton = wrapper.findAll('button').find((button) => button.text().trim() === '详情')
    await detailButton?.trigger('click')
    await flushPromises()
@@ -248,8 +248,8 @@ describe('PartnersView real API integration', () => {
    expect(wrapper.text()).not.toContain('Gateway unavailable')
    expect(wrapper.text()).toContain('重新加载')
    expect(wrapper.text()).not.toContain('深圳示例贸易有限公司')
-    expect(wrapper.find('.list-page-layout__state').exists()).toBe(true)
-    expect(wrapper.find('.table-panel').exists()).toBe(false)
+    expect(wrapper.find('.data-table__notices').exists()).toBe(true)
+    expect(wrapper.find('.el-table').exists()).toBe(false)
  })

  it('keeps the latest detail when an older partner request finishes last', async () => {
@@ -373,23 +373,11 @@ onMounted(() => {
 <template>
  <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" />
-      </template>

-      <template v-if="loadError" #state>
-        <LoadErrorState
-          title="往来单位列表暂时无法加载"
-          :message="loadError.message"
-          :loading="loading"
-          @retry="loadPartners()"
-        >
-          <template #details><ApiErrorMeta :details="loadError" /></template>
-        </LoadErrorState>
-      </template>

-      <section v-if="!loadError" class="surface-panel table-panel" :aria-busy="loading">
-      <DataTable
+
+
+      <section :aria-busy="loading"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
        v-model:page="page"
        v-model:page-size="pageSize"
        :data="rows"
@@ -402,21 +390,34 @@ onMounted(() => {
        row-key="id"
        empty-text="暂无符合条件的往来单位"
      >
+        <template #toolbar-start><h1>往来单位</h1></template>
+        <template #filters>
+        <QueryToolbar v-model="filters" ariaLabel="往来单位筛选" :fields="queryFields" preference-key="partners-query" @search="searchPartners" />
+      </template>
+        <template #notices><template v-if="loadError">
+        <LoadErrorState
+          title="往来单位列表暂时无法加载"
+          :message="loadError.message"
+          :loading="loading"
+          @retry="loadPartners()"
+        >
+          <template #details><ApiErrorMeta :details="loadError" /></template>
+        </LoadErrorState>
+      </template></template>
+
+
        <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 density-actions">
+        <template #actions="{ row }"><div class="table-actions density-actions row-actions admin-text-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>
+          </div></template>
        <template #partner="{ row }"><div class="partner-cell"><span><Building2 :size="18" /></span><div><LineClampText :content="(row as PlatformPartnerResource).partnerName" /></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 #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>平台公共数据 · 共 {{ total }} 个往来单位</template>
-      </DataTable>
-      </section>
+      </DataTable></section>
    </ListPageLayout>

    <AppDrawer
@@ -111,7 +111,7 @@ describe('ExpressCompaniesView query and table migration', () => {
    expect(wrapper.text()).toContain('顺丰速运')
    expect(wrapper.text()).toContain('平台公共数据 · 共 1 家快递公司')
    expect(wrapper.find('.metric-strip').exists()).toBe(false)
-    expect(wrapper.find('.list-page-layout__state').exists()).toBe(false)
+    expect(wrapper.find('.data-table__notices').exists()).toBe(false)
    expect(listPlatformExpressCompanies).toHaveBeenCalledWith(1, 20, '', '')
    expect(wrapper.find('.data-table').text()).not.toContain('轨迹查询模板')
    expect(wrapper.find('.data-table').text()).not.toContain('测试数据')
@@ -121,8 +121,8 @@ describe('ExpressCompaniesView query and table migration', () => {
    vi.mocked(listPlatformExpressCompanies).mockRejectedValueOnce(new Error('Gateway unavailable'))
    const wrapper = await mountView()

-    expect(wrapper.find('.list-page-layout__state').exists()).toBe(true)
-    expect(wrapper.find('.table-panel').exists()).toBe(false)
+    expect(wrapper.find('.data-table__notices').exists()).toBe(true)
+    expect(wrapper.find('.el-table').exists()).toBe(false)
    expect(wrapper.text()).toContain('快递公司加载失败')
    expect(wrapper.text()).not.toContain('Gateway unavailable')
  })
@@ -284,20 +284,10 @@ onMounted(() => {
  <AdminPage class="admin-density">
    <div class="business-page express-company-page">
      <ListPageLayout ariaLabel="快递公司列表">
-        <template #toolbar>
-          <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="快递公司筛选" :fields="queryFields" preference-key="express-companies-query" @search="applyFilters" />
-        </template>
-        <template v-if="loadError" #state>
-    <el-alert 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>
-        </template>

-    <section v-if="!loadError" class="surface-panel table-panel">
-      <DataTable
+
+
+    <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
        v-model:page="page"
        v-model:page-size="pageSize"
        :data="rows"
@@ -310,8 +300,22 @@ onMounted(() => {
        row-key="id"
        :empty-text="appliedFilters.keyword.trim() || appliedFilters.status ? '暂无符合筛选条件的快递公司' : '暂无快递公司档案'"
      >
+        <template #toolbar-start><h1>快递公司</h1></template>
+        <template #filters>
+          <QueryToolbar v-model="filters" ariaLabel="快递公司筛选" :fields="queryFields" preference-key="express-companies-query" @search="applyFilters" />
+        </template>
+        <template #notices><template v-if="loadError">
+    <el-alert 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>
+        </template></template>
+
+
        <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 }">
+        <template #actions="{ row }"><div class="row-actions density-actions admin-text-actions">
          <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')"
@@ -333,7 +337,7 @@ onMounted(() => {
            >{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
          </div>
          <span v-else class="muted-value">仅查看</span>
-        </template>
+        </div></template>
        <template #company="{ row }"><div class="express-company-cell"><span><Truck :size="17" /></span><div><strong>{{ (row as PlatformExpressCompanyResource).companyName }}</strong></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>
@@ -346,8 +350,7 @@ onMounted(() => {
          </el-empty>
        </template>
        <template #pagination-left="{ total: tableTotal }"><span>平台公共数据 · 共 {{ tableTotal }} 家快递公司</span></template>
-      </DataTable>
-    </section>
+      </DataTable></section>
      </ListPageLayout>

    <BatchImportDialog class="admin-density-dialog"
@@ -5,12 +5,12 @@ 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' },
+    meta: { showPageHeading: false, 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' },
+    meta: { showPageHeading: false, title: '往来单位', description: '维护客户、供应商及客户/供应商双重类型单位档案', permission: 'platform:counterparty:list' },
  },
 ] satisfies RouteRecordRaw[]