Ademoreactnpm NPM

This project was bootstrapped with Create React App.

react+antd二次封装控件

组件包含表格和表单引用方式：

import { MyTable, SearchForm } from 'ademoreactnpm';

更新说明

2020/5/28 添加 babel-polyfill 兼容ie浏览器ie10+

表格参数说明

resizeAble：true/false ----是否开启表格列可伸缩

bordered：true/false -----是否有边框

isexpandedRowRender：true/false -----是否开启展开隐藏功能（展开普通行和子表格展开不同时成立）

expandedRowFiled：string -----展开隐藏字段

isrowSelection：true/false -----是否开启表格可选状态

scroll：{x：'', y: ''}

handleSaveCell ---function单元格编辑保存事件（单元格编辑保存暂时不建议使用有缺陷）

editablecell ----表格单元格是否可编辑

isChildTable：true/false -------是否展示子表格，若开启嵌套子表格展示则表个数据内应包含childrenTable字段，该字段为子表格表格及表头数据集合，结构为：

childrenTable:{
  columns: [],
  data: []
}

pagination：true/false/object
object：
const xxxx = {
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: 页数,
  pageSize,
  current: 第几页,
  total: xxx,
  onShowSizeChange: (current, pageSize) => this.function(current, pageSize),
  onChange: (current) => this.function({
    ...searchItem,
    page: current,
    size: pageSize
  }),
};

详细配置可查看antd官网分页配置

{#### 表格数据及表头数据依然为antd格式(不嵌套子表格时) #######}

dataSource：[] ------表格数据 columns: [] ------表头数据

{#### 函数事件 #####}

onSelectChange 勾选表格数据返回值为选中key值及每一行的数据集合function(key,val){}

handleChange 备用函数

function (pagination, filters, sorter, extra){
  console.log('params', pagination, filters, sorter, extra);
}

expandedRowRender 展开隐藏事件

function (record, index, indent, expanded) {
  console.log('record', record)
  console.log('index', index)
  console.log('indent', indent)
  console.log('expanded', expanded)
}

表单参数说明

formList：[] -----表单渲染数据，当编辑或者查看回显时将数据处理成以下格式填入即可，数据格式如下：

filedType  // 字段值对应类型
type  // 表单所需的控件类型
childtype // 备用字段
filed  // 表单属性字段
defaultData  // 默认值
placeholder  // placeholder
requeird  // 是否必填
label  // 表单label
enable  // 是否可使用

commenFormList = [
  {
    filedType: 'array', 
    type: 'drageUpload',
    childtype: '', 
    filed: 'filelist', 
    defaultData: '', 
    placeholder: '', 
    requeird: false, 
    label: 'xxx', 
    enable: false
  },
  {
    filedType: 'array',
    type: 'fileUpload',
    childtype: '',
    filed: 'file',
    defaultData: '',
    placeholder: '', 
    requeird: false,
    label: '文件',
    enable: false
  },
  {
    filedType: 'string',
    type: 'input',
    childtype: '',
    filed: 'name',
    defaultData: '',
    placeholder: '请输入姓名',
    requeird: false,
    label: '姓名',
    enable: false
  },
  {
    filedType: 'array',
    type: 'treeSelect',
    childtype: '',
    filed: 'department',
    defaultData: '',
    placeholder: '请选择xxx',
    requeird: false,
    label: 'xxx',
    option:[
      {
        title: 'Node1',
        value: '0-0',
        key: '0-0',
        children: [
          {
            title: 'Child Node1',
            value: '0-0-0',
            key: '0-0-0',
          },
        ],
      },
      {
        title: 'Node2',
        value: '0-1',
        key: '0-1',
        children: [
          {
            title: 'Child Node3',
            value: '0-1-0',
            key: '0-1-0',
          },
        ],
      },
    ],
    enable: false
  },
  {
    filedType: 'string',
    type: 'select',
    childtype: '',
    filed: 'sex',
    defaultData: '',
    placeholder: '请选择性别',
    requeird: false,
    label: '性别',
    enable: false,
    option:[
      {value: '男', title: '男'},
      {value: '女', title: '女'}
    ]
  },
  {
    filedType: 'array',
    type: 'Checkbox',
    childtype: '',
    filed: 'itemtype',
    defaultData: '',
    placeholder: '请选择xxx',
    requeird: false,
    label: 'xxx',
    enable: false,
    option: [
      {value: 'A', title: 'A', enable: false},
      {value: 'B', title: 'B', enable: false},
      {value: 'C', title: 'C', enable: false},
    ]
  },
  {
    filedType: 'string',
    type: 'radio',
    childtype: '',
    filed: 'radiotype',
    defaultData: '',
    placeholder: '请选择xxx',
    requeird: false,
    label: 'xxx',
    enable: false,
    option: [
      {value: 'A', title: 'A', enable: false},
      {value: 'B', title: 'B', enable: false},
      {value: 'C', title: 'C', enable: false},
    ]
  },
  {
    filedType: 'time',
    type: 'yearpicker',
    childtype: '',
    filed: 'year',
    defaultData: '',
    placeholder: '请选择年份',
    requeird: false,
    label: '年份',
    enable: false
  },
  {
    filedType: 'time',
    type: 'weekpicker',
    childtype: '',
    filed: 'week',
    defaultData: '',
    placeholder: '请选周数',
    requeird: false,
    label: '周次',
    enable: false
  },
  {
    filedType: 'time',
    type: 'rangepicker',
    childtype: '',
    filed: 'datetodate',
    defaultData: '',
    placeholder: '请选时间段',
    requeird: false,
    label: '起止日期',
    enable: false
  },
  {
    filedType: 'time',
    type: 'MonthPicker',
    childtype: '',
    filed: 'month',
    defaultData: '',
    placeholder: '请选月份',
    requeird: false,
    label: '月份',
    enable: false
  },
  {
    filedType: 'time', 
    type: 'TimePicker', 
    childtype: '', 
    filed: 'time', 
    defaultData: '', 
    placeholder: '请选时间',
    requeird: false, 
    label: '时间', 
    enable: false
  },
  {
    filedType: 'string', 
    type: 'TextArea', 
    childtype: '', 
    filed: 'remark', 
    defaultData: '', 
    placeholder: '请输入说明', 
    requeird: false, 
    label: '说明', 
    enable: false
  },
  {
    filedType: 'number', 
    type: 'InputNumber', 
    childtype: '', 
    filed: 'totalNum', 
    defaultData: null, 
    placeholder: '请输入数值', 
    requeird: false, 
    label: '数值', 
    enable: false
  },
  {
    filedType: 'boolean', 
    type: 'Switch', 
    childtype: '', 
    filed: 'switch', 
    defaultData: true, 
    placeholder: '', 
    requeird: false, 
    label: '是否启用', 
    enable: false
  },
]

formLayout ------表单样式配置如下：

const conmmenformLayout = {
  layout: 'horizontal',
  md: 24,
  sm: 24
}

formItemLayout ------表单项格式样式配置如下：

const conmmenformItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
}

formType：commen/search -----通用提交表单/搜索表单

btnCon：{confirm:'xxx', cancel: 'xxx'} ------定义表单底部按钮文字

handleSubmit：function ------提交表单数据返

disabled：true/false ------表单项是否可用

btnLocal：表单按钮位置设置配置如下 btnLocal={{md: 4, offset: 8}}

handleCancel：function -----取消按钮点击事件

limtLength：Number ------作为搜索表单时防止表单项过多配置折叠显示条目数

isFormchildren: 'form'/'commen' 在该表单无法满足需求时，使用react的children属性自定义组件，form为定义在表单内为表单内元件， commen为表单外部提交按钮下部位置（样式由使者在父组件内添加上），当前结构为array：

  [{key:"usernames", defaultData: '李四', filed: 'usernames', label: '姓名', comments: 元素标签}]

上传参数说明： uploadUrl：上传路径 listType：按钮上传时的上传样式类型string（text, picture 和 picture-card） draghint,dragtxt: 拖拽上传文字内容string

表单项添加上传控件（拖拽上传及按钮点击上传）

表单默认值返回，添加switch开关,头像类图片上传修改为提交时将数据传至父组件内由个人处理至表单数据内。。。。。。。

由于将antd的全部样式引入致使包体积过大，改进中。。。。。

antd babel-plugin-import core-js moment react react-app-polyfill react-dom react-resizable

@everything-registry/sub-chunk-1098 @infinitebrahmanuniverse/nolb-ade

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago