@cherdinand/e-widget

    3.0.22 • Public • Published

    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>
    ...
    

    Keywords

    none

    Install

    npm i @cherdinand/e-widget

    DownloadsWeekly Downloads

    1

    Version

    3.0.22

    License

    none

    Unpacked Size

    548 kB

    Total Files

    177

    Last publish

    Collaborators

    • cherdinand