antDesignPro6：供应链系统项目-实战问题&解决汇总

系统使用的技术：antDesignPro6 + Umi4 + antDesign + antDesignProComponents + 其他技术

1、如何设置ModalForm组件，销毁时，自动重置表单？

modalProps={ { destroyOnClose: true }} // 重置表单

答：给ModalForm组件添加modalProps属性，设置destroyOnClose为true即可。或者在父组件中，通过逻辑表单时来动态显示隐藏子组件如：{ showChild && <Child />} 也会自动关闭弹框时，清空表单。

2、如何设置ProTable表格组件，标题&列内容直接在一行上显示完，不要换行显示？

scroll={ { x: 'max-content' }} // 【慎用】注意：一旦设置该属性后，列中设置的width和ellipsis属性都将失效！！！而且一旦设置竖直方向的最大滚动距离y，如果列很多，x方向也可能错乱了。

小扩展：可通过设置 scroll={ { x: 1300, y: 500 }} 最大宽度&高度（超过将自动出现滚动条），然后设置每列width为固定值，如width：100，设置ellipsis才会生效。

3、使用Modal中的confirm组件，偶现：弹框的确定和取消按钮文本，显示为英文的OK和Cancel文本。

答：设置 okText: "确定" 和 cancelText: "取消", 这2个属性即可。其他未尝试的可能解决方法（移除国际化）：执行npm run i18n-remove。或者其他方式参考：https://umijs.org/docs/max/i18n#useintl-%E8%8E%B7%E5%8F%96-intl-%E5%AF%B9%E8%B1%A1

4、切换系统左侧菜单时，中间内容显示区的背景，没有任何loading效果。

答：在项目src目录下新建loading.tsx文件即可。

// loading.tsx文件

import { PageLoading } from '@ant-design/pro-components';

export default () => {
  return <PageLoading />;
};

5、如何设置proTable某列不要在列设置下拉框中显示。

答：列配置中添加hideInSetting: true即可。

列设置按钮

6、给antd的Button组件添加ref属性，如何声明类型防止ts校验报错？

import { useRef } from 'react';
const uploadBtnRef = useRef<HTMLButtonElement>(null);
<Button ref={uploadBtnRef} icon={<UploadOutlined />}>
上传
</Button>

7、如何设置全局的变量，直接在页面中使用？

注意：如果是多环境，环境变量随当前运行环境而动态修改，需通过指定 UMI_ENV 环境变量来自动区分不同环境变量的取值，具体参考：环境变量 - Ant Design Pro

process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。

答：在项目根目录下的config/config.ts文件中，配置define字段即可。

export default defineConfig({
    define: {
     'process.env': {
       APP_HOST_ACCESS: 'http://xxx/xxxx',
       APP_HOST_WAYBILL: 'http://xxxx/xxx',
    },
  },
}}

xx.tsx页面中使用环境变量：

export default function AddProject() {
    console.log(process.env.APP_HOST_ACCESS) // http://xxx/xxxx
}

其他扩展（待确认）：在项目的根目录下新建.env-cmdrc文件，可实现：根据执行的构建命令，动态读取不同环境下的变量值。 -- 目前只在构建打包时才生效，如果在开发环境中生效，需要额外安装dotenv库?

参考：env-cmd: 从文件设置环境 - 我爱学习网

# .env-cmdrc: 应用的环境变量配置文件（包含如：test、mock和product环境，环境名可自定义）
{
  "test": {
    "APP_BASE": "/xxx/test/",
  },
  "mock": {
    "APP_BASE": "/xxx/mock/"
  },
  "product": {
    "APP_BASE": "/xxx/product/"
 }
}

在package.json文件中：

package.json: 通过env-cmd读取.env-cmdrc文件中声明的不同环境变量

8、如何设置ProTable的整个搜索表单（包含查询重置按钮）都不要显示？

search={false}

9、如何设置ProTable中某个搜索表单框的属性，如设置自定义的placeholder？

答：通过 fieldProps 属性配置即可。

{
  title: '模糊搜索框',
  dataIndex: 'keywords',
  hideInTable: true, // 表格中隐藏
  key: 'keywords',
  fieldProps: {
    placeholder: '请输入用户编码、用户账户、姓名/企业名',
  },
},

{
  title: '注册时间',
  valueType: 'dateTimeRange',
  dataIndex: 'reconcileTime',
  key: 'reconcileTime',
  fieldProps: {
    placeholder: ['开始时间', '结束时间']
  },
},

10、如何设置某个路由页面不要在系统左侧菜单中显示？

答：在路由配置中添加 hideInMenu: true 即可。

{
  path: '/businessManagement/ActionDetail',
  name: 'xx页面',
  hideInMenu: true, // 隐藏菜单显示
  component: './BusinessManagement/Rent/components/ActionDetail',
},

11、如何设置ProTable中某个搜索表单框的宽度？

答：在列配置中添加 colSize 属性即可。

{
  title: '注册时间',
  valueType: 'dateTimeRange',
  dataIndex: 'reconcileTime',
  key: 'reconcileTime',
  colSize: 1.2, // 设置表单框宽度
  search: {
    // 自动将绑定的时间数组，拆分成2个字段，方便传参给后台
    transform: (value: string[]) => ({ beginDate: value[0], endDate: value[1] }),
  },
},

12、如何设置ProTable的子标题等信息？

答：设置 toolbar 对象属性即可。官网文档：https://procomponents.ant.design/components/table#listtoolbarprops

<ProTable<DeliveryBillItem>
  columns={columns}
  actionRef={tableRef}
  rowKey="id"
  // headerTitle="运单列表" // 设置表格标题
  toolbar={
   
   {
    title: '运单列表', // 设置表格标题，优先级比headerTitle高
    subTitle: '提示：未对账运单，可以勾选并批量删除', // 设置子标题
    ... // 其他设置
  }}
/>

13、如何手动触发表单的校验？

答：通过表单实例提供的validateFields方法。注意：该方法返回的是Promise，.then是校验通过，.catch是校验不通过。

// 触发某个字段的校验, 数组中添加要校验的表单字段名即可(可配置多个)
formRef?.current?.validateFields(['xxx'])

// 触发整个表单的校验
formRef?.current?.validateFields()

// Form组件
<Form ref={formRef}></Form>

14、如何设置ProTable首次请求列表时，需先等到默认初始条件请求&设置完后，再请求列表？

答：设置ProTable的manualRequest属性为true即可。

15、如何设置ProTable可跨页勾选？

答：设置preserveSelectedRowKeys属性为true即可。

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (_selectedRowKeys, selectedRows) => { ... },
  getCheckboxProps: (record: DeliveryBillItem) => ({
    // 设置部分行不能勾选
    disabled: record.relateType === 2, // Column configuration not to be checked
  }),
  preserveSelectedRowKeys: true, // 跨页保留之前勾选项
};


<ProTable
  rowSelection={
   
   { ...rowSelection }}
/>

16、ProTable中某列字段为金额，如何自动添加千位分隔符并显示中文的金额符号¥？

答：通过设置columns数组中该字段的ValueType属性值即可。具体参考：https://procomponents.ant.design/components/schema#valuetype

valueType：money // 自动将一个数字添加千位分隔符并显示金额符号¥ （注意：默认保留2位小数）

参考链接：

第一个 ProTable | 初步使用 |《Ant Design Pro 5》| F2E 前端技术论坛