From a602334039f1f7aab91bfa1edcfad7d96813ff00 Mon Sep 17 00:00:00 2001
From: xiaojibeier <xiaojibeier@xiaojibeierdeMac-mini.local>
Date: Mon, 6 Jul 2026 17:05:09 +0800
Subject: [PATCH] 20260706002

---
 .../global-tab/GlobalTabCostPanel.vue         | 913 ++++++------------
 .../global-tab/GlobalTabWarehousePanel.vue    | 368 ++++---
 src/styles/warehouseOpsFlexTable.css          |   7 +
 src/views/material/MaterialList.vue           |  47 +-
 4 files changed, 532 insertions(+), 803 deletions(-)

diff --git a/src/components/global-tab/GlobalTabCostPanel.vue b/src/components/global-tab/GlobalTabCostPanel.vue
index f0fb6b9..6d95603 100644
--- a/src/components/global-tab/GlobalTabCostPanel.vue
+++ b/src/components/global-tab/GlobalTabCostPanel.vue
@@ -6,284 +6,175 @@
     <template v-else-if="loadError">
       <el-alert type="error" :title="loadError" show-icon :closable="false" />
     </template>
-    <template v-else-if="!loading && !suppliers.length">
-      <el-empty :image-size="56" description="暂无成本围栏数据" class="gt-cost-empty" />
-    </template>
-    <template v-else-if="suppliers.length">
-      <div class="gt-cost-toolbar">
-        <div class="gt-cost-view-toggle" role="tablist" aria-label="成本围栏视图">
-          <button
-            type="button"
-            role="tab"
-            class="gt-cost-view-btn"
-            :class="{ 'is-active': viewMode === 'org' }"
-            :aria-selected="viewMode === 'org'"
-            @click="viewMode = 'org'"
-          >按组织</button>
-          <button
-            type="button"
-            role="tab"
-            class="gt-cost-view-btn"
-            :class="{ 'is-active': viewMode === 'list' }"
-            :aria-selected="viewMode === 'list'"
-            @click="viewMode = 'list'"
-          >按列表</button>
-        </div>
-      </div>
-
-      <div v-if="viewMode === 'org'" class="gt-cost-split">
-      <nav class="gt-cost-nav" aria-label="供应商">
-        <button
-          v-for="sup in suppliers"
-          :key="sup.key"
-          type="button"
-          class="gt-cost-nav-item"
-          :class="{ 'is-active': activeSupplierKey === sup.key }"
-          @click="selectSupplier(sup.key)"
-        >
-          <span class="gt-cost-nav-name">{{ sup.company_name || sup.company_code || '—' }}</span>
-          <span v-if="sup.org_type" class="gt-cost-org-tag" :class="orgTypeTagClass(sup.org_type)">
-            {{ sup.org_type }}
-          </span>
-          <span v-if="sup.supply_collections?.length > 1" class="gt-cost-nav-sub">
-            {{ sup.supply_collections.length }} 个统筹集合
-          </span>
-        </button>
-      </nav>
-
-      <div v-if="activeSupplier" class="gt-cost-main">
-        <template v-if="activeCollection">
-          <div v-if="activeSupplierHasMultiCollection" class="gt-cost-col-tabs-wrap">
-            <span class="gt-cost-section-label">供货目录</span>
-            <el-tabs
-              v-model="activeCollectionKey"
-              class="gt-cost-col-tabs"
+    <template v-else>
+      <div class="gt-cost-layout">
+        <aside class="gt-cost-rdc-nav" aria-label="售出 RDC 列表">
+          <div class="gt-cost-rdc-hd">售出 RDC 列表</div>
+          <template v-if="rdcList.length">
+            <button
+              v-for="rdc in rdcList"
+              :key="rdc.warehouse_code"
+              type="button"
+              class="gt-cost-rdc-item"
+              :class="{ 'is-active': activeRdcCode === rdc.warehouse_code }"
+              @click="activeRdcCode = rdc.warehouse_code"
             >
-              <el-tab-pane
-                v-for="col in activeSupplier.supply_collections"
-                :key="col.key"
-                :name="col.key"
-                :label="col.supply_collection_name || col.supply_collection_code || '—'"
-              />
-            </el-tabs>
+              <span class="gt-cost-rdc-name">{{ rdc.name || rdc.warehouse_code }}</span>
+              <span v-if="rdc.warehouse_code" class="gt-cost-rdc-code">{{ rdc.warehouse_code }}</span>
+            </button>
+          </template>
+          <p v-else class="gt-cost-rdc-empty">RDC 列表接口待接入</p>
+        </aside>
+
+        <div class="gt-cost-main">
+          <div class="gt-cost-org-tabs" role="tablist" aria-label="组织类型">
+            <button
+              v-for="tab in ORG_TYPE_TABS"
+              :key="tab.key"
+              type="button"
+              role="tab"
+              class="gt-cost-org-tab"
+              :class="[
+                { 'is-active': activeOrgType === tab.key },
+                orgTypeTabClass(tab.key),
+              ]"
+              :aria-selected="activeOrgType === tab.key"
+              @click="activeOrgType = tab.key"
+            >
+              {{ tab.label }}
+            </button>
           </div>
 
-          <div class="gt-cost-detail">
-            <div
-              v-if="!activeSupplierHasMultiCollection || activeCollection.receive_company_name"
-              class="gt-cost-detail-hd"
-              :class="{ 'is-receive-only': activeSupplierHasMultiCollection }"
-            >
-              <div v-if="!activeSupplierHasMultiCollection" class="gt-cost-collection">
-                <span class="gt-cost-collection-label">供货目录</span>
-                <strong class="gt-cost-collection-name">{{ activeCollection.supply_collection_name || '—' }}</strong>
-                <span v-if="activeCollection.supply_collection_code" class="gt-cost-detail-code">
-                  {{ activeCollection.supply_collection_code }}
-                </span>
-              </div>
-              <div v-if="activeCollection.receive_company_name" class="gt-cost-receive">
-                <span class="gt-cost-receive-label">我方采购组织</span>
-                <strong>{{ activeCollection.receive_company_name }}</strong>
-                <span
-                  v-if="activeCollection.receive_org_type"
-                  class="gt-cost-org-tag"
-                  :class="orgTypeTagClass(activeCollection.receive_org_type)"
+          <div class="gt-cost-table-wrap">
+            <div class="wops-flex-table is-cols-cost-fence">
+              <div class="wops-flex-scroll">
+                <div class="wops-flex-row wops-flex-head">
+                  <div
+                    v-for="col in FENCE_COLUMNS"
+                    :key="col.key"
+                    class="wops-col gt-cost-head-col"
+                    :class="[colHeadClass(col.key), colHeadColorClass(col.key)]"
+                    :title="col.label"
+                  >
+                    {{ col.label }}
+                  </div>
+                </div>
+
+                <div v-if="!fenceRows.length" class="wops-empty-wrap">
+                  <p class="wops-empty">暂无围栏数据</p>
+                </div>
+
+                <div
+                  v-for="(row, idx) in fenceRows"
+                  :key="row.key || idx"
+                  class="wops-flex-row wops-flex-data"
+                  :class="{ 'is-stripe': idx % 2 === 1 }"
                 >
