dt-antd

数据智能改变公共出行的产品二部基于antdesign开发的后台公共组件。仅适用于公交云产品二部三个平台。

代码说明

启动

clone此代码，然后执行yarn命令进行安装。之后即可对其进行编译

yarn

目录说明

lib               // 编辑后的文件
|
node_modules      // 依赖包
|
src               // 源文件
|
other
├── .babelrc      // Babel设置
├── index.js      // 文件入口
└── package.json  // 设置

lib --- Babel

为了把 ES6 代码编译成 ES5，需要安装 Babel，这个工具可以说野心极大，一次编译可以让 JavaScript 运行在所有地方。（听起来是不是有点 Java 的作风）

目前最常用的是 Babel5 版本，但是 Babel6 版本的设计更为精巧，已经非常推荐更新。也正是由于 Babel 有两个版本，所以开发过程中很有可能遇到这样的情况，模块 A 的开发依赖于 Babel5 版本，而模块 B 依赖于 Babel6 版本。

解决这个问题最好的做法就是把 A 和 B 拆开，独立开发和发布。并且在发布到 NPM 的时候发布是的编译后的，也就是 ES5 版本的代码。

所以如果你的机器上的 babel 是全局安装的，是时候卸载它了，因为它的版本不是 5 就是 6 ，会导致一些不可预见的问题。

npm uninstall babel-cli --global

正确的安装方式是把 babel-cli 作为 development 依赖

npm install babel-cli --save-dev

使用的时候并不是直接调用全局的 babel 而是调用依赖里的 babel 可执行文件

./node_modules/.bin/babel

使用Babel之后会将src里面的代码编译成ES5并输出到lib相应的目录中

package.json --- 命令详解

具体解释一下各个命令的作用：

第一条命令 ./node_modules/.bin/rimraf lib

作用编译前清空之前的 lib 目录，这是一个好习惯，可以杜绝对 lib 下的文件的任何手动更改。

第二条命令

./node_modules/.bin/babel src --out-dir lib --source-maps --extensions .es6,.es,.jsx --copy-files

作用遍历 src 目录下的文件，如果后缀名是 .es/.es6/.jsx 中的一种，就编译成 ES5，否则就直接拷贝到输出目录 lib 下

参数详解:

--out-dir lib 指定输出目录为 lib

--extensions .es6,.es,.jsx 指定需要编译的文件类型

--copy-files 对于不需要编译的文件直接拷贝

--source-maps 生成 souce-map 文件

.babelrc 文件

编译过程中还隐含了一个步骤就是加载 .babelrc 文件里的配置，该文件内容如下

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ]
}

这是因为 Babel6 采用了插件化的设计，做到了灵活配置：如果要转换 JSX 语法文件，就加上 React 的 preset，同时项目依赖里要添加 babel-preset-react

npm install babel-preset-react --save-dev

SiderMenu

整体框架组件，结构：左上下模式，左边分title和菜单，上边分左(收起展开按钮)和右(登陆员信息)

调用方法:

import {SiderMenu} from 'dt-antd';
 
const path = {
  siderMenu: {
    logo,
    title,
    menu,
    logoLink,
  },
  pageHead: {
    user: {
      userName,
      userPhoto,
      logOut,
      userChange,
      userItem,
    },
    other,
  }
}
 
<SiderMenu {...path}>
  // 中间部分的内容
</SiderMenu>

path参数说明

参数名	子参数	三级参数	描述	类型	是否必填
siderMenu			框架左边的内容	object	是
logo		logo图片	string	否(默认为公交云logo)
title		左侧头部文字	string	是
menu		左侧菜单(详情见下面表格)	object	是
logoLink		logo点击后的跳转地址（默认#）	string	否
pageHead			框架上面的内容	object	是
user		最右侧用户头像+用户名+下拉部分的参数	object	是
	userName	用户名	string	是(如果启用了userChange则选填)
	userPhoto	用户头像	string	否(默认ant头像)
	logOut	退出登陆方法	func	是(如果启用了userChange则选填)
	userChange	不满足用户名+头像模式的自定义书写	object	否
	userItem	不满足只有退出登陆的下拉菜单模式而自定义书写	object	否
other		头部右边默认只有一个头像+用户名，要加其它东西在这里自定义书写，会累加	object	否
theme			皮肤设置	object	否
navTheme		框架颜色(默认为dark黑色，可选light白色)	string	否
isTop		菜单栏是否在顶部(默认为false，可选true)	bool	否

左侧菜单menu说明文档

左侧菜单栏为了兼容主数据已定的返回模式，如果返回格式不一致，请对数据重新处理为以下格式：

let menu = [{
    code: 'userManage',
    name: '用户管理',
    icon: 'user',
    subMenus: [{
      code: 'userManage.userManage',
      name: '用户列表',
      url: '/userManage'
    }]
  }];

参数说明：

参数名	子参数	描述	类型	是否必填
code		识别的主键，不能重复	string	是
name		标题	string	是
icon		图标	string	是
subMenus		二级菜单目录	object	是
code	识别的主键，不能重复	string	是
name	标题	string	是
url	访问的路由路径，为了兼容主数据，要有/	string	是

另外为了方便页面指向左侧菜单的选中和展开，在定义页面其它路由时,如新增编辑详情等，页面路由定义格式为： {对应父级的path[也就是菜单栏menu中的url字段]}/你要定义的路由(如新增add，编辑edit/:id,详情detail/:id等)

PageHeaderLayout

面包屑以及头部调用方法，分头部，面包屑，页面标题，children正文，版本四个部分。

调用方法:

import {PageHeaderLayout} from 'dt-antd';
 
const breadMenu = [{
  path: '',
  title: '供应商管理'
}, {
  path: 'cardManage/cardTypeList',
  title: '二级供应商',
}, {
  path: '',
  title: '车辆管理'
}]
 
const tabList = [{
  key: 0,
  tab: '配置信息',
},{
   key: 1,
   tab: '页面地址',
},{
   key: 2,
   tab: '充值信息',
},{
   key: 3,
   tab: '协议内容',
}]
 
<PageHeaderLayout
  nav={breadMenu}
  title='车辆管理列表'
  content='二级供应商下所有的车辆'
  logo='https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
  action='按钮'
  extraContent='右侧展示内容'
  tabList={tabList}
  tabDefaultActiveKey='0'
  tabActiveKey='0'
  tabBarExtraContent='额外元素'
  onTabChange={(tabsKey) => {...})
  copyright='公交云版权所有'
  top='头部显示的类容'
>
  // 中间部分的内容
</PageHeaderLayout>

path参数说明

参数名	描述	类型	是否必填	备注
nav	面包屑	array	否	格式见上代码的breadMenu定义格式
title	页面标题	string	否	展示效果可见：https://preview.pro.ant.design/dashboard/workplace
content	标题下的副标题	string	否	展示效果可见：https://preview.pro.ant.design/dashboard/workplace
logo	需要图片时展示	string	否	展示效果可见：https://preview.pro.ant.design/dashboard/workplace
action	右侧需要按钮丛时预留	object	否	展示效果可见：https://preview.pro.ant.design/profile/advanced
extraContent	右侧额外显示信息	object	否	展示效果可见： https://preview.pro.ant.design/profile/advanced
tabList	tab切换选项	array	否	格式见上代码的tabList定义格式，展示效果可见https://preview.pro.ant.design/profile/advanced
tabDefaultActiveKey	tab默认选中的key	string	否	默认第一个
tabActiveKey	tab选中的key	string	否	默认第一个
onTabChange	tab点击之后的回调方法	function	否	返回参数为对应的key
copyright	页面版权信息	object	否
top	头部内容	object	否

ReviewImage

查看大图，利用antd-design的Modal组件，实现点击小图查看大图的功能，只有简单的显示，没有缩略图，左右滑动的功能。

调用方法:

import {ReviewImage} from 'dt-antd';
 
{showModal &&
  <ReviewImage
    picUrl={ModalImg}
    onCancel={()=>{
      this.setState({showModal: false})
    }}
  />
}

path参数说明

参数名	描述	类型	是否必填
picUrl	查看大图的图片地址	string	是
onCancel	点击关闭的回调函数	function	是

DrawerDetail

抽屉查看详情，只展示字段部分。

调用方法:

import {DrawerDetail} from 'dt-antd';
 
const data = [{
  title: '基本信息',
  children: [{
    title: '姓名',
    content: 'string类型',
    col: 24, 
  }, {
    title: '头像',
    picUrl: '图片url',
    col: 24, 
  }, {
    title: '博客',
    linkUrl: '链接地址',
    col: 24, 
  }, {
    title: '标签',
    tags: ['网购达人','运动健儿','00后'],,
    col: 24, 
  }]
}, {
  title: '技能信息',
  children: [{
    title: '额外技能',
    content: '英语八级',
    col: 24,
  }]
}]
 
{data && <Detail data={data} />}

path参数说明

参数名	子参数	描述	类型	是否必填
title		显示的副标题	string	否
children		要显示的详情数据	array	是
title	label字段	string	是
col	显示的占比，默认为24(占整行)，可选12(占半行)。
content	label对应的值，文字	string	和下面的参数必选其一
picUrl	展示的图片url,可查看大图	string
linkUrl	带链接的链接地址	string
tags	标签，用的antdesign的Tag标签	array

TableSearch

抽屉查看详情，只展示字段部分。

调用方法:

import {TableSearch} from 'dt-antd';
 
const searchMenu = {
  // 常在的选项
  open: [{
    id: 'rule',
    label: '规则编号',
    type: 'input', // input输入框
    placeholder: '请输入规则编号',
    defaultValue: '默认值',
    isRequire: true, // 是否必填
    other: {}, // 其它的属性        
  }, {
    id:'status',
    label: '选择时间',
    type: 'timePicker', 
    placeholder: '请输入时间',
    other: {}, // 其它的属性     
  },{
    id: 'rule1',
    label: '选择日期范围',
    type: 'rangePicker', 
    placeholder: '请输入选择日期范围'
    other: {}, // 其它的属性     
  }, {
    id:'status1',
    label: '使用状态',
    type: 'select', // 下拉框
    defaultValue: '', // 默认值
    option: [{
      label: '关闭',
      value: 4,
    }], 
    other: {}, // 其它的属性     
  },],
  // 被隐藏起来的选项,如果默认全部显示，则不调用
  hidden: [{
    id: 'date',
    label: '更新日期',
    type: 'datePicker', // 日期选择器
    placeholder: '请输入更新日期',
    other: {}, // 其它的属性     
  }],
  // 新增按钮，默认白色背景的按钮，需要更改请重写组件  
  btns:[{
    text: '导出',
    callBack: this.handleOut,
  }],
  searchCallBack: (values) => console.log(values), // 查询的回调函数
  resetCallBack: this.handleFormReset, // 重置的回调函数
  // 除查询和重置外还要加的按钮组，默认加载查询前面，如不满足，重改组件。暂时用不到，所以没做，如果需要，请再对组件进行拓展
  btns: [{
    type: 'button',
    label: '导出',
    callBack: this.handleSearch, // 回调函数
  }]
}
 
<TableSearch {...searchMenu} />

path参数说明

参数名	子参数	三级参数	描述	类型	是否必填
open			常开的搜索选项	array	是
id		字段名	string	是
label		label名	string	是
type		类型	string	是
	input	输入框
	timePicker	选择时间
	rangePicker	选择日期
	select	下拉框
option		下拉框的选项	array	type为select时必填
	label	显示的文字
	value	对应的key
placeholder		默认提示文字	string	否
defaultValue		默认值	string	否
isRequire		是否必填，默认否	bool	否
other		其它的拓展属性	object	否
hidden			默认隐藏的搜索选项，点展开才出现（参数配置和open一致）	array	否
searchCallBack			搜索按钮的回调函数，返回参数values是json	function	是
resetCallBack			充值按钮的回调函数，无返回参数	function	是
btns			默认有搜索和重置，除此之外还需要添加其它按钮再这里配置	array	否
type		类型，目前只支持'button'	string	是
label		按钮上显示的文字	string	是
callBack		回调函数，无参数返回	function	是

TableSearchSmall

参数与TableSearch一样，只是启用此种模式后，没有title没有更多所有搜索项直接平铺过来

StandardTable

表格的封装组件，只能满足部分功能：【列表展示，全选，列固定宽度底部有横向滚动条，左侧和右侧某列固定，页脚】

调用方法:

import {StandardTable} from 'dt-antd';
 
const data={
  list: list && list.data, // 数据
  pagination: { // 分页
    total: list ? list.rowCount : 1, // 总条数
    pageSize: pageSize, // 总页数
    current: currentNo, // 当前页码
  },
}
 
const columns = [{
  title: '一级供应商名称', // 表头名
  dataIndex: 'enterpriseName', // 字段名
  key: 'enterpriseName', // 字段名,不能少
  render: (text, record) => record.id, // 拓展
  width: 500, // 宽度
  fixed: 'left', // 固定侧
}]
 
const selectBtns = [{
  title: '批量删除',
  judgeShow: true,
  callBack: () => console.log(this.state.selectedRows)
}] 
 
<StandardTable            
  loading={loading}
  data={data}
  columns={columns}
  rowKey={columns => columns.id}
  onChange={(selectedRowKeys, selectedRows)=>console.log(selectedRowKeys, selectedRows)}
  noCheck={true}
  footer=footer={() =><span>实收总金额： 5元</span>}
  onSelectRow={rows=>console.log(rows)}
  selectBtns={selectBtns}
  scroll={{x: 500}}
  cleanSelectRow={true}
/>

path参数说明

参数名	子参数	描述	类型	是否必填	备注
loading		显示加载框	bool	否
data		展示的数据	object	是
list	表格数据	array	是
pagination	分页设置	object	是	配置参看antdesign官网的pagination组件，https://ant.design/components/pagination-cn/
columns		表头设置	array	是	具体配置项看antdesign的table组件，https://ant.design/components/table-cn/
rowKey		每行对应的key，每行不能重复，建议用id	string或int	是
onChange		表格分页状态改变之后	function	是	Function(selectedRowKeys, selectedRows)
onSelectRow		勾选之后	function	否	function(rows)，返回被勾选的rows
cleanSelectRow		清空所有勾选项	bool	否	true表示清空，常用于外部按钮控制，需要再onSelectRow回调函数里重置为false以不影响正常使用
noCheck		是否有全选,默认为false	bool	否
checkOther		选择之后的显示自定义，启用后除了自定义内容什么都不显示	object	否
selectBtns		如果有全选，选中之后的公用操作	object	否
title	显示的文字	string	是
judgeShow	是否要选中行才显示	bool	是
callBack	点击的回调函数	function	是	没有返回参数，可自行去onChange里取已经勾选的值
footer		页脚	function	否
scroll		横向宽度	object	否	这个值必须等于所有列的width相加之和，具体看antdesign官网的table组件

UploadImage

三个方法的参数是一样的，所以写在一起。

UploadImage：上传图片，困图模式（官方示例用户头像例子），官方示例：https://ant.design/components/upload-cn/ UploadImageSmall：上传图片，官方示例图片列表样式 UploadImageAvatar：上传图片。定制公交新增线路专用

调用方法:

import {UploadImage} from 'dt-antd';
 
<UploadImage
  url={`${url.uploadImage}?identityType=1`}
  name='bizLicCodeAttach'
  imageUrl={detail && detail.bizLicCodeAttach}
  headers={headers}
  data={data}
  handleUploadImg= {(imageUrl)=>{                                       
    this.setState({
      bizLicCodeAttach: imageUrl
    }) 
  }}
