优化

src/modules/overseas-master-data/components/TripCostPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -148,22 +149,22 @@ onBeforeUnmount(() => { scopeGeneration++; generation++; historyGeneration++ })
         <div v-for="value in summary.totals" :key="value.currency" class="cost-summary">
           <strong>{{ value.currency }} · 已登记直接成本 {{ value.directCost.toFixed(2) }}</strong>
           <span>自有货分摊 {{ money(value.ownCost) }} · 外接货分摊 {{ money(value.externalCost) }}</span>
-          <DataTable v-if="value.allocations.length" :data="value.allocations" :columns="allocationColumns" row-key="businessNo">
+          <div class="workbench-table" v-if="value.allocations.length"><DataTable :data="value.allocations" :columns="allocationColumns" row-key="businessNo">
             <template #source="{ row }">{{ row.sourceType === 'EXTERNAL' ? '外接货' : '自有业务货物' }}</template>
             <template #amount="{ row }">{{ value.currency }} {{ row.amount.toFixed(2) }}</template>
-          </DataTable>
+          </DataTable></div>
         </div>
       </template>
-      <DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :total="total" :loading="loading" row-key="costNo" empty-text="暂无直接成本记录">
+      <div class="workbench-table"><DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :total="total" :loading="loading" row-key="costNo" empty-text="暂无直接成本记录">
         <template #toolbar-actions><el-button :disabled="loading || saving" @click="load">刷新</el-button><el-button v-if="access.can(permission.tripCostCreate)" type="primary" :disabled="opening || saving" @click="beginEdit(null)">登记成本</el-button><InlineHelp title="直接成本说明"><p>按实际费用登记，各币种分别汇总。运营分摊用于单趟分析，不代表已付款，也不生成客户账单。</p></InlineHelp></template>
         <template #actions="{ row }"><RowActions :actions="actions()" @action="$event === 'edit' ? beginEdit(row as TripCost) : showHistory(row as TripCost)" /></template>
         <template #category="{ row }">{{ categories[row.details.category as CostCategory] }}</template>
         <template #amount="{ row }">{{ row.details.currency }} {{ row.details.amount.toFixed(2) }}</template>
         <template #time="{ row }">{{ time(row.details.incurredAt) }}</template>
         <template #remark="{ row }">{{ row.details.remark || '—' }}</template>
-      </DataTable>
+      </DataTable></div>
     </template>
-    <AppDialog v-model="editorOpen" :title="editing ? '更正车次直接成本' : '登记车次直接成本'" width="680px" class="admin-density-dialog" confirm-text="保存成本" :confirm-loading="saving" :confirm-disabled="!writable" @confirm="save">
+    <AppDialog v-model="editorOpen" :title="editing ? '更正车次直接成本' : '登记车次直接成本'" width="680px" class="admin-density-dialog admin-workbench is-dialog" confirm-text="保存成本" :confirm-loading="saving" :confirm-disabled="!writable" @confirm="save">
       <LoadErrorState v-if="saveError" title="成本保存未完成" :message="saveError.message" @retry="save"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
       <p v-if="pendingCreate" class="cost-note">正在核对上次登记结果，重试会使用同一请求，不重复记账。</p>
       <el-form label-position="top" :disabled="saving || !writable || !!pendingCreate" class="cost-form">
@@ -175,16 +176,16 @@ onBeforeUnmount(() => { scopeGeneration++; generation++; historyGeneration++ })
         <el-form-item v-if="editing" label="更正说明（选填）" class="cost-wide"><el-input v-model="reason" maxlength="1000" placeholder="补充本次更正原因" /></el-form-item>
       </el-form>
     </AppDialog>
-    <AppDialog v-model="historyOpen" :title="`${historyNo} · 成本历史`" width="1080px" class="admin-density-dialog" :show-confirm="false" cancel-text="关闭">
+    <AppDialog v-model="historyOpen" :title="`${historyNo} · 成本历史`" width="1080px" class="admin-density-dialog admin-workbench is-dialog" :show-confirm="false" cancel-text="关闭">
       <LoadErrorState v-if="historyError" title="成本历史加载失败" :message="historyError.message" @retry="loadHistory"><template #details><ApiErrorMeta :details="historyError" /></template></LoadErrorState>
-      <DataTable v-model:page="historyPage" :page-size="10" :data="histories" :columns="historyColumns" :total="historyTotal" :loading="historyLoading" row-key="recordVersion">
+      <div class="workbench-table"><DataTable v-model:page="historyPage" :page-size="10" :data="histories" :columns="historyColumns" :total="historyTotal" :loading="historyLoading" row-key="recordVersion">
         <template #time="{ row }">{{ time(row.occurredAt) }}</template>
         <template #action="{ row }">{{ row.action === 'CREATE' ? '登记' : '更正' }}</template>
         <template #amount="{ row }">{{ row.snapshot.cost.details.currency }} {{ row.snapshot.cost.details.amount.toFixed(2) }}</template>
-      </DataTable>
+      </DataTable></div>
     </AppDialog>
   </section>
 </template>
 <style scoped>
-.cost-note{color:var(--cc-muted);margin:0 0 16px}.cost-summary{display:grid;gap:12px;margin:0 0 20px}.cost-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.cost-wide{grid-column:1/-1}.cost-form :deep(.el-select),.cost-form :deep(.el-input-number),.cost-form :deep(.el-date-editor){width:100%}
+.cost-note{color:var(--workbench-muted);margin:0 0 16px}.cost-summary{display:grid;gap:12px;margin:0 0 20px}.cost-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.cost-wide{grid-column:1/-1}.cost-form :deep(.el-select),.cost-form :deep(.el-input-number),.cost-form :deep(.el-date-editor){width:100%}
 </style>