Lay-Controls

基于element-ui、vue2.x封装的一些布局及样式，主要是方便自己平时使用。

控件

下文中固定格式说明：

:props 代表可以v-bind的组件中的Props属性。
@method 代表事件
v-slot... 代表插槽

lay-edit

主要是提供编辑界面的风格。

| 属性 | 功能 | 默认值 | | --------------- | -------------------------------------- | ------ | | :title | 编辑页的标题 | '' | | v-slot:tool-bar | 此插槽中可放置工具按钮 | - | | v-slot | 默认的插槽，其内容作为此页面的主体内容 | - |

lay-card

主要是提供卡片界面的风格。

| 属性 | 功能 | 默认值 | | --------------- | -------------------------------------- | ------ | | :title | 编辑卡片的标题 | '' | | v-slot:tool-bar | 此插槽中可放置工具按钮 | - | | v-slot | 默认的插槽，其内容作为此卡片的主体内容 | - |

lay-list

主要是提供列表界面的风格。

| 属性 | 功能 | 默认值 | | --------------- | ---------------------------------------------------------- | ------ | | :title | 编辑卡片的标题 | '' | | v-slot:tool-bar | 此插槽中可放置工具按钮 | - | | v-slot | 默认的插槽，其内容作为此列表页的主体内容，通常会放el-table | - |

lay-page

主要封装了分页控件，对外暴露一个查询事件

| 属性 | 功能 | 默认值 | | ----------- | ---------------------------------------------------------------------- | -------------------------------------------------------------- | | :page-sizes | 分页大小的数组 | [10, 20, 50, 100,200,500],默认以数组中第一个作业页大小的默认值 | | :total | 总数据行数，查询数据完成后，请将值给予此属性 | 0 | | @loaddata | 用户操作页面，触发需要查询的动作时触发此事件，参数(pagesize,pageindex) | - |

lay-table

只用样式

只需要在table上加 class="lay-table" 即可，表格的结构要完整，即：

<table>
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

lay-v-continer

此功能用以在列表页，搜索栏会因为浏览器宽度不定导致高度不定，而此时，希望下面的表格高度能够自适应。

<template>
    <div style="background-color:black">
        <div style="height:calc(100vh - 30px)" class="lay-v-c"><!-- 此处height是指这个块的总高度，可以指定100%以使用父容器总高度，也可以使用calc进行运算 -->
            <div class="lay-v-c-zoom-in" style="background:yellow"><!-- lay-v-c-zoom-in 是高度缩小至容纳内容高度 -->
                <el-button>按钮很多，根据宽度自动换行，平时在搜索框中的内容</el-button>
                <el-button>按钮很多，根据宽度自动换行，平时在搜索框中的内容</el-button>
            </div>
            <div class="lay-v-c-zoom-out" style="background:pink;height:100%"><!-- lay-v-c-zoom-out 是将内容放大到容器剩余空间，多个的时候，垂直平分 -->
                此处内容的高度会随着剩余空间的高度自适应，通常用于放置lay-card,lay-list或者table之类的展示结果的数据。
            </div>
        </div>
    </div>
</template>

使用配置

只提供专用的功能，如果需要更复杂的功能，请使用el-table。

| 属性 | 功能 | 默认值 | | ------- | -------------- | ------ | | :data | 绑定的数据数组 | [] | | :fields | 字段设置 | [] |

fields

[
    {
        label:'',
        prop:'',
      
    }
]

样式

在scss文件中，引入 @import 'lay-controls/lay-style'; 当然，本语句上方可以修改下述相关变量，以达到自定义效果。

| 变量名 | 默认值 | 作用 | | ----------------------- | ------ | -------------------------------------------------------------------------- | | $form-item-width | 250px | 表单中每个项的单位长度 | | $form-teim-width-offset | 10px | 表单中每个项的单位长度的附加长度，本数据项用来校正2倍与两个1倍不对齐的问题 |

在新框架中引用此样式的实践

在 src\styles\busi.scssstyles/busi.scs 中添加如下：

//  ------------ 引用其它包 ------------------
$form-item-width: 300px ;
$form-teim-width-offset: 10px ;
@import '~lay-controls/packages/lay-style.scss';

Form表单样式

• 为el-form添加class="lay-form"
• 为el-form-item添加class="lay-form-item-1"，其中1可以写成1、2、3，代表所占用的列单位。all代表占全行。

<el-form class="lay-form>
   <el-form-item class="lay-form-item-1" label="用户名">
       <el-input></el-input>
   </el-form-item>
</el-form>

ComReport

使用案例：

// main.js
import comreport from 'lay-controls/packages/local/comreport'
// comreport
comreport.init({
    // baseURL: 'http://localhost:9007',
    // templateedit: 'templateedit',
    // templateprint: 'templateprint',
    // print: 'print',
    vue_app_base_api: process.env.VUE_APP_BASE_API,
    loading_open: msg => {
        return Vue.prototype.$loading({
            lock: true,
            text: msg,
            spinner: 'el-icon-loading',
            background: 'rgba(0,0,0,0.7)'
        })
    },
    loading_close: loadserv => {
        if (loadserv != null) {
            loadserv.close()
        }
    },
    msg: msg => {
        Vue.prototype.$alertx(msg, '指令执行失败')
    }
})

// ---- comreport ----

使用

// vue业务页面

import comreport from 'lay-controls/packages/local/comreport'

cmd_print(tmplt_id) {
    request({
        url: 'api/mpa/comreport/cmd/cmd-print',
        method: 'post',
        params: {
            tmplt_id: tmplt_id,
            busy_type: '',
            param_json: ''
        }
    }).then(resp => {
        console.log(resp.data)

        comreport.templateprint(resp.data)

    }).catch(err => {
        alert(err, '打印失败')
    })
},

函数说明

sync类型的函数，可以使用await 等待

|指令|返回|传参|说明|类型| |---|---|---|---|---| |templateedit|-|cmdid|编辑打印模板|sync| |templateprint|-|cmdid|打印模板预览打印|sync| |print|-|cmdid|打印模板直接打印|sync| |ping|'pong'|-|测试打印助手响应|sync|