-                  {{ activeCollection.receive_org_type }}
-                </span>
+                  <div class="wops-col wops-col--wh">
+                    <span class="wops-name wops-ellipsis">{{ row.supplier_bloc_name || '—' }}</span>
+                  </div>
+                  <div class="wops-col wops-col--wh">
+                    <span class="wops-name wops-ellipsis">{{ row.supplier_company_name || '—' }}</span>
+                  </div>
+                  <div class="wops-col wops-col--goods">
+                    <span class="wops-name wops-ellipsis">{{ row.goods_name || '—' }}</span>
+                  </div>
+                  <div class="wops-col wops-col--plain">
+                    <span class="wops-ellipsis">{{ row.bill_type || '—' }}</span>
+                  </div>
+                  <div class="wops-col wops-col--num">{{ fmtTaxRate(row.input_tax_rate) }}</div>
+                  <div class="wops-col wops-col--wh">
+                    <span class="wops-name wops-ellipsis">{{ row.source_company_name || '—' }}</span>
+                  </div>
+                  <div class="wops-col wops-col--num">{{ fmtMoney(row.internal_min_price) }}</div>
+                  <div class="wops-col wops-col--plain">
+                    <span class="wops-ellipsis">{{ row.internal_bill_type || '—' }}</span>
+                  </div>
+                  <div class="wops-col wops-col--num">{{ fmtTaxRate(row.internal_input_tax_rate) }}</div>
+                  <div class="wops-col wops-col--wh">
+                    <span class="wops-name wops-ellipsis">{{ row.source_rdc_name || row.source_rdc || '—' }}</span>
+                  </div>
+                  <div class="wops-col wops-col--num">{{ fmtMoney(row.fence_value) }}</div>
+                </div>
               </div>
             </div>
-
-            <div class="gt-cost-metrics">
-              <div
-                v-for="m in priceMetrics"
-                :key="m.label"
-                class="gt-cost-metric"
-                :class="m.tone"
-              >
-                <span class="gt-cost-metric-label">{{ m.label }}</span>
-                <span class="gt-cost-metric-val">{{ fmtMoney(m.value) }}</span>
-              </div>
-            </div>
-
-            <table v-if="activeCollection.warehouses?.length" class="gt-cost-wh-table">
-              <thead>
-                <tr>
-                  <th>仓库</th>
-                  <th class="gt-cost-num">预估运费</th>
-                  <th class="gt-cost-num">报价</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="wh in activeCollection.warehouses" :key="wh.key">
-                  <td>
-                    <span class="gt-cost-wh-name">{{ wh.warehouse_name || wh.warehouse_code || '—' }}</span>
-                    <span v-if="wh.warehouse_code" class="gt-cost-wh-code">{{ wh.warehouse_code }}</span>
-                  </td>
-                  <td class="gt-cost-num">{{ fmtMoney(wh.freight) }}</td>
-                  <td class="gt-cost-num">{{ fmtMoney(wh.price) }}</td>
-                </tr>
-              </tbody>
-            </table>
-            <el-empty v-else :image-size="48" description="暂无仓库数据" class="gt-cost-wh-empty" />
           </div>
-        </template>
-        <el-empty v-else :image-size="48" description="该供应商暂无统筹集合" />
-      </div>
-      </div>
-
-      <div v-else class="gt-cost-list-wrap">
-        <table v-if="listRows.length" class="gt-cost-list-table">
-          <thead>
-            <tr>
-              <th>组织</th>
-              <th>供货目录</th>
-              <th>仓库</th>
-              <th class="gt-cost-num">网价</th>
-              <th class="gt-cost-num">付款单价</th>
-              <th class="gt-cost-num">预估成本</th>
-              <th class="gt-cost-num">返利后预估成本</th>
-              <th class="gt-cost-num">预估运费</th>
-              <th class="gt-cost-num">报价</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="row in listRows" :key="row.key">
-              <td>
-                <span class="gt-cost-list-org">{{ row.orgName }}</span>
-                <span v-if="row.orgType" class="gt-cost-org-tag" :class="orgTypeTagClass(row.orgType)">
-                  {{ row.orgType }}
-                </span>
-              </td>
-              <td class="gt-cost-list-col-name" :title="row.collectionName">{{ row.collectionName || '—' }}</td>
-              <td>
-                <span class="gt-cost-wh-name">{{ row.warehouseName }}</span>
-                <span v-if="row.warehouseCode" class="gt-cost-wh-code">{{ row.warehouseCode }}</span>
-              </td>
-              <td class="gt-cost-num gt-cost-list-net">{{ fmtMoney(row.net_price) }}</td>
-              <td class="gt-cost-num gt-cost-list-pay">{{ fmtMoney(row.payment_unit_price) }}</td>
-              <td class="gt-cost-num gt-cost-list-cost">{{ fmtMoney(row.estimated_cost) }}</td>
-              <td class="gt-cost-num gt-cost-list-rebate">{{ fmtMoney(row.rebate_estimated_cost) }}</td>
-              <td class="gt-cost-num">{{ fmtMoney(row.freight) }}</td>
-              <td class="gt-cost-num">{{ fmtMoney(row.price) }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <el-empty v-else :image-size="48" description="暂无列表数据" class="gt-cost-empty" />
+        </div>
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
-import { fetchGoodsCost } from '@/api/material'
-import { normalizeOrgTypeKind } from '@/utils/supplyBillDerive'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   goodsCode: { type: String, default: '' },
 })
 
+const ORG_TYPE_TABS = [
+  { key: 'general', label: '一般纳税人' },
+  { key: 'small', label: '小规模纳税人' },
+  { key: 'personal', label: '收据组织' },
+]
+
+const FENCE_COLUMNS = [
+  { key: 'supplier_bloc_name', label: '供应商集团名称' },
+  { key: 'supplier_company_name', label: '供应商组织名称' },
+  { key: 'goods_name', label: '商品名称' },
+  { key: 'bill_type', label: '票据类型' },
+  { key: 'input_tax_rate', label: '进项税率' },
+  { key: 'source_company_name', label: '源采购组织名称' },
+  { key: 'internal_min_price', label: '内部交易最低价' },
+  { key: 'internal_bill_type', label: '内部交易票据类型' },
+  { key: 'internal_input_tax_rate', label: '内部交易进项税率' },
+  { key: 'source_rdc', label: '源采购RDC' },
+  { key: 'fence_value', label: '围栏值' },
+]
+
+const NUM_KEYS = new Set(['input_tax_rate', 'internal_min_price', 'internal_input_tax_rate', 'fence_value'])
+
+function colHeadClass(key) {
+  if (NUM_KEYS.has(key)) return 'wops-col--num'
+  if (key === 'goods_name') return 'wops-col--goods'
+  if (key === 'supplier_bloc_name' || key === 'supplier_company_name' || key === 'source_company_name' || key === 'source_rdc') {
+    return 'wops-col--wh'
+  }
+  return 'wops-col--plain'
+}
+
+function colHeadColorClass(key) {
+  const map = {
+    supplier_bloc_name: 'gt-cost-head-col--bloc',
+    supplier_company_name: 'gt-cost-head-col--company',
+    goods_name: 'gt-cost-head-col--goods',
+    bill_type: 'gt-cost-head-col--bill',
+    input_tax_rate: 'gt-cost-head-col--tax',
+    source_company_name: 'gt-cost-head-col--source-co',
+    internal_min_price: 'gt-cost-head-col--min-price',
+    internal_bill_type: 'gt-cost-head-col--int-bill',
+    internal_input_tax_rate: 'gt-cost-head-col--int-tax',
+    source_rdc: 'gt-cost-head-col--rdc',
+    fence_value: 'gt-cost-head-col--fence',
+  }
+  return map[key] || 'gt-cost-head-col--plain'
+}
+
+function orgTypeTabClass(key) {
+  if (key === 'general') return 'is-general'
+  if (key === 'small') return 'is-small'
+  if (key === 'personal') return 'is-personal'
+  return ''
+}
+
 const loading = ref(false)
 const loadError = ref('')
