样式风格统一
==========

创建时间：`2020-04-11`（`邹英豪` <`zouyh@sspss.com.cn`>）

src/assets/less/common.less
===========================

#### 定义全局统一样式类名
- `px` 像素大小以5的倍数增长，目前只定义到`50px`，如有需要，可自行定义。
- `mt`：代表 `margin-top` 的样式。例如：`mt5`：`style="margin-top: 5px;`"
- `mr`：代表 `margin-right` 的样式。例如：`mr5`：`style="margin-right: 5px;`"
- `mb`：代表 `margin-bottom` 的样式。例如：`mb5`：`style="margin-bottom: 5px;`"
- `ml`：代表 `margin-left` 的样式。例如：`ml5`：`style="margin-left: 5px;`"



查询区域按钮样式
=============

- 页面查询字段表单，默认 `Grid` 布局样式给 `<a-col :span="6">`   
- 当查询区域有 `展开` 按钮的时候，请根据要查询的表单字段个数合理安排页面布局样式。  
- 页面顶部查询区域的按钮（`查询`、`重置`、[ `展开` ]）, 按钮之间的间隔为`10px`。
    例如：`<a-button class="mr10">查询<a-button>` 或者 `<a-button class="ml10">重置<a-button>`
- 点击删除按钮，会有一个弹出层 `Popconfirm` 气泡确认框，在 `<a-icon>` 中使用 `class="dust-red"` 这个类的样式。
    更多颜色样式，请参考 [Ant Design 色彩](https://ant.design/docs/spec/colors-cn)

`注意事项1`：由于查询区域是使用 `form` 进行布。
            所以建议当按钮小于等于两个的时候，`Grid` 布局的样式建议给 `<a-col :span="6">` 
            当按钮为三个的时候，`Grid` 布局的样式建议给 `<a-col :span="9">` 具体根据页面样式进行合理布局。  
`注意事项2`：一定不要给第一个按钮加 `class="ml10"` 或者最后一个按钮加 `class="mr10"` 的类，
            要确保第一个按钮和最后一个按钮前后是没有间距的，防止按钮多的时候，小屏幕的电脑会产生样式错位的问题。



可选 Table 列表
=============

当 `Table` 可选的时候，在 `Table` 组件上方会有显示 `已选择 xx项` 和 `清空`。  
- 之前写法
```vue
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
    <i class="anticon anticon-info-circle ant-alert-icon"></i>
    已选择&nbsp;<a style="font-weight: 600">{{selectedRowKeys.length }}</a>项&nbsp;&nbsp;
    <a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
```
- 现在写法
```vue
<div class="table-detail">
    已选择&nbsp;<a>{{selectedRowKeys.length }}</a>项
    <a class="ml20" @click="onClearSelected">清空</a>
</div>
```


Tabs 标签页
==========

选项卡切换组件，要切换的内容与标签之间的上下间隔为 `15px` 
```vue
<a-tab-pane key="1" tab="标签名" class="mt15"></a-tab-pane>
```


src/utils/commonUtils
=====================

封装公共方法 (已将该文件绑定到 `Vue` 实例上)
- `requestResult.js`：处理后端接口返回的参数信息。
```javascript
<!-- 使用方法 -->
Http('/api/interface').then(res => {
    let result = this.$utils.requestResult(res);
    if (!result) return;
    // 接口请求成功之后的正常逻辑处理...
});
```
- `isEffectiveCommon.js`：格式化页面空数据展示，会将后端返回是 
    `""` || `undefined` || `"undefined"` || `null` 的数据进行格式化，
    在前端页面将其显示为 `-`
```vue
<!-- 使用方法 -->
// 1、在页面上直接显示
<p>{{ $utils.isEffectiveCommon("显示的字段") }}</p>

// 2、在 js 逻辑中进行处理。例如：Table列表字段
columns: [
    {
        title: '订单号',
        align: 'center',
        dataIndex: 'orderCode',
        customRender: (text, render, index) => {
            return this.$utils.isEffectiveCommon(text);
        }
    }
]
```
