an-ui-lijian
基于react, antd的公司内部公用组件
使用方法
npm install an-ui-lijian
import AnUi from 'an-ui-lijian';
const { DateRange } = AnUi
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
npm install an-ui-lijian
import AnUi from 'an-ui-lijian';
const { Utils } = AnUi
/**
* 解析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