jiaoyisuo_2/repo-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 项目基础框架+配置+Kernel

Browse Source
This commit is contained in:
testadmin
2026-04-29 05:35:00 +08:00
parent 6ce7adcbfb
commit 9a6151fce3
5082 changed files with 437062 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin/components/selectTree.html
+425
View File
@@ -0,0 +1,425 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SelectTree.js</title>
<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css" media="all" />
<link rel="stylesheet" href="../src/css/ztree/metro/ztree.css" media="all" />
<link rel="stylesheet" href="../src/css/treeselect.css" media="all" />
</head>
<body>
<div style="width:80%; margin:0 auto;">
<h1 style="text-align: center;padding: 15px 0;font-size: 40px;">LayUI treeselect.js</h1>
<blockquote class="layui-elem-quote" style="border-left:5px solid #FF5722;">
<h1>摘要:</h1>
<p>//LayUI扩展组件之treeselect.js by:<a href="http://kit.zhengjinfan.cn">Van</a></p>
<p>这是一个基于ztree.js和layui扩展的树形下拉多选组件</p>
<br>
<p>作者 ：Van</p>
<p>社区主页：
<a href="http://fly.layui.com/u/784224/" target="_blank">http://fly.layui.com/u/784224/</a>
</p>
<p>E-mail：zheng_jinfan@126.com</p>
<p>QQ交流群：248049395 <span style="color:#009688;font-size:12px;">加时请注明来意.</span></p>
<p>KITADMIN:
<a href="http://kit.zhengjinfan.cn/" target="_blank">http://kit.zhengjinfan.cn/</a>
<span style="color:#009688;font-size:12px;">基于LayUI 2.x 扩展的一个后台管理模板.</span>
</p>
<p>下载地址：<a href="http://kit.zhengjinfan.cn/res/layui-treeselect.zip" target="_blank">http://kit.zhengjinfan.cn/res/layui-treeselect.zip</a></p>
</blockquote>
<fieldset class="layui-elem-field">
<legend>Demo 演示</legend>
<div class="layui-field-box" style="padding-top:45px;">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="color:red;">多选下拉1</label>
<div class="layui-input-block layui-input-treeselect">
<input type="text" name="t1" id="treeselect" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="color:red;">多选下拉2</label>
<div class="layui-input-block layui-input-treeselect">
<input type="text" name="t2" value="5,6,7,8" id="treeselect1" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="color:red;">多选下拉3</label>
<div class="layui-input-block layui-input-treeselect">
<input type="text" name="t3" value="1,4" id="treeselect2" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</fieldset>
<fieldset class="layui-elem-field">
<legend>使用文档</legend>
<div class="layui-field-box">
<blockquote class="layui-elem-quote">
<h1>依赖项：</h1>
<p>1、ztree.js 插件,官方文档地址：<a href="http://www.treejs.cn/v3/api.php" target="_blank">http://www.treejs.cn/v3/api.php</a></p>
</blockquote>
<h1>使用方法及步骤 #</h1>
<pre class="layui-code"><span style="color:#009688;">步骤一：引入css</span> <span style="color:red;">注：标红的都是很重要的~！~</span>
//:除开layui.css额外样式
// ztree.css 是ztree.js 提供的metro皮肤
&lt;link rel="stylesheet" href="../src/css/ztree/metro/ztree.css" media="all" />
// treeselect.css 是我自定的样式
&lt;link rel="stylesheet" href="../src/css/treeselect.css" media="all" />
<br>
<span style="color:#009688;">步骤二：添加html代码(和form表单代码一样简单，只不过需要设置额外的class)</span>
<br>
&lt;form class="layui-form" action="">
&lt;div class="layui-form-item">
&lt;label class="layui-form-label">多选下拉1</label>
&lt;div class="layui-input-block <span style="color:red;">layui-input-treeselect</span>"> //<span style="color:red;">layui-input-treeselect 一定要设置</span>
//<span style="color:red;">treeselect1 Id也一定要设置且唯一</span>
&lt;input type="text" name="t1" id="<span style="color:red;">treeselect1</span>" required lay-verify="required" autocomplete="off" class="layui-input">
&lt;/div>
&lt;/div>
&lt;/form>
<br>
<span style="color:#009688;">步骤二：添加js代码(和使用layui自带模块一样简单)</span>
<br>
&lt;script src="../plugins/layui/layui.js"></script>
&lt;script>
layui.config({
base: <span style="color:red;">'../src/js/'</span> //自定义组件的目录--相对路径
}).use(['form', 'treeselect'], function() {
var form = layui.form,
<span style="color:red;">treeselect = layui.treeselect;</span>
<span style="color:red;">//通过调用render方法进行渲染 [render支持链式调用]</span>
treeselect.render({ //渲染第一个
elem:'#treeselect1', //这个设置必要为id属性且必须加上#号
data:[{
id:1,
name:'父节点一'
},{
id:2,
name:'父节点二',
open:true, //是否默认打开
isParent:true, //是否为父节点
children:[{
id:3,
name:'子节点一'
},{
id:4,
name:'子节点二',
isParent:true,
children:[{
id:5,
name:'子节点2.1'
}]
}]
}]
}).render({ //渲染第二个treeselect
//参数设置如上..
});
// 监听表单提交
form.on('submit(formDemo)', function(data) {
console.log(data);
return false; //返回false阻止提交
});
});
&lt;/script>
<br>
<br>
<br>
//写在最后：ztree.js 是一个很强大的树菜单jq插件，如果当前的设置不能满足你们的需求的话，你们可以直接改源码，以实现你们的个性化需求
</pre>
</div>
</fieldset>
</div>
<script src="../plugins/layui/layui.js"></script>
<script>
layui.config({
base: '../src/js/'
}).use(['form', 'treeselect', 'code'], function() {
var form = layui.form,
treeselect = layui.treeselect,
layer = layui.layer;
layui.code();
treeselect.render({
elem: '#treeselect',
data: [{
id: 1,
pId: 0,
name: "北京"
}, {
id: 2,
pId: 0,
name: "天津"
}, {
id: 3,
pId: 0,
name: "上海"
}, {
id: 6,
pId: 0,
name: "重庆"
}, {
id: 4,
pId: 0,
name: "河北省",
open: true
}, {
id: 41,
pId: 4,
name: "石家庄"
}, {
id: 42,
pId: 4,
name: "保定"
}, {
id: 43,
pId: 4,
name: "邯郸"
}, {
id: 44,
pId: 4,
name: "承德"
}, {
id: 5,
pId: 0,
name: "广东省",
open: true
}, {
id: 51,
pId: 5,
name: "广州"
}, {
id: 52,
pId: 5,
name: "深圳"
}, {
id: 53,
pId: 5,
name: "东莞"
}, {
id: 54,
pId: 5,
name: "佛山"
}, {
id: 6,
pId: 0,
name: "福建省",
open: true
}, {
id: 61,
pId: 6,
name: "福州"
}, {
id: 62,
pId: 6,
name: "厦门"
}, {
id: 63,
pId: 6,
name: "泉州"
}, {
id: 64,
pId: 6,
name: "三明"
}]
}).render({
elem: '#treeselect1',
data: [{
id: 984,
name: '父节点一'
}, {
"id": 1,
"name": "总经办",
"children": [{
"id": 5,
"name": "财务部",
"children": null,
"isParent": false,
"open": true
}, {
"id": 6,
"name": "子公司一",
"children": [{
"id": 7,
"name": "运营部",
"children": null,
"isParent": false,
"open": true
}, {
"id": 8,
"name": "客服部",
"children": [{
"id": 12,
"name": "客服一部",
"children": null,
"isParent": false,
"open": true
}, {
"id": 13,
"name": "客服二部",
"children": null,
"isParent": false,
"open": true
}],
"isParent": true,
"open": true
}, {
"id": 14,
"name": "技术部",
"children": null,
"isParent": false,
"open": true
}],
"isParent": true,
"open": true
}, {
"id": 9,
"name": "子公司二",
"children": [{
"id": 10,
"name": "技术部一",
"children": null,
"isParent": false,
"open": true
}, {
"id": 11,
"name": "技术部二",
"children": null,
"isParent": false,
"open": true
}, {
"id": 15,
"name": "技术部三",
"children": null,
"isParent": false,
"open": true
}],
"isParent": true,
"open": true
}],
"isParent": true,
"open": true
}, {
"id": 16,
"name": "公司二",
"children": [{
"id": 17,
"name": "部门1",
"children": [{
"id": 18,
"name": "部门1-1",
"children": null,
"isParent": false,
"open": true
}, {
"id": 20,
"name": "部门1-2",
"children": null,
"isParent": false,
"open": true
}],
"isParent": true,
"open": true
}],
"isParent": true,
"open": true
}]
}).render({
elem: '#treeselect2',
data: [{
id: 1,
name: '父节点一'
}, {
id: 2,
name: '父节点二',
open: true,
isParent: true,
children: [{
id: 3,
name: '子节点一'
}, {
id: 4,
name: '子节点二',
isParent: true,
children: [{
id: 5,
name: '子节点2.1'
}]
}]
}]
});
form.on('submit(formDemo)', function(data) {
console.log(data);
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</body>
</html>
public/admin/components/table/table.html
+80
View File
@@ -0,0 +1,80 @@
<div class="kit-table">
<form class="layui-form" lay-filter="kit-search-form">
<div class="kit-table-header">
<div class="kit-search-btns">
<a href="javascript:;" class="layui-btn layui-btn-small">新增</a>
<a href="javascript:;" class="layui-btn layui-btn-small layui-btn-normal">新增</a>
<a href="javascript:;" class="layui-btn layui-btn-small layui-btn-warm">新增</a>
<a href="javascript:;" class="layui-btn layui-btn-small layui-btn-danger">新增</a>
</div>
<div class="kit-search-inputs">
<div class="kit-search-keyword">
<input type="text" class="layui-input" name="keyword" placeholder="搜索关键字.." />
<button lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
</div>
<div class="kit-search-more" id="kit-search-more">更多筛选<i class="layui-icon">&#xe61a;</i></div>
</div>
</div>
<div class="kit-search-mored layui-anim layui-anim-upbit">
<div class="kit-search-body">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证手机</label>
<div class="layui-input-inline">
<input type="tel" name="phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="kit-search-footer">
<button type="reset" class="layui-btn layui-btn-small layui-btn-primary kit-btn">重置</button>
<button lay-submit lay-filter="search" class="layui-btn layui-btn-small kit-btn">确定</button>
</div>
</div>
</form>
<div class="kit-table-body">
<table id="demo" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>
</div>
</div>
public/admin/components/table/table.js
+97
View File
@@ -0,0 +1,97 @@
var ModuleTable = function() {
this.config = {
elem: '#demo',
height: 'full-135', //容器高度
url: 'table.json',
page: true,
id: 'demo',
cols: [
[
{ checkbox: true, fixed: true },
{ field: 'id', title: 'ID', width: 80 },
{ field: 'username', title: '用户名', width: 80 },
{ field: 'sex', title: '性别', width: 80 },
{ field: 'city', title: '城市', width: 80 },
{ field: 'sign', title: '签名', width: 177 },
{ field: 'experience', title: '积分', width: 80 },
{ field: 'score', title: '评分', width: 80 },
{ field: 'classify', title: '职业', width: 80 },
{ field: 'wealth', title: '财富', width: 135, sort: true },
{ fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo' }
]
],
done: function(res, curr, count) {
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
// console.log(res);
// //得到当前页码
// console.log(curr);
// //得到数据总量
// console.log(count);
},
loading: true,
//method: 'post'
}
};
ModuleTable.fn = ModuleTable.prototype;
ModuleTable.fn.extend = function(options) {
var table = options.table,
layer = options.layer,
form = options.form,
$ = options.jquery,
currTable = options.currTable; //当前table实例
//渲染表单
form.render(null, 'kit-search-form');
//监听搜索表单提交
form.on('submit(search)', function(data) {
console.log(data.field);
layer.msg(JSON.stringify(data.field));
//带条件查询
currTable.reload({
where: data.field
});
return false;
});
//监听工具条
table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
var tr = obj.tr; //获得当前行 tr 的DOM对象
console.log(obj);
if (layEvent === 'detail') { //查看
console.log(table.checkStatus('demo'));
//do somehing
} else if (layEvent === 'del') { //删除
// var htm = [
// '<p>确定要删除吗?</p>',
// '<button class="layui-btn layui-btn-mini layui-btn-primary">取消</button>',
// '<button class="layui-btn layui-btn-mini">确定</button>'
// ];
// layer.tips(htm.join(''), this, {
// time: 0,
// skin: 'kit-table'
// });
layer.confirm('真的删除行么', function(index) {
obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123',
title: 'xxx'
});
}
});
$('#kit-search-more').on('click', function() {
$('.kit-search-mored').toggle();
});
}
var moduleTable = new ModuleTable();