2.7 KiB

Raw Blame History

name	description
jjb-interpolation-examples	定义 JJB 接口动态文本配置使用示例。在实现表格列、表单标签、页面文本、页面标题动态配置时查阅。

接口动态文本配置

使用示例

表格列动态配置：

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);

表单字段标签动态配置：

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);

页面文本动态配置：

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);

页面标题动态配置：

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);

2.7 KiB Raw Blame History Unescape Escape

接口动态文本配置

使用示例

2.7 KiB

Raw Blame History