dt-antd v0.0.2-beta7

dt-antd

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

目录

• 代码说明
• 组件说明
  • SiderMenu-整体框架
  • PageHeaderLayout-头部框架
  • ReviewImage-查看大图
  • DrawerDetail-抽屉查看详情
  • TableSearch - 表格上方的搜索组件
  • TableSearchSmall - 表格上方的搜索组件，没有title
  • StandardTable - 表格的封装组件
  • UploadImage - 上传图片(困图模式)
  • UploadImageAvatar - 上传图片(头像模式)
  • UploadImageSmall - 上传图片(无图模式)
  • Drag - 拖拽排序
• 公用方法说明
  • Utils-公用的方法
  • FormStyle-form表单的公用style样式
  • TableCommon-表格的公用方法
  • InputVerify-验证的正则表达式
• 发布
• 使用
• 关于

代码说明

启动

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参数说明

左侧菜单menu说明文档

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

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

参数说明：

另外为了方便页面指向左侧菜单的选中和展开，在定义页面其它路由时,如新增编辑详情等，页面路由定义格式为： {对应父级的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参数说明

ReviewImage

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

调用方法:

import {ReviewImage} from 'dt-antd';

{showModal &&
  <ReviewImage
    picUrl={ModalImg}
    onCancel={()=>{
      this.setState({showModal: false})
    }}
  />
}

path参数说明

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参数说明

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参数说明

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参数说明

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参数说明

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参数说明

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参数说明

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参数说明

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参数说明

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参数说明

发布

发布前，还有一件事就是为你的模块添加一个入口文件 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