estone-ui
v1.0.17
Published
EStone UI
Downloads
4
Readme
安装
npm install estone-ui引入样式
import { EModal, EInfoGroup, EDrawer, HView } from "estone-ui";参考组件库
| 组件库 | 说明 | | ----------------------------------------- | ------------------------------------------ | | Ant Design | 服务于企业级产品的设计体系(本项目样式参考) |
引用示例
高阶组件
查询 STable
import { HView } from "estone-ui";
const {STable} = HView;| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | conditions | 查询条件,具体配置项conditions | List | | | showLabel | 展示label | Boolean | true | | theme | 主题色 | dark 、 light 、 none | dark | | init | 初始查询 | Boolean | false | | loading | 加载状态 | Boolean | false | | collapseCount | 查询条件最多展示数量 | Number | -1 | | collapseRowCount | 查询条件最多行数 | Number | -1 | | column | 查询条件每行展示列 | Number | 4 | | rowKey | 表格行 key 的取值 | string : function(record) | key | | onSearch | 查询函数 | function(values) | | | total | 总条数 | Number | 0 | | data | 数据域 | Number | 0 | | columns | 表格列的配置描述columns | Number | [] | | renderButton | 功能按钮 | List [ ReactNode ] | -- | | command | 查询内置指令 | Object | -- | | tableProps | 表格拓展属性 | Object | -- | | getContainer | 挂载容器 | ReactElement | -- |
###conditions
| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | name | 条件id | String | | | label | 文本描述 | String | | | type | 类型 | String | | | options | 选项(select、checkbox、radio) | List | | | props | FormItem属性 | Object | | | attr | ReactNode属性 | Object | | | span | 占据栅格 | Number | 1 | | dependencies | 条件联动 | string[] : function(val, _form) | | | visible | 隐藏字段 | Boolean | false |
###columns
| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | key | 唯一标志 | String | | | title | 列头显示文字 | String | | | align | 对齐方式 | String | | | dataIndex | 对应数据项data属性 | String | | | width | 列宽度 | String、Number | 单位:px | | drawer | 行抽屉属性 | Object | | | ellipsis | 自动省略 | Boolen | false | | copyable | 复制内容 | Boolen | false | | responsive | 响应式布局 | String[] | |
drawer：
width: 600,
title : '测试抽屉',
render : (record) => {}command：
//关闭抽屉
closeDrawer: (func) =>{},//
//刷新
refresh: (func) => {},
//刷新并关闭抽屉
closeDrawerAndRefresh: (func) => {},表格左右滑动时,需配置父级容器getContainer【容器样式：style={{height: '100%', overflow: 'auto'}}】 表格横向宽度根据列宽度计算，若tableProps配置scroll:{x:'xxx'}, 参数需大于所有固定列和
表单 Form
import { HView } from "estone-ui";
const {Form} = HView;| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | fields | 表单字段描述 | List | | | labelCol | label 标签布局 | Number | 6 | | wrapperCol | 控件布局 | Number | 14 | | loading | 加载状态 | Boolen | false | | column | 表单每行展示列 | Number[1, 2, 3] | 2 | | actions | 查询条件每行展示列 | Array | ['cancel', 'reset', 'finish'] | | actionsAlign | 按钮组对齐 | Boolen | true | | actionSpace | 按钮间距 | String | '40px' | | onFinish | 提交表单(数据验证成功) | function(values) | -- | | onReset | 重置表单 | function(values) | -- | | onCancel | 表格列的配置描述columns | function() | -- | | onFinishFailed | 取消类事件 | function() | -- | | finishText | 提交按钮文本 | String | '提交' | | resetText | 重置按钮文本 | String | '重置' | | cancelText | 取消类按钮文本 | LString | '返回' | | command | 表单内置指令 | Object | -- |
fields
| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | name | 字段id | String | | | label | label 标签文本 | String | | | type | 类型 | String | | | options | 选项(select、checkbox、radio) | List | | | props | FormItem属性 | Object：function() | | | attr | ReactNode属性 | Object | | | span | 占据栅格 | Number | 1 | | dependencies | 条件联动 | string[] : function(val, _form) | | | visible | 隐藏字段 | Boolean | false | | component | 控件内容 | ReactElement:ReactElement[]| -- |
type
input：文本;input-text：多行文本;input-number：数字输入框;select：选择框;
date：日期框;date-range：日期范围框;date-time：时间框;switch：switch开关;
radio：单选框;radio-button：单选框-按钮;checkbox：多选框;upload：文件上传;
tree-select：树选择;static：ReactElement;multiple：多种组合;command：
//表单提交
onFinish: (func) =>{},
//表单重置
onReset: (func) => {},dependencies：
//写法1,关联字段重置
dependencies: ['field1', 'field2'],
//写法2,表单用法延伸
dependencies: (val, _form) => {
_form.setFieldsValue({order_id : val})
},props引用已有正则校验
(_props) => _props('mobile', {
rules:[
{ required: true, message: '请输入手机号'}
]
})
mobile：手机号校验;identity：身份证校验;email：邮箱校验;
password：密码校验-6-12位数字、大/小写字母、特殊字符至少三种组成;
number：数字校验;money：金额校验;attr组件案例
upload
//操作节点 uploadNode: <Button >上传</Button>, accept: "image/*,.pdf", //支持多选 multiple: true, //限制上传文件 maxCount: 4, //列表交互图标 showUploadList: { showDownloadIcon: true }, //text：附件样式; picture：图片列表; picture-card：图片卡片排列 listType: "picture-card", //文件上传前操作，true：action请求; false：无action请求，进入列表; Upload.LIST_IGNORE：无action请求，不进入列表 beforeUpload: (file) => { return true; //不进入列表 // return Upload.LIST_IGNORE }, onChange: info => { console.log(info.fileList); }, //自定义请求 action: "/action?", customRequest: (options) => { console.log(options) }, //点击文件链接或预览图标时的回调 onPreview: file => { } //进度条样式 progress: { strokeColor: { '0%': '#108ee9', '100%': '#87d068', }, strokeWidth: 3, format: percent => `${parseFloat(percent.toFixed(2))}%`, },
描述列表 EDescriptionGroup
import { EDescriptionGroup } from "estone-ui";| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | data | 数据内容 | Object:Array | | | labelAlign | label 对齐方式 | String['left', 'right'] | 'left' | | labelStyle | label 样式 | CssStyle | | | contentStyle | content 样式 | CssStyle | | | column | 每行展示列 | Object:Number | {xs:1,sm:1,md:2,xxl:3} | | indicator | 指示器(内容过渡) | String | '>>>' |
data
__: 数据值1; _$_: 数据值2; __#proto__: (function - 内容处理;object - 枚举转换)
//数据-基本
const data = {
"编号" : 'XXX',
"类型" : {
'__': '0',
'_$_': '1',
'__#proto__': {
'0': '类型1',
'1': '类型2'
}
},
'审批金额': {
'__': 1000,
'_$_': 5000,
'__#proto__': (val) => <div >{val}</div>
},
'附件': {
'__': <div style={{color: 'blue', cursor: 'pointer'}} >附件1 </div>,
'_$_': <span style={{color: 'pink', cursor: 'pointer'}} >附件2 </span>
},
'文本内容': <span >自定义<span>可点击</span></span>
}
//数据-Node
const data = <Tabel />
//数据组
const info = [
{
value: {
"编号" : 'XXX',
"内容" : 'XXX',
},
{
title: '表格',
value: <Table columns={_columns} dataSource={_list} size="small" />
},
{
title: '列表',
value: <List size="small" dataSource={_list1} renderItem={item => <List.Item>{item}</List.Item>} />
}
,
{
title: '自定义',
value: <div style={{width: 400, height: 400, border: '1px solid grey', margin: 'auto'}} >内容</div>
}
]图标 Icon
import { EIcon } from "estone-ui";
<EIcon type='icon-infopersonal' />| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | type | 图标类型 | String | |
type
antd图标：驼峰式(LeftOutlined)、短线(left-outlined)
iconfont: EIcon.createFromIconfontCN({
scriptUrl: ['//at.alicdn.com/t/font_2921613_jksnlrm7rf.js']
})图标展示
<EIcon.Grid bordered onClick={(val, Icon) => console.log(val, Icon)} />
| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | bordered | 结果显示边框 | Boolean | true | | copyText | 点击复制 | Boolean | true |
服务加载 loading
import { loading } from "estone-ui";
//开启加载
//lock：锁定屏幕的滚动； text: 加载文字,false-无文字； loadingIcon： 加载图标； background：背景颜色
loading.loading();
loading.loading({
lock: true,
text: 'loading',
loadingIcon : <LoadingOutlined style={{ fontSize: 24 }} spin />,
background: 'rgba(0, 0, 0, 0.6)'
});
//取消加载
loading.close();PDF预览 EFilePdf
import { EFilePdf } from "estone-ui";| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------- | --------------- | | src | 文件路径 | String | | | scale | 缩放比例 | Number | | | async | 同步加载 | Boolean | false | | loadingCompoment | 加载中组件 | ReactElement | | | errorCompoment | 加载失败组件 | ReactElement | |