Nonviolent Pigeon Manifestation

    tntd

    1.3.63 • Public • Published

    简介(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')
    )

    Install

    npm i tntd

    DownloadsWeekly Downloads

    31

    Version

    1.3.63

    License

    ISC

    Unpacked Size

    2.96 MB

    Total Files

    306

    Last publish

    Collaborators

    • xiaofei.wang
    • zhouzefei
    • bruceliu68
    • mizy
    • bernardzhang
    • td-tnt
    • xiaocuicui