-/** @type {import('vue').Ref<Array<{ key: string, company_code: string, company_name: string, org_type: string, supply_collections: object[] }>>} */
-const suppliers = ref([])
-const activeSupplierKey = ref('')
-const activeCollectionKey = ref('')
-const viewMode = ref('org')
-
-const listRows = computed(() => {
-  const rows = []
-  for (const sup of suppliers.value) {
-    const orgName = sup.company_name || sup.company_code || '—'
-    const cols = sup.supply_collections || []
-    if (!cols.length) {
-      rows.push({
-        key: `${sup.key}::empty`,
-        orgName,
-        orgType: sup.org_type || '',
-        warehouseName: '—',
-        warehouseCode: '',
-        collectionName: '',
-        net_price: null,
-        payment_unit_price: null,
-        estimated_cost: null,
-        rebate_estimated_cost: null,
-        freight: null,
-        price: null,
-      })
-      continue
-    }
-    for (const col of cols) {
-      const collectionName = col.supply_collection_name || col.supply_collection_code || '—'
-      const whs = col.warehouses || []
-      const base = {
-        orgName,
-        orgType: sup.org_type || '',
-        collectionName,
-        net_price: col.net_price,
-        payment_unit_price: col.payment_unit_price,
-        estimated_cost: col.estimated_cost,
-        rebate_estimated_cost: col.rebate_estimated_cost,
-      }
-      if (!whs.length) {
-        rows.push({
-          key: `${sup.key}::${col.key}::no-wh`,
-          ...base,
-          warehouseName: '—',
-          warehouseCode: '',
-          freight: null,
-          price: null,
-        })
-        continue
-      }
-      for (const wh of whs) {
-        rows.push({
-          key: `${sup.key}::${col.key}::${wh.key}`,
-          ...base,
-          warehouseName: wh.warehouse_name || wh.warehouse_code || '—',
-          warehouseCode: wh.warehouse_code || '',
-          freight: wh.freight,
-          price: wh.price,
-        })
-      }
-    }
-  }
-  return rows
-})
-
-const activeSupplier = computed(() =>
-  suppliers.value.find((s) => s.key === activeSupplierKey.value) || null,
-)
-
-const activeCollection = computed(() => {
-  const list = activeSupplier.value?.supply_collections || []
-  if (!list.length) return null
-  return list.find((c) => c.key === activeCollectionKey.value) || list[0] || null
-})
-
-const activeSupplierHasMultiCollection = computed(() =>
-  (activeSupplier.value?.supply_collections || []).length > 1,
-)
-
-const priceMetrics = computed(() => {
-  const c = activeCollection.value
-  if (!c) return []
-  return [
-    { label: '网价', value: c.net_price, tone: 'is-net' },
-    { label: '付款单价', value: c.payment_unit_price, tone: 'is-pay' },
-    { label: '预估成本', value: c.estimated_cost, tone: 'is-cost' },
-    { label: '返利后预估成本', value: c.rebate_estimated_cost, tone: 'is-rebate' },
-  ]
-})
-
-function orgTypeTagClass(label) {
-  const kind = normalizeOrgTypeKind(label)
-  if (kind === 'general') return 'is-general'
-  if (kind === 'small') return 'is-small'
-  if (kind === 'personal') return 'is-personal'
-  return 'is-default'
-}
+const activeOrgType = ref('general')
+const activeRdcCode = ref('')
+/** @type {import('vue').Ref<Array<{ warehouse_code: string, name: string }>>} */
+const rdcList = ref([])
+/** @type {import('vue').Ref<object[]>} */
+const fenceRows = ref([])
 
 function fmtMoney(v) {
   if (v == null || v === '') return '—'
@@ -292,45 +183,25 @@ function fmtMoney(v) {
   return n.toFixed(2)
 }
 
-function syncSelectionAfterLoad() {
-  const firstSup = suppliers.value[0]
-  if (!firstSup) {
-    activeSupplierKey.value = ''
-    activeCollectionKey.value = ''
-    return
-  }
-  const supKey = suppliers.value.some((s) => s.key === activeSupplierKey.value)
-    ? activeSupplierKey.value
-    : firstSup.key
-  activeSupplierKey.value = supKey
-  const sup = suppliers.value.find((s) => s.key === supKey)
-  const cols = sup?.supply_collections || []
-  const colKey = cols.some((c) => c.key === activeCollectionKey.value)
-    ? activeCollectionKey.value
-    : (cols[0]?.key || '')
-  activeCollectionKey.value = colKey
-}
-
-function selectSupplier(key) {
-  activeSupplierKey.value = key
-  const sup = suppliers.value.find((s) => s.key === key)
-  activeCollectionKey.value = sup?.supply_collections?.[0]?.key || ''
+function fmtTaxRate(v) {
+  if (v == null || v === '') return '—'
+  const n = Number(v)
+  if (!Number.isFinite(n)) return String(v)
+  return `${n}%`
 }
 
 async function loadCost() {
   const code = String(props.goodsCode || '').trim()
   loadError.value = ''
-  suppliers.value = []
-  activeSupplierKey.value = ''
-  activeCollectionKey.value = ''
-  viewMode.value = 'org'
+  rdcList.value = []
+  fenceRows.value = []
+  activeRdcCode.value = ''
+  activeOrgType.value = 'general'
   if (!code) return
 
   loading.value = true
   try {
-    const data = await fetchGoodsCost(code)
-    suppliers.value = Array.isArray(data?.suppliers) ? data.suppliers : []
-    syncSelectionAfterLoad()
+    // RDC 列表与围栏表格数据接口待接入；先保留布局与组织类型切换
   } catch (e) {
     loadError.value = String(e?.data?.message || e?.message || '加载失败').trim() || '加载失败'
   } finally {
@@ -343,396 +214,222 @@ watch(
   () => { loadCost() },
   { immediate: true },
 )
+
+watch(activeOrgType, () => {
+  // 组织类型切换后重新拉取列表（接口接入后实现）
+  fenceRows.value = []
+})
 </script>
 
 <style scoped>
 .gt-cost-panel {
-  margin-bottom: 14px;
-  min-height: 120px;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
 }
 .gt-cost-empty {
   padding: 8px 0 16px;
 }
-.gt-cost-toolbar {
+.gt-cost-layout {
+  flex: 1;
+  min-height: 0;
   display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.gt-cost-view-toggle {
-  display: inline-flex;
-  padding: 2px;
-  border: 1px solid #dcdfe6;
+  align-items: stretch;
+  border: 1px solid #e8edf5;
   border-radius: 6px;
+  overflow: hidden;
+  background: #fff;
+}
+.gt-cost-rdc-nav {
+  flex: 0 0 168px;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e8edf5;
   background: #f5f7fa;
+  min-height: 0;
 }
-.gt-cost-view-btn {
-  padding: 5px 14px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font-size: 13px;
-  color: #606266;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
-}
-.gt-cost-view-btn:hover {
-  color: #409eff;
-}
-.gt-cost-view-btn.is-active {
-  background: #fff;
-  color: #409eff;
-  font-weight: 600;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-.gt-cost-list-wrap {
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  overflow: auto;
-  max-height: 360px;
-  background: #fff;
-}
-.gt-cost-list-table {
-  width: 100%;
-  min-width: 860px;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-.gt-cost-list-table thead th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding: 8px 10px;
-  text-align: left;
+.gt-cost-rdc-hd {
+  flex-shrink: 0;
+  padding: 10px 12px;
   font-size: 12px;
   font-weight: 600;
   color: #606266;
+  border-bottom: 1px solid #e8edf5;
   background: #eef3fb;
-  border-bottom: 1px solid #dce6f5;
-  white-space: nowrap;
 }
-.gt-cost-list-table tbody td {
-  padding: 9px 10px;
-  border-bottom: 1px solid #f0f2f5;
-  color: #606266;
-  vertical-align: middle;
-  background: #fff;
-}
-.gt-cost-list-table tbody tr:nth-child(even) td {
-  background: #fafcff;
-}
-.gt-cost-list-table tbody tr:hover td {
-  background: #f0f7ff;
-}
-.gt-cost-list-table tbody tr:last-child td {
-  border-bottom: none;
-}
-.gt-cost-list-org {
-  margin-right: 6px;
-  color: #303133;
-  font-weight: 500;
-}
-.gt-cost-list-col-name {
-  color: #606266;
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.gt-cost-list-net { color: #409eff; font-weight: 600; }
-.gt-cost-list-pay { color: #67c23a; font-weight: 600; }
-.gt-cost-list-cost { color: #e6a23c; font-weight: 600; }
-.gt-cost-list-rebate { color: #9b59b6; font-weight: 600; }
-.gt-cost-split {
+.gt-cost-rdc-item {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  overflow: hidden;
-  background: #fff;
-}
-.gt-cost-nav {
-  flex: 0 0 148px;
-  border-right: 1px solid #ebeef5;
-  background: #f5f7fa;
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-height: 320px;
-  padding: 6px 0;
-}
-.gt-cost-nav-item {
-  display: block;
+  gap: 2px;
   width: 100%;
   box-sizing: border-box;
-  text-align: left;
   padding: 9px 10px 9px 12px;
   border: none;
-  background: transparent;
-  cursor: pointer;
   border-left: 3px solid transparent;
-  transition: background 0.15s, color 0.15s;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s;
 }
-.gt-cost-nav-item:hover {
+.gt-cost-rdc-item:hover {
   background: rgba(255, 255, 255, 0.65);
 }
-.gt-cost-nav-item.is-active {
+.gt-cost-rdc-item.is-active {
   background: #fff;
   border-left-color: #409eff;
 }
-.gt-cost-nav-name {
-  display: block;
+.gt-cost-rdc-name {
   font-size: 13px;
+  color: #303133;
   line-height: 1.35;
-  color: #606266;
   word-break: break-all;
 }
-.gt-cost-nav-item.is-active .gt-cost-nav-name {
+.gt-cost-rdc-item.is-active .gt-cost-rdc-name {
   color: #409eff;
   font-weight: 600;
 }
-.gt-cost-org-tag {
-  display: inline-block;
-  margin-top: 4px;
-  padding: 0 7px;
-  font-size: 11px;
-  line-height: 18px;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  font-weight: 500;
-}
-.gt-cost-org-tag.is-general {
-  background: #ecf5ff;
-  color: #409eff;
-  border-color: #d9ecff;
-}
-.gt-cost-org-tag.is-small {
-  background: #fdf6ec;
-  color: #e6a23c;
-  border-color: #faecd8;
-}
-.gt-cost-org-tag.is-personal {
-  background: #f0f9eb;
-  color: #67c23a;
-  border-color: #e1f3d8;
-}
-.gt-cost-org-tag.is-default {
-  background: #f4f4f5;
-  color: #606266;
-  border-color: #e9e9eb;
-}
-.gt-cost-receive .gt-cost-org-tag {
-  margin-top: 0;
-}
-.gt-cost-nav-sub {
-  display: block;
-  margin-top: 3px;
+.gt-cost-rdc-code {
   font-size: 11px;
   color: #909399;
+  font-family: ui-monospace, monospace;
+}
+.gt-cost-rdc-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 24px 12px;
+  font-size: 12px;
+  color: #c0c4cc;
+  text-align: center;
+  line-height: 1.5;
 }
 .gt-cost-main {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  padding: 12px 14px 14px;
-  background: linear-gradient(180deg, #f8fbff 0%, #fff 88px);
 }
-.gt-cost-col-tabs-wrap {
+.gt-cost-org-tabs {
+  flex-shrink: 0;
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
-  gap: 8px 12px;
-  margin-bottom: 10px;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e8edf5;
+  background: #fafbfc;
 }
-.gt-cost-section-label {
-  flex: 0 0 auto;
-  font-size: 12px;
-  color: #909399;
-  white-space: nowrap;
-}
-.gt-cost-col-tabs-wrap .gt-cost-col-tabs {
-  flex: 1;
-  min-width: 0;
-  margin-bottom: 0;
-}
-.gt-cost-col-tabs :deep(.el-tabs__header) {
-  margin-bottom: 0;
-}
-.gt-cost-col-tabs :deep(.el-tabs__nav-wrap::after) {
-  height: 1px;
-}
-.gt-cost-col-tabs :deep(.el-tabs__item) {
-  height: 36px;
-  padding: 0 14px;
+.gt-cost-org-tab {
+  padding: 6px 16px;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  background: #fff;
   font-size: 13px;
-}
-.gt-cost-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.gt-cost-detail-hd {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px 16px;
-  padding: 10px 12px;
-  background: #fff;
-  border: 1px solid #e4ecf7;
-  border-left: 3px solid #409eff;
-  border-radius: 6px;
-  box-shadow: 0 1px 2px rgba(64, 158, 255, 0.06);
-}
-.gt-cost-detail-hd.is-receive-only {
-  justify-content: flex-end;
-}
-.gt-cost-collection {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-}
-.gt-cost-collection-label {
-  font-size: 12px;
-  color: #909399;
-}
-.gt-cost-collection-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1d3461;
-}
-.gt-cost-detail-code {
-  margin-left: 8px;
-  font-size: 11px;
-  font-weight: 400;
-  font-family: ui-monospace, monospace;
-  color: #909399;
-}
-.gt-cost-receive {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 4px 10px;
-  font-size: 12px;
   color: #606266;
-  background: #f0f9ff;
-  border: 1px solid #dbeafe;
-  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
-.gt-cost-receive-label {
-  color: #909399;
+.gt-cost-org-tab:hover {
+  color: #409eff;
+  border-color: #c6e2ff;
 }
-.gt-cost-receive strong {
-  color: #303133;
+.gt-cost-org-tab.is-active {
   font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
-.gt-cost-metrics {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
-@media (max-width: 900px) {
-  .gt-cost-split {
-    flex-direction: column;
-  }
-  .gt-cost-nav {
-    flex: 0 0 auto;
-    max-height: 140px;
-    border-right: none;
-    border-bottom: 1px solid #ebeef5;
-  }
-  .gt-cost-metrics {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-.gt-cost-metric {
-  padding: 10px 12px;
-  border: 1px solid #ebeef5;
-  border-radius: 8px;
-  background: #fff;
-}
-.gt-cost-metric.is-net {
-  border-color: #d9ecff;
+.gt-cost-org-tab.is-active.is-general {
+  color: #409eff;
+  border-color: #409eff;
   background: #ecf5ff;
 }
-.gt-cost-metric.is-pay {
-  border-color: #d1edc4;
-  background: #f0f9eb;
-}
-.gt-cost-metric.is-cost {
-  border-color: #faecd8;
+.gt-cost-org-tab.is-active.is-small {
+  color: #e6a23c;
+  border-color: #e6a23c;
   background: #fdf6ec;
 }
-.gt-cost-metric.is-rebate {
-  border-color: #e1d4f7;
-  background: #f5f0ff;
+.gt-cost-org-tab.is-active.is-personal {
+  color: #67c23a;
+  border-color: #67c23a;
+  background: #f0f9eb;
 }
-.gt-cost-metric-label {
-  display: block;
-  margin-bottom: 4px;
-  font-size: 12px;
-  color: #909399;
-}
-.gt-cost-metric-val {
-  font-size: 15px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: #303133;
-}
-.gt-cost-metric.is-net .gt-cost-metric-val { color: #409eff; }
-.gt-cost-metric.is-pay .gt-cost-metric-val { color: #67c23a; }
-.gt-cost-metric.is-cost .gt-cost-metric-val { color: #e6a23c; }
-.gt-cost-metric.is-rebate .gt-cost-metric-val { color: #9b59b6; }
-.gt-cost-wh-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  border: 1px solid #e4ecf7;
-  border-radius: 8px;
+.gt-cost-table-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 8px 12px;
   overflow: hidden;
 }
-.gt-cost-wh-table thead th {
-  padding: 8px 10px;
-  text-align: left;
-  font-size: 12px;
-  font-weight: 600;
-  color: #606266;
-  background: #eef3fb;
-  border-bottom: 1px solid #dce6f5;
+.gt-cost-table-wrap :deep(.wops-flex-head .wops-col) {
+  padding-left: 6px;
+  padding-right: 6px;
 }
-.gt-cost-wh-table tbody td {
-  padding: 9px 10px;
-  border-bottom: 1px solid #f0f2f5;
-  color: #606266;
-  vertical-align: middle;
-  background: #fff;
+.gt-cost-table-wrap :deep(.wops-flex-table) {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
 }
-.gt-cost-wh-table tbody tr:nth-child(even) td {
-  background: #fafcff;
+.gt-cost-table-wrap :deep(.wops-flex-scroll) {
+  flex: 1;
+  min-height: 0;
 }
-.gt-cost-wh-table tbody tr:hover td {
-  background: #f0f7ff;
+.gt-cost-table-wrap :deep(.wops-empty-wrap) {
+  flex: 1;
+  min-height: 0;
 }
-.gt-cost-wh-table tbody tr:last-child td {
+.gt-cost-table-wrap :deep(.wops-flex-head) {
   border-bottom: none;
+  align-items: flex-end;
+  padding-bottom: 0;
+  height: calc(36px + var(--wh-fs-delta, 0px));
 }
-.gt-cost-num {
-  text-align: right !important;
-  font-variant-numeric: tabular-nums;
+.gt-cost-table-wrap :deep(.gt-cost-head-col) {
+  border-bottom: 2px solid;
+  padding-bottom: 7px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
-.gt-cost-wh-name {
-  margin-right: 6px;
-  color: #303133;
-  font-weight: 500;
+.gt-cost-table-wrap :deep(.gt-cost-head-col--bloc) { border-bottom-color: #409eff; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--company) { border-bottom-color: #5470c6; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--goods) { border-bottom-color: #67c23a; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--bill) { border-bottom-color: #909399; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--tax) { border-bottom-color: #e6a23c; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--source-co) { border-bottom-color: #13c2c2; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--min-price) { border-bottom-color: #722ed1; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--int-bill) { border-bottom-color: #6b8cba; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--int-tax) { border-bottom-color: #36cfc9; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--rdc) { border-bottom-color: #95de64; }
+.gt-cost-table-wrap :deep(.gt-cost-head-col--fence) { border-bottom-color: #f56c6c; }
+.gt-cost-table-wrap :deep(.wops-col--wh) {
+  justify-content: flex-start;
+  padding-left: 12px;
 }
-.gt-cost-wh-code {
-  font-size: 11px;
-  color: #909399;
-  font-family: ui-monospace, monospace;
+.gt-cost-table-wrap :deep(.wops-col--goods) {
+  padding-left: 12px;
 }
-.gt-cost-wh-empty {
-  padding: 12px 0;
+.gt-cost-table-wrap :deep(.is-cols-cost-fence .wops-col--num) {
+  padding-right: 6px;
+}
+@media (max-width: 900px) {
+  .gt-cost-layout {
+    flex-direction: column;
+  }
+  .gt-cost-rdc-nav {
+    flex: 0 0 auto;
+    max-height: 140px;
+    overflow-y: auto;
+    border-right: none;
+    border-bottom: 1px solid #e8edf5;
+  }
 }
 </style>
diff --git a/src/components/global-tab/GlobalTabWarehousePanel.vue b/src/components/global-tab/GlobalTabWarehousePanel.vue
index 4349ccc..098ce93 100644
--- a/src/components/global-tab/GlobalTabWarehousePanel.vue
+++ b/src/components/global-tab/GlobalTabWarehousePanel.vue
@@ -2,7 +2,7 @@
   <div class="gt-wh-panel" v-loading="panelLoading" element-loading-text="加载中…">
     <div v-if="showSchemaHint" class="gt-wh-hint">
       <el-icon><InfoFilled /></el-icon>
-      <span>仓库管理为系统固定结构：左侧选择 RDC，上方横向切换费用票据，填写「提成 / 利润」下「内部、零售、渠道」的率与额。</span>
+      <span>仓库管理：左侧选 RDC，右侧按费用票据分组填写「提成 / 利润」下各渠道的率与额。</span>
     </div>
 
     <template v-if="!rdcOptions.length">
@@ -22,71 +22,70 @@
           <span v-if="rdcDisplaySub(rdc)" class="gt-wh-rdc-nav-sub">{{ rdcDisplaySub(rdc) }}</span>
         </button>
       </nav>
-      <div class="gt-wh-main">
-        <div v-if="showLegacyRdcHint" class="gt-wh-legacy-hint">
-          当前 RDC 存在历史格式数据（未按票据分桶）；请选择票据后重新填写并保存以迁移到新结构。
-        </div>
 
+      <div class="gt-wh-workspace">
         <template v-if="!expenseBills.length">
           <el-empty :image-size="64" description="暂无费用票据" class="gt-wh-empty" />
         </template>
-        <template v-else-if="!activeBillCode">
-          <el-empty :image-size="64" description="请选择费用票据" class="gt-wh-empty" />
-        </template>
         <template v-else>
-          <el-tabs v-model="activeBillCode" class="gt-wh-bill-tabs">
-            <el-tab-pane
-              v-for="bill in expenseBills"
-              :key="bill.bill_code"
-              :name="normBillCode(bill.bill_code)"
-            >
-              <template #label>
-                <span class="gt-wh-bill-tab" :title="billTabTitle(bill)">
-                  <span class="gt-wh-bill-tab-name">{{ billTabParts(bill).name }}</span>
-                  <span v-if="billTabParts(bill).tax" class="gt-wh-bill-tab-tax">{{ billTabParts(bill).tax }}%</span>
-                </span>
-              </template>
-            </el-tab-pane>
-          </el-tabs>
-          <div class="gt-wh-form-body">
+          <div v-if="showLegacyRdcHint" class="gt-wh-legacy-hint gt-wh-legacy-hint--workspace">
+            当前 RDC 存在历史格式数据（未按票据分桶）；请重新填写并保存以迁移到新结构。
+          </div>
+          <div class="gt-wh-bills-scroll">
             <div
-              v-for="sec in WAREHOUSE_SECTIONS"
-              :key="sec.key"
-              class="gt-wh-section-block"
+              v-for="bill in expenseBills"
+              :key="normBillCode(bill.bill_code)"
+              class="gt-wh-bill-group"
             >
-              <div class="gt-wh-section-title">{{ sec.label }}</div>
-              <div class="gt-wh-channel-grid">
-                <div
-                  v-for="ch in WAREHOUSE_CHANNELS"
-                  :key="ch.key"
-                  class="gt-wh-channel-card"
-                >
-                  <div class="gt-wh-channel-title">{{ ch.label }}</div>
-                  <div class="gt-wh-metrics">
-                    <div class="gt-wh-metric">
-                      <span class="gt-wh-metric-label">率</span>
-                      <el-input-number
-                        :model-value="metricValue(sec.key, ch.key, 'rate')"
-                        :disabled="readonly"
-                        :controls="false"
-                        placeholder="—"
-                        size="small"
-                        class="gt-wh-metric-input"
-                        @update:model-value="(v) => setMetric(sec.key, ch.key, 'rate', v)"
-                      />
-                      <span class="gt-wh-metric-suffix">%</span>
-                    </div>
-                    <div class="gt-wh-metric">
-                      <span class="gt-wh-metric-label">额</span>
-                      <el-input-number
-                        :model-value="metricValue(sec.key, ch.key, 'amount')"
-                        :disabled="readonly"
-                        :controls="false"
-                        placeholder="—"
-                        size="small"
-                        class="gt-wh-metric-input"
-                        @update:model-value="(v) => setMetric(sec.key, ch.key, 'amount', v)"
-                      />
+              <div class="gt-wh-bill-group-title">
+                <span class="gt-wh-bill-group-name">{{ billTabParts(bill).name }}</span>
+                <span v-if="billTabParts(bill).tax" class="gt-wh-bill-group-tax">{{ billTabParts(bill).tax }}%</span>
+              </div>
+              <div class="gt-wh-bill-group-body">
+                <div class="gt-wh-sections-row">
+                  <div
+                    v-for="sec in WAREHOUSE_SECTIONS"
+                    :key="`${normBillCode(bill.bill_code)}-${sec.key}`"
+                    class="gt-wh-section-block"
+                    :class="sectionBlockClass(sec.key)"
+                  >
+                    <div class="gt-wh-section-title">{{ sec.label }}</div>
+                    <div class="gt-wh-channel-grid">
+                      <div
+                        v-for="ch in WAREHOUSE_CHANNELS"
+                        :key="`${normBillCode(bill.bill_code)}-${sec.key}-${ch.key}`"
+                        class="gt-wh-channel-card"
+                      >
+                        <div class="gt-wh-channel-title">{{ ch.label }}</div>
+                        <div class="gt-wh-metrics">
+                          <div class="gt-wh-metric">
+                            <span class="gt-wh-metric-label">率</span>
+                            <el-input-number
+                              :model-value="metricValue(sec.key, ch.key, 'rate', bill.bill_code)"
+                              :disabled="readonly"
+                              :controls="false"
+                              placeholder="—"
+                              size="small"
+                              class="gt-wh-metric-input"
+                              @update:model-value="(v) => setMetric(sec.key, ch.key, 'rate', v, bill.bill_code)"
+                            />
+                            <span class="gt-wh-metric-suffix">%</span>
+                          </div>
+                          <div class="gt-wh-metric">
+                            <span class="gt-wh-metric-label">额</span>
+                            <el-input-number
+                              :model-value="metricValue(sec.key, ch.key, 'amount', bill.bill_code)"
+                              :disabled="readonly"
+                              :controls="false"
+                              placeholder="—"
+                              size="small"
+                              class="gt-wh-metric-input"
+                              @update:model-value="(v) => setMetric(sec.key, ch.key, 'amount', v, bill.bill_code)"
+                            />
+                            <span class="gt-wh-metric-suffix">元</span>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -120,9 +119,7 @@ import {
 const props = defineProps({
   modelValue: { type: Object, default: () => ({}) },
   readonly: { type: Boolean, default: false },
-  /** 全局页签管理：展示结构说明 */
   showSchemaHint: { type: Boolean, default: false },
-  /** 物料 /goods/view 返回的 rdcs；公共页签、物料分类留空即可 */
   rdcList: { type: Array, default: () => [] },
 })
 
@@ -136,7 +133,6 @@ const billsLoaded = ref(false)
 /** @type {import('vue').Ref<object[]>} */
 const allBills = ref([])
 const activeRdcCode = ref('')
-const activeBillCode = ref('')
 
 const panelLoading = computed(() => billLoading.value)
 
@@ -147,7 +143,6 @@ const bucket = computed({
   set: (v) => emit('update:modelValue', v),
 })
 
-/** 仓库管理仅使用费用票据 type=4 */
 const expenseBills = computed(() => {
   return allBills.value.filter((b) => {
     if (b?.is_valid === false || b?.is_valid === 0 || b?.is_valid === '0') return false
@@ -161,6 +156,12 @@ const showLegacyRdcHint = computed(() => {
   return isLegacyRdcMetricsBucket(rdc)
 })
 
+function sectionBlockClass(sectionKey) {
+  if (sectionKey === 'commission') return 'is-commission'
+  if (sectionKey === 'profit') return 'is-profit'
+  return ''
+}
+
 function rdcDisplayName(rdc) {
   const name = String(rdc?.name || '').trim()
   const code = String(rdc?.code || '').trim()
@@ -179,11 +180,6 @@ function billTabParts(bill) {
   return expenseBillTabParts(bill)
 }
 
-function billTabTitle(bill) {
-  const { name, tax } = billTabParts(bill)
-  return tax ? `${name} · ${tax}%` : name
-}
-
 function normBillCode(code) {
   return String(code ?? '').trim()
 }
@@ -192,26 +188,18 @@ function normRdcCode(code) {
   return String(code ?? '').trim()
 }
 
-function pickInitialBillCode() {
-  const list = expenseBills.value
-  if (!list.length) {
-    activeBillCode.value = ''
-    return
+function ensureAllBillBucketsForRdc(rdcCode) {
+  const rdc = normRdcCode(rdcCode)
+  if (!rdc || props.readonly) return
+  for (const bill of expenseBills.value) {
+    ensureBillBucket(rdc, bill.bill_code)
   }
-  const cur = normBillCode(activeBillCode.value)
-  if (cur && list.some((b) => normBillCode(b.bill_code) === cur)) {
-    activeBillCode.value = cur
-    return
-  }
-  activeBillCode.value = normBillCode(list[0].bill_code)
 }
 
-function syncActiveWarehouseSelection() {
-  pickInitialBillCode()
+function syncActiveRdcBuckets() {
   const rdc = normRdcCode(activeRdcCode.value)
-  const bill = normBillCode(activeBillCode.value)
-  if (!rdc || !bill) return
-  if (!props.readonly) ensureBillBucket(rdc, bill)
+  if (!rdc || !expenseBills.value.length) return
+  if (!props.readonly) ensureAllBillBucketsForRdc(rdc)
 }
 
 function selectRdc(code) {
@@ -219,12 +207,11 @@ function selectRdc(code) {
   activeRdcCode.value = c
   if (!c || props.readonly) return
   const next = { ...bucket.value }
-  const rdc = next[c]
-  if (!rdc) {
+  if (!next[c]) {
     next[c] = {}
     bucket.value = next
   }
-  syncActiveWarehouseSelection()
+  syncActiveRdcBuckets()
 }
 
 function ensureBillBucket(rdcCode, billCode) {
@@ -246,25 +233,25 @@ function ensureBillBucket(rdcCode, billCode) {
   return next[rdc][bill]
 }
 
-function currentBillBucket() {
-  const rdc = bucket.value[normRdcCode(activeRdcCode.value)]
-  const bill = normBillCode(activeBillCode.value)
+function billBucketFor(rdcCode, billCode) {
+  const rdc = bucket.value[normRdcCode(rdcCode)]
+  const bill = normBillCode(billCode)
   if (!rdc || !bill) return null
   if (isLegacyRdcMetricsBucket(rdc)) return rdc
   return rdc[bill] || null
 }
 
-function metricValue(sectionKey, channelKey, metricKey) {
-  const b = currentBillBucket()
+function metricValue(sectionKey, channelKey, metricKey, billCode) {
+  const b = billBucketFor(activeRdcCode.value, billCode)
   const v = b?.[sectionKey]?.[channelKey]?.[metricKey]
   return v === null || v === undefined ? null : Number(v)
 }
 
-function setMetric(sectionKey, channelKey, metricKey, raw) {
+function setMetric(sectionKey, channelKey, metricKey, raw, billCode) {
   const rdcCode = normRdcCode(activeRdcCode.value)
-  const billCode = normBillCode(activeBillCode.value)
-  if (props.readonly || !rdcCode || !billCode) return
-  const billBucket = ensureBillBucket(rdcCode, billCode)
+  const bill = normBillCode(billCode)
+  if (props.readonly || !rdcCode || !bill) return
+  const billBucket = ensureBillBucket(rdcCode, bill)
   if (!billBucket) return
   if (!billBucket[sectionKey]) billBucket[sectionKey] = createEmptyRdcBucket()[sectionKey]
   if (!billBucket[sectionKey][channelKey]) {
@@ -281,17 +268,16 @@ async function loadBillList() {
     const res = await request.post('/api/bill/listed', { page: 1, limit: 500, type: FINANCE_BILL_TYPE_EXPENSE })
     const list = Array.isArray(res?.data) ? res.data : (Array.isArray(res?.data?.list) ? res.data.list : [])
     allBills.value = list.filter((b) => normalizeFinanceBillType(b?.type) === FINANCE_BILL_TYPE_EXPENSE)
-    syncActiveWarehouseSelection()
+    syncActiveRdcBuckets()
   } catch {
     allBills.value = []
-    activeBillCode.value = ''
   } finally {
     billLoading.value = false
   }
 }
 
 watch(expenseBills, () => {
-  syncActiveWarehouseSelection()
+  syncActiveRdcBuckets()
 })
 
 function pickInitialRdcCode(opts) {
@@ -314,7 +300,7 @@ watch(
     if (nextRdc !== normRdcCode(activeRdcCode.value)) {
       selectRdc(nextRdc)
     } else {
-      syncActiveWarehouseSelection()
+      syncActiveRdcBuckets()
     }
     if (!billsLoaded.value) {
       billsLoaded.value = true
@@ -324,10 +310,6 @@ watch(
   { immediate: true },
 )
 
-watch(activeBillCode, () => {
-  syncActiveWarehouseSelection()
-})
-
 watch(
   () => props.modelValue,
   () => {
@@ -364,12 +346,6 @@ defineExpose({
   border: 1px solid #d9ecff;
   border-radius: 6px;
 }
-.gt-wh-hint code {
-  font-size: 11px;
-  padding: 0 4px;
-  background: #ecf5ff;
-  border-radius: 3px;
-}
 .gt-wh-legacy-hint {
   padding: 8px 12px;
   font-size: 12px;
@@ -379,6 +355,10 @@ defineExpose({
   border: 1px solid #faecd8;
   border-radius: 6px;
 }
+.gt-wh-legacy-hint--workspace {
+  flex-shrink: 0;
+  margin: 10px 12px 0;
+}
 .gt-wh-split {
   display: flex;
   align-items: stretch;
@@ -389,7 +369,7 @@ defineExpose({
   background: #fff;
 }
 .gt-wh-rdc-nav {
-  flex: 0 0 132px;
+  flex: 0 0 168px;
   align-self: stretch;
   min-height: 0;
   border-right: 1px solid #ebeef5;
@@ -436,44 +416,53 @@ defineExpose({
   color: #909399;
   word-break: break-all;
 }
-.gt-wh-main {
+.gt-wh-workspace {
   flex: 1;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 12px 14px 14px;
-  overflow-y: auto;
-}
-.gt-wh-bill-tabs :deep(.el-tabs__header) {
-  margin-bottom: 0;
-}
-.gt-wh-bill-tabs :deep(.el-tabs__nav-wrap::after) {
-  height: 1px;
-}
-.gt-wh-bill-tabs :deep(.el-tabs__item) {
-  height: 38px;
-  padding: 0 14px;
-}
-.gt-wh-bill-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 168px;
-  vertical-align: middle;
-}
-.gt-wh-bill-tab-name {
-  flex: 0 1 auto;
-  min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 13px;
-  line-height: 1.2;
 }
-.gt-wh-bill-tab-tax {
+.gt-wh-bills-scroll {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.gt-wh-bill-group {
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: #fafbfc;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.gt-wh-bill-group-title {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 14px 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #8b9ab0;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid #ebeef5;
+  background: #fafbfc;
+}
+.gt-wh-bill-group-name {
+  color: #606266;
+  font-size: 13px;
+}
+.gt-wh-bill-group-tax {
   padding: 0 6px;
   height: 18px;
   line-height: 18px;
@@ -482,36 +471,32 @@ defineExpose({
   font-weight: 600;
   background: #fef0f0;
   color: #f56c6c;
-  transition: background 0.15s, color 0.15s;
 }
-.gt-wh-bill-tabs :deep(.el-tabs__item.is-active) .gt-wh-bill-tab-name {
-  font-weight: 600;
+.gt-wh-bill-group-body {
+  padding: 12px;
 }
-.gt-wh-bill-tabs :deep(.el-tabs__item.is-active) .gt-wh-bill-tab-tax {
-  background: #f56c6c;
-  color: #fff;
-}
-.gt-wh-bill-tabs :deep(.el-tabs__item:hover) .gt-wh-bill-tab-tax {
-  background: #fde2e2;
-}
-.gt-wh-bill-tabs :deep(.el-tabs__item.is-active:hover) .gt-wh-bill-tab-tax {
-  background: #f56c6c;
-  color: #fff;
-}
-.gt-wh-form-body {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+.gt-wh-sections-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
 }
 .gt-wh-section-block {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  min-width: 0;
+  padding: 10px 10px 12px;
+  border-radius: 8px;
+  border: 1px solid transparent;
 }
-.gt-wh-section-block + .gt-wh-section-block {
-  margin-top: 4px;
-  padding-top: 14px;
-  border-top: 1px solid #ebeef5;
+.gt-wh-section-block.is-commission {
+  background: #f7fafd;
+  border-color: #e6eef8;
+}
+.gt-wh-section-block.is-profit {
+  background: #f8fbf6;
+  border-color: #e5efe5;
 }
 .gt-wh-section-title {
   font-size: 13px;
@@ -519,56 +504,50 @@ defineExpose({
   color: #303133;
   padding-left: 2px;
 }
+.gt-wh-section-block.is-commission .gt-wh-section-title {
+  color: #4a6fa5;
+}
+.gt-wh-section-block.is-profit .gt-wh-section-title {
+  color: #5a8f5a;
+}
 .gt-wh-channel-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-@media (max-width: 900px) {
-  .gt-wh-split {
-    flex-direction: column;
-  }
-  .gt-wh-rdc-nav {
-    flex: 0 0 auto;
-    max-height: 140px;
-    border-right: none;
-    border-bottom: 1px solid #ebeef5;
-  }
-  .gt-wh-channel-grid {
-    grid-template-columns: 1fr;
-  }
+  gap: 10px;
 }
 .gt-wh-channel-card {
-  padding: 12px;
+  padding: 10px 8px;
   border: 1px solid #ebeef5;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #fff;
+  min-width: 0;
 }
 .gt-wh-channel-title {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: #303133;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
   border-bottom: 1px dashed #ebeef5;
 }
 .gt-wh-metrics {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 .gt-wh-metric {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 .gt-wh-metric-label {
-  flex: 0 0 20px;
+  flex: 0 0 18px;
   font-size: 12px;
   color: #909399;
 }
 .gt-wh-metric-input {
   flex: 1;
+  min-width: 0;
   width: 100%;
 }
 .gt-wh-metric-input :deep(.el-input__inner) {
@@ -582,4 +561,21 @@ defineExpose({
 .gt-wh-empty {
   padding: 24px 0;
 }
+@media (max-width: 900px) {
+  .gt-wh-split {
+    flex-direction: column;
+  }
+  .gt-wh-rdc-nav {
+    flex: 0 0 auto;
+    max-height: 120px;
+    border-right: none;
+    border-bottom: 1px solid #ebeef5;
+  }
+  .gt-wh-sections-row {
+    grid-template-columns: 1fr;
+  }
+  .gt-wh-channel-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/src/styles/warehouseOpsFlexTable.css b/src/styles/warehouseOpsFlexTable.css
index 9c217bd..1989c90 100644
--- a/src/styles/warehouseOpsFlexTable.css
+++ b/src/styles/warehouseOpsFlexTable.css
@@ -89,6 +89,10 @@
 .wops-flex-table.is-cols-pr-cost {
   --wops-cols: 7fr 10.5fr 10.5fr 7fr 8fr 8fr 6fr 9fr 6fr 8fr;
 }
+/* 物料成本围栏（11 列）：内部交易相关表头加宽，配合 88vw 弹窗单行显示 */
+.wops-flex-table.is-cols-cost-fence {
+  --wops-cols: 8fr 9fr 10fr 7fr 6fr 9fr 10fr 8fr 11fr 7fr 5fr;
+}
 
 .wops-flex-scroll {
   flex: 1;
@@ -197,6 +201,7 @@
 .wops-flex-table.is-cols-share-deploy .wops-flex-row,
 .wops-flex-table.is-cols-share-waste .wops-flex-row,
 .wops-flex-table.is-cols-pr-cost .wops-flex-row,
+.wops-flex-table.is-cols-cost-fence .wops-flex-row,
 .wops-flex-table.is-cols-collect-whp .wops-flex-row,
 .wops-flex-table.is-cols-logs-whp .wops-flex-row,
 .wops-flex-table.is-cols-orders-whp .wops-flex-row,
@@ -220,6 +225,8 @@
 .wops-flex-table.is-cols-share-waste .wops-flex-head .wops-col--num,
 .wops-flex-table.is-cols-pr-cost .wops-col--num,
 .wops-flex-table.is-cols-pr-cost .wops-flex-head .wops-col--num,
+.wops-flex-table.is-cols-cost-fence .wops-col--num,
+.wops-flex-table.is-cols-cost-fence .wops-flex-head .wops-col--num,
 .wops-flex-table.is-cols-collect-whp .wops-col--num,
 .wops-flex-table.is-cols-collect-whp .wops-flex-head .wops-col--num,
 .wops-flex-table.is-cols-logs-whp .wops-col--num,
diff --git a/src/views/material/MaterialList.vue b/src/views/material/MaterialList.vue
index d86c700..0174aef 100755
--- a/src/views/material/MaterialList.vue
+++ b/src/views/material/MaterialList.vue
@@ -414,7 +414,7 @@
   <el-dialog
     v-model="materialDialogVisible"
     :title="batchSelMode ? `批量设置选配（${selectedRows.length} 条物料）` : (materialDialogMode === 'add' ? '新增物料' : String(materialEditingId || '修改物料'))"
-    width="72vw"
+    width="88vw"
     :close-on-click-modal="false"
     destroy-on-close
     append-to-body
@@ -504,7 +504,7 @@
           </div>
           <template v-for="(cat, catIdx) in materialForm.categories" :key="`${cat.category_code}-${catIdx}`">
             <div
-              v-show="activeCatCode === cat.category_code && mlActiveNavKey !== ML_NAV_WAREHOUSE"
+              v-show="activeCatCode === cat.category_code && mlActiveNavKey !== ML_NAV_WAREHOUSE && mlActiveNavKey !== ML_NAV_COST"
               class="mf-cat-pane"
               :class="{ 'mf-cat-pane--fill': mlActiveNavKey === ML_NAV_BASIC }"
             >
@@ -2579,10 +2579,25 @@ const windowW  = ref(window.innerWidth)
 const isMobile = computed(() => windowW.value <= 600)
 window.addEventListener('resize', () => { windowW.value = window.innerWidth })
 
-// 字段网格列数：72vw 弹窗，减去 padding/边框约 80px，每列最小 240px（1920屏→5列，2560→7列）
+/** 物料弹窗宽度（须与 template width 一致） */
+const MF_DIALOG_VW = 0.88
+/** 弹窗 inset + 左侧导航 + 页签区内边距 + 字段网格内边距 */
+const MF_GRID_INSET = 244
+/** 每列最小宽度（1920×88vw 右侧字段区 → 6 列） */
+const MF_COL_MIN_PX = 215
+const MF_GRID_GAP = 16
+
+function mfGridAvailW() {
+  return Math.max(320, windowW.value * MF_DIALOG_VW - MF_GRID_INSET)
+}
+
+function mfGridColPx(cols = mfColCount.value) {
+  return Math.max(160, Math.floor((mfGridAvailW() - (cols - 1) * MF_GRID_GAP) / cols))
+}
+
+// 字段网格列数：88vw 弹窗，按右侧实际可用宽度计（1920→6列，2560→8列）
 const mfColCount = computed(() => {
-  const bodyW = windowW.value * 0.72 - 80
-  return Math.max(2, Math.min(8, Math.floor(bodyW / 240)))
+  return Math.max(2, Math.min(8, Math.floor(mfGridAvailW() / MF_COL_MIN_PX)))
 })
 
 // 字段占列数（与 MaterialCategory.fieldGridSpan 规则统一）
@@ -2591,7 +2606,7 @@ function mfFieldSpan(field) {
   if (field.type === 'table' || field.type === 'textarea') return 'mf-field-full'
   if (field.type === 'attachment') return 'mf-field-span2'
   const cols   = mfColCount.value
-  const colPx  = Math.max(160, Math.floor((windowW.value * 0.72 - 80 - (cols - 1) * 16) / cols))
+  const colPx  = mfGridColPx(cols)
   if (field.type === 'radio') {
     const opts = field.options || []
     if (opts.length <= 1) return ''
@@ -2616,7 +2631,7 @@ function mfFieldSpan(field) {
 /** 适配项占列数：名称较长时占两列 */
 function adpItemSpan(name) {
   const cols  = mfColCount.value
-  const colPx = Math.max(160, Math.floor((windowW.value * 0.72 - 80 - (cols - 1) * 16) / cols))
+  const colPx = mfGridColPx(cols)
   const len   = String(name || '').length
   // 中文约 14px/字，英文约 8px/字，粗估；超过一列宽度则占两列
   const estPx = len * 12 + 36  // 36 = 圆点 + gap
@@ -2650,7 +2665,7 @@ function _collectCategoryWarehouseFlatFields(categoryCode, warehouseCode) {
 /** 选配查看态：每个控件在 mf-fields-grid 中的占列规则，与 mfFieldSpan 一致 */
 function mfSelCompGridClass(comp) {
   const cols = mfColCount.value
-  const colPx = Math.max(160, Math.floor((windowW.value * 0.72 - 80 - (cols - 1) * 16) / cols))
+  const colPx = mfGridColPx(cols)
   const type = comp?.type
   const opts = comp?.options || []
   if (type === 'radio') {
@@ -10891,6 +10906,20 @@ provide('mlTabPaneCtx', {
   padding: 8px 12px 12px;
   box-sizing: border-box;
 }
+.mf-nav-pane--cost-api {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  padding: 8px 12px 12px;
+  box-sizing: border-box;
+}
+.mf-right-scroll:has(.mf-nav-pane--cost-api) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
 .mf-nav-pane--basic {
   padding-top: 4px;
 }
@@ -11059,7 +11088,7 @@ provide('mlTabPaneCtx', {
 
 .mf-fields-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr); /* 默认 4 列，JS 会覆盖 */
+  grid-template-columns: repeat(6, 1fr); /* 默认 6 列，JS 会覆盖 */
   gap: 10px 16px;
   align-items: start;
   padding: 12px 14px;