/>

path参数说明

参数名	描述	类型	是否必填	备注
url	上传的服务器地址	string	是
name	字段名，类似id	string	是
imageUrl	默认图片URL	string	否
headers	请求对应的headers	object	否
data	请求对应的参数	object	否
handleUploadImg	上传后的回调函数	function	是	返回参数为oss地址

Drag

拖拽排序组件。

调用方法:

import {Drag} from 'dt-antd';
 
const value = [
  {content: 'div1',code: '01',sort: 0},
  {content: 'div2',code: '02',sort: 1},
  {content: 'div3',code: '03',sort: 2},
  {content: 'div4',code: '04',sort: 3},
  {content: 'div5',code: '05',sort: 4},
]
<Drag
  value={value}
  sortKey='sort'
  codeKey='code'
  style={{color: '#fff'}}
  onChange={data => console.log(data)}
/>

path参数说明

参数名	子参数	描述	类型	是否必填	备注
value		展示的数据	object	是
conent	展示的内容	object	是
code	这个字段作为拖拽元素的key	string	是	这个字段名可改，但必须要有这个字段
sort	这个字段作为排序	int	是	这个字段名可改，但必须要有这个字段
style		样式	object	否
sortKey		排序的对应字段，示例中对应的是value中的sort	string	否	默认sort
codeKey		拖拽元素的对应字段，示例中对应的是value中的code	string	否	默认为code
onChange		拖拽后的事件，返回重新排序后的value数据	function	是

Utils

一些常见的公用方法，可直接重复调用。

调用方法:

import {Utils} from 'dt-antd';
 
const date = Utils.FormatDate(1535701322000); // 2018-10-25
const name = Utils.getQueryString('name'); // 1
const price = Utils.FormatPrice(100000, true, 2, ',', '.'); // 1,000.00

path参数说明

方法名	参数	描述	类型	是否必填	备注
getQueryString		获取url参数			如https://a.com?name=1&b=2获取name,b的值
name	参数名	string	是	返回对应的值
FormatDate		格式化时间，时间戳转为[yyyy-MM-dd hh:mm:ss]
times	要转化的时间戳	int	是
format	格式化后的格式	string	否	默认 yyyy-MM-dd hh:mm:ss
FormatPrice		格式化金额，并加千分位
number	要格式化的数	int	是
isMoney	传进来的金额单位是否为分,默认为true	bool	否	默认true
decimals	保留几位小数	int	否	默认2
thousands_sep	千分位符号	string	否	默认,
dec_point	小数点符号	string	否	默认.
getTimeDistance		获取时间区间
type	获取时间区间格式，today今日，yestoday昨日，oneWeek最近7天，twoWeek最近14天，week本周,month本月，year今年	string	是	目前只有定制公交的优惠券用到

FormStyle

用到from编辑页的formItem的样式。

调用方法:

import {FormStyle} from 'dt-antd';
 
<FormItem {...FormStyle.editFormDrawer} label=""></FormItem>
<FormItem {...FormStyle.editFormDrawer} label=""></FormItem>
<FormItem {...FormStyle.editFormDrawer} label=""></FormItem>
<FormItem {...FormStyle.editFormDrawer} label=""></FormItem>

path参数说明

样式名	描述
editFormDrawer	编辑时的一行显示一列的fromItemStyle
editFormDrawerSmall	编辑时的一行显示一列的fromItemStyle，label占比只有5
formItemLayout	新开页面的formItem样式
submitFormLayout	提交按钮行

TableCommon

一些常见的公用方法，可直接重复调用。

调用方法:

import {TableCommon} from 'dt-antd';
 
handleStandardTableChange = (pagination, filtersArg, sorter) =>{
  TableCommon.tableChange({
    state: this.state,
    pagination,
    callBack: (json) => {
      console.log(json)
      this.setState(json);
      this.props.getList(json.searchList);
    }
  });    
}
 
