# 组件案例

# 概述

  • 经过上面《功能组件》《业务组件》两个章节我们详细的介绍组件的原理以及实现方式,充分了考虑了使用场景,进行了多元化、灵活性的扩展封装,具体的细节在此不再累赘的描述,如有不理解的可以查阅上两个章节的文档,本章节我们将重点给大家实例演示下,JS组件库是如何在实际模块开发中UI部分的使用,上述章节讲解了那么多,其实那都是在组件内部复杂数据处理、逻辑处理,因为框架是高度化封装,其实真正进行模块开发时使用起来非常的简单,代码量极少,尤其是JS代码,几乎看不到多余的代码,就是简简单单的调用了几个封装好的组件以及两个HTML文件列表页编辑页,整个模块的功能就全部出来,可以直接使用;
  • 框架UI部分是基于《Thymeleaf模板引擎》,语法非常的简单,尤其在框架进行了封装后,更加的简单便捷,如果不太熟悉的朋友可以直接找《度娘》或者查阅官网,整体框架我们采用采用的是Layout模板布局,对页面进行了拆分头部脚本主题内容三个部分,具体内容请查看项目模块;

# 列表页

列表页主要是对数据进行增删改查的地方,对数据进行精准的维护,下面我们直接展示列表页的相关代码,如下所示:

<html layout:decorator="public/layout" xmlns:miguo="http://www.w3.org/1999/html">
<div layout:fragment="content">

    <!-- 表格工具栏 -->
    <form class="layui-form toolbar">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入职级名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 状态下拉单选 -->
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <!-- 下拉单选 -->
                    <widget:singleSelect name="status|0|状态|name|id" th:data="${LEVEL_STATUS_LIST}" value="0"/>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: auto;">
                    <widget:btnQuery name="查询"/>
                    <widget:btnAdd name="添加职级"/>
                    <widget:btnDAll name="批量删除"/>
                </div>
            </div>
        </div>
    </form>

    <!-- 数据表格 -->
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

    <!-- 表格操作列 -->
    <script type="text/html" id="toolBar">
        <widget:btnEdit name="编辑"/>
        <widget:btnDel name="删除"/>
    </script>

    <!-- 状态 -->
    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|停用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
    </script>
</div>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

HTML页面中涉及的组件部分我们在《UI组件部分》都有详细的讲解,不熟悉的朋友可以查阅;

# 编辑页

编辑表单是表单控件的集合,我们所需要的提交的数据都会有一个完整的控件,如下所示:

<html layout:decorator="public/form" xmlns:miguo="http://www.w3.org/1999/html">
<div layout:fragment="content">
	<form class="layui-form model-form" action="">
		<input name="id" type="hidden" th:value="${info['id']}?:0">
		<div class="layui-form-item">
			<label class="layui-form-label">职级名称:</label>
			<div class="layui-input-block">
				<input name="name" th:value="${info['name']}" lay-verify="required" autocomplete="off" placeholder="请输入职级名称" class="layui-input" type="text">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态:</label>
			<div class="layui-input-block">
				<widget:switchCheck name="status" data="正常|停用" th:value="${info['status']} ?: 1"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">显示顺序:</label>
			<div class="layui-input-block">
				<input name="sort" th:value="${info['sort']}" lay-verify="required|number" autocomplete="off" placeholder="请输入显示顺序" class="layui-input" type="text">
			</div>
		</div>
		<widget:btnSubmit name="submit|立即保存,close|关闭"/>
	</form>
</div>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 模块JS

上述分别为列表HTML页面编辑页HTML页面,页面交互部分都是交给模块JS进行处理的,模块JS部分如下所示:

/**
 * 职级
 * @auth 鲲鹏
 * @date 2020-04-20
 */
layui.use(['func'], function () {

    //声明变量
    var func = layui.func
        , $ = layui.$;

    if (A == 'index') {
        //【TABLE列数组】
        var cols = [
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', width: 80, title: 'ID', align: 'center', sort: true, fixed: 'left'}
            , {field: 'name', width: 200, title: '职级名称', align: 'center'}
            , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
            , {field: 'sort', width: 100, title: '显示顺序', align: 'center'}
            , {field: 'createUserName', width: 100, title: '添加人', align: 'center'}
            , {field: 'createTime', width: 180, title: '创建时间', align: 'center'}
            , {field: 'updateUserName', width: 100, title: '更新人', align: 'center'}
            , {field: 'updateTime', width: 180, title: '更新时间', align: 'center'}
            , {fixed: 'right', width: 150, title: '功能操作', align: 'center', toolbar: '#toolBar'}
        ];

        //【渲染TABLE】
        func.tableIns(cols, "tableList");

        //【设置弹框】
        func.setWin("职级", 500, 300);

        //【设置状态】
        func.formSwitch('status', null, function (data, res) {
            console.log("开关回调成功");
        });
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

模块JS代码部分很简洁,基本都是调用业务JS组件传入参数表可实现整个模块功能业务的功能,实现就是如此简单,参数分析:

  • cols:此参数是列表数据列字段的信息,主要定义了列表具有哪些参数、参数标题、列宽度、操作功能等等;
  • tableIns:调用组件方法,初始化数据列表,组件动态发起网络请求并进行一系列的数据渲染,是不是特别简单,一个完整的列表功能的实现只需简单的调用func.tableIns(cols, "tableList")便可完美的实现了;
  • setWin:调用组件设置弹窗所需参数,当点击添加编辑详情等需要弹窗时组件内部的showWin方法会自动解析;
  • formSwitch:捕捉开关事件、发起网络请求,实现为记录状态的维护工作;

总结:一个完整的模块就这么简简单单的实现了,对内容不太理解的朋友请转至《UI组件》《JS组件》章节详细的阅读;

# 效果展示

至此我们的模块可以正式可以运行预览效果了,增删改查整个模块的所有功能全部完毕,下面我们直接看效果吧,请看下图:

  • 职级列表

    mixureSecure

  • 职级添加/编辑

    mixureSecure

  • 职级删除

    mixureSecure