EAH = Eat All Hurry = 吃掉所有的忙碌

解放前端生产力工具

Usage

npm i eah -S

FEAT

已适配pc 移动端

数据驱动

需要配合 eah-mh

可以在vscode搜索EAH扩展 根据ts一键生成表单/列表页面

import {injectComp, setFeat} from 'eah'
import convertComp from 'eah-mh';
import * as antdComp from 'antd';

injectComp({
    ...convertComp(antdComp, 'antd'),
    CitySelect
})

//异步方式
injectComp(Promise.resolve({
    CompOverload: (props) => {
        return (
            <>
                overLoad....
            </>
        )
    }
}))

examples

easy form

config.ts

export default {
    items: [
        {
            attr:'attr0',
            name:'属性1',
            default: 'foo'
        },
        {
            attr:'attr1',
            name:'属性2'
        },
        {
            attr:'attr2',
            name:'属性3'
        },
       
    ],
    onSubmit(params:any) {
        console.log(params)
        return Promise.resolve()
    }
}

complex form

index.tsx

import React, { useState, useEffect } from 'react';
import config from './config'
import {Editor} from 'eah'



export default () => {
    return (
       <main>
            <Editor {...config}/>
       </main>
    )
}

complex form

contfig.ts

export default ({disabled}:any): FormConfig=> ({
    items: [
        {
            attr: 'attr1',
            name: '含校验',
            compName: 'Input',
            required:'',
            props: {
                disabled
            }
        },
        {
            attr: 'attr2',
            name: '选项',
            compName: 'Radio',
            props: {
                options:  [
                    { label: 'show', value: '1' },
                    { label: 'hide', value: '2' },
                  ]
            }
        },
        {
            attr: 'attr3',
            name: '名称2',
            default:'1',
            compName: 'Select',
            link: {
                attr2: (v, self, data) => {
                    self.isHide = v == '2'
                    return self
                }
            },
            props: {
                options: [
                    {value:'1', label:'all'}
                ],
                disabled
            }
        },
        {
            attr: 'attr4',
            name: '混合组件',
            style:{alignItems:'flex-start'},
            compName: 'MapComp',
            props: {
                disabled
            }
        },
        {
            attr: ['begin', 'end'],
            name: '时间段',
            compName: 'DateRangePicker',
            props: {
                disabled
            }
        }
    ],
    onSubmit(params:any) {
        console.log(params)
        return Promise.resolve()
    }
})

index.tsx

import React, { useState, useEffect } from 'react';
import config from './config'
import {Editor} from 'eah'
import MyMapItem from './comp/MapItem'
import {Button} from 'antd'


const _editData = {
    attr1: 'zzj',
    attr4: [{price:111}]
}



export default () => {
    const [editData, setEditData] = useState({});
    const [disabled, setDisabled] = useState(false)




    return (
       <main>
            <Button onClick={_=>setDisabled(!disabled)}>disable</Button>
            <Button onClick={_=>setEditData(_editData)}>edit</Button>
            <Editor {...config({disabled})} extendComp={{MyMapItem}} editData={editData}/>
       </main>
    )
}

map comp

config.ts

export default {
    mapItem: {
        items: [
            {
                attr: 'time',
                name: '时间',
                default: '',
                compName: 'TimePicker'
            },
            {
                attr: 'price',
                name: '金额'
            }
        ],
    }
}

index.tsx

import React,{useRef, useEffect, useState} from 'react';
import config from './config'
import {ListItem} from 'eah'


export default ({disabled, value, onChange}:any) => {
  return <ListItem {...config({disabled})} value={value} onChange={onChange} />
}

complex lister

config.ts

const  selectable = {
    operations: [{
        name:'批量',
        func:(keys, records) => {
            return Promise.resolve()
        },
        // checkDisable: (keys, records) => {
        //     return true
        // }
    }]
}


export default {
    filter: {
        items: [
            {
                attr: 'field1',
                name: '字段1',
                default: 'foo'
            },
            {
                attr: 'field2',
                name: '字段2',
            },
            {
                attr: ['begin', 'end'],
                name: '时间',
                compName: 'DateRangePicker'
            }
        ],
        appendActs: [
            {name:'test', func({dataInput}) {
                console.log(dataInput)
            }}
        ]
    },
    service(params) {
        console.log(params)
        return new Promise(resolve=>{
            setTimeout(() => {
                resolve({data: {list: Array.from(new Array(10)).map((_,i) => {
                    return {id:i, key:i, time:'2020-12-12'}
                }) ,total:100}})
            }, 600);
        })
    },
    cols: [
        {title: "ID", dataIndex:'id'},
        {title: "Time", dataIndex:'time'},
        {
            title: "操作", 
            operations: [
                {name:'view', func:record=>location.href= './demo/view?id='+record.id},
                {name:'edit', vis:record=>record.id>1, func:record=>location.href= './demo/edit?id='+record.id},
                {
                    name: 'del', 
                    confirm: (record, doQry) => ({
                        content: `确定删除${record.id}?`,
                        onOk() {
                            doQry()
                        }
                    })
                }
            ],
        }
    ],
    selectable,
    operations: [
        {name:'简单表单', func:_=>location.href= './demo/quickForm'},
        {name:'复杂表单', func:_=>location.href= './demo/form'},
        {name:'log', func({getCurQryParams}) {
            console.log(getCurQryParams())
        }},
    ],
    page: {
        pageNum: 1,
        pageSize: 20
    }
}

index.tsx

import React from 'react';
import {Lister} from 'eah';
import config from './config'



export default () => {
    return (
      <Lister {...config}/>
    )
};

slot

const {Filter, Desc, Operations} = Lister;

export default () => {
  return (
    <Lister {...config}>
      <Filter.Operations>
        {
          ({dataInput, doSubmit, reset}) => (
            <>
               <a onClick={doSubmit}>submit</a>
               <a onClick={reset}>reset</a>
            </> 
          )
        }
      </Filter.Operations>
      <Desc>foo</Desc>
      <Operations right>
          <Button>bar</Button>
      </Operations>
    </Lister>
  );
};

lazyProps & subField & MapItem + link

const lazyOptions = Promise.resolve({options: [{label:'foo', value:1}]});

const config = {
  items: [
      {
        attr: "lazyChoose",
        name: "选项",
        compName: 'Select',
        props:{
          lazy:lazyOptions
        }
      },
      {
          attr:'parentField',
          isHide: true,
          default: {}
      }
      {
        attr: "parentField.childField",
        name: "金额",
        compName:'InputNumber'
      },
      {
        attr: "mixItem",
        name: "复合选项",
        compName:'MapItem',
        props: {
            classNameSpace:'inline-config',
            items: [
                {
                    attr: 'foo',
                    compName:'Radio',
                    props: {
                         options: [
                            { label: "是", value: 1 },
                            { label: "否", value: 0 },
                        ]
                    }
                },
                {
                  attr: 'bar',
                  isHide: true,
                  link: {
                    foo: (v: any, self: any, data) => {
                      self.isHide = !v;
                      return self;
                    },
                  },
                },
                
            ]
        }
      },
  ]
}