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
文件里的配置,该文件内容如下
这是因为 Babel6 采用了插件化的设计,做到了灵活配置:如果要转换 JSX 语法文件,就加上 React 的 preset,同时项目依赖里要添加
babel-preset-react
npm install babel-preset-react --save-dev
SiderMenu
整体框架组件,结构:左上下模式,左边分title和菜单,上边分左(收起展开按钮)和右(登陆员信息)
调用方法:
; 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正文,版本四个部分。
调用方法:
; 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= {...}) 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组件,实现点击小图查看大图的功能,只有简单的显示,没有缩略图,左右滑动的功能。
调用方法:
; showModal && <ReviewImage picUrl=ModalImg onCancel={ this } />
path参数说明
参数名 | 描述 | 类型 | 是否必填 |
---|---|---|---|
picUrl | 查看大图的图片地址 | string | 是 |
onCancel | 点击关闭的回调函数 | function | 是 |
DrawerDetail
抽屉查看详情,只展示字段部分。
调用方法:
; 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
抽屉查看详情,只展示字段部分。
调用方法:
; 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: thishandleOut console // 查询的回调函数 resetCallBack: thishandleFormReset // 重置的回调函数 // 除查询和重置外还要加的按钮组,默认加载查询前面,如不满足,重改组件。暂时用不到,所以没做,如果需要,请再对组件进行拓展 btns: type: 'button' label: '导出' callBack: thishandleSearch // 回调函数 <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
表格的封装组件,只能满足部分功能:【列表展示,全选,列固定宽度底部有横向滚动条,左侧和右侧某列固定,页脚】
调用方法:
; const data= list: list && listdata // 数据 pagination: // 分页 total: list ? listrowCount : 1 // 总条数 pageSize: pageSize // 总页数 current: currentNo // 当前页码 const columns = title: '一级供应商名称' // 表头名 dataIndex: 'enterpriseName' // 字段名 key: 'enterpriseName' // 字段名,不能少 recordid // 拓展 width: 500 // 宽度 fixed: 'left' // 固定侧 const selectBtns = title: '批量删除' judgeShow: true console <StandardTable loading=loading data=data columns=columns rowKey= columnsid onChange=console noCheck=true footer=footer=<span>实收总金额: 5元</span> onSelectRow=console 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: 上传图片。定制公交新增线路专用
调用方法:
; <UploadImage url=`?identityType=1` name='bizLicCodeAttach' imageUrl=detail && detailbizLicCodeAttach headers=headers data=data handleUploadImg= { this }/>
path参数说明
参数名 | 描述 | 类型 | 是否必填 | 备注 |
---|---|---|---|---|
url | 上传的服务器地址 | string | 是 | |
name | 字段名,类似id | string | 是 | |
imageUrl | 默认图片URL | string | 否 | |
headers | 请求对应的headers | object | 否 | |
data | 请求对应的参数 | object | 否 | |
handleUploadImg | 上传后的回调函数 | function | 是 | 返回参数为oss地址 |
Drag
拖拽排序组件。
调用方法:
; 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= console/>
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
一些常见的公用方法,可直接重复调用。
调用方法:
; const date = Utils; // 2018-10-25const name = Utils; // 1const price = Utils; // 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的样式。
调用方法:
; <FormItem ...FormStyleeditFormDrawer label=""></FormItem><FormItem ...FormStyleeditFormDrawer label=""></FormItem><FormItem ...FormStyleeditFormDrawer label=""></FormItem><FormItem ...FormStyleeditFormDrawer label=""></FormItem>
path参数说明
样式名 | 描述 |
---|---|
editFormDrawer | 编辑时的一行显示一列的fromItemStyle |
editFormDrawerSmall | 编辑时的一行显示一列的fromItemStyle,label占比只有5 |
formItemLayout | 新开页面的formItem样式 |
submitFormLayout | 提交按钮行 |
TableCommon
一些常见的公用方法,可直接重复调用。
调用方法:
; { TableCommon; } { TableCommon; }
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
输入的验证规则,正则表达式。
调用方法:
; <FormItem ...FormStyleeditFormDrawer label="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 compilenpm publish lib
首次发布需要输入用户名密码描述等,教程可百度。之后每次发布只需要publish即可。
注意:每次发布时,package.json里的版本号version都要变更,不能与以往提交的代码冲突,否则会导致发布不成功,切记!
使用
可以直接通过 NPM 安装
npm install dt-antd --save-dev
然后在父级项目的代码里导入模块
此时导入的直接是 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