组件案例

概述

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

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>

模块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("开关回调成功");
        });
    }
});

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

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

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

效果展示

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

• 职级列表

  

• 职级添加/编辑

  

• 职级删除