RXThinkCMF_TP5.1 - 在线文档

# 案例演示

# 案例概述

在前面的章节《系统基础配置》、《UI组件》、《JS组件》以及《模板布局》中我们详细的介绍了系统开发所需了解的功能和技能，那么我们在了解了这些内容后如何快速的开发业务模块呢？本章节我们将重点给大家演示如何去搭建一个模块，如何使用系统UI组件、系统JS组件，我们以职级管理为例，详解一下一个模块需要创建哪些PHP文件和JS文件，详细内容如下文所示：

# 控制器文件(Level.php)

<?php


namespace app\admin\controller;


use app\admin\service\LevelService;
use app\common\controller\Backend;

/**
 * 职级管理-控制器
 * @author 牧羊人
 * @since: 2020/6/30
 * Class Level
 * @package app\admin\controller
 */
class Level extends Backend
{
    /**
     * 初始化方法
     * @author 牧羊人
     * @since: 2020/6/30
     */
    public function initialize()
    {
        parent::initialize(); // TODO: Change the autogenerated stub
        $this->model = new \app\admin\model\Level();
        $this->service = new LevelService();
    }
}
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

# 模型文件(Level.php)

<?php


namespace app\admin\model;


use app\common\model\BaseModel;

/**
 * 职级模型
 * @author 牧羊人
 * @since: 2020/6/30
 * Class Level
 * @package app\admin\model
 */
class Level extends BaseModel
{
    // 设置数据表名
    protected $name = "level";

    /**
     * 获取缓存信息
     * @param int $id 记录ID
     * @return \app\common\model\数据信息|mixed
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\ModelNotFoundException
     * @author 牧羊人
     * @since: 2020/6/30
     */
    public function getInfo($id)
    {
        return parent::getInfo($id); // TODO: Change the autogenerated stub
    }
}
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

# 服务类文件(LevelService.php)

<?php


namespace app\admin\service;


use app\admin\model\Level;
use app\common\service\BaseService;

/**
 * 职级管理-服务类
 * @author 牧羊人
 * @since: 2020/6/30
 * Class LevelService
 * @package app\admin\service
 */
class LevelService extends BaseService
{
    /**
     * 构造函数
     * LevelService constructor.
     */
    public function __construct()
    {
        $this->model = new Level();
    }

}
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

# 数据列表文件(index.html)


<!-- 引入基类模板 -->
{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('func/query',array('查询'))}
					{:widget('func/add',array('添加职级'))}
					{:widget('func/dall',array('批量删除'))}
				</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

# 编辑表单文件(edit.html)

<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">
			{:widget('common/switchCheck',array('status', '是|否', 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文件(think_level.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

总结：var cols = [];这个参数中的内容出自Layui的列数据字段展示，此处尊重Layui规范，可以根据自己的需求更改字段名称及列宽度、是否居中显示等等。

# 模块演示效果

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

  • 职级列表

    mixureSecure

  • 职级添加/编辑

    mixureSecure

  • 职级删除

    mixureSecure

← 集成模块 →