From 0c6504448f30e9d51620a9d97cef16326ea4497b Mon Sep 17 00:00:00 2001 From: Barrior Date: Fri, 25 Oct 2024 16:23:08 +0800 Subject: [PATCH] docs: add SearchTable locale case --- examples/search-table-react/700-locale.md | 87 +++++++++++++++++++ .../search-table-react/helpers/columns-en.ts | 71 +++++++++++++++ .../helpers/createDataSource-en.ts | 33 +++++++ .../search-table-react/helpers/schema-en.ts | 71 +++++++++++++++ 4 files changed, 262 insertions(+) create mode 100644 examples/search-table-react/700-locale.md create mode 100644 examples/search-table-react/helpers/columns-en.ts create mode 100644 examples/search-table-react/helpers/createDataSource-en.ts create mode 100644 examples/search-table-react/helpers/schema-en.ts diff --git a/examples/search-table-react/700-locale.md b/examples/search-table-react/700-locale.md new file mode 100644 index 0000000..d04e93b --- /dev/null +++ b/examples/search-table-react/700-locale.md @@ -0,0 +1,87 @@ +--- +order: 700 +toc: content +--- + +# 国际化 locale + +`SearchTable` 默认文案是中文，如果需要使用其他语言，只需配置 `locale` 覆盖默认的语言，示例如下。 + +```tsx +/** + * defaultShowCode: true + */ +import schemaEn from './helpers/schema-en' +import columnsEn from './helpers/columns-en' +import createDataSourceEn from './helpers/createDataSource-en' +import SearchTable from '@schema-render/search-table-react' +import { sleep } from '@examples/utils' + +// 引入英文语言包 +import enUS from '@schema-render/search-table-react/dist/esm/locale/en_US' + +const Demo = () => { + return ( + [ + { text: 'Edit' }, + { text: 'View' }, + { text: 'Delete', danger: true }, + ], + actionItemsColumnData: { + width: 150, + }, + summaryText: 'Total', + }} + request={async (searchParams) => { + // 模拟请求接口获取表格数据 + await sleep() + const data = createDataSourceEn(searchParams.pageSize) + + // 计算商品合计总价 + const totalPrice = data + .reduce((total, item) => total + item.goods_price, 0) + .toFixed(2) + + // 返回表格数据渲染 + return { + // 表格数据 + data, + // 数据总数，用于分页 + total: 100, + // 合计栏数据 + summaryData: { + // 对应「商品价格」 + goods_price: totalPrice, + }, + } + }} + /> + ) +} + +export default Demo +``` + +目前支持以下语言： + +| **语言** | **文件名** | +| -------- | ---------- | +| 中文 | zh_CN | +| 英文 | en_US | + +- 如果找不到你需要的语言包，欢迎参考 [中文语言包](https://github.com/Barrior/schema-render/tree/main/packages/search-table-react/src/locale/zh_CN.ts) 创建一个新的语言包，并给我们发一个 Pull Request。 +- 或者配置相同的语言包数据格式传值给 `locale` 属性。 diff --git a/examples/search-table-react/helpers/columns-en.ts b/examples/search-table-react/helpers/columns-en.ts new file mode 100644 index 0000000..0fb3396 --- /dev/null +++ b/examples/search-table-react/helpers/columns-en.ts @@ -0,0 +1,71 @@ +import type { IColumnType } from '@schema-render/search-table-react' + +const columns: IColumnType[] = [ + { + title: 'Supplier Name', + dataIndex: 'supplier_name', + width: 150, + fixed: 'left', + }, + { + title: 'Supplier Code', + dataIndex: 'supplier_code', + width: 150, + }, + { + title: 'Description', + dataIndex: 'description', + valueType: () => ({ + type: 'long-text-modal', + maxLength: 20, + }), + }, + { + title: 'Bill No', + dataIndex: 'bill_no', + width: 130, + }, + { + title: 'Bill Type', + dataIndex: 'bill_type', + }, + { + title: 'Bill Date', + dataIndex: 'bill_date', + width: 120, + }, + { + title: 'Bill Status', + dataIndex: 'bill_status', + }, + { + title: 'Operator', + dataIndex: 'operator', + }, + { + title: 'Goods Name', + dataIndex: 'goods_name', + width: 130, + }, + { + title: 'Goods Price', + dataIndex: 'goods_price', + }, + { + title: 'Goods Code', + dataIndex: 'goods_code', + width: 130, + }, + { + title: 'Goods Category', + dataIndex: 'goods_category', + }, + { + title: 'Goods Date', + dataIndex: 'goods_date', + width: 120, + fixed: 'right', + }, +] + +export default columns diff --git a/examples/search-table-react/helpers/createDataSource-en.ts b/examples/search-table-react/helpers/createDataSource-en.ts new file mode 100644 index 0000000..fe0e64b --- /dev/null +++ b/examples/search-table-react/helpers/createDataSource-en.ts @@ -0,0 +1,33 @@ +import dayjs from 'dayjs' + +export default function createDataSourceEn(count = 10) { + const dataSource = [] + + for (let i = 0; i < count; i++) { + const random = String(Math.random()).slice(2, 6) + const goods_category = Math.random() > 0.5 ? 1 : 2 + const date = dayjs().format('DD/MM/YYYY HH:mm:ss') + const id = `id_${i}` + + dataSource.push({ + key: id, + id, + supplier_name: `${random} Co.,Ltd.`, + supplier_code: random, + bill_no: `B${Date.now()}`, + bill_type: Math.random() > 0.5 ? 'Purchase Order' : 'Return Order', + bill_date: date, + bill_status: Math.random() > 0.5 ? 'Submitted' : 'To be submitted', + operator: Math.random() > 0.5 ? 'Tom' : 'Lily', + goods_name: goods_category === 1 ? '10 red roses' : 'Live bass', + goods_code: `G${Date.now()}`, + goods_category: goods_category === 1 ? 'Fruits & Flowers' : 'Aquatic Products', + goods_date: date, + goods_price: goods_category === 1 ? 19.9 : 22.8, + description: + 'SearchTable is a conditional search table component based on the Search + Antd Table encapsulation; It is often used for data retrieval, display and operation of background management systems.', + }) + } + + return dataSource +} diff --git a/examples/search-table-react/helpers/schema-en.ts b/examples/search-table-react/helpers/schema-en.ts new file mode 100644 index 0000000..af95c3c --- /dev/null +++ b/examples/search-table-react/helpers/schema-en.ts @@ -0,0 +1,71 @@ +import type { IFormRenderRootSchema } from '@schema-render/form-render-react' + +// 定义 Schema +const schema: IFormRenderRootSchema = { + renderType: 'Root', + properties: { + supplier_name: { + title: 'Supplier Name', + renderType: 'InputText', + }, + supplier_code: { + title: 'Supplier Code', + renderType: 'InputText', + }, + bill_no: { + title: 'Bill No', + renderType: 'InputText', + }, + bill_type: { + title: 'Bill Type', + renderType: 'Select', + renderOptions: { + options: [ + { label: 'Purchase Order', value: 1 }, + { label: 'Inbound Order', value: 2 }, + { label: 'Return Order', value: 3 }, + ], + }, + }, + bill_date: { + title: 'Bill Date', + renderType: 'DateRangePicker', + }, + bill_status: { + title: 'Bill Status', + renderType: 'Select', + renderOptions: { + options: [ + { label: 'submitted', value: 1 }, + { label: 'pending submit', value: 2 }, + { label: 'pending approval', value: 3 }, + ], + }, + }, + operator: { + title: 'Operator', + renderType: 'InputText', + }, + goods_name: { + title: 'Goods Name', + renderType: 'InputText', + }, + goods_code: { + title: 'Goods Code', + renderType: 'InputText', + }, + goods_category: { + title: 'Goods Category', + renderType: 'Select', + renderOptions: { + options: [ + { label: 'Fruits & Flowers', value: 1 }, + { label: 'Aquatic Products', value: 2 }, + { label: 'Grains & Oils & Seasoning', value: 3 }, + ], + }, + }, + }, +} + +export default schema