公司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>

            <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

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