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>
<strong>页面标题</strong>
</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">
<span class="el-icon-group">
<el-tooltip class="item" effect="dark" content="添加" placement="bottom">
<i class="jr-icon-plus" @click="startAdd" ></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="删除" placement="bottom">
<i class="jr-icon-delete" @click="deleteAll"></i>
</el-tooltip>
</span>
</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">
<strong>机构类型</strong>
<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">
<strong>机构类型</strong>
<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-checkbox-group class="border">...</el-checkbox-group>
<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"> <!--:lg表示大屏时分两行显示, 小屏时单行显示-->
<el-checkbox-group v-model="" class="border">
<strong>{{'label'}}</strong><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">
<strong>{{'label'}}</strong><el-checkbox-button>...</el-checkbox-button>
</el-checkbox-group>
</el-col>
<el-col>
<el-checkbox-group v-model="" class="border">
<strong>{{'label'}}</strong><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页显示:
<span class="el-icon-group" v-if="status === 'edit' && curTabIndex === '1'">
<el-tooltip class="item" effect="dark" content="添加" placement="bottom">
<i class="el-icon-plus" @click="changeTure" ></i>
</el-tooltip>
</span>
<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>
</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:
中间<i></i>默认显示一个竖杠分隔符(占10像素宽,可叠加)
<span>
<i class="jr-icon-edit" onClick={e => this.handleEdit(row)}></i>
<i></i>
<i class="jr-icon-delete" onClick={e => this.handleDelete(row)}></i>
</span>
栗子1-1配图:
8、table高度/弹窗/上传组件
上传组件
栗子:
上传组件首先需要引入"component/file/jr-upload-file"
<el-row>
<el-col :xs="24">
<p>{{$t('fields.scanFiles')}}</p>
<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
@-------------------------------