0.3.1 • Published 7 months ago
eah v0.3.1
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;
},
},
},
]
}
},
]
}
0.3.1
7 months ago
0.3.0
10 months ago
0.2.9
10 months ago
0.2.7
1 year ago
0.2.6
1 year ago
0.2.8
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.4
2 years ago
0.1.5
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago