style(table): 调整表格操作列宽度并替换供应商选择组件

云

2026-10-24 1920f063fc7e84fff0f729d2ace4df0e7639d5e6

style(table): 调整表格操作列宽度并替换供应商选择组件

- 统一增加多个页面表格中操作列的宽度，确保按钮完整显示
- 将原有的 MdVendorSelect 和 ErpSupplierSelect 替换为统一的 SrmSupplierSelect 组件
- 在 arrivalnotice 的采购订单选择弹窗中调整供应商字段为下拉选择
- 更新表格样式去除操作列的单元格横向内边距，优化按钮显示效果
- 修改 arrivalnotice 弹窗的表格高度设置，提升界面展示效果

 src/packages/effects/plugins/src/vxe-table/style.css

@@ -84,6 +84,23 @@
  box-sizing: border-box;
}

/* 操作列去掉单元格横向内边距，避免按钮组在窄列中被裁切 */
.vxe-table--render-default .vxe-body--column:has(.table-actions),
.vxe-table--render-default .vxe-body--column:has(.table-operations) {
  padding-right: 0;
  padding-left: 0;
}

.vxe-table--render-default
  .vxe-body--column:has(.table-actions)
  .vxe-cell,
.vxe-table--render-default
  .vxe-body--column:has(.table-operations)
  .vxe-cell {
  padding-right: 2px !important;
  padding-left: 2px !important;
}

.vxe-table--render-default .vxe-cell {
  min-width: 0;
  max-width: 100%;

 src/views/aftersales/ticket/data.ts

@@ -367,7 +367,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'itemActions' },
          } as const,

 src/views/ai/knowledge/document/data.ts

@@ -90,7 +90,7 @@
    },
    {
      title: '操作',
      minWidth: 150,
      minWidth: 240,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/bpm/task/done/data.ts

@@ -146,7 +146,7 @@
    },
    {
      title: '操作',
      width: 120,
      width: 160,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/crm/contract/components/command-list-data.ts

@@ -47,7 +47,7 @@
    },
    {
      title: '操作',
      width: 220,
      width: 260,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/crm/saleQuotation/data.ts

@@ -484,7 +484,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/erp/finance/receipt/data.ts

@@ -203,7 +203,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/purchase/in/data.ts

@@ -291,7 +291,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/purchase/order/data.ts

@@ -232,7 +232,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/purchase/request/data.ts

@@ -208,7 +208,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/purchase/return/data.ts

@@ -291,7 +291,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/sale/order/data.ts

@@ -511,7 +511,7 @@
    },
    {
      title: '操作',
      width: 260,
      width: 340,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/erp/sale/out/data.ts

@@ -312,7 +312,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/sale/return/data.ts

@@ -305,7 +305,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/stock/check/data.ts

@@ -148,7 +148,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/stock/in/data.ts

@@ -155,7 +155,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/stock/move/data.ts

@@ -146,7 +146,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/erp/stock/out/data.ts

@@ -157,7 +157,7 @@
    },
    {
      title: '操作',
      width: 50,
      width: 80,
      fixed: 'right',
      slots: { default: 'actions' },
      visible: !disabled,

 src/views/hrm/training/data.ts

@@ -235,7 +235,7 @@
    {
      field: 'action',
      title: '操作',
      width: 240,
      width: 380,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/mes/pro/workorder/data.ts

@@ -23,7 +23,7 @@
import {
  MdItemSelect,
} from '#/views/mes/md/item/components';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import { ErpSaleOrderSelect } from '#/views/erp/sale/order/components';

/** 表单类型 */
@@ -228,7 +228,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        disabled: headerReadonly,
        placeholder: '请选择供应商',

 src/views/mes/qc/batchtrace/data.ts

@@ -9,7 +9,7 @@

import { MdClientSelect } from '#/views/mes/md/client/components';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';

/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
@@ -34,7 +34,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },

 src/views/mes/qc/ipqc/data.ts

@@ -491,7 +491,7 @@
    },
    {
      title: '操作',
      width: 180,
      width: 220,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/mes/qc/iqc/data.ts

@@ -436,7 +436,7 @@
    },
    {
      title: '操作',
      width: 180,
      width: 220,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/mes/qc/rqc/data.ts

@@ -417,7 +417,7 @@
    },
    {
      title: '操作',
      width: 180,
      width: 220,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/system/dict/data.ts

@@ -141,7 +141,7 @@
    },
    {
      title: '操作',
      minWidth: 120,
      minWidth: 160,
      fixed: 'right',
      slots: { default: 'actions' },
    },
@@ -346,7 +346,7 @@
    },
    {
      title: '操作',
      minWidth: 120,
      minWidth: 160,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/wls/arrivalnotice/data.ts

@@ -13,7 +13,7 @@
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { getItemPage } from '#/api/mdm/item';
import { getRangePickerDefaultProps } from '#/utils';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import { ErpPurchaseOrderSelect } from '#/views/erp/purchase/order/components';

/** 表单类型 */
@@ -102,7 +102,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
        disabled: true,
@@ -112,7 +112,7 @@
        componentProps: (values) => ({
          placeholder: '请选择供应商',
          disabled: true,
          vendorName: values.vendorName as string,
          supplierName: values.vendorName as string,
        }),
      },
      rules: 'selectRequired',
@@ -180,21 +180,19 @@
      },
    },
    {
      fieldName: 'purchaseOrderNo',
      fieldName: 'purchaseOrderId',
      label: '采购订单号',
      component: 'Input',
      component: markRaw(ErpPurchaseOrderSelect),
      componentProps: {
        allowClear: true,
        placeholder: '请输入采购订单号',
        placeholder: '请选择采购订单',
      },
    },
    {
      fieldName: 'vendorName',
      fieldName: 'vendorId',
      label: '供应商',
      component: 'Input',
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        allowClear: true,
        placeholder: '请输入供应商名称',
        placeholder: '请选择供应商',
      },
    },
    {
@@ -332,7 +330,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/arrivalnotice/modules/po-select-dialog.vue

@@ -2,12 +2,16 @@
import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { markRaw, nextTick } from 'vue';

import { DICT_TYPE } from '@vben/constants';
import { Page, useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPurchaseOrderPage } from '#/api/erp/purchase/order';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';

const emit = defineEmits<{
  selected: [purchaseOrderId: number];
@@ -26,12 +30,11 @@
        },
      },
      {
        fieldName: 'supplierName',
        fieldName: 'supplierId',
        label: '供应商',
        component: 'Input',
        component: markRaw(SrmSupplierSelect),
        componentProps: {
          allowClear: true,
          placeholder: '请输入供应商名称',
          placeholder: '请选择供应商',
        },
      },
    ],
@@ -62,7 +65,7 @@
        field: 'totalPrice',
        title: '总金额',
        width: 120,
        formatter: 'formatMoney',
        formatter: 'formatAmount2',
      },
      {
        field: 'status',
@@ -70,11 +73,11 @@
        width: 100,
        cellRender: {
          name: 'CellDict',
          props: { type: 'erp_purchase_order_status' },
          props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
        },
      },
    ],
    height: 'auto',
    height: 520,
    keepSource: true,
    proxyConfig: {
      ajax: {
@@ -109,7 +112,12 @@
    await modalApi.close();
  },
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
    if (!isOpen) {
      return;
    }
    // 首次打开时表格尚未挂载，等待挂载后再刷新
    await nextTick();
    if (typeof gridApi.grid?.commitProxy === 'function') {
      await gridApi.query();
    }
  },

 src/views/wls/barcode/data.ts

@@ -21,7 +21,7 @@
import { DvMachinerySelect } from '#/views/mes/dv/machinery/components';
import { MdClientSelect } from '#/views/mes/md/client/components';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import {
  MdWorkshopSelect,
  MdWorkstationSelect,
@@ -262,7 +262,7 @@
    {
      fieldName: 'bizId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        onChange: (item: any) => syncBizDetail(formApi, item),
      },

 src/views/wls/batch/data.ts

@@ -13,7 +13,7 @@
import { getRangePickerDefaultProps } from '#/utils';
import { MdClientSelect } from '#/views/mes/md/client/components';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import { MdWorkstationSelect } from '#/views/mes/md/workstation/components';
import { ProTaskSelect } from '#/views/mes/pro/task/components';
import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components';
@@ -42,7 +42,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },

 src/views/wls/itemreceipt/data.ts

