EStone UI

安装

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