lq-component

基于antd的公共组件

项目地址

Installation

npm install lq-component --save

按需加载解决方案(仅适用单个引入组件)

babel配置文件.babelrc里的plugins添加

["babel-plugin-imports-transform", {
  "local-components": {
    "transform": "local-components/dist/${member}",
    "preventFullImport": true
  }
}]

需要先安装插件包

npm install babel-plugin-imports-transform --save-dev

表单解决方案

辅助函数

createFormItem(options)

参数	说明	类型	默认值
options.field	字段	object
options.form	form实例	object
options.formItemLayout	布局	object
options.colSpan	一行占格数	number	24

引用此方法就不能按需加载

onFieldsChange(props, fields)

用于Form.create参数，确保props里有changeRecord

mapPropsToFields(props)

用于form.create参数，确保props里有values或record

布局

栅格布局，一行24格 label / wrapper 默认 4 / 6 可通过formItemLayout设置，如：

options.formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 14,
  },
}

提供三种快速布局，field['simple'|'long'|'double']

simple为4 / 14, 行占24

long为4 / 20， 行占24

double为 8 / 12, 行占12，设置field['left'|'right']区别左右，两列布局

校验

可编辑才校验，隐藏只读不校验

field属性	说明	类型	默认值
required	必填	boolean	false
max	最大值	number	120
min	最小值	number
validator	自定义函数	function
pattern	正则	Regex
patternMsg	正则自定义信息	string
phone	手机校验	boolean	false
number	数字校验	boolean	false
ID	身份证校验	boolean	false

编辑/查看

每个组件有两种状态，设置disabled或readonly为true/false

值

一般跟store的record绑定，通过onFieldsChange跟mapPropsToFields两个函数

record = {
  name: {
    value: 'Jack'
  },
  age: {
    value: 18,
  },
};

可设默认值 用form.validateFields方法获取表单上的值或直接取record

通用列表页

由标题、操作按钮、搜索栏、表格及弹窗表单组成

成员	说明	类型	默认值
title	自定义标题名	string
name	模块名	string
rowKey	表格记录主键	string	id
loading	表格加载中	boolean	false
confirmDisabled	弹窗表单按钮可用	boolean	false
confirmLoading	弹窗表单按钮加载中	boolean	false
columns	表格字段	array	必填
fields	弹窗表单字段	array
data	表格数据	array
search	搜索栏搜索触发	function	必填
save	弹窗表单保存按钮触发	function
record	弹窗表单数据	object
modalVisible	弹窗表单显示	boolean	false
cancel	弹窗表单取消触发	function
changeRecord	弹窗表单数据改变触发	function
changeSearch	搜索数据改变触发	function
searchParams	搜索数据	object
resetSearch	搜索数据重置触发	function
aboveSearch	搜索栏前自定义html	jsx
sorter	表格排序	object
xScroll	表格宽度	number
validateDisabled	表单验证模式	boolean	false

通用详情页

有标题（面包屑）、表单、操作按钮组成

成员	说明	类型	默认值
title	自定义标题名	string
loading	表单加载中	boolean	false
fields	表单字段	array
rowKey	主键	string	id
buttons	操作按钮	array
routers	面包屑路径	array
validateDisabled	表单验证模式	boolean	false

可用二次封装组件

• Captcha 手机验证码输入框

  

  成员	说明	类型	默认值
  count	重新发送倒计时	number	60
  onClick	按钮按下时触发,需返回promise	function
  value	值	string
  onChange	输入改变时触发	function(value)

• DatePicker 日期选择框

  

  成员	说明	类型	默认值
  value	值	string/date: monent
  onChange	选择改变时触发	function(value)

• Editor 富文本编辑框

  

  成员	说明	类型	默认值
  value	值	string
  onChange	输入改变时触发	function(value)

• ImagePicker 图片上传框

  

  成员	说明	类型	默认值
  tokenSeparators	值分隔符	string
  value	值	string/array
  onChange	选择改变时触发	function(value)

• Input 输入框

  

  成员	说明	类型	默认值
  value	值	string
  onChange	输入改变时触发	function(value)

• MonthPicker 月份选择框

  

  成员	说明	类型	默认值
  value	值	string/date: monent
  onChange	选择改变时触发	function(value)

• MonthRange 月份范围选择框

  

  成员	说明	类型	默认值
  value	值	array
  onChange	选择改变时触发	function(value)

• Number 数字输入框

  

  成员	说明	类型	默认值
  value	值	string/number
  min	最小值	number
  max	最大值	number
  money	金额格式化	boolean	false
  onChange	输入改变时触发	function(value)

• NumberRange 数字范围输入框

  

  成员	说明	类型	默认值
  value	值	array
  startMin	最小值	number
  endMax	最大值	number
  onChange	输入改变时触发	function(value)

• Select 选择框

  

  成员	说明	类型	默认值
  multiple	多选模式	boolean	false
  valueName	值名称	string	id
  displayName	展示值名称	string	name
  value	值	string/array
  onChange	选择改变时触发	function(value)
  onSelect	选择改变时触发	function(value, record)
  page	异步数据分页	object(pageSize, pageNo, count, loading, data, query)
  action	分页是需设置，需返回promise	function
  showSearch	可搜索	boolean

• Table 表格

  成员	说明	类型	默认值
  loading	数据加载标志	boolean	false
  columns	列定义	array
  dataSource	数据	array
  onChange	分页改变时触发	function(value)

• 表单弹出框

  成员	说明	类型	默认值
  confirmLoading	保存按钮加载标志	boolean	false
  fields	字段定义	array
  values	数据	array
  changeRecord	输入改变时触发	function(fields)
  visible	显示/隐藏	boolean	false
  onCancel	按取消按钮时触发	function
  onCreate	按保存按钮时触发	function
  cusTitle	弹出框标题	string
  formWidth	弹出框宽度	number	1000

• 列表页

  成员	说明	类型	默认值
  title	标题	string
  loading	数据加载标志	boolean	false
  columns	列定义	array
  data	数据	array

• 详情页

  成员	说明	类型	默认值
  title	标题	string
  loading	数据加载标志	boolean	false
  values	数据	array
  buttons	自定义底部按钮	array
  children	自定义展示快	object(JSX)
  changeRecord	输入改变时触发	function(fields)

表单配置参数一览

• name 字段名（对应接口字段名）
• label 标签名
• disabled 禁用，这里更确切的理解应为只读，用于展示
• hidden 隐藏，不作校验
• search 是否是搜索栏字段
• required 必填
• validator 自定义校验
• pattern 正则校验
• patternMsg 正则校验提示信息
• phone 是否手机号
• number 是否数字
• positive 是否正数
• ID 是否身份证
• char 是否字母数字组合
• long 占满 一行样式
• simple 占中间 一行样式
• style 自定义内联样式
• className 自定义class样式
• type 类型
  • title 标题行
  • date 日期
  • Cascader 三级地区级联
    • data 地区数据
  • datetime 日期时间
  • dateRange 日期范围
  • month 月份
  • datetimeRange 日期时间范围
  • monthRange 月份范围
  • select 下拉选择，可多选
    • data 下拉数据
    • valueName 真实值
    • displayName 表现值
    • page 分页对象
  • editor 富文本
  • checkbox 复选
  • image 图片
    • tokenSeparators 多图片分隔符
  • password 密码
  • number 数字
    • min 最小值
    • max 最大值
    • money 是否金额格式化
  • textarea 多行文本
  • radio 单选框
  • numberRange 数字范围
    • startMin 开始最小值
    • endMax 结束最大值
  • 为空 即text 输入框
    • buttonText 带按钮