公司6：JrVue重用布局

JrVue是我们基于element重新封装的一套组件库;

为了提高开发效率, 方便对代码的统一管理和维护,

我们提供了一些统一的页面布局, 以及项目常用的中小型模块

我在master新拉一个分支JrVue，来更新JrVue样式文件；

1、页面整体布局

关于页面整体布局, 我们直接借用了饿了么的布局组件<el-header>和<el-main>

相应的样式已经封装到JrVue中, 大家直接使用即可:

<el-header class="jr-layout">

...此为页面头部...通常左侧会放一个标题; 右侧是一个按钮组

</el-header>

<el-main class="jr-layout">

...此为页面主体部分...

</el-main>

栗子配图:

----------2018-11-17-六---------------start-

补充: 为了避免样式影响, 我在布局里添加了一个非整体布局的类名.inner-layout;

之前页面用<el-header><e-main>布局, 或者需要在页面内部使用<el-header><e-main>的, 可以添加该类

补充作废, 我们布局单加一个类名: jr-layout

----------2018-11-17-六---------------end-

2、页面头部内容

页面头部我们采用饿了么分栏间隔模式, 分左右两栏:

左侧栏el-col必写, 里面el-button按需添加;

右侧栏el-col按需添加;

<el-header>

<el-row :gutter="10">

<el-col :span="12">

<el-button v-if="'是否显示返回按钮'" circle icon="jr-icon-back"></el-button>

页面标题

</el-col>

<el-col :span="12" style="text-align:right" v-if="'是否显示取消确认按钮'">

<el-button size="small" border-btn>取消</el-button>

<el-button size="small" type="primary">确定</el-button>

</el-col>

</el-row>

</el-header>

栗子配图:

接下来我们看页面主体部分常用模块:

3、页面搜索栏

搜索栏这一行样式, 参考配图, 我们做了2:1:1分栏;

代码斜体部分为el-icon-group写法（即配图右侧的小图标样式）, 我在JrVue主题定制做了更新, 再此不再赘述;

<el-row :gutter="10">

<el-col :span="12">

<el-input size="small" placeholder="请输入机构名称" prefix-icon="el-icon-search"></el-input>

</el-col>

<el-col :span="6">

<el-button @click="search" type="primary" size="small">搜索</el-button>

</el-col>

<el-col :span="6" style="text-align: right">

<el-tooltip class="item" effect="dark" content="添加" placement="bottom">

</el-tooltip>

<el-tooltip class="item" effect="dark" content="删除" placement="bottom">

</el-tooltip>

</el-col>

</el-row>

例子配图:

4、页面筛选栏

配图第一行代码:

<el-row>

<el-col :xs="24" :sm="24">

<el-checkbox-group v-model="types" :xs="24" :sm="12" @change="searchByTypes">

机构类型

<el-checkbox-button v-for="orgType in orgTypes" :label="orgType.item" :key="orgType.item">{{orgType.item}}</el-checkbox-button>

</el-checkbox-group>

</el-col>

</el-row>

配图第二行代码(仅仅比第一行多一个类名border):

<el-row>

<el-col :xs="24" :sm="24">

<el-checkbox-group v-model="types" :xs="24" :sm="12" @change="searchByTypes" class="border">

机构类型

<el-checkbox-button v-for="orgType in orgTypes" :label="orgType.item" :key="orgType.item">{{orgType.item}}</el-checkbox-button>

</el-checkbox-group>

</el-col>

</el-row>

配图第三行代码:

<el-row>

<el-col :xs="24" :sm="24">

<el-checkbox-group class="border">...</el-checkbox-group>

</el-col>

</el-row>

配图第四行代码略;

栗子配图:

该筛选样式虽然简单, 但是在筛选项太多时, 折行样式会有问题;

如果必要, 在下一版我们会出一个兼容折行的方案...

title all [groups]

-------2018-11-21---新一版在内部封装了该样式, 代码内容不变, 解决了以上问题-----start---end-

-------2018-12-07--------start-

这一版本我们添加了多行筛选的样式布局:

该布局有两个<el-row>标签;

第一个el-row.jr-checkbox-group用来放置筛选栏内容

第二个el-row.controls-row用来放置控制按钮

通过点击筛选按钮添加类.show-two-line来实现高度切换

代码栗子如下:

<el-row style="margin-top: 20px" class="jr-checkbox-group" :class="showSearchFlag ? '' : 'show-two-line'">

<el-col :xs="24" :sm="24" :md="24" :lg="12">

<el-checkbox-group v-model="" class="border">

{{'label'}}<el-checkbox-button>...</el-checkbox-button>

</el-checkbox-group>

</el-col>

<el-col :xs="24" :sm="24" :md="24" :lg="12">

<el-checkbox-group v-model="" class="border">

{{'label'}}<el-checkbox-button>...</el-checkbox-button>

</el-checkbox-group>

</el-col>

<el-col>

<el-checkbox-group v-model="" class="border">

{{'label'}}<el-checkbox-button>...</el-checkbox-button>

</el-checkbox-group>

</el-col>

</el-row>

<el-row class="controls-row">

<el-col>

<el-button size="small" type="text" @click="clearInput" class="border">{{$t('clear')}}</el-button>

<el-button

size="small"

type="text"

@click="showSearchFlag = !showSearchFlag"

class="border"

>{{showSearchFlag === false ? $t('advancedScreening') : $t('lowLevelScreening')}}</el-button>

</el-col>

</el-row>

栗子配图1. 初始状态:

栗子配图2. 展开状态:

-------2018-12-07-----end-

5、tab标签页

标签页我们直接采用饿了么组件, 直接上码:

tab标签页1

这个第三方机构编辑页面的tab子页的栗子:

1.斜体span标签内容是右侧icon代码; 我们通过简单的一行v-if="status === 'edit' && curTabIndex === '1'"实现添加按钮只在联系人tab页显示:

2.其中status === 'edit' 表示只在编辑页面渲染;

3.自定义变量curTabIndex === '1'配合@tab-click="handleClick"实现只在联系人tab页显示:

<el-tooltip class="item" effect="dark" content="添加" placement="bottom">

</el-tooltip>

<el-tabs v-if="status === 'edit'" v-model="activeName" @tab-click="handleClick">

<el-tab-pane label="基本信息" name="first">

<el-form>...</el-form>

</el-tab-pane>

<el-tab-pane :label="contactName" name="second">

<jr-dynamic-query-table></jr-dynamic-query-table>

</el-tab-pane>

</el-tabs>

栗子配图:

注: table里面的按钮, size用'mini', 页面的按钮size用'small'

栗子:

<el-button

type="primary"

size="mini"

onClick={e => this.handleApproval(row)}

>'审批</el-button>

tab标签页2

.jr-tab-box盒子里套了.jr-tab-header 和 .jr-tab-main

.jr-tab-header里面用的是饿了么radio组件

栗子:

<div class="jr-tab-box">

<div class="jr-tab-header">

<el-radio-group v-model="tabPosition" size="mini" @change="changeJrTabs">

<el-radio-button label="left">基本情况</el-radio-button>

<el-radio-button label="right">投资情况</el-radio-button>

</el-radio-group>

</div>

<div class="jr-tab-main">

...content

</div>

栗子配图:

6、久蓉icon

7、表单页面流式布局

栗子:

<el-form>

<el-row :gutter="20">

<el-col :xs="24" :sm="12" :md="8" :lg="6">

<el-form-item>...</el-form-item>

</el-col>

<el-col :xs="24" :sm="12" :md="8" :lg="6">

<el-form-item>...</el-form-item>

</el-col>

</el-row>

</el-form>

栗子配图:

8、table

table右侧操作的icon代码:

栗子1-1:

中间默认显示一个竖杠分隔符(占10像素宽,可叠加)

this.handleEdit(row)}>

this.handleDelete(row)}>

栗子1-1配图:

8、table高度/弹窗/上传组件

上传组件

栗子:

上传组件首先需要引入"component/file/jr-upload-file"

<el-row>

<el-col :xs="24">

{{$t('fields.scanFiles')}}

<jr-upload-file

:value="currentEntity.agencyAppendixs"

@change="val => input('agencyAppendixs', val)"

></jr-upload-file>

</el-col>

</el-row>

栗子配图:

下一步我们会优先整理弹窗样式...

@------------------------------

开发工程: staice-view;

测试分支: mfront 7.1theme

栗子分支: mfront->第三方机构

ziChin

tim

@-------------------------------