estone-ui v1.0.17

安装

npm install estone-ui

引入样式

import { EModal, EInfoGroup, EDrawer, HView } from "estone-ui";

参考组件库

引用示例

高阶组件

查询 STable

import { HView } from "estone-ui";
const {STable} = HView;

###conditions

###columns

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

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

__: 数据值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

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)} />

服务加载 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";