@cherdinand/e-widget

e+ widget project

Usage no npm install needed!

<script type="module">
  import cherdinandEWidget from 'https://cdn.skypack.dev/@cherdinand/e-widget';
</script>

README

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

表单，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>

e-icon

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

使用方法：

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

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

e-img

替代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}/>

e-menu

左侧菜单内容显示

结合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

e-layout

页面整体布局组件如下

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

e-modal

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

e-table

表格 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}/>

e-search-form

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

使用方法：

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

e-title-bar

内容部分头部统一样式

使用方法：

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

e-float

设置左右浮动的元素，

使用方法：

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

e-helmet

设置title标签内容

使用方法：

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

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

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

e-logo-page-header

e+logo

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

e-steps

步骤条， 参考API

e-header-radio-group

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

e-empty

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

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

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