96 lines
2.7 KiB
Markdown
96 lines
2.7 KiB
Markdown
|
---
|
|||
|
|
name: jjb-interpolation-examples
|
|||
|
|
description: 定义 JJB 接口动态文本配置使用示例。在实现表格列、表单标签、页面文本、页面标题动态配置时查阅。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 接口动态文本配置
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
- **表格列动态配置**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Table } from 'antd';
|
|||
|
|
import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
|
|||
|
|
|
|||
|
|
function UserList({ columns, dataSource }) {
|
|||
|
|
// 定义列配置，使用 fieldCode 标识需要动态配置的列
|
|||
|
|
const tableColumns = columns([
|
|||
|
|
{ fieldCode: 'reslib-app-resourceManagement-userName', dataIndex: 'name', width: 200 },
|
|||
|
|
{ fieldCode: 'reslib-app-resourceManagement-email', dataIndex: 'email', width: 200 },
|
|||
|
|
{ fieldCode: 'reslib-app-resourceManagement-phone', dataIndex: 'phone', width: 150 },
|
|||
|
|
{ dataIndex: 'createTime', title: '创建时间', width: 180 } // 无 fieldCode，使用固定标题
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
return <Table columns={tableColumns} dataSource={dataSource} />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Interpolation(UserList);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **表单字段标签动态配置**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Form, Input } from 'antd';
|
|||
|
|
import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
|
|||
|
|
|
|||
|
|
function UserForm({ insert }) {
|
|||
|
|
return (
|
|||
|
|
<Form>
|
|||
|
|
<Form.Item label={insert('reslib-app-resourceManagement-userName') || '用户名'}>
|
|||
|
|
<Input />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label={insert('reslib-app-resourceManagement-email') || '电子邮箱'}>
|
|||
|
|
<Input />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Interpolation(UserForm);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **页面文本动态配置**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
|
|||
|
|
|
|||
|
|
function UserDetail({ insert }) {
|
|||
|
|
const userNameLabel = insert('reslib-app-resourceManagement-userName') || '用户名';
|
|||
|
|
const emailLabel = insert('reslib-app-resourceManagement-email') || '电子邮箱';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div>{userNameLabel}: 张三</div>
|
|||
|
|
<div>{emailLabel}: zhangsan@example.com</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Interpolation(UserDetail);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **页面标题动态配置**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import React from 'react';
|
|||
|
|
import { PageLayout } from '@cqsjjb/jjb-react-admin-component';
|
|||
|
|
import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
|
|||
|
|
|
|||
|
|
function UserList({ insert }) {
|
|||
|
|
// 获取页面默认标题（可选，不是必须的）
|
|||
|
|
const pageTitle = insert('DEFAULT_MENU') || '用户列表';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<PageLayout title={pageTitle}>
|
|||
|
|
{/* 页面内容 */}
|
|||
|
|
</PageLayout>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Interpolation(UserList);
|
|||
|
|
```
|