# 凯普顿 前端工具集合

## 指令
### v-grid-autosize
  * iview table组件的自动适应父容器大小

### v-modal-ext
  * iview modal的扩展
  * 支持拖动(darg)
  * 支持非模态(:modal="false")
  * 支持禁用esc按键(:esc-close="false")
  * 参考实例：[drag.html](./examples/drag.html)
  * 需要用到实例中的样式
  ```pug
    Modal(title="测试" v-model="visible"  v-modal-ext="" :modal="false" :drag="true" :esc-close="false")

    Modal(title="测试" v-model="visible"  v-modal-ext="{modal:false,drag:true,escClose:false}" )
  ```

### v-drag
  * 拖动指令
  * 元素必须有定位
  * options
    * target - 指定拖动模板
    * handler - 指定可拖动的地方
    * callbacks - 回调 事件
      * onDragStart - 开始拖动时 event
      * onDragEnd - 拖动结束时 event,x（当前元素x坐标）,y（当前元素Y坐标）
      * onDrag - 正在拖动时 event ,x（当前元素x坐标）,y（当前元素Y坐标）
  ```pug
    div(v-drag="")
  ```
### v-inner-class
1. 用于设置组件内部元素的类
```
v-inner-class="{'.target':'hover'}"
```

## 插件
### 消息通讯插件（event-hub） 用法和vue的事件api相同
  * 发布消息 this.$pub(messageType,args)
  * 订阅消息 this.$sub(messageType,callback)
  * 取消订阅 this.$unsub(messageType,callback)

## 过滤器
### get
  * 取属性的过滤器
  * `{{obj | get('name')}}`代替`{{obj.name}}` 防止obj为空时报错
  * 文档请参考 [https://lodash.com/docs/4.17.4#get](https://lodash.com/docs/4.17.4#get)

### moment
  * 日期格式过滤器 基于moment库实现
  * 用法 `{{new Date() | moment('YYYY-MM-DD')}}` => `2017-01-01`
  * `{{user | get('birthday') | moment(['1992-07-23'],'isBefore')}}` 调用moment isBefore方法 中括号中是isBefore的参数，其他函数同理
  * 更多请参考 [http://momentjs.com/docs/#/parsing/string-format/](http://momentjs.com/docs/#/parsing/string-format/)


## 工具
`import {ajax,modelUtils,commonYUtils} from 'cpt-toolkit'`
### ajax工具
  * 基于axois针对后端接口规范做的封装
  * 会根据后端返回接口进行提示,如果返回*FAILD*标志会进行错误提示，返回其他默认不会提示。如需提示使用*notify*选项
  * 增加了自定义提示消息配置：notifyMessage
  ```javascript
     ajax.post(urls.save,data,{notify:true,notifyMessage:'自定义提示消息'})
    //强制提示
    ajax.post(urls.save,data,{notify:true})
  ```
  * 会处理登录过期跳转,默认会跳转到后端返回的location,如需自定义处理使用*loginTimeoutHandler*选项
  ```javascript
    //调用到端登录界面
    ajax.defaults.loginTimeoutHandler = (location)=>{
      window._vueInstance.$store.dispatch('account/logout');
    }
  ```
  * 其他用法请参考 [https://github.com/mzabriskie/axios](https://github.com/mzabriskie/axios)


### modelUtils
  * `getColumns`:根据列定义生成iviewtable列定义
  * `getDefaults`:根据列定义生成默认model
  * `getRules`:根据列定义生成表单验证规则

  1. key：字段名称
  2. title：字段标题
  3. order: 再列表中显示的顺序
  4. title：字段标题
  5. default：字段默认值
  6. rules：表单验证规范
  7. align: 靠哪边，可选项：left,right,center
  8. sortable：可排序
  9. width：宽度
  10. render：自定义渲染
  ```javascript
    const fields = [
      {
        key: 'name',
        showInColumn: true,
        order: 1,
        title: '名称',
        default:'测试'
        rules: [
          { required: true, message: '请填写地域名称' }//表单验证规则
        ]
      }
    ]
  ```
### commmonUtils
  * `recurseData`：递归处理数据,最小单元为原始类型的数据
  ```javascript
  //将对象中日期的字段进行格式化
  commmonUtils.recurseData(
    {
      name: 'cpt',
      birthday: new Date(1980, 1, 1),
      child: {
        name: 'cpt-child',
        birthday: new Date(2005, 1, 1)
      }
    },(value,key)=>{
      if(is.date(value)){
        return moment(value).format('YYYY-MM-DD');
      }
      return value;
    }
  )
  //-->
  {
      name: 'cpt',
      birthday: '1980-01-01',
      child: {
        name: 'cpt-child',
        birthday: '2005-01-01'
      }
    }
  ```
  * `recurseItem`:递归处理对象，最小单元为json对象
  ```javascript
  // 将所有菜单项的open属性设置为true
  let menus=[
    {
      name:'类型',children:[
        {name:'苹果'},
        {name:'苹果华为'}
      ]
    }
  ]
  commmonUtils.recurseItem(menus,menu=>{
    menu.open=true;
    return menu;
  })
  //-->
  [
    {
      name:'类型',open:true,children:[
        {name:'苹果',open:true},
        {name:'苹果华为',open:true}
      ]
    }
  ]
  ```
  * uuid 生成uuid

### domUtils
* addClass(el,classNames) 增加类
* removeClass(el,classNames) 移除类
* getSize(el) 获取元素 宽高，隐藏的元素也可以获取
* triggerResize 触发windows resize事件

### treeUtils
* 说明
  * 处理树型数据的相关逻辑
  * 有关控制树状态的字段
  * active：是否市激活状态，就是当前选择的节点
  * checked：是否是选择状态
  * indeterminate：子级节点有选中的
  * open：是否展开
1. activeNode(treeData, id) ：激活节点 将数据次id的数据项的active属性设置为true
2. setChildren(treeData, pid, children):为某一个数据项设置children
3. checkedNode(treeData, id): 设置选择状态,同时也设置了半选中状态
4. toggleNode(treeData, id): 展开或则收缩节点 控制open字段
5. getParent(treeData, id)：获取父节点
6. recurseNodes(data, callback)：遍历所有数据项， callback是回掉函数

### enhance-comp
* 增加vue组件 主要是实现切面编程的功能
```javascript
expor default enhance({
  methods:{
    test(){

    }
  },
  aspects:{
    beforeTest(arg){//test执行之前，arg是test的参数
    },
    afterTest(res,arg){//test执行之后，如果test返回Promise 则会在解析完之后执行,res是test的返回结果，arg是test的参数
    }
  }
})

```


## 组件
### 布局
  * column-layout：列布局 左右支持5列,中间自适应
  ```html
    <column-layout>
      <div slot="left1"></div>
      <div></div>
      <div slot="right1"></div>
    </column-layout>
  ```
  * row-layout：行布局 上下支持5行
  ```html
    <row-layout>
      <div slot="top1"></div>
      <div></div>
      <div slot="bottom1"></div>
    </row-layout>
  ```
  * page-layout:页面布局 分上中下，上又分为左右左边一般作为title区域，右边作为工具栏，下边分页栏等
  ```html
    <page-layout>
      <div slot="top-left"></div>
      <div slot="top-right"></div>
      <div></div>
      <div slot="bottom"></div>
    </page-layout>
  ```
### 图片查看器
  * 可拖动，缩放
  * `<image-view src="./a.png"  />`

### 复杂表格
  * 支持复杂表头
  * 支持汇总栏
  * 增加fixHeight 在自适应的基础上调整高度
  * 扩展了column 配置renderSummary 用法和render相同 不同的是renderSummary的数据是summaryData
  ``` html
   <complex-table ref="table",:columns="columns",:data="data" :summaryData="summaryData" :fixHeight="60" />
   <complex-table :columns="columns" :data="data" />`
  ```
### 面板组件
  ```pug
    cpt-panel
      span(slot="head") 收件列表
      ....
  ```
### form-tab组件
 * 用于垂直选项卡
 * 对应子组件的form-tab-panel
 ```pug
  form-tab(v-model="tab")
    form-tab-pane(label="承包方信息" name="cbfxx" :errorCount="1") errorCount  代表错误数量，会在tab栏显示红色的错误数量
 ```