# 组件案例

# 概述

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

# 列表页

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


<!-- 引入基类模板 -->
{extend name='public/base' /}

<!-- 主体部分 -->
{block name='content'}

	<!-- 功能操作区一 -->
	<form class="layui-form toolbar">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label w-auto">职级名称:</label>
				<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" style="width: auto;">
					{widget:query name="查询"}
					{widget:add name="添加职级"}
					{widget:dall name="批量删除"}
				</div>
			</div>
		</div>
	</form>

	<!-- TABLE渲染区 -->
	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>
	
	<!-- 操作功能区二 -->
	<script type="text/html" id="toolBar">
		{widget:edit name="编辑"}
		{widget:delete name="删除"}
	</script>

	<!-- 状态 -->
	<script type="text/html" id="statusTpl">
		<input type="checkbox" name="status" value="{literal}{{ d.id }}{/literal}" lay-skin="switch" lay-text="正常|禁用" lay-filter="status" {literal}{{ d.status == 1 ? 'checked' : '' }}{/literal} >
	</script>

{/block}
 

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组件部分》都有详细的讲解,不熟悉的朋友可以查阅;

# 编辑页

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

<form class="layui-form model-form" action="">
	<input name="id" id="id" type="hidden" value="{$info.id|default=0}">
	<div class="layui-form-item">
		<label class="layui-form-label">职级名称:</label>
		<div class="layui-input-block">
			<input name="name" value="{$info.name|default=''}" 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">
			{common:switch name="status" title="是|否" value="isset($info['status']) ? $info['status'] : 1"}
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">序号:</label>
		<div class="layui-input-block">
			<input name="sort" id="sort" value="{$info.sort|default=125}" lay-verify="required|number" autocomplete="off" placeholder="请输入序号" class="layui-input" type="text">
		</div>
	</div>
	{widget:submit name="submit|立即保存,close|关闭"}
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 模块JS

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

/**
 * 职级管理
 * @author 牧羊人
 * @since 2020/7/4
 */
layui.use(['function'], function () {
    //声明变量
    var func = layui.function
        , $ = 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: 300, title: '职级名称', align: 'center'}
            , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
            , {field: 'sort', width: 80, title: '排序', align: 'center'}
            , {field: 'create_user_name', width: 100, title: '创建人', align: 'center'}
            , {field: 'create_time', width: 180, title: '创建时间', align: 'center', sort: true}
            , {field: 'update_time', width: 180, title: '更新时间', align: 'center', sort: true}
            , {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

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

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

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

# 效果展示

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

  • 职级列表

    mixureSecure

  • 职级添加/编辑

    mixureSecure

  • 职级删除

    mixureSecure