fix: optimize table overflow and action widths

2026-09-07 19:04:00 +08:00
parent dbd51b7fc8
commit fdaf98499f
8 changed files with 68 additions and 13 deletions
@@ -8,13 +8,13 @@ const component = (name: string) => readFileSync(resolve(process.cwd(), 'src/mod
 describe('overseas warehouse 1920px layout acceptance', () => {
  it('keeps action columns first and wide enough for every visible action', () => {
    const widths: Record<string, number> = {
-      'LastMileOrdersView.vue': 270,
+      'LastMileOrdersView.vue': 110,
      'InboundOrdersView.vue': 260,
-      'DispatchesView.vue': 240,
-      'OutboundsView.vue': 190,
+      'DispatchesView.vue': 270,
+      'OutboundsView.vue': 180,
      'DeliveryOrdersView.vue': 300,
-      'RelabelOrdersView.vue': 190,
-      'PalletsView.vue': 250,
+      'RelabelOrdersView.vue': 180,
+      'PalletsView.vue': 180,
      'InventoryView.vue': 110,
    }
    for (const [name, width] of Object.entries(widths)) {
@@ -74,7 +74,7 @@ const fields = computed<QueryField[]>(() => [
 ])

 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 240, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', width: 270, fixed: 'left', slotName: 'actions' },
  { key: 'dispatchNo', prop: 'dispatchNo', label: '排车单号', minWidth: 170, fixed: 'left' },
  { key: 'vehiclePlate', prop: 'vehiclePlate', label: '车牌号', minWidth: 130 },
  { key: 'driverName', prop: 'driverName', label: '司机', minWidth: 120 },
@@ -132,7 +132,7 @@ function newReceivingWarehouseIdempotencyKey() {
  return `container-receiving-warehouse-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
 }
 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 270, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', width: 110, fixed: 'left', slotName: 'actions' },
  { key: 'selection', type: 'selection', width: 48, fixed: 'left' },
  { key: 'orderNo', prop: 'orderNo', label: '尾程单号', minWidth: 170, slotName: 'orderNo' },
  { key: 'consolidated', prop: 'consolidated', label: '合托标记', width: 100, hideable: false },
@@ -28,7 +28,7 @@ const customerOptions = computed(() => {
  return [...customers].map(([value, label]) => ({ value, label }))
 })
 const availablePositionOptions = computed(() => positionOptions.value.filter(({ balance }) => balance.customerId === selectedCustomerId.value))
-const columns: DataTableColumn[] = [{ key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' }, { key: 'outboundNo', prop: 'outboundNo', label: '出库单号', minWidth: 180 }, { key: 'lxCodes', prop: 'lxCodes', label: 'LX代码', minWidth: 180 }, { key: 'dispatchNo', prop: 'dispatchNo', label: '关联排车单', minWidth: 160 }, { key: 'status', prop: 'status', label: '状态', width: 130, slotName: 'status' }, { key: 'palletCount', prop: 'palletCount', label: '托盘数', width: 100 }, { key: 'packageCount', prop: 'packageCount', label: '箱数', width: 100 }, { key: 'createdAt', prop: 'createdAt', label: '创建时间', minWidth: 180 }]
+const columns: DataTableColumn[] = [{ key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' }, { key: 'outboundNo', prop: 'outboundNo', label: '出库单号', minWidth: 180 }, { key: 'lxCodes', prop: 'lxCodes', label: 'LX代码', minWidth: 180 }, { key: 'dispatchNo', prop: 'dispatchNo', label: '关联排车单', minWidth: 160 }, { key: 'status', prop: 'status', label: '状态', width: 130, slotName: 'status' }, { key: 'palletCount', prop: 'palletCount', label: '托盘数', width: 100 }, { key: 'packageCount', prop: 'packageCount', label: '箱数', width: 100 }, { key: 'createdAt', prop: 'createdAt', label: '创建时间', minWidth: 180 }]
 const fields: QueryField[] = [{ key: 'documentNo', type: 'input', label: '出库单号', placeholder: '请输入出库单号', width: 220 }, { key: 'lxCode', type: 'input', label: 'LX代码', placeholder: '请输入领星入库单代码', width: 220 }, { key: 'warehouseId', type: 'input', label: '目的仓', placeholder: '请输入目的仓', width: 220 }, { key: 'status', type: 'select', label: '状态', placeholder: '全部状态', width: 160, options: [{ label: '全部', value: '' }, { label: '待出库', value: 'WAIT_OUTBOUND' }, { label: '已出库', value: 'OUTBOUNDED' }] }]

 async function load(model: QueryModel = filters.value) { Object.assign(filters.value, model); loading.value = true; error.value = null; try { const result = await listOutbounds({ page: page.value, size: pageSize.value, documentNo: String(filters.value.documentNo || '').trim() || undefined, lxCode: String(filters.value.lxCode || '').trim() || undefined, warehouseId: String(filters.value.warehouseId || '').trim() || undefined, status: String(filters.value.status || '').trim() || undefined }); rows.value = result.records.map((row) => ({ ...row, createdAt: formatOverseasDateTime(row.createdAt) })); total.value = result.total } catch (cause) { error.value = getApiErrorDetails(cause, '出库单列表加载失败') } finally { loading.value = false } }
@@ -41,7 +41,7 @@ const fields = computed<QueryField[]>(() => [
  { key: 'status', type: 'select', label: '状态', placeholder: '全部状态', width: 140, options: [{ label: '闲置', value: 'IDLE' }, { label: '占用', value: 'OCCUPIED' }, { label: '已报废', value: 'SCRAPPED' }] },
 ])
 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 250, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' },
  { key: 'code', prop: 'code', label: '托盘编码', minWidth: 160 }, { key: 'type', prop: 'type', label: '托盘类型', minWidth: 130 },
  { key: 'warehouse', prop: 'warehouse', label: '仓库', minWidth: 180 }, { key: 'volume', prop: 'volume', label: '容积(m³)', width: 110, align: 'right' },
  { key: 'purchasePrice', prop: 'purchasePrice', label: '采购价格', width: 120, align: 'right' }, { key: 'fbaWarehouse', prop: 'fbaWarehouse', label: '所属FBA仓', minWidth: 140 },
@@ -37,7 +37,7 @@ const fields = computed<QueryField[]>(() => [
  { key: 'status', type: 'select', label: '状态', placeholder: '全部状态', width: 160, options: [{ label: '待处理', value: 'PENDING_PROCESSING' }, { label: '处理中', value: 'PROCESSING' }, { label: '已完成', value: 'COMPLETED' }, { label: '已驳回', value: 'REJECTED' }, { label: '已取消', value: 'CANCELLED' }] },
 ])
 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' },
  { key: 'orderNo', label: '换标单号', minWidth: 170 },
  { key: 'sku', label: '商品SKU', minWidth: 150 },
  { key: 'productName', label: '中文品名', minWidth: 180 },