tntd

简介(tntd)

tntd是同盾前端UED部门，基于特定业务场景开发的一套业务场景组件。

功能特性

• Layout, UED部门统一的外框架组件，包含头整体页面布局、头部导航、菜单
• QueryListScene, 查询列表页，主要适用场景是表单查询 + Table页面及组件，包含了数据管理，通用逻辑处理如： 分页、查询、重置、表单内容自适应展开、收缩、Loading、轮询等

环境依赖

• nodejs、npm
• React、antd

安装

• npm install tntd --save

运行DEMO

• npm install
• npm run start

目录结构

.
├── components(组件源码)
|   ├── layout
|   └── querylistscene
├── lib(babel编译后的代码)
|   ├── layout
|   └── querylistscene
├── babel.config.js
├── package.json
└── README.md

使用

import ReactDOM from 'react-dom';
import { QueryListScene, Layout } from 'tntd';

const { QueryForm, Field, QueryList } = QueryListScene;
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 60
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        sorter: (a, b) => a.name > b.name
    }
];
const query = params => {
    return new Promise(resolve => {
        resolve([
            { id: 1, name: 'xxx' },
            { id: 2, name: 'yyy' }
        ])
    })
};

ReactDOM.render(
     <Layout
        logo=""
        name="应用名称"
        enName="Application English Name"
        userInfo={{}}
        menus={[]}
        onMenuChange={onMenuChange}
        onMenuSelect={onMenuSelect}
        onLanguageChange={onLanguageChange}
        onThemeChange={onThemeChange}
        onAppChange={onAppChange}
    >
        <QueryListScene query={query} title="查询列表页">
            <QueryForm>
                <Field type="string" name="name" props={{ placeholder: "名称" }} />
                <Field type="date" name="date" />
                <Field
                    type="select"
                    name="select"
                    props={{
                        placeholder: '状态',
                        options: ['初始化', '运行中', '成功', '失败']
                    }}
                />
            </QueryForm>
            <QueryList columns={columns} />
        </QueryListScene>
    </Layout>,
    document.getElementById('root')
)