storybook

ducoment: https://storybook.js.org/basics/introduction/

knobs: https://github.com/storybooks/storybook/tree/release/3.4/addons/knobs

readme: https://github.com/tuchk4/storybook-readme

e-widget

e+业务组件库

组件列表

• e-form
• e-icon
• e-img
• e-menu
• e-layout
• e-modal
• e-table
• e-search-form
• e-title-bar
• e-float
• e-helmet
• e-logo-page-header
• e-steps
• e-header-radio-group
• e-empty

组件

表单，API 参考链接 antd-form

e-from create() 使用方法：

import {EForm} "@kad/e-widget/lib/components/index";

@EForm.create()
export default class COMPONENT extends React.Component{
	// ...
}

经过 Form.create 包装的组件将会自带 this.props.form 属性

可接收items作为表单字段；

import {EForm} "@kad/e-widget/lib/components/index";


const formLayout = {
	labelCol: {span: 4},
    wrapperCol: {span: 20}
}

// items
const items = [
    {
        id: 'Hospital',
        label: '医院',
        span: 24,
        component: Input,
        props: {placeholder: '医院', maxLength: 20},
        decorator: {
            rules: [
                {required: false, message: '医院不能为空'},
            ]
        },
        {...formLayout}
    }
]

...
<EForm {...others} items={items}></EForm>

结合阿里图标库，显示icon图标

使用方法：

import {EIcon} "@kad/e-widget/lib/components/index";

// 角色管理图标 icon-jiaoseguanli，省略 icon- 字符
<EIcon icon="jiaoseguanli"/>

替代img标签

使用方法：

import {EImg} from "@kad/e-widget/lib/components/index";
import images from "./images/index"; //当前目录images文件夹下使用index导出图片

<EImg width="240" height="140" src={images.shangcheng}/>

左侧菜单内容显示

结合ELayout,通过调用EMenu.LayoutSider布局左侧菜单栏

使用方法：

import ELayout from "@kad/e-widget/lib/components/e-layout/index";
import {EMenu} from '@kad/e-widget/lib/components';

const menus = [
    {
        name: `帮助中心`,
        key: `menu`,
        icon: '',
        href: '#',
        items: [
            {
                name: `e药房业务指引`,
                key: 'guide',
                icon: '',
                href: ''
            }
        ]
    }
]

<ELayout>
	<EMenu.LayoutSider>
    	<EMenu menus=menus onClick={HANDLEEVENT} />
    </EMenu.LayoutSider>
</ELayout>

参考例子 portal/help

页面整体布局组件如下

ELayout.Header = Header;
ELayout.Footer = Footer;
ELayout.Sider = Sider;
ELayout.Content = Content;

封装了e+ 弹窗样式 API 参考链接

表格 API参考链接

使用方法：

import {ETable} from "@kad/e-widget/lib/components";

// 注意数据源格式为对象
const dataSource = {
	Rows:[{
	    key: '1',
	    mark: true,
	    gains: "+200",
	    gainsOrigin: "e药房",
	    gainsType: "订单收益",
	    status: "未确认",
	    createTime: "2014-5-5"
	}],
	Total:1
};

...
<ETable dataSource={dataSource} pagination={BOOLEAN} columns={COLUMS}/>

搜索表单，可切换普通搜索和高级搜索, 需要设置高级搜索部分的搜索条件

使用方法：

import {ESearchForm} from "@kad/e-widget/lib/components";
import SearchFormSelect from "../search-form-select";
...

	static defaultProps = {
        items: [
            {
                id: 'createTime',
                label: '创建时间',
                component: DatePicker.RangePicker,
            },
	        {
                id: 'LoginName',
                label: '登录账户',
                component: Input,
                decorator: {},
                props: {placeholder: "请输入登录账号", maxLength: 20}
            },
            {
                id: "status",
                label: "状态",
                component: SearchFormSelect,
                props:{options: selectOptions.status || []}
            }
        ]
    };

    render(){
        return(
            <ESearchForm {...this.props}/>
        );
    }
...

参考 account/container/manage

内容部分头部统一样式

使用方法：

import {ETitleBar} from "@kad/e-widget/lib/components";
...

<ETitleBar title="账号管理">
    <Button icon="plus-circle-o" type="primary" onClick={this.handleAddAccount}>新增营业员账户</Button>
</ETitleBar>

参考 account/container/manage/EButton.stories.js

设置左右浮动的元素，

使用方法：

import {EFloat} from "@kad/e-widget/lib/components";

<EFloat.Left className={styles.listHeaderLeft}>              
    <Checkbox onChange={this.handleChange}>仅显示有货</Checkbox>               
</EFloat.Left>

源码：

...
const Left = ({className, children, ...others}) => {
    return (
        <div className={classnames(styles.left, className)} {...others}>{children}</div>
    )
};
...

设置title标签内容

使用方法：

import {EHelmet} from "@kad/e-widget/lib/components";

const title= titlenames('营销报表','e药房');

...
	<EHelmet title={title}/>
...

e+logo

参考 store/order/head/EButton.stories.js

步骤条， 参考API

单选按钮列表，改了点样式而已，参考API

无数据或消息时的空白提示页

import {EEmpty} from "@kad/e-widget/lib/components";

...
	<EEmpty size="middle" type="message" remark="消息为空">
	    <Button>button</Button>
	</EEmpty>
...