antDesignPro6: サプライチェーンシステムプロジェクト - 現実的な問題と解決策の概要

システムで使用されているテクノロジー: antDesignPro6 + Umi4 + antDesign + antDesignProComponents + その他のテクノロジー

1. ModalForm コンポーネントが破棄されたときにフォームを自動的にリセットするように設定するにはどうすればよいですか?

modalProps={ { destroyOnClose: true }} // フォームをリセット

回答: modalProps 属性を ModalForm コンポーネントに追加し、 destroyOnClose を true に設定します。または、親コンポーネントで、{ showChild && <Child />} などの論理フォームを使用して子コンポーネントを動的に表示および非表示にします。これにより、ポップアップボックスが自動的に閉じられ、フォームがクリアされます。

2. タイトルと列の内容が折り返されずに 1 行に直接表示されるように ProTable テーブルコンポーネントを設定するにはどうすればよいですか?

scroll={ { x: 'max-content' }} // [注意して使用してください] 注: この属性を設定すると、列に設定された幅と省略記号の属性は無効になります。！！また、垂直方向の最大スクロール距離 y を設定すると、列数が多いと x 方向が混乱する可能性があります。

小さな拡張機能: 最大幅と高さ (これを超えるとスクロールバーが自動的に表示されます) をscroll={ { x: 1300, y: 500 }} に設定し、各列の幅を次のような固定値に設定できます。 100、省略記号を設定した後にのみ有効になります。

3. モーダルで確認コンポーネントを使用すると、ポップアップボックスの [OK] ボタンと [キャンセル] ボタンのテキストが英語の [OK] および [キャンセル] テキストで表示されることがあります。

回答: okText : "OK" とcancelText : "Cancel"を設定するだけで、これら 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

公式 Web サイトのドキュメントのデータピッカーコンポーネントの参考スクリーンショット

4. システムの左側のメニューを切り替えるとき、中央のコンテンツ表示領域の背景には読み込み効果がありません。

回答:プロジェクトの 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ファイルで、定義フィールドを設定するだけです。

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 の検索フォーム全体 (クエリリセットボタンを含む) を非表示にするにはどうすればよいですか?

検索={false}

9. カスタムプレースホルダーの設定など、ProTable で検索フォームボックスのプロパティを設定するにはどうすればよいですか?

回答: 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 の字幕やその他の情報を設定するにはどうすればよいですか?

回答: ツールバーオブジェクトのプロパティを設定するだけです。公式ウェブサイトのドキュメント: 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 の特定の列フィールドが金額の場合、自動的に千の区切りを追加して中国語の金額記号 ¥ を表示するにはどうすればよいですか?

回答:列配列内のフィールドのValueType属性値を設定するだけです。具体的な参照: https://procomponents.ant.design/components/schema#valuetype

valueType: Money // 数値に 1,000 の区切り文字を自動的に追加し、金額記号 ¥ を表示します (注: デフォルトでは小数点以下 2 桁が保持されます)

参考リンク:

初めての ProTable | 初期使用 | 「Ant Design Pro 5」 | F2E フロントエンド技術フォーラム