handleSearch = (values) => {
    TableCommon.tableSearch({
      state: this.state,
      values,
      callBack: (json)=>{
        this.setState(json);
        this.props.getList(json.searchList);
      }
    });    
  }

path参数说明

方法名	参数	描述	类型
tableChange		表格更改之后的方法，改变state重新查询
state	当前的state，searchList表示搜索条件，每个页面需一致	object	是
callBack	回调函数，改变state,并重新搜索	function	是
pagination	分页的返回参数	object	是
tableSearch		搜索表格（搜索按钮点击）
state	当前的state，searchList表示搜索条件，每个页面需一致	object	是
values	搜索的条件，只接收最终的值	object	是
callBack	回调函数，改变state,并重新搜索	function	是
tableSearchCustom		和tableSearch一样，只限定制公交项目使用

InputVerify

输入的验证规则，正则表达式。

调用方法:

import {InputVerify} from 'dt-antd';
 
<FormItem {...FormStyle.editFormDrawer} label="mobile">
  {getFieldDecorator('mobile', {    
    rules: [{
      required: true, 
      whitespace: true,
      pattern: InputVerify.mobile,
      message: 'please input your mobile'
    }],
  })(
    <Input maxLength={30} placeholder="input your mobile" />
  )}
</FormItem>

path参数说明

样式名	描述
mobile	手机号
carNo	车牌号
IDnumber	身份证号
passwordM	不能输入汉字

发布

发布前，还有一件事就是为你的模块添加一个入口文件 index.js，全部指向编译后的代码

export { default as MyComponent } from './lib/MyComponent';
export { default as SiderMenu } from './lib/SiderMenu/index';
export { default as PageHeaderLayout } from './lib/pageHeaderLayout/index';
...

接下来就可以发布到 NPM 了。

npm run compile
npm publish lib

首次发布需要输入用户名密码描述等，教程可百度。之后每次发布只需要publish即可。

注意：每次发布时，package.json里的版本号version都要变更，不能与以往提交的代码冲突，否则会导致发布不成功，切记！

使用

可以直接通过 NPM 安装

npm install dt-antd --save-dev

然后在父级项目的代码里导入模块

import MyComponent,{SiderMenu,PageHeaderLayout} from 'dt-antd'

此时导入的直接是 ES5 代码，跳过了组件的编译过程从而避免了出现组件 Babel 版本和父级项目 Babel 版本不一致的问题，并且速度更快，是不是很棒！

使用源码

如果只想用其中的一个或某几个，这时可以这样导入：

import MyComponent from 'react-component-example/src/MyComponent.jsx'

这种情况下，导入的是 ES6 代码，并且会被加入父级项目的编译过程。此外，父级项目在编译这个文件的时候会读取组件的 .babelrc 配置文件。

如何后续开发

clone此源码到本地，起初尝试时请修改package.json的name，改一个自定义的名字如vivy-learn，发布后npm install vivy-learn，并import组件引入，确认每个组件都能正常引用后，再将name改回dt-antd，并提交到git。

关于

本文使用的 babel 版本

./node_modules/.bin/babel --version 6.4.5 (babel-core 6.4.5)

LICENSE

MIT

dt-antd

dt-antd

目录

代码说明

lib --- Babel

package.json --- 命令详解

.babelrc 文件

SiderMenu

PageHeaderLayout

ReviewImage

DrawerDetail

TableSearch

TableSearchSmall

StandardTable

UploadImage

Drag

Utils

FormStyle

TableCommon

InputVerify

发布

使用

使用源码

如何后续开发

关于

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

dt-antd

dt-antd

目录

代码说明

lib --- Babel

package.json --- 命令详解

.babelrc 文件

SiderMenu

PageHeaderLayout

ReviewImage

DrawerDetail

TableSearch

TableSearchSmall

StandardTable

UploadImage

Drag

Utils

FormStyle

TableCommon

InputVerify

发布

使用

使用源码

如何后续开发

关于

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads