Biz UI changelog

• 🆕 2.1 对in-option-template修改，移除item参数，新增label与value参数
• 🆕 2.2 修改CSS中旧的图标地址
• 🆕 2.3 压缩utils.js。并且新增md5加密、querystring处理模块、格式化url.
• 🆕 2.3.1 in-list支持翻页隐藏。对下拉选择框设置默认值的修改
• 🆕 2.3.2 修复in-list 因为浏览器大小变化，宽度不变的bug
• 🆕 2.3.3 升级in-window.支持直接调用$openWindow方法创建
• 🆕 2.3.4 升级in-list.动态表头列，当设置时可以通过修改columns，改变fixed状态的表头。
• 🆕 2.3.5 ajax请求跳转403页面时携带请求方法。
• 🆕 2.3.6 修复一些bug
• 🆕 2.3.7 in-list支持自定义列、隐藏下载表格按钮具体见文档。修复日期选择控件移动端兼容问题、规范表单控件的默认宽度。升级element-UI至2.5.2
• 🆕 2.3.8 修复当in-list 未设置功能按钮（下载、自动刷新）时空白问题
• 🆕 2.4.0 新增in-card组件
• 🆕 2.5.1 升级element-ui到2.8.2 ,重写deepCopy

文档目的

本文档描述的是如何快递的让前端同事开始后台管理界面的开发，在基于指定的组件库的前提下进行开发的UI标准。

前提约定

在现有项目中包含了多种UI标准：

• Element (new) 在新的项目中和模块中，应使用新的UI(Element中的组件)进行开发

http://element-cn.eleme.io/#/zh-CN

文档约定

• 标记 🆕 为新增组件
• 标记 ⭐️ 为定制组件。使用时，与Element UI同类型组件一致，文档中已有的属性都可以设置。
• 标记 🔧 为功能函数，定义在utils.js中

目录结构

├── include
│   ├── common
│   │   └── utils.js
│   ├── css
│   │   ├── biz-icons.css
│   │   ├── bizui.css
│   │   ├── element-ui.min.css
│   │   ├── fonts
│   │   └── themes
│   └── libs
│       ├── axios.min.js
│       ├── bizui.min.js
│       ├── element-ui.min.js
│       └── vue.min.js
└── index.html

设计原则

一致性 Consistency

• 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
• 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

• 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
• 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

• 简化流程：设计简洁直观的操作流程；
• 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
• 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

• 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
• 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

区域划分

主体结构分为4个区域

• 顶部操作栏
• 左侧菜单栏
• 右侧主体功能栏
• 底部信息栏

其中右侧主体功能栏又包括

• 功能标题区域
• 右侧导航区域
• 搜索条件区域
• 操作按钮区域
• 表格/图表/表单/具体功能区域

基本约定

• 所有页面必须支持13‘Macbook的正常浏览和操作
• 所有页面在隐藏左侧菜单栏后的都必须可以支持在移动设备上浏览和操作

主体色调

• 顶部操作栏和底部信息栏背景色 #000000
• 左侧菜单栏背景色 #152335 ，展开#0E1823
• 右侧主体功能栏背景色 #EAF0F6
• 主按钮颜色 #199FFB

功能控件使用规范

几种颜色框 🆕

蓝色 - 搜索栏

<in-block type="search"></in-block>

灰色 - 表格

基本表格

<in-block type="table"></in-block>

绿色 - 表单

<in-block type="form"></inblock>

in-block demo

in-block Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | type | 搜索框类型 | string | search/table/form/default| default | | @keyup.enter.native | 绑定回车事件 | function | - | - |

搜索栏

基本约定

• 所有搜索条件必须体现在URL上，以便传阅搜索结果
• 所有控件都应支持Enter键执行搜索
• URL上的搜索值都应在页面初始化给搜索控件赋予默认值

DatePicker 日期范围搜索框 ⭐️

使用日期范围控件必须可以同时选择开始和结束日期，并且有“今天”“昨天”“最近一周”“最近一个月”的快捷选项。基于el-date-picker 日期选择器组件。

 <in-date-picker v-model="date2" type="daterange"> </in-date-picker>

in-date-picker demo

in-date-picker Attributes

参考el-date-picker Attributes

DatePicker 日期选择框 ⭐️

<in-date-picker
  v-model="value1"
  type="date"
  placeholder="选择日期">
</in-date-picker>

DateTimePicker 日期时间选择框 ⭐️

<in-date-picker
  v-model="value1"
  type="datetime"
  placeholder="选择日期时间">
</in-date-picker>

Select 固定项下拉菜单 ⭐️

仅限于固定几个选项（一般5个以内）的场景使用，一般选择项可以在一页内完整浏览不需要滚动的，例如状态等不会随着业务量增加而增加下拉数据量。

<in-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</in-select>

Select 有数据源的下拉菜单 ⭐️

• 下拉的数据是通过接口返回的场景使用，数据会随着业务量的增长而增长的情况，需要支持输入搜索，并且再右侧显示该数据项的Value（数据库的ID等），例如选择成员，选择商家等
• 选择后可清空选项

<in-select v-model="value6" placeholder="请选择">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <in-option-template :label="item.label" :value="item.value"></in-option-template>
    </el-option>
</in-select>

in-select demo

Select 带接口搜索的下拉菜单 ⭐️

选项的内容很多无法一次加载到页面中，需要提供搜索结果的场景使用，例如选择商品

<in-select
v-model="value9"
multiple
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
    <el-option
      v-for="item in options4"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</in-select>

Select 多选下拉菜单 ⭐️

<in-select v-model="value5" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</in-select>

option-template 下拉选择选项模版 🆕

下拉选择需要支持输入搜索，并且再右侧显示该数据项的Value（数据库的ID等），例如选择成员，选择商家等场景

<in-form-item>
    <in-label title="文章标签(有模版)">
        <in-select v-model="value10"  placeholder="请选择文章标签">
            <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
                <in-option-template :label="item.label" :value="item.value"></in-option-template>
            </el-option>
        </in-select>
    </in-label>
</in-form-item>

option-template demo

in-option-template Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | label | 标签 | string |-| - | | value | 值 | string |-| - |

Input 输入搜索框

单行文本输入框

<el-input v-model="input" placeholder="请输入内容"></el-input>

Button 搜索按钮

表单

基本约定

• 带必填标识的必须有前端验证
• 所有表单都应支持Enter提交
• 执行提交时提交按钮应禁止使用
• 提交成功应有消息提示(Message)

Input 单行文本输入框

form-item 表单 🆕

在开发表单时，会涉及到多个输入框同时存在上下排列以及水平排列的情形。使用表单组件可以很方便的划分

 <in-block type="search"  @keyup.enter.native="submitEvent">
    <in-form-item>
        <in-label title="文章标题">
            <el-input></el-input>
        </in-label>
    </in-form-item>
    <in-form-item>
        <in-label title="daterange">
            <in-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </in-date-picker>
        </in-label>
        <in-label title="date">
            <in-date-picker v-model="date6" type="date">
            </in-date-picker>
        </in-label>
    </in-form-item>
    <in-form-item>
        <in-label title="文章标题">
            <in-select placeholder="请选择文章标题">
                <el-option>
                </el-option>
            </in-select>
        </in-label>
    </in-form-item>
    <in-form-item>
        <el-button class="biz-button biz-button-default">搜索</el-button>
    </in-form-item>
</in-block>

in-form-item Attributes

无

form-item 表单 🆕

在开发表单时，会涉及到多个输入框同时存在上下排列以及水平排列的情形。使用表单组件可以很方便的划分

<in-form-item>
    <p>换行演示</p>
</in-form-item>

label 表单标题 🆕

表单标题组件

<in-form-item>
    <in-label title="文章标题">
        <el-input></el-input>
    </in-label>
</in-form-item>

Input 多行文本输入框

Select 固定项下拉菜单

Select 有数据源的下拉菜单

Select 带接口搜索的下拉菜单

Select 多选下拉菜单

Upload 上传控件

DatePicker 日期选择框

DateTimePicker 日期时间选择框

Richtext 富文本编辑器

Checkbox 复选框

Radio 单选框

Switch 开关

Button 提交按钮

Message 提交消息提示反馈

表格

基本约定

• 表头超出屏幕需支持固定
• 表格内容需要带斑马纹表格
• 鼠标悬停行应有颜色反馈

表格分为基本表格和数据列表表格

Table 数据列表表格

很多数据列表的场景需要实时功能以及下载，in-list组件就可以提供这样的能力

<in-list 
        @auto-refresh="autoRefreshCallback"
        @download="handleDownload"
        :auto-fixed="false"
        :auto-refresh-delay="3"
        :size-change="handleCurrentSizeChange"
        :current-change="handleCurrentPageChange"
        :page-config="page_config">
   <in-table size="small" :data="tableData">
        <el-table-column prop="date" label="日期" width="180" sortable>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
    </in-table>
</in-list>

in-list demo

in-list Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | columns-list | 自定义列字段，未声明时不会显示自定义列按钮 | array |-| - | | hidden-download | 是否隐藏下载表格按钮 | Boolean |false/true| false | | auto-fixed | 表头释放自动悬浮在顶部 | Boolean |true/false| true | | colunms | 表头列，当设置时可以通过修改columns，改变fixed状态的表头 | Array |-| - | | auto-refresh-delay | 自动刷新时间，单位秒。设置为0表示禁止自动刷新 | number |-| 5 | | page-config | 分页配置 | Object |{ size: 20, current_page: 1, total: 1 }| { size: 20, current_page: 1, total: 1 } | | small | 是否使用小型分页样式 | boolean | — | false | | background | 是否为分页按钮添加背景色 | boolean | — | false | | page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 | | total | 总条目数 | number | — | — | | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — | | pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 | | current-page | 当前页数，支持 .sync 修饰符 | number | — | 1 | | layout | 组件布局，子组件名用逗号分隔| String | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' | | page-sizes | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 30, 40, 50, 100] | | popper-class | 每页显示个数选择器的下拉框类名 | string | — | — | | prev-text | 替代图标显示的上一页文字 | string | — | — | | next-text | 替代图标显示的下一页文字 | string | — | — |· | disabled | 是否禁用 | boolean | — | false | | page-hide | 是否隐藏翻页 | boolean | — | false | | title | 弹窗标题 | string |-| - |

columns-list示例

[{
    label:"必选项",
    columns:[
        {label:"计划名称",name:"name",checked:true,disabled:true},
        {label:"状态",name:"status",checked:true,disabled:true}
    ]
},{
    label:"属性",
    columns:[
        {label:"计划",name:"id",checked:true,disabled:true},
        {label:"计划名称",name:"name",checked:true,disabled:true}
    ]
},{
    label:"效果",
    columns:[
        {label:"曝光量",name:"test1",checked:true},
        {label:"点击率",name:"other",checked:true},
        {label:"返点成本",name:"click"},
    ]
}]

in-list Methods

| 参数 | 说明 | 参数 | |---------- |-------- |---------- | | download | 点击下载表格执行回调 | - | | auto-refresh | 自动刷新回调 | - | | size-change | pageSize 改变时会触发 | 每页条数 | | current-change | currentPage 改变时会触发 | 当前页 | | columns-change | 自定义列勾选改变时触发,配合columns-list参数使用 | 回调值包含三个值：目标（target）、已选择（array）、未选择（array） |

in-list Events

| 事件名称 | 说明 | 回调参数 | |---------|--------|---------| | size-change | pageSize 改变时会触发 | 每页条数 | | current-change | currentPage 改变时会触发 | 当前页 |

Table 基本表格

<in-block type="table">
  <in-table size="small" :data="tableData">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
    </in-table>
</in-block>

in-table demo

in-table Attributes

参考el-table Attributes

Pagination 分页控件 ⭐️

<in-pagination 
  @size-change="sizeChange"
  @current-change="currentChange"
  :page-sizes="pageSizes" 
  :current-page="pageConfig['current_page']"
  :disabled="pageDisabled"
:total="pageConfig['total']">

</in-pagination>

图表

card卡片 🆕

数据总览卡片。

in-card demo

 <in-block type="form">
    <in-card type="success" content="1" label="标签" :loading='true'></in-card>
    <in-card type="danger" content="1" label="标签" ></in-card>
    <in-card type="warning" content="warning" label="标签" ></in-card>
    <in-card type="info" content="info" label="<strong>标签</strong>" ></in-card>
</in-block>

in-card Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | type | 样式 | string |success/danger/info/default/warning| default| | content | 内容,支持HTML | string |-| - | | label | 标签,支持HTML | string |-| - | | loading | 加载中 | boolean |true/false| false |

Window 弹窗 🆕

iframe嵌套弹窗。

<in-window src="http://localhost:8000/demo.html" width="800px;" height="600px;" title="测试" opacity="0.3"></in-window>

/**
 * this为当前实例化后的对象 
 * $openWindow 提供五个参数，支持动态修改弹窗内容
 * src, width, height, opacity , title
 */
this.$openWindow();
this.$closeWindow();

in-window demo

in-window Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | src | 地址 | string |-| location.href | | width | 宽度 | string |-| 500px | | height | 高度 | string |-| 600px | | opacity | 背景透明度 | number |0~1| 0.3 | | title | 弹窗标题 | string |-| - |

axios 功能扩展 🔧

1. 支持浏览器history.
2. 支持querystring参数

/**
 * 新增history和qs参数
 */
qatrix.axiosPut({
    history: true,
    qs: {
        "id": "5c33244e2e00005b00121eb6",
        "mocky-delay": "100ms"
    },
    url: "https://www.mocky.io/v2/5c33244e2e00005b00121eb6",
}).then((data) => {
    console.log(JSON.stringify(data))
});

axiosPut/axiosPost/axiosGet/axiosDelete Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | history | 是否开启浏览器history修改 | Boolean |true/false| false | | qs | querystring序列化值 | Object |-| {} |