an-ui-lijian

an-ui-lijian

基于react, antd的公司内部公用组件

使用方法

• 安装

npm install an-ui-lijian
import AnUi from 'an-ui-lijian';
const { DateRange } = AnUi

1、组件

组件	描述
DateRange	日期组件
TableBtns	表格操作按钮
Search	查询组件
Form	表单组件
Modal	弹窗组件

1.1.DateRange组件API

属性 & 方法	类型	默认值	描述
onChange	([moment,moment])=>{}	()=>{}	时间变更之后的回调
limit	number | null	null	起始日期间隔大小，不传限定
placeholder	array	['开始日期', '结束日期']	日期框的占位符
fullRequest	boolean	false	是否需要选择2个时间才会触发
future	boolean	false	是可以选择未来时间
recentlyDay	number	void	只能选择最近多少天, 没有则不限制
resetKey	any	void	每次传入不同的值时，日期就会重置
initialValue	array	[null, null]	默认日期段
allowClear	boolean	void	是否可以清除选择的日期
format	string	'YYYY-MM-DD'	日期格式
itemStyle	object	void	每个日期选择框的样式
style	object	void	每个日期选择框的样式

1.2.TableBtns组件 API

属性 & 方法	类型	默认值	描述
leftBtns	array	[]	表格上部左侧的按钮
rightBtns	array	[]	表格上部右侧的按钮

leftBtns、rightBtns数据结构
[
    {
        check: Function, // 是否显示该按钮
        label:String, // 按钮文字
        onClick: Function, // 按钮点击事件
        type: String, // 按钮点击事件,值为btn(默认值)，link， import
        checkUsable: Function()=> * , // 点击按钮全的检查，返回为非空字符串时，进行提示，为空时，触发点击事件
        confirm: {
            text: String, // 确认提示文字
            onOk: Function, // 确认
            onCancel: Function, // 取消
        }, // 按钮点击事件
    }
]

1.3.Search组件 API

属性 & 方法	类型	默认值	描述
defaultFields	Array	lable:综合查询, key:multipleQuery	默认的查询条件，会直接显示出来，不会进行折叠
fieldList	Array	null	被折叠的查询条件，数据格式与 defaultFields相同
onSubmit	(values)=>{}	void	查询按钮点击事件
onReset	()=>{}	void	重置按钮点击事件,没有时调用onSubmit，参数为{}
column	number	3	分多少列排列查询条件
setDefaultExpandedStatus	boolean	void	是否展开隐藏的查询条件
onChange	(values)=>void	void	每次修改了查询条件的回调
onExpand	(status)=>void	void	展开/收起隐藏查询条件事件

defaultFields、fieldList数据结构
[
  {
    label: '', // 查询条件的显示名称
    key: '', // 查询条件的字段名
    type: 'select | dateRange | input | treeSelect | date | checkboxGroup',  // 查询条件的表单类型
    placeholder: String | [ String, String ] // 普通类型的是字符串，range类型为数组
    data: Array | Object 为选择类型表单的 下拉值，  Array: 是select 类型的 options， Object：是treeSelect的下拉选项
    multiple: Boolean, // 是否是对选，正对与下拉框选项有效
    getChildrenKeys: Boolean, // 是否获取下级及其后代节点的value，
    config: { name: String, value: String }, // name为下拉框类型表单的属性字段名，默认为name， value为下拉框类型表单的id属性字段名，默认为value
  }
]
使用
code

2、公共函数

npm install an-ui-lijian
import AnUi from 'an-ui-lijian';
const { Utils } = AnUi

方法名称	描述
analysisUrl	解析url地址的参数，并且转换为对象返回
TooltipFn	重新封装antd 的 Tooltip
download	下载文件
flowSwitch	流量转换
compareNum	超大数字比较大小
compareIp	ip比较大小
isEmpty	判断内容是否为空
emptyFilter	判断内容是否为空，为空显示占位符
thousandsSwitch	把数字转换为以{separator}分割的字符串

/**
 * 解析URL中的参数
 * @param {String} url
 * @returns {{}}
 */
analysisUrl = (url) => object

/**
* 执行下载
* @method download
* @param  {String} url 下载地址，从/xxx开始
* @param  {Object} values 下载参数
*/
download = (url, values) => void

/** 气泡
 * @param {(string|string[])} text 要显示的内容
 */
TooltipFn = text => React.Node

/**
 * 流量转换
 * @param num {Number} 文件大小 单位为 字节 b
 * @param unit {String} 要输出的转换单位
 * @return {String|undefined}
 */
flowSwitch = (num, unit = 'MB') => String|undefined

/**
 * 超大数字比较大小
 * @param  value1 {String|Number} -ip
 * @param  value2 {String|Number} -ip
 * @return {String|string}  小于返回<  等于返回=  大于返回>
 */
compareNum = (value1 = '', value2 = '') => String

/* 判断内容是否为空
 * @param s {String} 要判断的内容
 * @return {Boolean}
 */
isEmpty = (s) => Boolean


/* 判断内容是否为空，为空显示占位符
 * @param str {String} 要判断的内容
 * @return {String} 返回实际显示的内容
 */
emptyFilter = (str) => String|--

/**
 * 把数字转换为以{separator}分割的字符串，并且添加后缀单位
 * @param number {String | Number} 要进行转换的数字，或者数字类型的字符串
 * @param limit {Number} 数字分位的位数
 * @param separator {String} 数字分位的分隔符
 * @param precise 精确多少位小数
 * @return {string}
 */
后缀单位
unitArr = [
    {unit: '', length: 4, suffix: 0},
    {unit: '万', length: 8, suffix: 4},
    {unit: '亿', length: 12, suffix: 8},
    {unit: '兆', length: 16, suffix: 12}
]
thousandsSwitch = (number, limit = 3, separator = ',', precise = 2) =>String