@@ -19,7 +19,7 @@
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { getRangePickerDefaultProps } from '#/utils';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { ErpSupplierSelect } from '#/views/erp/purchase/supplier/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import {
  WmArrivalNoticeLineSelect,
  WmArrivalNoticeSelect,
@@ -132,7 +132,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(ErpSupplierSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
        onChange: async (supplier?: any) => {
@@ -193,7 +193,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(ErpSupplierSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },
@@ -458,7 +458,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/materialstock/components/stock-adjust-modal.vue

@@ -20,7 +20,7 @@
} from '#/api/mes/wm/materialstock';
import { getItem } from '#/api/mdm/item';
import { MdmItemSelect } from '#/views/basicData/mdm/components';
import { ErpSupplierSelect } from '#/views/erp/purchase/supplier/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import BatchConfigDisplay from './batch-config-display.vue';
import {
  WmWarehouseAreaSelect,
@@ -297,7 +297,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(ErpSupplierSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },

 src/views/wls/miscissue/data.ts

@@ -316,7 +316,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/outsourceissue/data.ts

@@ -20,7 +20,7 @@
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { getRangePickerDefaultProps } from '#/utils';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components';
import { WmMaterialStockSelect } from '#/views/wls/materialstock/components';
import {
@@ -120,7 +120,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },
@@ -162,7 +162,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },
@@ -360,7 +360,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/outsourcereceipt/data.ts

@@ -21,7 +21,7 @@
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { getRangePickerDefaultProps } from '#/utils';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components';
import {
  WmWarehouseAreaSelect,
@@ -110,7 +110,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },
@@ -172,7 +172,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },
@@ -433,7 +433,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/packages/data.ts

@@ -543,7 +543,7 @@
    },
    {
      title: '操作',
      width: 120,
      width: 160,
      fixed: 'right',
      slots: { default: 'actions' },
    },

 src/views/wls/productissue/data.ts

@@ -393,7 +393,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/productreceipt/data.ts

@@ -364,7 +364,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/productsales/data.ts

@@ -593,7 +593,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/returnissue/data.ts

@@ -470,7 +470,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/returnsales/data.ts

@@ -483,7 +483,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/returnvendor/data.ts

@@ -13,7 +13,7 @@

import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { MdVendorSelect } from '#/views/mes/md/vendor/components';
import { SrmSupplierSelect } from '#/views/srm/supplier/components';
import { ErpPurchaseOrderSelect } from '#/views/erp/purchase/order/components';
import { WmBatchSelect } from '#/views/wls/batch/components';
import { WmMaterialStockSelect } from '#/views/wls/materialstock/components';
@@ -113,7 +113,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
        disabled: true,
@@ -123,7 +123,7 @@
        componentProps: (values) => ({
          placeholder: '请选择供应商',
          disabled: true,
          vendorName: values.vendorName as string,
          supplierName: values.vendorName as string,
        }),
      },
      rules: 'selectRequired',
@@ -213,7 +213,7 @@
    {
      fieldName: 'vendorId',
      label: '供应商',
      component: markRaw(MdVendorSelect),
      component: markRaw(SrmSupplierSelect),
      componentProps: {
        placeholder: '请选择供应商',
      },
@@ -429,7 +429,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/salesnotice/data.ts

@@ -340,7 +340,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/stocktaking/plan/data.ts

@@ -336,7 +336,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wls/transfer/data.ts

@@ -562,7 +562,7 @@
      ? [
          {
            title: '操作',
            width: 120,
            width: 160,
            fixed: 'right',
            slots: { default: 'actions' },
          } as const,

 src/views/wms/md/item/data.ts

@@ -164,7 +164,7 @@
    {
      field: 'actions',
      title: '操作',
      width: 120,
      width: 160,
      fixed: 'right',
      slots: { default: 'actions' },
    },