git init
This commit is contained in:
Lwei
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<style>
|
||||
.layui-input-block input {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">基本信息</li>
|
||||
<li>安全设置</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="layui-tab-item layui-show">
|
||||
|
||||
<form class="layui-form" lay-filter="baseInfo">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">昵称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="nickname" 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-block">
|
||||
<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">联系电话</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="saveBaseInfo">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-tab-item">
|
||||
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">原始密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="old_password" 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-block">
|
||||
<input type="password" name="password" 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-block">
|
||||
<input type="password" name="password_confirm" required lay-verify="required" placeholder="请再次输入新密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="savePassword">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: "/app/admin/account/info",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
form.val("baseInfo", res.data);
|
||||
}
|
||||
});
|
||||
|
||||
form.on("submit(saveBaseInfo)", function(data){
|
||||
$.ajax({
|
||||
url: "/app/admin/account/update",
|
||||
dataType: "json",
|
||||
type: "POST",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on("submit(savePassword)", function(data){
|
||||
$.ajax({
|
||||
url: "/app/admin/account/password",
|
||||
dataType: "json",
|
||||
type: "POST",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>登录</title>
|
||||
<!-- 样 式 文 件 -->
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/pages/login.css" />
|
||||
</head>
|
||||
<!-- 代 码 结 构 -->
|
||||
<body background="/app/admin/admin/images/background.svg" style="background-size: cover;">
|
||||
<form class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<img class="logo" src="<?=$logo?>" />
|
||||
<div class="title pear-text"><?=$title?></div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input lay-verify="required" hover class="layui-input" type="text" name="username" value="" placeholder="用户名" />
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input lay-verify="required" hover class="layui-input" type="password" name="password" value="" placeholder="密码" />
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input hover lay-verify="required" class="code layui-input layui-input-inline" name="captcha" placeholder="验证码" />
|
||||
<img class="codeImage" width="120px"/>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button type="submit" class="pear-btn pear-btn-primary login" lay-submit lay-filter="login">
|
||||
登 入
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
var color = localStorage.getItem("theme-color-color");
|
||||
var second = localStorage.getItem("theme-color-second");
|
||||
if (!color || !second) {
|
||||
localStorage.setItem("theme-color-color", "#2d8cf0");
|
||||
localStorage.setItem("theme-color-second", "#ecf5ff");
|
||||
}
|
||||
</script>
|
||||
<!-- 资 源 引 入 -->
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'button', 'popup', 'layer', 'theme', 'admin'], function() {
|
||||
|
||||
var $ = layui.$, layer = layui.layer, form = layui.form;
|
||||
function switchCaptcha() {
|
||||
$('.codeImage').attr("src", "/app/admin/account/captcha/login?v=" + new Date().getTime());
|
||||
}
|
||||
switchCaptcha();
|
||||
// 登 录 提 交
|
||||
form.on('submit(login)', function (data) {
|
||||
layer.load();
|
||||
$.ajax({
|
||||
url: '/app/admin/account/login',
|
||||
type: "POST",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
layer.closeAll('loading');
|
||||
if (!res.code) {
|
||||
layui.popup.success('登录成功', function () {
|
||||
location.reload();
|
||||
})
|
||||
} else {
|
||||
layui.popup.failure(res.msg)
|
||||
switchCaptcha();
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
$('.codeImage').on('click', function () {
|
||||
switchCaptcha();
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,414 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">昵称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="nickname" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="email" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">创建时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="created_at">
|
||||
<input type="text" autocomplete="off" name="created_at[]" id="created_at-date-start" class="layui-input inline-block" placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" name="created_at[]" id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.admin.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.admin.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
{{# if(d.show_toolbar){ }}
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.admin.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.admin.delete">删除</button>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/admin/select";
|
||||
const UPDATE_API = "/app/admin/admin/update";
|
||||
const DELETE_API = "/app/admin/admin/delete";
|
||||
const INSERT_URL = "/app/admin/admin/insert";
|
||||
const UPDATE_URL = "/app/admin/admin/update";
|
||||
|
||||
// 字段 创建时间 created_at
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#created_at",
|
||||
range: ["#created_at-date-start", "#created_at-date-end"],
|
||||
});
|
||||
})
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
},{
|
||||
title: "ID",
|
||||
field: "id",
|
||||
width: 100,
|
||||
sort: true,
|
||||
},{
|
||||
title: "用户名",
|
||||
field: "username",
|
||||
},{
|
||||
title: "昵称",
|
||||
field: "nickname",
|
||||
},{
|
||||
title: "密码",
|
||||
field: "password",
|
||||
hide: true,
|
||||
},{
|
||||
title: "头像",
|
||||
field: "avatar",
|
||||
templet: function (d) {
|
||||
return '<img src="'+encodeURI(d['avatar'])+'" style="max-width:32px;max-height:32px;" alt="" />'
|
||||
},
|
||||
width: 90,
|
||||
},{
|
||||
title: "邮箱",
|
||||
field: "email",
|
||||
hide: true,
|
||||
},{
|
||||
title: "手机",
|
||||
field: "mobile",
|
||||
hide: true,
|
||||
},{
|
||||
title: "创建时间",
|
||||
field: "created_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "登录时间",
|
||||
field: "login_at",
|
||||
},{
|
||||
title: "角色",
|
||||
field: "roles",
|
||||
templet: function (d) {
|
||||
let field = "roles";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
}
|
||||
},{
|
||||
title: "禁用",
|
||||
field: "status",
|
||||
templet: function (d) {
|
||||
let field = "status";
|
||||
form.on("switch("+field+")", function (data) {
|
||||
let load = layer.load();
|
||||
let postData = {};
|
||||
postData[field] = data.elem.checked ? 1 : 0;
|
||||
postData[PRIMARY_KEY] = this.value;
|
||||
$.post(UPDATE_API, postData, function (res) {
|
||||
layer.close(load);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg, function () {
|
||||
data.elem.checked = !data.elem.checked;
|
||||
form.render();
|
||||
});
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
})
|
||||
});
|
||||
let checked = d[field] === 1 ? "checked" : "";
|
||||
if (parent.Admin.Account.id === d.id) return '';
|
||||
return '<input type="checkbox" value="'+util.escape(d[PRIMARY_KEY])+'" lay-filter="'+util.escape(field)+'" lay-skin="switch" lay-text="'+util.escape('')+'" '+checked+'/>';
|
||||
},
|
||||
width: 90,
|
||||
},{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取表格中下拉或树形组件数据
|
||||
let apis = [];
|
||||
apis.push(["roles", "/app/admin/role/select?format=select"]);
|
||||
let apiResults = {};
|
||||
apiResults["roles"] = [];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function(data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function(obj){
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function(obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">角色</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="roles" id="roles" value=""></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">昵称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="nickname" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="password" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">头像</label>
|
||||
<div class="layui-input-block">
|
||||
<img class="img-3" src=""/>
|
||||
<input type="text" style="display:none" name="avatar" value="/app/admin/avatar.png" />
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="avatar">
|
||||
<i class="layui-icon layui-icon-upload"></i>上传图片
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-avatar">
|
||||
<i class="layui-icon layui-icon-align-left"></i>选择图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="email" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const INSERT_API = "/app/admin/admin/insert";
|
||||
|
||||
// 字段 头像 avatar
|
||||
layui.use(["upload", "layer"], function() {
|
||||
let input = layui.$("#avatar").prev();
|
||||
input.prev().attr("src", input.val());
|
||||
layui.$("#attachment-choose-avatar").on("click", function() {
|
||||
parent.layer.open({
|
||||
type: 2,
|
||||
title: "选择附件",
|
||||
content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
|
||||
area: ["95%", "90%"],
|
||||
success: function (layero, index) {
|
||||
parent.layui.$("#layui-layer" + index).data("callback", function (data) {
|
||||
input.val(data.url).prev().attr("src", data.url);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
layui.upload.render({
|
||||
elem: "#avatar",
|
||||
url: "/app/admin/upload/avatar",
|
||||
value: "/app/admin/avatar.png",
|
||||
acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
|
||||
field: "__file__",
|
||||
done: function (res) {
|
||||
if (res.code > 0) return layui.layer.msg(res.msg);
|
||||
this.item.prev().val(res.data.url).prev().attr("src", res.data.url);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 角色 roles
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/role/select?format=tree",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#roles").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
if (!top.Admin.Account.isSuperAdmin) {
|
||||
layui.each(res.data, function (k, v) {
|
||||
v.disabled = true;
|
||||
});
|
||||
}
|
||||
layui.xmSelect.render({
|
||||
el: "#roles",
|
||||
name: "roles",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
layVerify: "required",
|
||||
tree: {"show":true, expandedKeys:true, strict:false},
|
||||
toolbar: {show:true, list:["ALL","CLEAR","REVERSE"]},
|
||||
});
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: INSERT_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">角色</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="roles" id="roles" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">昵称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="nickname" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="password" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">头像</label>
|
||||
<div class="layui-input-block">
|
||||
<img class="img-3" src=""/>
|
||||
<input type="text" style="display:none" name="avatar" value="" />
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="avatar" permission="app.admin.upload.avatar">
|
||||
<i class="layui-icon layui-icon-upload"></i>上传图片
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-avatar" permission="app.admin.upload.attachment">
|
||||
<i class="layui-icon layui-icon-align-left"></i>选择图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="email" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/admin/select" + location.search;
|
||||
const UPDATE_API = "/app/admin/admin/update";
|
||||
|
||||
// 获取数据库记录
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: SELECT_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 给表单初始化数据
|
||||
layui.each(res.data[0], function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
if (key === "password") {
|
||||
obj.attr("placeholder", "不更新密码请留空");
|
||||
return;
|
||||
}
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.val(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 字段 头像 avatar
|
||||
layui.use(["upload", "layer"], function() {
|
||||
let input = layui.$("#avatar").prev();
|
||||
input.prev().attr("src", input.val());
|
||||
layui.$("#attachment-choose-avatar").on("click", function() {
|
||||
parent.layer.open({
|
||||
type: 2,
|
||||
title: "选择附件",
|
||||
content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
|
||||
area: ["95%", "90%"],
|
||||
success: function (layero, index) {
|
||||
parent.layui.$("#layui-layer" + index).data("callback", function (data) {
|
||||
input.val(data.url).prev().attr("src", data.url);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
layui.upload.render({
|
||||
elem: "#avatar",
|
||||
url: "/app/admin/upload/avatar",
|
||||
acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
|
||||
field: "__file__",
|
||||
done: function (res) {
|
||||
if (res.code > 0) return layui.layer.msg(res.msg);
|
||||
this.item.prev().val(res.data.url).prev().attr("src", res.data.url);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 角色 roles
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/role/select?format=tree",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#roles").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
if (!top.Admin.Account.isSuperAdmin) {
|
||||
layui.each(res.data, function (k, v) {
|
||||
v.disabled = true;
|
||||
});
|
||||
}
|
||||
layui.xmSelect.render({
|
||||
el: "#roles",
|
||||
name: "roles",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
layVerify: "required",
|
||||
tree: {show: true, expandedKeys: true, strict: false},
|
||||
toolbar: {show: true, list: ["ALL","CLEAR","REVERSE"]},
|
||||
})
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link href="/app/admin/component/pear/css/pear.css" rel="stylesheet" />
|
||||
<link href="/app/admin/admin/css/pages/error.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<img src="/app/admin/admin/images/403.svg" alt="">
|
||||
<div class="content-r">
|
||||
<h1>403</h1>
|
||||
<p>抱歉，你无权访问该页面</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,326 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<style>
|
||||
.layui-input-block input {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">基本信息</li>
|
||||
<li>菜单配置</li>
|
||||
<li>页面配置</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="layui-tab-item layui-show">
|
||||
|
||||
<form class="layui-form" lay-filter="baseInfo">
|
||||
<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">网站Logo</label>
|
||||
<div class="layui-input-block">
|
||||
<img class="img-3" src=""/>
|
||||
<input type="text" style="display:none" name="image" value="/app/admin/avatar.png" />
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="image" permission="app.admin.upload.avatar">
|
||||
<i class="layui-icon layui-icon-upload"></i>上传图片
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-image" permission="app.admin.upload.attachment">
|
||||
<i class="layui-icon layui-icon-align-left"></i>选择图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">ICP备案号</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="icp" placeholder="请输入ICP备案号" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">公安网备</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="beian" placeholder="请输入公安网备号" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">其它</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="footer_txt" placeholder="其它展示在页面底部的内容" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="saveBaseInfo">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 菜单设置 -->
|
||||
<div class="layui-tab-item">
|
||||
|
||||
<form class="layui-form" lay-filter="menuInfo">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">菜单url</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="data" required lay-verify="required" placeholder="请输入菜单url" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">默认菜单ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="select" required lay-verify="required" placeholder="请输入默认菜单ID" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开启手风琴</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="accordion" id="accordion" lay-skin="switch" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">折叠菜单</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" id="collapse" name="collapse" lay-skin="switch" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="saveMenuInfo">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- tab设置 -->
|
||||
<div class="layui-tab-item">
|
||||
|
||||
<form class="layui-form" lay-filter="tabInfo">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">保持标签</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="keepState" lay-skin="switch" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">记住标签</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="session" lay-skin="switch" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">预加载标签</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="preload" lay-skin="switch" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">最大标签数</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="max" 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-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">主标签URL</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="href" required lay-verify="required" placeholder="请输入菜单url" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">主标签ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="id" required lay-verify="required" placeholder="请输入主页标签ID" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="saveTabInfo">
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 基础设置
|
||||
layui.use(["upload", "layer", "popup"], function() {
|
||||
let $ = layui.$;
|
||||
let form = layui.form;
|
||||
|
||||
// image
|
||||
let input = $("#image").prev();
|
||||
input.prev().attr("src", input.val());
|
||||
layui.$("#attachment-choose-image").on("click", function() {
|
||||
parent.layer.open({
|
||||
type: 2,
|
||||
title: "选择附件",
|
||||
content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
|
||||
area: ["95%", "90%"],
|
||||
success: function (layero, index) {
|
||||
parent.layui.$("#layui-layer" + index).data("callback", function (data) {
|
||||
input.val(data.url).prev().attr("src", data.url);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
layui.upload.render({
|
||||
elem: "#image",
|
||||
url: "/app/admin/upload/avatar",
|
||||
acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
|
||||
done: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
this.item.prev().val(res.data.url).prev().attr("src", res.data.url);
|
||||
}
|
||||
});
|
||||
|
||||
// 提交
|
||||
form.on("submit(saveBaseInfo)", function(data){
|
||||
$.ajax({
|
||||
url: "/app/admin/config/update",
|
||||
dataType: "json",
|
||||
type: "POST",
|
||||
data: {logo: data.field},
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
// 菜单设置
|
||||
layui.use(["upload", "layer", "popup"], function() {
|
||||
let $ = layui.$;
|
||||
let form = layui.form;
|
||||
// 提交
|
||||
form.on("submit(saveMenuInfo)", function(data){
|
||||
$.ajax({
|
||||
url: "/app/admin/config/update",
|
||||
dataType: "json",
|
||||
type: "POST",
|
||||
data: {menu: data.field},
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
// 标签设置
|
||||
layui.use(["upload", "layer", "popup"], function() {
|
||||
let $ = layui.$;
|
||||
let form = layui.form;
|
||||
// 提交
|
||||
form.on("submit(saveTabInfo)", function(data){
|
||||
let field = data.field;
|
||||
field.index = {
|
||||
id: field.id,
|
||||
href: field.href,
|
||||
title: field.title,
|
||||
};
|
||||
delete data.field;
|
||||
$.ajax({
|
||||
url: "/app/admin/config/update",
|
||||
dataType: "json",
|
||||
type: "POST",
|
||||
data: {tab: field},
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
}
|
||||
});
|
||||
// 删除sessionStorage缓存
|
||||
sessionStorage.clear();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
layui.use(["form"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: "/app/admin/config/get",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
form.val("baseInfo", res.logo);
|
||||
$("#image").prev().val(res.logo.image).prev().attr("src", res.logo.image);
|
||||
form.val("menuInfo", res.menu);
|
||||
let tab = res.tab;
|
||||
let index = tab.index;
|
||||
delete tab.index;
|
||||
tab.id = index.id;
|
||||
tab.title = index.title;
|
||||
tab.href= index.href;
|
||||
form.val("tabInfo", res.tab);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>表单生成器</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<style>
|
||||
html,body{background-color: whitesmoke}
|
||||
.layui-fluid{margin-top: 15px;}
|
||||
.content{min-height: 1200px;}
|
||||
.nav{text-align: center;}
|
||||
.nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;border-radius: 1px;}
|
||||
.nav button:hover{background-color: #5FB878;border: 1px solid #5FB878;color: white;}
|
||||
.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;}
|
||||
.code-show{min-height: 700px;}
|
||||
.js-show{min-height: 360px;}
|
||||
.layui-card-body {padding: 10px;}
|
||||
.button{line-height: 100% !important;}
|
||||
.content .pear-btn-md, .content .pear-btn-sm, .content .pear-btn-xs, .content .pear-btn {
|
||||
line-height: 100%;
|
||||
letter-spacing: 2px;
|
||||
padding: 0 15px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md1">
|
||||
<div class="layui-card nav click-but">
|
||||
<div class="layui-card-header">长</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="text">输入框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="password">密码框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="select">选择框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="checkbox_a">复选框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="checkbox_b">开关</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="radio">单选框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="textarea">文本域</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="icon">图标</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="multiSelect">下拉多选</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="treeSelectOne">树单选</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="tree">树多选</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="upload">上传文件</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="uploadImg">上传图片</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card nav">
|
||||
<div class="layui-card-header">短</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="text">输入框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="password">密码框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="select">选择框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="checkbox_a">复选框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="checkbox_b">开关</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="radio">单选框</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="textarea">文本域</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="icon">图标</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="multiSelect">下拉多选</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="treeSelectOne">树单选</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="tree">树多选</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="upload">上传文件</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="uploadImg">上传图片</button>
|
||||
<button class="pear-btn pear-btn-sm" plain data-size="block" data-type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card nav">
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-danger pear-btn-sm del-form" data-type="del"> <i class="layui-icon layui-font-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-col-md5">
|
||||
<div class="layui-card content">
|
||||
<div class="layui-card-header">
|
||||
view
|
||||
</div>
|
||||
<div class="layui-card-body code">
|
||||
<form class="layui-form" action="" onsubmit="return false">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card r-code-html">
|
||||
<div class="layui-card-header">html</div>
|
||||
<div class="layui-card-body">
|
||||
<textarea name="" class="layui-textarea code-show"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card r-code-js">
|
||||
<div class="layui-card-header">code</div>
|
||||
<div class="layui-card-body">
|
||||
<textarea name="" class="layui-textarea js-show"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
layui.use("design");
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,323 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">名称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.dict.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.dict.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.dict.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.dict.delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const SELECT_API = "/app/admin/dict/select";
|
||||
const UPDATE_API = "/app/admin/dict/update";
|
||||
const DELETE_API = "/app/admin/dict/delete";
|
||||
const INSERT_URL = "/app/admin/dict/insert";
|
||||
const UPDATE_URL = "/app/admin/dict/update";
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox",
|
||||
}, {
|
||||
title : "名称",
|
||||
field : "name",
|
||||
width : 200,
|
||||
templet: function (d) {
|
||||
let field = "name";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((
|
||||
d[field] + ""
|
||||
).split(","), function (k, v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
},
|
||||
}, {
|
||||
title : "值",
|
||||
field : "value",
|
||||
templet: function (d) {
|
||||
const dicts = JSON.parse(d.value)
|
||||
return dicts.map(dict => `<span class="layui-badge layui-bg-blue">${dict.name}: ${dict.value}</span>`).join(' ');
|
||||
},
|
||||
}, {
|
||||
title: "创建时间",
|
||||
field: "created_at",
|
||||
width: 180,
|
||||
hide : true,
|
||||
}, {
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
width: 180,
|
||||
hide : true,
|
||||
}, {
|
||||
title : "操作",
|
||||
toolbar: "#table-bar",
|
||||
align : "center",
|
||||
width : 130,
|
||||
fixed : "right",
|
||||
},
|
||||
];
|
||||
|
||||
let apiResults = {};
|
||||
const loadDictNames = () => {
|
||||
let apis = [];
|
||||
apis.push(["name", "/app/admin/dict/get/dict_name"]);
|
||||
apiResults["name"] = [];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url : url,
|
||||
dateType: "json",
|
||||
success : function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = `${item.name}: ${item.value}`;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
loadDictNames();
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"]
|
||||
});
|
||||
}
|
||||
render();
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function(data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function(obj){
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"500px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function(obj) {
|
||||
let value = obj.data["name"];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"500px"],
|
||||
content: UPDATE_URL + "?name=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data["name"]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, "name");
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data["name"] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
loadDictNames()
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增字典</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.mainBox {
|
||||
width: auto !important;
|
||||
}
|
||||
.layui-tab .layui-table-cell {
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-table-body ,.layui-table-box{
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-tab .layui-form-select dl {
|
||||
max-height: 190px;
|
||||
}
|
||||
.layui-table-body .layui-table-col-special:last-child {
|
||||
width: 100% !important;
|
||||
border-right: 1px solid #eee !important;
|
||||
}
|
||||
xm-select {
|
||||
min-height: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
xm-select .xm-body .xm-option .xm-option-icon {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form class="layui-form" action="" lay-filter="create-dict-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label required" style="width:auto">字典名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入英文字母组合">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<!-- 字段属性 -->
|
||||
<table id="column-table" lay-filter="column-table"></table>
|
||||
|
||||
<script type="text/html" id="column-toolbar">
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-value">
|
||||
<input type="text" name="value[{{ d.LAY_NUM-1 }}][value]" placeholder="值" autocomplete="off" class="layui-input" value="{{ d.value }}">
|
||||
<input type="hidden" name="value[{{ d.LAY_NUM-1 }}][_field_id]" value="{{ d._field_id }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-name">
|
||||
<input type="text" name="value[{{ d.LAY_NUM-1 }}][name]" placeholder="标题" autocomplete="off" class="layui-input" value="{{ d.name }}">
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
const INSERT_API = "/app/admin/dict/insert";
|
||||
|
||||
// 字段设置
|
||||
layui.use(["table", "common", "popup"], function () {
|
||||
|
||||
let table = layui.table;
|
||||
let common = layui.common;
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: "值",
|
||||
field: "value",
|
||||
templet: "#col-value"
|
||||
},
|
||||
{
|
||||
title: "标题",
|
||||
field: "name",
|
||||
templet: "#col-name",
|
||||
}
|
||||
];
|
||||
|
||||
window._field_id = 0;
|
||||
let data = [{
|
||||
_field_id: _field_id++,
|
||||
value : "",
|
||||
name: "",
|
||||
}];
|
||||
|
||||
table.render({
|
||||
elem: "#column-table",
|
||||
cols: [cols],
|
||||
data: data,
|
||||
cellMinWidth: 40,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
toolbar: "#column-toolbar",
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
table.on("toolbar(column-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
let add = function() {
|
||||
syncTableData();
|
||||
let options = table.getData("column-table");
|
||||
options.push({
|
||||
_field_id: _field_id++,
|
||||
value : "",
|
||||
name: "",
|
||||
});
|
||||
table.reloadData("column-table", {data:options});
|
||||
}
|
||||
|
||||
let batchRemove = function(obj) {
|
||||
var checkIds = common.checkField(obj,"_field_id");
|
||||
if (checkIds === "") return layui.popup.warning("未选中数据");
|
||||
let data = table.getData("column-table");
|
||||
let newData = [];
|
||||
let deleteIds = checkIds.split(",");
|
||||
layui.each(data, function (index, item) {
|
||||
if (deleteIds.indexOf(item._field_id + "") === -1) {
|
||||
newData.push(item);
|
||||
}
|
||||
});
|
||||
table.reloadData("column-table", {data: newData})
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
//提交事件
|
||||
layui.form.on("submit(save)", function () {
|
||||
let data = layui.form.val("create-dict-form");
|
||||
layui.$.ajax({
|
||||
url: INSERT_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
window.syncTableData = function () {
|
||||
let tableData = layui.form.val("create-dict-form");
|
||||
let columnTableData = [];
|
||||
let len = Object.keys(tableData).length;
|
||||
let id = 0;
|
||||
window._key_id = 0;
|
||||
while (id < len) {
|
||||
// column data
|
||||
if (typeof tableData["value[" + id + "][_field_id]"] !== "undefined") {
|
||||
columnTableData.push({
|
||||
_field_id: tableData["value[" + id + "][_field_id]"],
|
||||
name : tableData["value[" + id + "][name]"],
|
||||
value: tableData["value[" + id + "][value]"],
|
||||
});
|
||||
}
|
||||
_key_id++;
|
||||
id++;
|
||||
}
|
||||
layui.table.reloadData("column-table", {data: columnTableData});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新字典</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.mainBox {
|
||||
width: auto !important;
|
||||
}
|
||||
.layui-tab .layui-table-cell {
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-table-body ,.layui-table-box{
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-tab .layui-form-select dl {
|
||||
max-height: 190px;
|
||||
}
|
||||
.layui-table-body .layui-table-col-special:last-child {
|
||||
width: 100% !important;
|
||||
border-right: 1px solid #eee !important;
|
||||
}
|
||||
xm-select {
|
||||
min-height: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
xm-select .xm-body .xm-option .xm-option-icon {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form class="layui-form" action="" lay-filter="create-dict-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label required" style="width:auto">字典名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="name" required lay-verify="required" disabled autocomplete="off" class="layui-input" placeholder="请输入英文字母组合">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<!-- 字段属性 -->
|
||||
<table id="column-table" lay-filter="column-table"></table>
|
||||
|
||||
<script type="text/html" id="column-toolbar">
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-value">
|
||||
<input type="text" name="value[{{ d.LAY_NUM-1 }}][value]" placeholder="值" autocomplete="off" class="layui-input" value="{{ d.value }}">
|
||||
<input type="hidden" name="value[{{ d.LAY_NUM-1 }}][_field_id]" value="{{ d._field_id }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-name">
|
||||
<input type="text" name="value[{{ d.LAY_NUM-1 }}][name]" placeholder="标题" autocomplete="off" class="layui-input" value="{{ d.name }}">
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
const DICT_NAME = layui.url().search.name;
|
||||
const UPDATE_API = "/app/admin/dict/update";
|
||||
const SELECT_API = "/app/admin/dict/get/" + DICT_NAME;
|
||||
|
||||
// 字段设置
|
||||
layui.use(["table", "common", "popup"], function () {
|
||||
|
||||
let table = layui.table;
|
||||
let common = layui.common;
|
||||
let $ = layui.$;
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: "值",
|
||||
field: "value",
|
||||
templet: "#col-value"
|
||||
},
|
||||
{
|
||||
title: "标题",
|
||||
field: "name",
|
||||
templet: "#col-name",
|
||||
}
|
||||
];
|
||||
|
||||
$('input[name="name"]').val(DICT_NAME);
|
||||
|
||||
window._field_id = 0;
|
||||
let data = [];
|
||||
$.ajax({
|
||||
url: SELECT_API,
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function (res) {
|
||||
data = res.data;
|
||||
layui.each(data, function (k, v) {
|
||||
data[k]["_field_id"] = _field_id++;
|
||||
})
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
table.render({
|
||||
elem: "#column-table",
|
||||
cols: [cols],
|
||||
data: data,
|
||||
cellMinWidth: 40,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
toolbar: "#column-toolbar",
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
table.on("toolbar(column-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
let add = function() {
|
||||
syncTableData();
|
||||
let options = table.getData("column-table");
|
||||
options.push({
|
||||
_field_id: _field_id++,
|
||||
value : "",
|
||||
name: "",
|
||||
});
|
||||
table.reloadData("column-table", {data:options});
|
||||
}
|
||||
|
||||
let batchRemove = function(obj) {
|
||||
var checkIds = common.checkField(obj,"_field_id");
|
||||
if (checkIds === "") return layui.popup.warning("未选中数据");
|
||||
let data = table.getData("column-table");
|
||||
let newData = [];
|
||||
let deleteIds = checkIds.split(",");
|
||||
layui.each(data, function (index, item) {
|
||||
if (deleteIds.indexOf(item._field_id + "") === -1) {
|
||||
newData.push(item);
|
||||
}
|
||||
});
|
||||
table.reloadData("column-table", {data: newData})
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
//提交事件
|
||||
layui.form.on("submit(save)", function () {
|
||||
let data = layui.form.val("create-dict-form");
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
window.syncTableData = function () {
|
||||
let tableData = layui.form.val("create-dict-form");
|
||||
let columnTableData = [];
|
||||
let len = Object.keys(tableData).length;
|
||||
let id = 0;
|
||||
window._key_id = 0;
|
||||
while (id < len) {
|
||||
// column data
|
||||
if (typeof tableData["value[" + id + "][_field_id]"] !== "undefined") {
|
||||
columnTableData.push({
|
||||
_field_id: tableData["value[" + id + "][_field_id]"],
|
||||
name : tableData["value[" + id + "][name]"],
|
||||
value: tableData["value[" + id + "][value]"],
|
||||
});
|
||||
}
|
||||
_key_id++;
|
||||
id++;
|
||||
}
|
||||
layui.table.reloadData("column-table", {data: columnTableData});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>控制后台</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/demos/css/console1.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">今日注册</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="200" height="200" t="1591462258798"
|
||||
p-id="942" version="1.1">
|
||||
<path fill="#fcc66f" d="M 262.7 835 c -15.3 0 -28.1 -11.4 -29.8 -26.6 L 174.1 291 c -0.6 -5.1 1 -10.2 4.5 -14 s 8.3 -6 13.4 -6 h 640 c 5.1 0 10 2.2 13.4 6 s 5 8.9 4.5 14 l -58.8 517.4 c -1.7 15.2 -14.5 26.6 -29.8 26.6 H 262.7 Z"
|
||||
p-id="943" />
|
||||
<path fill="#ffd79c" d="M 802 289 l -58.8 517.4 c -0.7 6.1 -5.8 10.6 -11.9 10.6 h 30 c 6.1 0 11.2 -4.6 11.9 -10.6 L 832 289 h -30 Z"
|
||||
p-id="944" />
|
||||
<path fill="#f56e73" d="M 164 307 c -16.5 0 -30 -13.5 -30 -30 v -58 c 0 -16.5 13.5 -30 30 -30 h 696 c 16.5 0 30 13.5 30 30 v 58 c 0 16.5 -13.5 30 -30 30 H 164 Z"
|
||||
p-id="945" />
|
||||
<path fill="#ffa1a8" d="M 860 207 h -30 c 6.6 0 12 5.4 12 12 v 58 c 0 6.6 -5.4 12 -12 12 h 30 c 6.6 0 12 -5.4 12 -12 v -58 c 0 -6.6 -5.4 -12 -12 -12 Z"
|
||||
p-id="946" />
|
||||
<path fill="#65c8ff" d="M 190.9 651.5 c -31.4 0 -56.9 -25.5 -56.9 -56.9 V 219 c 0 -16.5 13.5 -30 30 -30 h 466.2 c 9.9 0 18 8.1 18 18 v 301.1 c 0 34.7 -28.2 62.9 -62.9 62.9 s -62.9 -28.2 -62.9 -62.9 V 393.5 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 68.1 c 0 29.4 -23.9 53.4 -53.4 53.4 s -53.4 -23.9 -53.4 -53.4 v -68.1 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 201.1 c 0.1 31.4 -25.4 56.9 -56.7 56.9 Z"
|
||||
p-id="947" />
|
||||
<path fill="#b3eaff" d="M 277.8 321.5 c -33.1 0 -60 26.9 -60 60 v 201.1 c 0 21.5 -17.4 38.9 -38.9 38.9 c -7.7 0 -14.8 -2.2 -20.8 -6.1 c 6.9 10.9 19 18.1 32.8 18.1 c 21.5 0 38.9 -17.4 38.9 -38.9 V 393.5 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z M 618.3 207 v 289.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -9.3 0 -18 -2.8 -25.2 -7.7 c 8.1 11.9 21.7 19.7 37.2 19.7 c 24.8 0 44.9 -20.1 44.9 -44.9 V 207 h -12 Z M 468.5 321.5 c -33.1 0 -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -6.7 0 -12.9 -1.9 -18.3 -5.1 c 6.2 10.2 17.4 17.1 30.3 17.1 c 19.5 0 35.4 -15.8 35.4 -35.4 v -68.1 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z"
|
||||
p-id="948" />
|
||||
<path fill="#453b56" d="M 698 729.4 m -18 0 a 18 18 0 1 0 36 0 a 18 18 0 1 0 -36 0 Z" p-id="949" />
|
||||
<path fill="#453b56" d="M 860 171 H 632.5 v 0.1 c -0.7 0 -1.5 -0.1 -2.2 -0.1 H 164 c -26.5 0 -48 21.5 -48 48 v 375.6 c 0 41.3 33.6 74.9 74.9 74.9 c 2.7 0 5.4 -0.2 8.1 -0.5 l 16 141.4 c 2.8 24.3 23.3 42.6 47.7 42.6 h 498.6 c 24.4 0 44.9 -18.3 47.7 -42.6 l 55.2 -485.6 c 24.5 -2.1 43.8 -22.7 43.8 -47.8 v -58 c 0 -26.5 -21.5 -48 -48 -48 Z M 190.9 633.5 c -21.5 0 -38.9 -17.4 -38.9 -38.9 V 219 c 0 -6.6 5.4 -12 12 -12 h 466.3 v 301.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -24.8 0 -44.9 -20.1 -44.9 -44.9 V 393.5 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -19.5 0 -35.4 -15.8 -35.4 -35.4 v -68.1 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 201.1 c 0.1 21.5 -17.4 38.9 -38.8 38.9 Z m 582.3 172.9 c -0.7 6.1 -5.8 10.6 -11.9 10.6 H 262.7 c -6.1 0 -11.2 -4.6 -11.9 -10.6 l -6.7 -59 h 396.6 c 9.9 0 18 -8.1 18 -18 s -8.1 -18 -18 -18 H 240 l -6.3 -55.4 c 19.3 -13.6 32.1 -36 32.1 -61.3 V 393.5 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 68.1 c 0 39.4 32 71.4 71.4 71.4 s 71.4 -32 71.4 -71.4 v -68.1 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 114.6 c 0 44.6 36.3 80.9 80.9 80.9 c 44.6 0 80.9 -36.3 80.9 -80.9 V 325 h 161.7 l -54.9 481.4 Z M 872 277 c 0 6.6 -5.4 12 -12 12 H 666.3 v -82 H 860 c 6.6 0 12 5.4 12 12 v 58 Z"
|
||||
p-id="950" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">7日内注册</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg t="1591462430908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3170" width="200" height="200">
|
||||
<path d="M532 784.2c0 24.4-19.8 44.3-44.3 44.3s-44.3-19.8-44.3-44.3c0-24.4 44.3-80.3 44.3-80.3s44.3 55.8 44.3 80.3zM766 784.2c0 24.4 19.8 44.3 44.3 44.3 24.4 0 44.3-19.8 44.3-44.3 0-24.4-44.3-80.3-44.3-80.3S766 759.7 766 784.2z"
|
||||
fill="#97DCFF" p-id="3171"></path>
|
||||
<path d="M123.5 471.3c-9.9 0-18-8.1-18-18v-302c0-9.9 8.1-18 18-18h58c9.9 0 18 8.1 18 18v302c0 9.9-8.1 18-18 18h-58z"
|
||||
fill="#FCC66F" p-id="3172"></path>
|
||||
<path d="M181.5 151.3v302h-58v-302h58m0-36h-58c-19.9 0-36 16.1-36 36v302c0 19.9 16.1 36 36 36h58c19.9 0 36-16.1 36-36v-302c0-19.8-16.1-36-36-36z"
|
||||
fill="#453B56" p-id="3173"></path>
|
||||
<path d="M266.4 210.7m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3174"></path>
|
||||
<path d="M430.8 641.1c-9.9 0-18-8.1-18-18v-21.6c0-130.3 106-236.3 236.3-236.3s236.3 106 236.3 236.3v21.6c0 9.9-8.1 18-18 18H430.8z"
|
||||
fill="#FCC66F" p-id="3175"></path>
|
||||
<path d="M649 383.2c-5 0-10 0.2-15 0.6 113.5 7.7 203.3 102.2 203.3 217.7v21.6h30v-21.6c0-120.6-97.7-218.3-218.3-218.3z"
|
||||
fill="#FFD79C" p-id="3176"></path>
|
||||
<path d="M419.6 694.4c-22.1 0-40.1-18-40.1-40.1s18-40.1 40.1-40.1h458.8c22.1 0 40.1 18 40.1 40.1s-18 40.1-40.1 40.1H419.6z"
|
||||
fill="#F56E73" p-id="3177"></path>
|
||||
<path d="M878.4 632.3h-30c12.2 0 22.1 9.9 22.1 22.1s-9.9 22.1-22.1 22.1h30c12.2 0 22.1-9.9 22.1-22.1s-9.9-22.1-22.1-22.1z"
|
||||
fill="#FFA1A8" p-id="3178"></path>
|
||||
<path d="M693.3 846.4c0 24.4-19.8 44.3-44.3 44.3-24.4 0-44.3-19.8-44.3-44.3s44.3-80.3 44.3-80.3 44.3 55.9 44.3 80.3z"
|
||||
fill="#97DCFF" p-id="3179"></path>
|
||||
<path d="M649 908.7c-34.3 0-62.3-27.9-62.3-62.3 0-28.5 36.9-77.2 48.1-91.4 3.4-4.3 8.6-6.8 14.1-6.8s10.7 2.5 14.1 6.8c11.3 14.2 48.1 62.9 48.1 91.4 0.2 34.3-27.8 62.3-62.1 62.3z m0-112.3c-14.1 20.4-26.3 41.9-26.3 50 0 14.5 11.8 26.3 26.3 26.3s26.3-11.8 26.3-26.3c0-8.1-12.1-29.6-26.3-50z"
|
||||
fill="#453B56" p-id="3180"></path>
|
||||
<path d="M903.3 601.9v-0.5c0-134.1-104.4-244.3-236.3-253.6v-30.7c0-68.7-55.9-124.6-124.6-124.6H326.5c-9.9 0-18 8.1-18 18s8.1 18 18 18h215.9c48.8 0 88.6 39.7 88.6 88.6v30.7c-131.8 9.3-236.3 119.4-236.3 253.6v0.5c-19.6 9.3-33.2 29.3-33.2 52.4 0 32 26 58.1 58.1 58.1H459c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.2-27.9 62.2-62.3 0-20.3-18.6-50.7-33.5-71.8h264.9c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.3-27.9 62.3-62.3 0-20.3-18.6-50.7-33.5-71.8h39.4c32 0 58.1-26 58.1-58.1 0-23.1-13.6-43-33.2-52.4zM487.8 810.4c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.2 41.9 26.2 50 0 14.5-11.8 26.3-26.2 26.3z m322.5 0c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.3 41.9 26.3 50-0.1 14.5-11.9 26.3-26.3 26.3zM649 383.2c118.8 0 215.4 94.9 218.1 213.1H430.9c2.8-118.1 99.3-213.1 218.1-213.1z m251.5 271.1c0 12.2-9.9 22.1-22.1 22.1H419.6c-12.2 0-22.1-9.9-22.1-22.1 0-12.2 9.9-22.1 22.1-22.1h458.8c12.2 0.1 22.1 10 22.1 22.1z"
|
||||
fill="#453B56" p-id="3181"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">30日内注册</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg t="1591462464512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3311" width="200" height="200">
|
||||
<path d="M750.4 216.5h-130v-15.3c0-32.9-26.8-59.7-59.7-59.7h-97.3c-32.9 0-59.7 26.8-59.7 59.7v15.3h-130c-30.7 0-55.6 25-55.6 55.6v72.4c0 9.9 8.1 18 18 18h31.5v478c0 23.2 18.8 42 42 42h405c23.2 0 42-18.8 42-42v-478H788c9.9 0 18-8.1 18-18v-72.4c0-30.6-25-55.6-55.6-55.6z"
|
||||
fill="#FCC66F" p-id="3312"></path>
|
||||
<path d="M708.5 344.5v496c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24v-496h-30z" fill="#FFD79C" p-id="3313"></path>
|
||||
<path d="M309.5 882.5c-23.2 0-42-18.8-42-42V596c0-9.9 8.1-18 18-18h36.8c30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-49.6zM664.9 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8h36.8c9.9 0 18 8.1 18 18v244.5c0 23.2-18.8 42-42 42h-49.6z"
|
||||
fill="#F56E73" p-id="3314"></path>
|
||||
<path d="M708.5 596v244.5c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24V596h-30z" fill="#FFA1A8" p-id="3315"></path>
|
||||
<path d="M475.2 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8 30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-73.6z"
|
||||
fill="#F56E73" p-id="3316"></path>
|
||||
<path d="M560.7 159.5h-18c23 0 41.7 18.7 41.7 41.7V221h18v-19.8c-0.1-23-18.7-41.7-41.7-41.7zM750.4 234.5h-30c20.8 0 37.6 16.8 37.6 37.6v72.4h30v-72.4c0-20.8-16.8-37.6-37.6-37.6z"
|
||||
fill="#FFD79C" p-id="3317"></path>
|
||||
<path d="M750.4 198.5H638.2c-1.4-41.6-35.6-75-77.5-75h-97.3c-41.9 0-76.1 33.4-77.5 75H273.6c-40.6 0-73.6 33-73.6 73.6v72.4c0 19.9 16.1 36 36 36h13.5v460c0 33.1 26.9 60 60 60H714.7c33.1 0 60-26.9 60-60v-460H788c19.9 0 36-16.1 36-36v-72.4c0-40.6-33-73.6-73.6-73.6z m-287.1-39h97.3c22.1 0 40.2 17.2 41.5 39H421.8c1.4-21.8 19.4-39 41.5-39z m-104.2 705h-49.6c-13.3 0-24-10.7-24-24V596h36.8c20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7 0h-73.6V632.8c0-20.3 16.5-36.8 36.8-36.8 20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7-24c0 13.3-10.7 24-24 24h-49.6V632.8c0-20.3 16.5-36.8 36.8-36.8h36.8v244.5z m0-280.5h-36.8c-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8h-36.8v-74.5h279c9.9 0 18-8.1 18-18s-8.1-18-18-18h-279v-69h453V560zM788 344.5H236v-72.4c0-20.8 16.8-37.6 37.6-37.6h476.8c20.8 0 37.6 16.8 37.6 37.6v72.4z"
|
||||
fill="#453B56" p-id="3318"></path>
|
||||
<path d="M621.8 467.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3319"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">总注册</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg t="1591462491887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3449" width="200" height="200">
|
||||
<path d="M363.2 807c-9.9 0-18-8.1-18-18v-75.5c0-9.9 8.1-18 18-18h108.5c9.9 0 18 8.1 18 18V789c0 9.9-8.1 18-18 18H363.2z"
|
||||
fill="#F56E73" p-id="3450"></path>
|
||||
<path d="M441.7 713.5h30V789h-30z" fill="#FFA1A8" p-id="3451"></path>
|
||||
<path d="M259.6 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2zM525.1 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2z"
|
||||
fill="#65C8FF" p-id="3452"></path>
|
||||
<path d="M550.2 153.5c-3.2 0-6.2 0.7-9 1.7 9.4 3.6 16.1 12.7 16.1 23.4V380h18V178.6c0.1-13.9-11.2-25.1-25.1-25.1z"
|
||||
fill="#97DCFF" p-id="3453"></path>
|
||||
<path d="M686 330.5H149c-9.9 0-18 8.1-18 18v63c0 9.9 8.1 18 18 18h33.2l45 225c8.7 43.4 47.1 75 91.4 75h197.6c44.3 0 82.7-31.5 91.4-75l45-225H686c9.9 0 18-8.1 18-18v-63c0-9.9-8.1-18-18-18z"
|
||||
fill="#FCC66F" p-id="3454"></path>
|
||||
<path d="M608 411.5L560.1 651c-7 35.2-37.9 60.5-73.8 60.5h30c35.9 0 66.7-25.3 73.8-60.5L638 411.5h-30zM656 348.5h30v63h-30z"
|
||||
fill="#FFD79C" p-id="3455"></path>
|
||||
<path d="M474.2 543.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3456"></path>
|
||||
<path d="M416.9 525.5h-125c-9.9 0-18 8.1-18 18s8.1 18 18 18h125c9.9 0 18-8.1 18-18s-8.1-18-18-18zM893 543.5h-33.4c-65.2 0-118.2 53-118.2 118.2v19.6c0 9.9 8.1 18 18 18s18-8.1 18-18v-19.6c0-45.3 36.9-82.2 82.2-82.2H893c9.9 0 18-8.1 18-18s-8-18-18-18zM772.2 744.2c7-7 7-18.4 0-25.5-7-7-18.4-7-25.5 0s-7 18.4 0 25.5 18.4 7.1 25.5 0z"
|
||||
fill="#453B56" p-id="3457"></path>
|
||||
<path d="M759.5 761.6c-9.9 0-18 8.1-18 18v11.6c0 43.7-35.6 79.3-79.3 79.3H487.3c-26.4 0-48.3-19.9-51.4-45.5h35.8c19.9 0 36-16.1 36-36v-41.5h8.6c52.8 0 98.7-37.6 109.1-89.4l42.1-210.6H686c19.9 0 36-16.1 36-36v-63c0-19.9-16.1-36-36-36h-74.6V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H345.9V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H149c-19.9 0-36 16.1-36 36v63c0 19.9 16.1 36 36 36h18.5l42.1 210.6c10.4 51.8 56.2 89.4 109.1 89.4h8.6V789c0 19.9 16.1 36 36 36h36.6c3.3 45.5 41.2 81.5 87.5 81.5h174.8c63.6 0 115.3-51.7 115.3-115.3v-11.6c0-10-8.1-18-18-18z m-234.4-583c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9H525V178.6z m-265.5 0c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9h-50.3V178.6zM149 411.5v-63h537v63H149z m169.7 300c-35.9 0-66.7-25.3-73.8-60.5l-40.7-203.5h426.6L590.1 651c-7 35.2-37.9 60.5-73.8 60.5H318.7z m44.5 77.5v-41.5h108.5V789H363.2z"
|
||||
fill="#453B56" p-id="3458"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md9">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
||||
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">系统信息</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="50%">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Workerman版本</td>
|
||||
<td><?=$workerman_version?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webman版本</td>
|
||||
<td><?=$webman_version?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WebmanAdmin版本</td>
|
||||
<td><?=$admin_version?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PHP版本</td>
|
||||
<td><?=$php_version?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MYSQL版本</td>
|
||||
<td><?=$mysql_version?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作系统</td>
|
||||
<td><?=$os?></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</div>-->
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'echarts', 'element', 'count'], function() {
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
element = layui.element,
|
||||
count = layui.count,
|
||||
echarts = layui.echarts;
|
||||
|
||||
count.up("value1", {
|
||||
time: 4000,
|
||||
num: <?=$today_user_count?>,
|
||||
bit: 0,
|
||||
regulator: 50
|
||||
})
|
||||
|
||||
count.up("value2", {
|
||||
time: 4000,
|
||||
num: <?=$day7_user_count?>,
|
||||
bit: 0,
|
||||
regulator: 50
|
||||
})
|
||||
|
||||
count.up("value3", {
|
||||
time: 4000,
|
||||
num: <?=$day30_user_count?>,
|
||||
bit: 0,
|
||||
regulator: 50
|
||||
})
|
||||
|
||||
count.up("value4", {
|
||||
time: 4000,
|
||||
bit: 0,
|
||||
num: <?=$user_count?>,
|
||||
regulator: 50
|
||||
})
|
||||
|
||||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
||||
|
||||
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
||||
var option = {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
bottom: '6%',
|
||||
left: '6%',
|
||||
right: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
//textStyle: {
|
||||
fontSize: 14,
|
||||
color: 'rgba(#999)'
|
||||
//}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#939ab6',
|
||||
opacity: .15
|
||||
}
|
||||
},
|
||||
data: <?=json_encode(array_keys($day7_detail))?>
|
||||
}, ],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
offset: 15,
|
||||
max: 100,
|
||||
min: 0,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
//textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#999'
|
||||
//}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '2',
|
||||
type: 'line',
|
||||
z: 3,
|
||||
showSymbol: false,
|
||||
smoothMonotone: 'x',
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(59,102,246)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(118,237,252)' // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
shadowBlur: 4,
|
||||
shadowColor: 'rgba(69,126,247,.2)',
|
||||
shadowOffsetY: 4
|
||||
},
|
||||
areaStyle: {
|
||||
//normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(227,233,250,.9)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(248,251,252,.3)' // 100% 处的颜色
|
||||
}]
|
||||
}
|
||||
//}
|
||||
},
|
||||
smooth: true,
|
||||
data: <?=json_encode(array_values($day7_detail))?>
|
||||
},]
|
||||
|
||||
};
|
||||
echartsRecords.setOption(option);
|
||||
|
||||
window.onresize = function() {
|
||||
echartsRecords.resize();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>主页</title>
|
||||
<!-- 依 赖 样 式 -->
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<!-- 加 载 样 式 -->
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/loader.css" />
|
||||
<!-- 布 局 样 式 -->
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/admin.css" />
|
||||
<!-- 重置样式 -->
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<!-- 结 构 代 码 -->
|
||||
<body class="layui-layout-body pear-admin">
|
||||
<!-- 布 局 框 架 -->
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<!-- 顶 部 样 式 -->
|
||||
<div class="layui-header">
|
||||
<!-- 菜 单 顶 部 -->
|
||||
<div class="layui-logo">
|
||||
<!-- 图 标 -->
|
||||
<img class="logo">
|
||||
<!-- 标 题 -->
|
||||
<span class="title"></span>
|
||||
</div>
|
||||
<!-- 顶 部 左 侧 功 能 -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<li class="collapse layui-nav-item"><a href="#" class="layui-icon layui-icon-shrink-right"></a></li>
|
||||
<li class="refresh layui-nav-item"><a href="#" class="layui-icon layui-icon-refresh-1" loading = 600></a></li>
|
||||
</ul>
|
||||
<!-- 多 系 统 菜 单 -->
|
||||
<div id="control" class="layui-layout-control"></div>
|
||||
<!-- 顶 部 右 侧 菜 单 -->
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="#" class="menuSearch layui-icon layui-icon-search"></a></li>
|
||||
<li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
|
||||
<li class="layui-nav-item layui-hide-xs message"></li>
|
||||
<li class="layui-nav-item user">
|
||||
<!-- 头 像 -->
|
||||
<a class="layui-icon layui-icon-username" href="javascript:;"></a>
|
||||
<!-- 功 能 菜 单 -->
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a user-menu-url="/app/admin/account/index" user-menu-id="10" user-menu-title="基本资料">基本资料</a></dd>
|
||||
<dd><a href="javascript:void(0);" class="logout">注销登录</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<!-- 主 题 配 置 -->
|
||||
<li class="layui-nav-item setting"><a href="#" class="layui-icon layui-icon-more-vertical"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 侧 边 区 域 -->
|
||||
<div class="layui-side layui-bg-black">
|
||||
<!-- 菜 单 顶 部 -->
|
||||
<div class="layui-logo">
|
||||
<!-- 图 标 -->
|
||||
<img class="logo">
|
||||
<!-- 标 题 -->
|
||||
<a href="/"><span class="title"></span></a>
|
||||
</div>
|
||||
<!-- 菜 单 内 容 -->
|
||||
<div class="layui-side-scroll">
|
||||
<div id="sideMenu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视 图 页 面 -->
|
||||
<div class="layui-body">
|
||||
<!-- 内 容 页 面 -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div class="layui-footer layui-text">
|
||||
<span class="left">
|
||||
Released under the MIT license.
|
||||
</span>
|
||||
<span class="center"></span>
|
||||
</div>
|
||||
<!-- 遮 盖 层 -->
|
||||
<div class="pear-cover"></div>
|
||||
<!-- 加 载 动 画 -->
|
||||
<div class="loader-main">
|
||||
<!-- 动 画 对 象 -->
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移 动 端 便 捷 操 作 -->
|
||||
<div class="pear-collapsed-pe collapse">
|
||||
<a href="#" class="layui-icon layui-icon-shrink-right"></a>
|
||||
</div>
|
||||
<!-- 依 赖 脚 本 -->
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<!-- 框 架 初 始 化 -->
|
||||
<script>
|
||||
|
||||
// Admin
|
||||
window.Admin = {
|
||||
Account: {}
|
||||
};
|
||||
|
||||
layui.use(["admin","jquery","popup","drawer"], function() {
|
||||
var $ = layui.$;
|
||||
var admin = layui.admin;
|
||||
var popup = layui.popup;
|
||||
|
||||
admin.setConfigType("json");
|
||||
admin.setConfigPath("/app/admin/config/get");
|
||||
|
||||
admin.render();
|
||||
|
||||
// 登出逻辑
|
||||
admin.logout(function(){
|
||||
$.ajax({
|
||||
url: "/app/admin/account/logout",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return popup.error(res.msg);
|
||||
}
|
||||
popup.success("注销成功",function(){
|
||||
location.reload();
|
||||
})
|
||||
}
|
||||
});
|
||||
return false;
|
||||
})
|
||||
|
||||
$.ajax({
|
||||
url: "/app/admin/account/info",
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
window.Admin.Account = res.data;
|
||||
}
|
||||
});
|
||||
|
||||
// 消息点击回调
|
||||
//admin.message(function(id, title, context, form) {});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Webman Admin 安装</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body" style="padding-top: 40px;">
|
||||
<h1 style="text-align:center;margin: 20px 0 40px">Webman Admin 安装</h1>
|
||||
|
||||
<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
|
||||
<div carousel-item>
|
||||
<div>
|
||||
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" placeholder="请填写入用户名" name="user" class="layui-input" lay-verify="required" required value="root" autocomplete="off"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" placeholder="请填写入密码" name="password" class="layui-input" autocomplete="off"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">数据库</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" placeholder="请填写入数据库" name="database" class="layui-input" lay-verify="required" required value="webman_admin"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">host</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" placeholder="请填写入数据库host" name="host" class="layui-input" lay-verify="required" required value="127.0.0.1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">端口</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" placeholder="请填写入数据库端口" name="port" class="layui-input" required value="3306" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">强制覆盖</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="overwrite" lay-skin="primary">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="pear-btn next">跳过此步骤</button>
|
||||
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep">
|
||||
 下一步 
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" placeholder="请填写入用户名" name="username" class="layui-input" lay-verify="required" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" placeholder="请填写入密码" name="password" class="layui-input"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">确认密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" placeholder="请填再次写入密码" name="password_confirm" class="layui-input"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="pear-btn pre">上一步</button>
|
||||
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep2">
|
||||
 提交 
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;margin-top: 90px;">
|
||||
<i class="layui-icon layui-circle pear-back" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;"></i>
|
||||
<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
|
||||
安装成功
|
||||
</div>
|
||||
<div style="font-size: 14px;color: #666;margin-top: 20px;">需要重启才能生效</div>
|
||||
</div>
|
||||
<div style="text-align: center;margin-top: 50px;">
|
||||
<button class="pear-btn pear-btn-primary finish">进入后台</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var color = localStorage.getItem("theme-color-color");
|
||||
var second = localStorage.getItem("theme-color-second");
|
||||
if (!color || !second) {
|
||||
localStorage.setItem("theme-color-color", "#2d8cf0");
|
||||
localStorage.setItem("theme-color-second", "#ecf5ff");
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
|
||||
<script>
|
||||
layui.use(["form", "step","code","element", "popup"], function() {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
step = layui.step;
|
||||
|
||||
layui.code();
|
||||
|
||||
step.render({
|
||||
elem: "#stepForm",
|
||||
filter: "stepForm",
|
||||
width: "100%",
|
||||
stepWidth: "70%",
|
||||
height: "500px",
|
||||
stepItems: [{
|
||||
title: "填写数据库信息"
|
||||
}, {
|
||||
title: "填写管理员账户"
|
||||
}, {
|
||||
title: "完成"
|
||||
}]
|
||||
});
|
||||
|
||||
form.on("submit(formStep)", function(data) {
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: "/app/admin/install/step1",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
layui.popup.success("操作成功", function () {
|
||||
step.next("#stepForm");
|
||||
});
|
||||
},
|
||||
complete: function () {
|
||||
layer.close(loading);
|
||||
}
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on("submit(formStep2)", function(data) {
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: "/app/admin/install/step2",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
//layui.popup.success("安装成功");
|
||||
step.next("#stepForm");
|
||||
layer.close(loading);
|
||||
},
|
||||
complete: function () {
|
||||
layer.close(loading);
|
||||
}
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".pre").click(function() {
|
||||
step.pre("#stepForm");
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".next").click(function() {
|
||||
step.next("#stepForm");
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".finish").click(function() {
|
||||
location.reload();
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,310 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 顶部查询表单 -->
|
||||
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.role.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.role.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
{{# if(d.id!==1&&d.pid&&!d.isRoot){ }}
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.role.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.role.delete">删除</button>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/role/select";
|
||||
const UPDATE_API = "/app/admin/role/update";
|
||||
const DELETE_API = "/app/admin/role/delete";
|
||||
const INSERT_URL = "/app/admin/role/insert";
|
||||
const UPDATE_URL = "/app/admin/role/update";
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "treetable", "form", "common", "popup", "util"], function() {
|
||||
let treeTable = layui.treetable;
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
},{
|
||||
title: "角色组",
|
||||
field: "name",
|
||||
},{
|
||||
title: "主键",
|
||||
field: "id",
|
||||
},{
|
||||
title: "权限",
|
||||
field: "rules",
|
||||
templet: function (d) {
|
||||
let field = "rules";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
},
|
||||
hide: true,
|
||||
},{
|
||||
title: "创建时间",
|
||||
field: "created_at",
|
||||
},{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
},{
|
||||
title: "父级",
|
||||
field: "pid",
|
||||
templet: function (d) {
|
||||
let field = "pid";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
},
|
||||
hide: true,
|
||||
},{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 120,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
treeTable.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
treeColIndex: 1,
|
||||
treeIdName: "id",
|
||||
treePidName: "pid",
|
||||
treeDefaultClose: false,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"]
|
||||
});
|
||||
}
|
||||
|
||||
// 获取表格中下拉或树形组件数据
|
||||
let apis = [];
|
||||
apis.push(["rules", "/app/admin/rule/get?type=0,1,2"]);
|
||||
apis.push(["pid", "/app/admin/role/select?format=tree"]);
|
||||
let apiResults = {};
|
||||
apiResults["rules"] = [];
|
||||
apiResults["pid"] = [];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function(data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function(obj){
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function(obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">父级</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid" value="1" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">角色名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">权限</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="rules" id="rules" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const INSERT_API = "/app/admin/role/insert";
|
||||
|
||||
// 字段 权限 rules
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/role/rules?id=1",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#rules").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#rules",
|
||||
name: "rules",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
tree: {"show":true,expandedKeys:initValue},
|
||||
toolbar: {show:true,list:["ALL","CLEAR","REVERSE"]},
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 父级 pid
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/role/select?format=tree",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "请选择",
|
||||
data: res.data,
|
||||
value: "0",
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false,expandedKeys:true},
|
||||
on: function(data){
|
||||
let id = data.arr[0] ? data.arr[0].value : "";
|
||||
if (!id) return;
|
||||
layui.$.ajax({
|
||||
url: '/app/admin/role/rules?id=' + id,
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
layui.xmSelect.get('#rules')[0].update({data:res.data});
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: INSERT_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">父级</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">角色名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">权限</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="rules" id="rules" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/role/select" + location.search;
|
||||
const UPDATE_API = "/app/admin/role/update";
|
||||
|
||||
// 获取数据库记录
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: SELECT_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 给表单初始化数据
|
||||
layui.each(res.data[0], function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
if (key === "password") {
|
||||
obj.attr("placeholder", "不更新密码请留空");
|
||||
return;
|
||||
}
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.val(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 字段 权限 rules
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/role/rules?id=" + res.data[0].pid,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#rules").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#rules",
|
||||
name: "rules",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
tree: {"show":true,expandedKeys:initValue},
|
||||
toolbar: {show:true,list:["ALL","CLEAR","REVERSE"]},
|
||||
})
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 父级角色组 pid
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/role/select?format=tree",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "请选择",
|
||||
toolbar: {show: true, list: ["CLEAR"]},
|
||||
data: res.data,
|
||||
value: "0",
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false,expandedKeys:true},
|
||||
on: function(data){
|
||||
let id = data.arr[0] ? data.arr[0].value : "";
|
||||
if (!id) return;
|
||||
layui.$.ajax({
|
||||
url: '/app/admin/role/rules?id=' + id,
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
layui.xmSelect.get('#rules')[0].update({data:res.data});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,292 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.rule.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.rule.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.rule.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.rule.delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/rule/select?limit=5000";
|
||||
const DELETE_API = "/app/admin/rule/delete";
|
||||
const UPDATE_API = "/app/admin/rule/update";
|
||||
const INSERT_URL = "/app/admin/rule/insert";
|
||||
const UPDATE_URL = "/app/admin/rule/update";
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "treetable", "form", "common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let treeTable = layui.treetable;
|
||||
let util = layui.util;
|
||||
|
||||
// 表格头部列数据
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
},{
|
||||
title: "标题",
|
||||
field: "title",
|
||||
},{
|
||||
title: "图标",
|
||||
field: "icon",
|
||||
templet: function (d) {
|
||||
return '<i class="layui-icon ' + util.escape(d["icon"]) + '"></i>';
|
||||
}
|
||||
},{
|
||||
title: "主键",
|
||||
field: "id",
|
||||
hide: true,
|
||||
},{
|
||||
title: "key",
|
||||
field: "key",
|
||||
},{
|
||||
title: "上级菜单",
|
||||
field: "pid",
|
||||
hide: true,
|
||||
templet: function (d) {
|
||||
let field = "pid";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
}
|
||||
},{
|
||||
title: "创建时间",
|
||||
field: "created_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "url",
|
||||
field: "href",
|
||||
},{
|
||||
title: "类型",
|
||||
field: "type",
|
||||
width: 80,
|
||||
templet: function (d) {
|
||||
let field = "type";
|
||||
let value = apiResults["type"][d["type"]] || d["type"];
|
||||
let css = {"目录":"layui-bg-blue", "菜单": "layui-bg-green", "权限": "layui-bg-orange"}[value];
|
||||
return '<span class="layui-badge '+css+'">'+util.escape(value)+'</span>';
|
||||
}
|
||||
},{
|
||||
title: "排序",
|
||||
field: "weight",
|
||||
width: 80,
|
||||
},{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
treeTable.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
treeColIndex: 1,
|
||||
treeIdName: "id",
|
||||
treePidName: "pid",
|
||||
treeDefaultClose: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"]
|
||||
});
|
||||
}
|
||||
|
||||
// 获取下拉菜单及树形组件数据
|
||||
let apis = [];
|
||||
let apiResults = {};
|
||||
apiResults["pid"] = [];
|
||||
apis.push(["pid", "/app/admin/rule/select?format=tree&type=0,1"]);
|
||||
apiResults["type"] = ["目录","菜单","权限"];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 删除或编辑行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加 批量删除 刷新事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加行
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"520px", common.isModile()?"100%":"520px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑行
|
||||
let edit = function(obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"520px", common.isModile()?"100%":"520px"],
|
||||
content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY], obj);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids, obj) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
return obj ? obj.del() : refreshTable();
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
<style>
|
||||
.layui-iconpicker .layui-anim {
|
||||
bottom: 42px !important;
|
||||
top: inherit !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标识</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="key" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级菜单</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid" value="0" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">url</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="href" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图标</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" id="icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="type" id="type" value="1" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="weight" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 接口
|
||||
const INSERT_URL = "/app/admin/rule/insert";
|
||||
|
||||
// 图标选择
|
||||
layui.use(["iconPicker"], function() {
|
||||
layui.iconPicker.render({
|
||||
elem: "#icon",
|
||||
type: "fontClass",
|
||||
page: false,
|
||||
});
|
||||
});
|
||||
|
||||
// 上级菜单
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/rule/select?format=tree&type=0,1",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "无",
|
||||
toolbar: {show: true, list: ["CLEAR"]},
|
||||
data: res.data,
|
||||
value: "0",
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false},
|
||||
});
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 菜单类型下拉列表
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
let value = layui.$("#type").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#type",
|
||||
name: "type",
|
||||
initValue: initValue,
|
||||
data: [{"value":"0","name":"目录"},{"value":"1","name":"菜单"},{"value":"2","name":"权限"}],
|
||||
value: "1",
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
})
|
||||
});
|
||||
|
||||
// 表单提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: INSERT_URL,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,207 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
<style>
|
||||
.layui-iconpicker .layui-anim {
|
||||
bottom: 42px !important;
|
||||
top: inherit !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">标识</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="key" required lay-verify="required" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级菜单</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid" value="0" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">url</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="href" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图标</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" id="icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="type" id="type" value="1" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">排序</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="weight" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
let PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/rule/select" + location.search;
|
||||
const UPDATE_API = "/app/admin/rule/update";
|
||||
|
||||
// 获取行数据
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: SELECT_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 赋值表单
|
||||
layui.each(res.data[0], function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
if (key === "password") {
|
||||
obj.attr("placeholder", "不更新密码请留空");
|
||||
return;
|
||||
}
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.html(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 图标选择
|
||||
layui.use(["iconPicker"], function() {
|
||||
layui.iconPicker.render({
|
||||
elem: "#icon",
|
||||
type: "fontClass",
|
||||
page: false,
|
||||
});
|
||||
});
|
||||
|
||||
// 获取上级菜单
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/rule/select?format=tree&type=0,1",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "无",
|
||||
toolbar: {show: true, list: ["CLEAR"]},
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":false,expandedKeys: initValue},
|
||||
});
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 菜单类型下拉选择
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
let value = layui.$("#type").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#type",
|
||||
name: "type",
|
||||
initValue: initValue,
|
||||
data: [{"value":"0","name":"目录"},{"value":"1","name":"菜单"},{"value":"2","name":"权限"}],
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
})
|
||||
});
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,744 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.mainBox {
|
||||
width: auto !important;
|
||||
}
|
||||
.layui-tab .layui-table-cell {
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-table-body ,.layui-table-box{
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-tab .layui-form-select dl {
|
||||
max-height: 190px;
|
||||
}
|
||||
.layui-table-body .layui-table-col-special:last-child {
|
||||
width: 100% !important;
|
||||
border-right: 1px solid #eee !important;
|
||||
}
|
||||
.layui-table-view {
|
||||
min-width: 1114px;
|
||||
}
|
||||
xm-select {
|
||||
min-height: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
xm-select .xm-body .xm-option .xm-option-icon {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form class="layui-form" action="" lay-filter="create-table-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">表名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="table" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">注释</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="table_comment" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="create-table-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">字段属性</li>
|
||||
<li>表单属性</li>
|
||||
<li>索引</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
|
||||
<div class="layui-tab-item layui-show">
|
||||
|
||||
<!-- 字段属性 -->
|
||||
<table id="column-table" lay-filter="column-table"></table>
|
||||
|
||||
<script type="text/html" id="column-toolbar">
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-field">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][field]" placeholder="字段名称" autocomplete="off" class="layui-input" value="{{ d.field }}">
|
||||
<input type="hidden" name="columns[{{ d.LAY_NUM-1 }}][_field_id]" value="{{ d._field_id }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-comment">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][comment]" placeholder="备注" autocomplete="off" class="layui-input" value="{{ d.comment }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-length">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][length]" placeholder="长度/值" autocomplete="off" class="layui-input" value="{{ d.length }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-default">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][default]" placeholder="默认值" autocomplete="off" class="layui-input" value="{{ d.default }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-type">
|
||||
<select name="columns[{{ d.LAY_NUM-1 }}][type]" lay-verify="">
|
||||
{{# layui.each(["integer","string","text","date","enum","float","tinyInteger","smallInteger","mediumInteger","bigInteger","unsignedInteger","unsignedTinyInteger","unsignedSmallInteger","unsignedMediumInteger","unsignedBigInteger","decimal","double","mediumText","longText","dateTime","time","timestamp","char","binary","json"], function (index, item) { }}
|
||||
<option value="{{ item }}" {{ d.type==item?"selected":""}}>{{ item }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-primary_key">
|
||||
<input type="checkbox" name="columns[{{ d.LAY_NUM-1 }}][primary_key]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.primary_key ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-auto_increment">
|
||||
<input type="checkbox" name="columns[{{ d.LAY_NUM-1 }}][auto_increment]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.auto_increment ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-nullable">
|
||||
<input type="checkbox" name="columns[{{ d.LAY_NUM-1 }}][nullable]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.nullable ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 表单属性 -->
|
||||
<div class="layui-tab-item">
|
||||
|
||||
<table id="form-table" lay-filter="form-table"></table>
|
||||
|
||||
<script type="text/html" id="form-field">
|
||||
<input type="text" name="forms[{{ d.LAY_NUM-1 }}][field]" autocomplete="off" class="layui-input" value="{{ d.field }}" disabled>
|
||||
<input type="hidden" name="forms[{{ d.LAY_NUM-1 }}][_field_id]" value="{{ d._field_id }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-comment">
|
||||
<input type="text" name="forms[{{ d.LAY_NUM-1 }}][comment]" autocomplete="off" class="layui-input" value="{{ d.comment }}" disabled>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-control">
|
||||
<select name="forms[{{ d.LAY_NUM-1 }}][control]" lay-verify="">
|
||||
{{# layui.each([["input", "文本框"],["inputNumber", "数字文本框"],["textArea", "多行文本"],["richText", "富文本"],["jsonEditor", "json编辑框"],["select", "下拉单选"],["selectMulti", "下拉多选"],["treeSelect", "树形单选"],["treeSelectMulti", "树形多选"],["datePicker", "日期选择"],["dateTimePicker", "日期时间选择"],["switch", "开关"],["upload", "上传文件"],["uploadImage", "上传图片"],["iconPicker", "图标选择"]], function (index, item) { }}
|
||||
<option value="{{ item[0] }}" {{ d.control.toLocaleLowerCase()==item[0].toLocaleLowerCase()?'selected':''}}>{{ item[1] }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-control_args">
|
||||
<input type="text" name="forms[{{ d.LAY_NUM-1 }}][control_args]" placeholder="控件参数" autocomplete="off" class="layui-input" value="{{ d.control_args }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-form_show">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][form_show]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.form_show ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-list_show">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][list_show]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.list_show ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-enable_sort">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][enable_sort]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.enable_sort ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-searchable">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][searchable]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.searchable ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-search_type">
|
||||
<select name="forms[{{ d.LAY_NUM-1 }}][search_type]" lay-verify="">
|
||||
{{# layui.each([["normal", "普通查询"], ["between", "范围查询"], ["like", "模糊查询"]], function (index, item) { }}
|
||||
<option value="{{ item[0] }}" {{ d.search_type==item[0]?'selected':''}}>{{ item[1] }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 索引 -->
|
||||
<div class="layui-tab-item">
|
||||
<div class="layui-tab-item layui-show">
|
||||
|
||||
<table id="key-table" lay-filter="key-table"></table>
|
||||
|
||||
<script type="text/html" id="key-name">
|
||||
<input type="text" name="keys[{{ d.LAY_NUM-1 }}][name]" placeholder="字段名称" autocomplete="off" class="layui-input" value="{{ d.name }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="key-columns">
|
||||
<div name="keys[{{ d.LAY_NUM-1 }}][columns]" class="key-columns-div" value="{{ d.columns }}"></div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="key-type">
|
||||
<select name="keys[{{ d.LAY_NUM-1 }}][type]" lay-verify="">
|
||||
{{# layui.each(["normal", "unique"], function (index, item) { }}
|
||||
<option value="{{ item }}" {{ d.type==item?'selected':''}}>{{ item }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
const CREATE_API = "/app/admin/table/create";
|
||||
|
||||
// 字段设置
|
||||
layui.use(["table", "common", "popup"], function () {
|
||||
|
||||
let table = layui.table;
|
||||
let common = layui.common;
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: "字段名称",
|
||||
field: "field",
|
||||
templet: "#col-field",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "字段备注",
|
||||
field: "comment",
|
||||
templet: "#col-comment",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "长度/值",
|
||||
field: "length",
|
||||
templet: "#col-length",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "默认值",
|
||||
field: "default",
|
||||
templet: "#col-default",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "字段类型",
|
||||
field: "type",
|
||||
templet: "#col-type",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "主键",
|
||||
field: "primary_key",
|
||||
templet: "#col-primary_key",
|
||||
width: 50,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "自增",
|
||||
field: "auto_increment",
|
||||
templet: "#col-auto_increment",
|
||||
width: 50,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "为空",
|
||||
field: "nullable",
|
||||
templet: "#col-nullable",
|
||||
width: 50,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
type: "space"
|
||||
}
|
||||
];
|
||||
|
||||
window._field_id = 0;
|
||||
let data = [{
|
||||
_field_id: _field_id++,
|
||||
field : "id",
|
||||
comment: "主键",
|
||||
length: 11,
|
||||
default: "",
|
||||
type: "integer",
|
||||
primary_key: true,
|
||||
auto_increment: true,
|
||||
nullable: false,
|
||||
},{
|
||||
_field_id: _field_id++,
|
||||
field : "created_at",
|
||||
comment: "创建时间",
|
||||
length: "",
|
||||
default: "",
|
||||
type: "dateTime",
|
||||
primary_key: false,
|
||||
auto_increment: false,
|
||||
nullable: true,
|
||||
},{
|
||||
_field_id: _field_id++,
|
||||
field : "updated_at",
|
||||
comment: "更新时间",
|
||||
length: "",
|
||||
default: "",
|
||||
type: "dateTime",
|
||||
primary_key: false,
|
||||
auto_increment: false,
|
||||
nullable: true,
|
||||
},{
|
||||
_field_id: _field_id++,
|
||||
field : "",
|
||||
comment: "",
|
||||
length: "",
|
||||
default: "",
|
||||
type: "integer",
|
||||
primary_key: false,
|
||||
auto_increment: false,
|
||||
nullable: true,
|
||||
}];
|
||||
|
||||
table.render({
|
||||
elem: "#column-table",
|
||||
cols: [cols],
|
||||
data: data,
|
||||
cellMinWidth: 40,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
toolbar: "#column-toolbar",
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
table.on("toolbar(column-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
let add = function() {
|
||||
syncTableData();
|
||||
let options = table.getData("column-table");
|
||||
options.push({
|
||||
_field_id: _field_id++,
|
||||
field : "",
|
||||
comment: "",
|
||||
length: "",
|
||||
default: "",
|
||||
type: "integer",
|
||||
primary_key: false,
|
||||
auto_increment: false,
|
||||
nullable: true,
|
||||
});
|
||||
table.reloadData("column-table", {data:options});
|
||||
}
|
||||
|
||||
let batchRemove = function(obj) {
|
||||
var checkIds = common.checkField(obj,"_field_id");
|
||||
if (checkIds === "") return layui.popup.warning("未选中数据");
|
||||
let data = table.getData("column-table");
|
||||
let newData = [];
|
||||
let deleteIds = checkIds.split(",");
|
||||
layui.each(data, function (index, item) {
|
||||
if (deleteIds.indexOf(item._field_id + "") === -1) {
|
||||
newData.push(item);
|
||||
}
|
||||
});
|
||||
table.reloadData("column-table", {data: newData})
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 表单设置
|
||||
layui.use(["table", "common", "element"], function () {
|
||||
let table = layui.table;
|
||||
|
||||
layui.element.on("tab(create-table-tab)", function(){
|
||||
syncTableData();
|
||||
});
|
||||
|
||||
let cols = [
|
||||
{
|
||||
title: "字段名称",
|
||||
field: "field",
|
||||
templet: "#form-field",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "字段备注",
|
||||
field: "comment",
|
||||
templet: "#form-comment",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "控件类型",
|
||||
field: "control",
|
||||
templet: "#form-control",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "控件参数",
|
||||
field: "control_args",
|
||||
templet: "#form-control_args",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "表单显示",
|
||||
field: "form_show",
|
||||
templet: "#form-form_show",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "列表显示",
|
||||
field: "list_show",
|
||||
templet: "#form-list_show",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "支持排序",
|
||||
field: "enable_sort",
|
||||
templet: "#form-enable_sort",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "支持查询",
|
||||
field: "searchable",
|
||||
templet: "#form-searchable",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "查询类型",
|
||||
field: "search_type",
|
||||
templet: "#form-search_type",
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
type: "space"
|
||||
}
|
||||
];
|
||||
|
||||
let _id = 0;
|
||||
let data = [{
|
||||
_field_id: _id++,
|
||||
field : "id",
|
||||
comment: "主键",
|
||||
control: "inputNumber",
|
||||
control_args: "",
|
||||
form_show: false,
|
||||
list_show: true,
|
||||
enable_sort: true,
|
||||
searchable: true,
|
||||
search_type: "normal",
|
||||
},{
|
||||
_field_id: _id++,
|
||||
field : "created_at",
|
||||
comment: "创建时间",
|
||||
control: "dateTimePicker",
|
||||
control_args: "",
|
||||
form_show: false,
|
||||
list_show: true,
|
||||
enable_sort: true,
|
||||
searchable: true,
|
||||
search_type: "between",
|
||||
},{
|
||||
_field_id: _id++,
|
||||
field : "updated_at",
|
||||
comment: "更新时间",
|
||||
control: "dateTimePicker",
|
||||
control_args: "",
|
||||
form_show: false,
|
||||
list_show: true,
|
||||
enable_sort: false,
|
||||
searchable: false,
|
||||
search_type: "between",
|
||||
}];
|
||||
|
||||
table.render({
|
||||
elem: "#form-table",
|
||||
cols: [cols],
|
||||
data: data,
|
||||
cellMinWidth: 40,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// 索引设置
|
||||
layui.use(["table", "common", "xmSelect", "popup"], function () {
|
||||
let table = layui.table;
|
||||
let common = layui.common;
|
||||
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox",
|
||||
width: 52,
|
||||
},
|
||||
{
|
||||
title: "索引名称",
|
||||
field: "name",
|
||||
templet: "#key-name",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "索引字段",
|
||||
field: "columns",
|
||||
templet: "#key-columns",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "索引类型",
|
||||
field: "type",
|
||||
templet: "#key-type",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
type: "space"
|
||||
}
|
||||
];
|
||||
|
||||
window._key_id = 0;
|
||||
let data = [{
|
||||
_key_id: _key_id++,
|
||||
name : "",
|
||||
columns: "",
|
||||
type: "normal"
|
||||
}];
|
||||
|
||||
table.render({
|
||||
elem: "#key-table",
|
||||
cols: [cols],
|
||||
data: data,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
toolbar: "#column-toolbar",
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
table.on("toolbar(key-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
let add = function() {
|
||||
syncTableData();
|
||||
let options = table.getData("key-table");
|
||||
options.push({
|
||||
_key_id: _key_id++,
|
||||
name : "",
|
||||
columns: "",
|
||||
type: "normal"
|
||||
});
|
||||
table.reloadData("key-table", {data:options});
|
||||
keyColumnMultiSelectRender();
|
||||
}
|
||||
|
||||
let batchRemove = function(obj) {
|
||||
var checkIds = common.checkField(obj,"_key_id");
|
||||
if (checkIds === "") return layui.popup.warning("未选中数据");
|
||||
let data = table.getData("key-table");
|
||||
let newData = [];
|
||||
let deleteIds = checkIds.split(",");
|
||||
layui.each(data, function (index, item) {
|
||||
if (deleteIds.indexOf(item._key_id + "") === -1) {
|
||||
newData.push(item);
|
||||
}
|
||||
});
|
||||
table.reloadData("key-table", {data: newData});
|
||||
keyColumnMultiSelectRender();
|
||||
}
|
||||
|
||||
window.syncTableData = function () {
|
||||
|
||||
let tableData = layui.form.val("create-table-form");
|
||||
let formTableDataOld = [];
|
||||
let columnTableData = [];
|
||||
let formTableData = [];
|
||||
let keyTableData = [];
|
||||
|
||||
let len = Object.keys(tableData).length;
|
||||
let id = 0;
|
||||
window._key_id = 0;
|
||||
while (id < len) {
|
||||
// column data
|
||||
if (typeof tableData["columns[" + id + "][_field_id]"] !== "undefined") {
|
||||
columnTableData.push({
|
||||
_field_id: tableData["columns[" + id + "][_field_id]"],
|
||||
field : tableData["columns[" + id + "][field]"],
|
||||
comment: tableData["columns[" + id + "][comment]"],
|
||||
length: tableData["columns[" + id + "][length]"],
|
||||
default: tableData["columns[" + id + "][default]"],
|
||||
type: tableData["columns[" + id + "][type]"],
|
||||
primary_key: tableData["columns[" + id + "][primary_key]"] === "on",
|
||||
auto_increment: tableData["columns[" + id + "][auto_increment]"] === "on",
|
||||
nullable: tableData["columns[" + id + "][nullable]"] === "on",
|
||||
});
|
||||
}
|
||||
// old form data
|
||||
if (typeof tableData["forms[" + id + "][_field_id]"] !== "undefined") {
|
||||
formTableDataOld.push({
|
||||
_field_id: tableData["forms[" + id + "][_field_id]"],
|
||||
field : tableData["columns[" + id + "][field]"], // column
|
||||
comment: tableData["columns[" + id + "][comment]"], //column
|
||||
control: tableData["forms[" + id + "][control]"],
|
||||
control_args: tableData["forms[" + id + "][control_args]"],
|
||||
form_show: tableData["forms[" + id + "][form_show]"] === "on",
|
||||
list_show: tableData["forms[" + id + "][list_show]"] === "on",
|
||||
enable_sort: tableData["forms[" + id + "][enable_sort]"] === "on",
|
||||
searchable: tableData["forms[" + id + "][searchable]"],
|
||||
search_type: tableData["forms[" + id + "][search_type]"],
|
||||
});
|
||||
}
|
||||
// key data
|
||||
if (typeof tableData["keys[" + _key_id + "][name]"] !== "undefined") {
|
||||
keyTableData.push({
|
||||
_key_id: _key_id,
|
||||
name: tableData["keys[" + _key_id + "][name]"],
|
||||
columns: tableData["keys[" + _key_id + "][columns]"],
|
||||
type: tableData["keys[" + _key_id + "][type]"],
|
||||
});
|
||||
}
|
||||
_key_id++;
|
||||
id++;
|
||||
}
|
||||
|
||||
let formTableOldDataMap = {};
|
||||
layui.each(formTableDataOld, function (_, item) {
|
||||
formTableOldDataMap[item._field_id] = item;
|
||||
});
|
||||
|
||||
// form data
|
||||
layui.each(columnTableData, function (_, item) {
|
||||
if (!item.field) return;
|
||||
let _field_id = item._field_id;
|
||||
console.log(item.type);
|
||||
if (!formTableOldDataMap[_field_id]) {
|
||||
formTableData.push({
|
||||
_field_id: _field_id,
|
||||
field : item.field, // column
|
||||
comment: item.comment, // column
|
||||
control: item.type.toLocaleString().indexOf("date") !== -1 ? "dateTimePicker" : (item.type.toLocaleString().indexOf("int") !== -1 ? "inputNumber" : "input"),
|
||||
control_args: "",
|
||||
form_show: true,
|
||||
list_show: true,
|
||||
enable_sort: false,
|
||||
searchable: false,
|
||||
search_type: item.type.toLocaleString().indexOf("date") !== -1 ? "between" : "normal",
|
||||
});
|
||||
} else {
|
||||
formTableData.push(formTableOldDataMap[_field_id]);
|
||||
}
|
||||
});
|
||||
|
||||
layui.table.reloadData("column-table", {data: columnTableData});
|
||||
layui.table.reloadData("form-table", {data: formTableData});
|
||||
layui.table.reloadData("key-table", {data: keyTableData});
|
||||
keyColumnMultiSelectRender();
|
||||
}
|
||||
|
||||
window.keyColumnMultiSelectRender = function () {
|
||||
layui.use(["jquery", "xmSelect", "table"], function () {
|
||||
let $ = layui.$;
|
||||
let table = layui.table;
|
||||
let columnData = table.getData("column-table");
|
||||
let data = [];
|
||||
layui.each(columnData, function (i, item) {
|
||||
if (item.field) {
|
||||
data.push({
|
||||
name: item.field, value:item.field
|
||||
});
|
||||
}
|
||||
});
|
||||
layui.each($(".key-columns-div"), function (_, dom) {
|
||||
let name = $(dom).attr("name");
|
||||
let value = $(dom).attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: dom,
|
||||
name: name,
|
||||
initValue: initValue,
|
||||
data: data,
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
keyColumnMultiSelectRender();
|
||||
});
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
//提交事件
|
||||
layui.form.on("submit(save)", function () {
|
||||
syncTableData();
|
||||
let data = layui.form.val("create-table-form");
|
||||
layui.$.ajax({
|
||||
url: CREATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>一键菜单</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
<style>
|
||||
.layui-iconpicker .layui-anim {
|
||||
top: 42px !important;
|
||||
bottom: inherit !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
<input type="hidden" name="table" value="<?=htmlspecialchars($table)?>">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">菜单名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图标</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="icon" id="icon" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级菜单</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="pid" id="pid"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">控制器</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="controller" value="<?=$controller?>" class="layui-input" required lay-verify="required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">模型</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="model" value="<?=$model?>" class="layui-input" required lay-verify="required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">强制覆盖</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="overwrite" lay-skin="primary">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
const CRUD_API = "/app/admin/table/crud";
|
||||
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/rule/select?format=tree&type=0,1",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#pid").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#pid",
|
||||
name: "pid",
|
||||
initValue: initValue,
|
||||
tips: "无",
|
||||
data: res.data,
|
||||
toolbar: {show: true, list: ["CLEAR"]},
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
tree: {show:true, strict:false, clickCheck:true, clickExpand:false},
|
||||
});
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use(["iconPicker"], function() {
|
||||
layui.iconPicker.render({
|
||||
elem: "#icon",
|
||||
type: "fontClass",
|
||||
page: false
|
||||
});
|
||||
});
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
//提交事件
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: CRUD_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,295 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>admin管理</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">表名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="table_name" id="table_name" placeholder="请输入表名" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.table.create">
|
||||
<i class="layui-icon layui-icon-add-1"></i>创建表格
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.table.drop">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除表格
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.table.modify">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.table.drop">删除</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="crud" permission="app.admin.table.crud">一键菜单</button>
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const SELECT_API = "/app/admin/table/show";
|
||||
const DROP_API = "/app/admin/table/drop";
|
||||
const VIEW_URL = "/app/admin/table/view";
|
||||
const CREATE_URL = "/app/admin/table/create";
|
||||
const MODIFY_URL = "/app/admin/table/modify";
|
||||
const CRUD_URL = "/app/admin/table/crud";
|
||||
|
||||
layui.use(["table", "form", "common", "popup"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
}, {
|
||||
title: "表名",
|
||||
field: "TABLE_NAME",
|
||||
templet: function (d) {
|
||||
return '<a class="tab-link" src="' + VIEW_URL + '?table=' + d.TABLE_NAME + '">' + d.TABLE_NAME + '</a>';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
field: "TABLE_COMMENT",
|
||||
},
|
||||
{
|
||||
title: "记录数",
|
||||
field: "TABLE_ROWS",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "引擎",
|
||||
field: "ENGINE",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "字符集",
|
||||
field: "TABLE_COLLATION",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
field: "CREATE_TIME",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
width: 200
|
||||
}
|
||||
];
|
||||
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"]
|
||||
});
|
||||
|
||||
$(document).on("click", ".tab-link", function () {
|
||||
let obj = $(this);
|
||||
let table = obj.html();
|
||||
let url = obj.attr("src");
|
||||
parent.layui.admin.addTab(table , table + "表", url);
|
||||
})
|
||||
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
} else if (obj.event === "crud") {
|
||||
crud(obj);
|
||||
}
|
||||
});
|
||||
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "创建表格",
|
||||
shade: 0.1,
|
||||
maxmin: true,
|
||||
area: [common.isModile()?"100%":"98%", common.isModile()?"100%":"95%"],
|
||||
content: CREATE_URL
|
||||
});
|
||||
}
|
||||
|
||||
let edit = function(obj) {
|
||||
let table = obj.data.TABLE_NAME;
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改表格",
|
||||
shade: 0.1,
|
||||
maxmin: true,
|
||||
area: [common.isModile()?"100%":"98%", common.isModile()?"100%":"95%"],
|
||||
content: MODIFY_URL + "?table=" + table
|
||||
});
|
||||
}
|
||||
|
||||
let crud = function(obj) {
|
||||
let table = obj.data.TABLE_NAME;
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "一键菜单",
|
||||
shade: 0.1,
|
||||
maxmin: true,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"500px"],
|
||||
content: CRUD_URL + "?table=" + table
|
||||
});
|
||||
}
|
||||
|
||||
let remove = function(obj) {
|
||||
return doRemove([obj.data.TABLE_NAME]);
|
||||
}
|
||||
|
||||
let batchRemove = function(obj) {
|
||||
var tables = common.checkField(obj, "TABLE_NAME");
|
||||
if (tables === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(tables.split(","));
|
||||
}
|
||||
|
||||
let doRemove = function (tables) {
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DROP_API,
|
||||
data: {tables: tables},
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// 获取选择组件配置项
|
||||
function getControlProps(control_args)
|
||||
{
|
||||
if (!control_args) {
|
||||
return {};
|
||||
}
|
||||
let props = {};
|
||||
let split = control_args.split(";");
|
||||
for (let item of split) {
|
||||
let pos = item.indexOf(":");
|
||||
if (pos === -1) continue;
|
||||
let name = item.substring(0, pos).trim();
|
||||
let values = item.substring(pos + 1).trim();
|
||||
|
||||
// values = a:v,c:d
|
||||
pos = values.indexOf(":");
|
||||
if (pos !== -1) {
|
||||
let options = values.split(",");
|
||||
values = {};
|
||||
for (const option of options) {
|
||||
let [value, name] = option.split(":");
|
||||
values[value] = name;
|
||||
}
|
||||
}
|
||||
props[name] = values;
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
<input type="hidden" name="table" value="<?=htmlspecialchars($table)?>">
|
||||
<?= $form->html(5)?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
const INSERT_API = "/app/admin/table/insert";
|
||||
|
||||
<?=$form->js(3)?>
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
|
||||
// 字段验证允许为空
|
||||
layui.form.verify({
|
||||
phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
|
||||
email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
|
||||
url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
|
||||
number: [/(^$)|^\d+$/,'只能填写数字'],
|
||||
date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
|
||||
identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: INSERT_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,714 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.mainBox {
|
||||
width: auto !important;
|
||||
}
|
||||
.layui-tab .layui-table-cell {
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-table-body ,.layui-table-box{
|
||||
overflow:visible !important;
|
||||
}
|
||||
.layui-tab .layui-form-select dl {
|
||||
max-height: 190px;
|
||||
}
|
||||
.layui-table-body .layui-table-col-special:last-child {
|
||||
width: 100% !important;
|
||||
border-right: 1px solid #eee !important;
|
||||
}
|
||||
.layui-table-view {
|
||||
min-width: 1114px;
|
||||
}
|
||||
xm-select {
|
||||
min-height: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
xm-select .xm-body .xm-option .xm-option-icon {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form class="layui-form" action="" lay-filter="create-table-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">表名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="table" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
<input type="hidden" name="old_table" value="<?=htmlspecialchars($table)?>">
|
||||
</div>
|
||||
<label class="layui-form-label">注释</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="table_comment" required lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="create-table-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">字段属性</li>
|
||||
<li>表单属性</li>
|
||||
<li>索引</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
|
||||
<div class="layui-tab-item layui-show">
|
||||
|
||||
<!-- 字段属性 -->
|
||||
<table id="column-table" lay-filter="column-table"></table>
|
||||
|
||||
<script type="text/html" id="column-toolbar">
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-field">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][field]" placeholder="字段名称" autocomplete="off" class="layui-input" value="{{ d.field }}">
|
||||
<input type="hidden" name="columns[{{ d.LAY_NUM-1 }}][_field_id]" value="{{ d._field_id }}">
|
||||
<input type="hidden" name="columns[{{ d.LAY_NUM-1 }}][old_field]" value="{{ d.old_field }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-comment">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][comment]" placeholder="备注" autocomplete="off" class="layui-input" value="{{ d.comment }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-length">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][length]" placeholder="长度/值" autocomplete="off" class="layui-input" value="{{ d.length }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-default">
|
||||
<input type="text" name="columns[{{ d.LAY_NUM-1 }}][default]" placeholder="默认值" autocomplete="off" class="layui-input" value="{{ d.default }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-type">
|
||||
<select name="columns[{{ d.LAY_NUM-1 }}][type]" lay-verify="">
|
||||
{{# layui.each(["integer","string","text","date","enum","float","tinyInteger","smallInteger","mediumInteger","bigInteger","unsignedInteger","unsignedTinyInteger","unsignedSmallInteger","unsignedMediumInteger","unsignedBigInteger","decimal","double","mediumText","longText","dateTime","time","timestamp","char","binary","json"], function (index, item) { }}
|
||||
<option value="{{ item }}" {{ d.type==item?'selected':''}}>{{ item }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-primary_key">
|
||||
<input type="checkbox" name="columns[{{ d.LAY_NUM-1 }}][primary_key]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.primary_key ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-auto_increment">
|
||||
<input type="checkbox" name="columns[{{ d.LAY_NUM-1 }}][auto_increment]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.auto_increment ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="col-nullable">
|
||||
<input type="checkbox" name="columns[{{ d.LAY_NUM-1 }}][nullable]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.nullable ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 表单属性 -->
|
||||
<div class="layui-tab-item">
|
||||
|
||||
<table id="form-table" lay-filter="form-table"></table>
|
||||
|
||||
<script type="text/html" id="form-field">
|
||||
<input type="text" name="forms[{{ d.LAY_NUM-1 }}][field]" autocomplete="off" class="layui-input" value="{{ d.field }}" disabled>
|
||||
<input type="hidden" name="forms[{{ d.LAY_NUM-1 }}][_field_id]" value="{{ d._field_id }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-comment">
|
||||
<input type="text" name="forms[{{ d.LAY_NUM-1 }}][comment]" autocomplete="off" class="layui-input" value="{{ d.comment }}" disabled>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-control">
|
||||
<select name="forms[{{ d.LAY_NUM-1 }}][control]" lay-verify="">
|
||||
{{# layui.each([["input", "文本框"],["inputNumber", "数字文本框"],["textArea", "多行文本"],["richText", "富文本"],["jsonEditor", "json编辑框"],["select", "下拉单选"],["selectMulti", "下拉多选"],["treeSelect", "树形单选"],["treeSelectMulti", "树形多选"],["datePicker", "日期选择"],["dateTimePicker", "日期时间选择"],["switch", "开关"],["upload", "上传文件"],["uploadImage", "上传图片"],["iconPicker", "图标选择"]], function (index, item) { }}
|
||||
<option value="{{ item[0] }}" {{ d.control.toLocaleLowerCase()==item[0].toLocaleLowerCase()?'selected':''}}>{{ item[1] }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-control_args">
|
||||
<input type="text" name="forms[{{ d.LAY_NUM-1 }}][control_args]" placeholder="控件参数" autocomplete="off" class="layui-input" value="{{ d.control_args }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-form_show">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][form_show]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.form_show ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-list_show">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][list_show]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.list_show ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-enable_sort">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][enable_sort]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.enable_sort ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-searchable">
|
||||
<input type="checkbox" name="forms[{{ d.LAY_NUM-1 }}][searchable]" autocomplete="off" class="layui-input" lay-skin="primary" {{ d.searchable ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="form-search_type">
|
||||
<select name="forms[{{ d.LAY_NUM-1 }}][search_type]" lay-verify="">
|
||||
{{# layui.each([["normal", "普通查询"], ["between", "范围查询"], ["like", "模糊查询"]], function (index, item) { }}
|
||||
<option value="{{ item[0] }}" {{ d.search_type==item[0]?'selected':''}}>{{ item[1] }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 索引 -->
|
||||
<div class="layui-tab-item">
|
||||
<div class="layui-tab-item layui-show">
|
||||
|
||||
<table id="key-table" lay-filter="key-table"></table>
|
||||
|
||||
<script type="text/html" id="key-name">
|
||||
<input type="text" name="keys[{{ d.LAY_NUM-1 }}][name]" placeholder="字段名称" autocomplete="off" class="layui-input" value="{{ d.name }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="key-columns">
|
||||
<div name="keys[{{ d.LAY_NUM-1 }}][columns]" class="key-columns-div" value="{{ d.columns }}"></div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="key-type">
|
||||
<select name="keys[{{ d.LAY_NUM-1 }}][type]" lay-verify="">
|
||||
{{# layui.each(["normal", "unique"], function (index, item) { }}
|
||||
<option value="{{ item }}" {{ d.type==item?'selected':''}}>{{ item }}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
const MODIFY_API = "/app/admin/table/modify";
|
||||
const SCHEMA_API = "/app/admin/table/schema";
|
||||
const TABLE_NAME = "<?=htmlspecialchars($table)?>";
|
||||
|
||||
layui.use(["popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: SCHEMA_API + "?table=" + TABLE_NAME,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
// 表信息
|
||||
$('input[name="table"]').val(res.data.table.name);
|
||||
$('input[name="table_comment"]').val(res.data.table.comment);
|
||||
|
||||
// 字段 表单 索引信息
|
||||
let columnsData = res.data.columns;
|
||||
let formsData = res.data.forms;
|
||||
let keysData = res.data.keys;
|
||||
|
||||
window._field_id = 0;
|
||||
layui.each(columnsData, function (index, item) {
|
||||
columnsData[index]._field_id = _field_id;
|
||||
columnsData[index].old_field = item.field;
|
||||
columnsData[index].default = item.default === "" ? "''" : item.default;
|
||||
formsData[index]._field_id = _field_id;
|
||||
_field_id++;
|
||||
});
|
||||
|
||||
if (keysData.length === 0) {
|
||||
keysData.push({
|
||||
name : "",
|
||||
columns: "",
|
||||
type: "normal"
|
||||
});
|
||||
}
|
||||
window._key_id = 0;
|
||||
layui.each(keysData, function (index, item) {
|
||||
keysData[index]._key_id = _key_id;
|
||||
_key_id ++;
|
||||
});
|
||||
|
||||
// 字段设置
|
||||
layui.use(["table", "common", "popup"], function () {
|
||||
|
||||
let table = layui.table;
|
||||
let common = layui.common;
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: "字段名称",
|
||||
field: "field",
|
||||
templet: "#col-field",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "字段备注",
|
||||
field: "comment",
|
||||
templet: "#col-comment",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "长度/值",
|
||||
field: "length",
|
||||
templet: "#col-length",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "默认值",
|
||||
field: "default",
|
||||
templet: "#col-default",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "字段类型",
|
||||
field: "type",
|
||||
templet: "#col-type",
|
||||
width: 182
|
||||
},
|
||||
{
|
||||
title: "主键",
|
||||
field: "primary_key",
|
||||
templet: "#col-primary_key",
|
||||
width: 50,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "自增",
|
||||
field: "auto_increment",
|
||||
templet: "#col-auto_increment",
|
||||
width: 50,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "为空",
|
||||
field: "nullable",
|
||||
templet: "#col-nullable",
|
||||
width: 50,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
type: "space"
|
||||
}
|
||||
];
|
||||
|
||||
table.render({
|
||||
elem: "#column-table",
|
||||
cols: [cols],
|
||||
data: columnsData,
|
||||
cellMinWidth: 10,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
toolbar: "#column-toolbar",
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
table.on("toolbar(column-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
let add = function() {
|
||||
syncTableData();
|
||||
let options = table.getData("column-table");
|
||||
options.push({
|
||||
_field_id: _field_id++,
|
||||
field : "",
|
||||
comment: "",
|
||||
length: "",
|
||||
default: "",
|
||||
type: "integer",
|
||||
primary_key: false,
|
||||
auto_increment: false,
|
||||
nullable: true,
|
||||
});
|
||||
table.reloadData("column-table", {data:options});
|
||||
}
|
||||
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj,"_field_id");
|
||||
if (checkIds === "") return layui.popup.warning("未选中数据");
|
||||
let data = table.getData("column-table");
|
||||
let newData = [];
|
||||
let deleteIds = checkIds.split(",");
|
||||
layui.each(data, function (index, item) {
|
||||
if (deleteIds.indexOf(item._field_id + "") === -1) {
|
||||
newData.push(item);
|
||||
}
|
||||
});
|
||||
table.reloadData("column-table", {data: newData})
|
||||
syncTableData()
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 表单设置
|
||||
layui.use(["table", "common", "element"], function () {
|
||||
let table = layui.table;
|
||||
|
||||
layui.element.on("tab(create-table-tab)", function(){
|
||||
syncTableData();
|
||||
});
|
||||
|
||||
let cols = [
|
||||
{
|
||||
title: "字段名称",
|
||||
field: "field",
|
||||
templet: "#form-field",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "字段备注",
|
||||
field: "comment",
|
||||
templet: "#form-comment",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "控件类型",
|
||||
field: "control",
|
||||
templet: "#form-control",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "控件参数",
|
||||
field: "control_args",
|
||||
templet: "#form-control_args",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "表单显示",
|
||||
field: "form_show",
|
||||
templet: "#form-form_show",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "列表显示",
|
||||
field: "list_show",
|
||||
templet: "#form-list_show",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "支持排序",
|
||||
field: "enable_sort",
|
||||
templet: "#form-enable_sort",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "支持查询",
|
||||
field: "searchable",
|
||||
templet: "#form-searchable",
|
||||
width: 67,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "查询类型",
|
||||
field: "search_type",
|
||||
templet: "#form-search_type",
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
type: "space"
|
||||
}
|
||||
];
|
||||
|
||||
table.render({
|
||||
elem: "#form-table",
|
||||
cols: [cols],
|
||||
data: formsData,
|
||||
cellMinWidth: 40,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// 索引设置
|
||||
layui.use(["table", "common", "xmSelect", "popup"], function () {
|
||||
let table = layui.table;
|
||||
let common = layui.common;
|
||||
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox",
|
||||
width: 52,
|
||||
},
|
||||
{
|
||||
title: "索引名称",
|
||||
field: "name",
|
||||
templet: "#key-name",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "索引字段",
|
||||
field: "columns",
|
||||
templet: "#key-columns",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "索引类型",
|
||||
field: "type",
|
||||
templet: "#key-type",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
type: "space"
|
||||
}
|
||||
];
|
||||
|
||||
table.render({
|
||||
elem: "#key-table",
|
||||
cols: [cols],
|
||||
data: keysData,
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
limit: 10000,
|
||||
page: false,
|
||||
toolbar: "#column-toolbar",
|
||||
defaultToolbar: [],
|
||||
});
|
||||
|
||||
table.on("toolbar(key-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
let add = function() {
|
||||
syncTableData();
|
||||
let options = table.getData("key-table");
|
||||
options.push({
|
||||
_key_id: _key_id++,
|
||||
name : "",
|
||||
columns: "",
|
||||
type: "normal"
|
||||
});
|
||||
table.reloadData("key-table", {data:options});
|
||||
keyColumnMultiSelectRender();
|
||||
}
|
||||
|
||||
let batchRemove = function(obj) {
|
||||
var checkIds = common.checkField(obj,"_key_id");
|
||||
if (checkIds === "") return layui.popup.warning("未选中数据");
|
||||
let data = table.getData("key-table");
|
||||
let newData = [];
|
||||
let deleteIds = checkIds.split(",");
|
||||
layui.each(data, function (index, item) {
|
||||
if (deleteIds.indexOf(item._key_id + "") === -1) {
|
||||
newData.push(item);
|
||||
}
|
||||
});
|
||||
table.reloadData("key-table", {data: newData});
|
||||
keyColumnMultiSelectRender();
|
||||
}
|
||||
|
||||
window.syncTableData = function () {
|
||||
let tableData = layui.form.val("create-table-form");
|
||||
let formTableDataOld = [];
|
||||
let columnTableData = [];
|
||||
let formTableData = [];
|
||||
let keyTableData = [];
|
||||
|
||||
let len = Object.keys(tableData).length;
|
||||
let id = 0;
|
||||
window._key_id = 0;
|
||||
while (id < len) {
|
||||
// column data
|
||||
if (typeof tableData["columns[" + id + "][_field_id]"] !== "undefined") {
|
||||
columnTableData.push({
|
||||
_field_id: tableData["columns[" + id + "][_field_id]"],
|
||||
field : tableData["columns[" + id + "][field]"],
|
||||
old_field : tableData["columns[" + id + "][old_field]"],
|
||||
comment: tableData["columns[" + id + "][comment]"],
|
||||
length: tableData["columns[" + id + "][length]"],
|
||||
default: tableData["columns[" + id + "][default]"],
|
||||
type: tableData["columns[" + id + "][type]"],
|
||||
primary_key: tableData["columns[" + id + "][primary_key]"] === "on",
|
||||
auto_increment: tableData["columns[" + id + "][auto_increment]"] === "on",
|
||||
nullable: tableData["columns[" + id + "][nullable]"] === "on",
|
||||
});
|
||||
}
|
||||
// old form data
|
||||
if (typeof tableData["forms[" + id + "][_field_id]"] !== "undefined") {
|
||||
formTableDataOld.push({
|
||||
_field_id: tableData["forms[" + id + "][_field_id]"],
|
||||
field : tableData["columns[" + id + "][field]"], // column
|
||||
comment: tableData["columns[" + id + "][comment]"], //column
|
||||
control: tableData["forms[" + id + "][control]"],
|
||||
control_args: tableData["forms[" + id + "][control_args]"],
|
||||
form_show: tableData["forms[" + id + "][form_show]"] === "on",
|
||||
list_show: tableData["forms[" + id + "][list_show]"] === "on",
|
||||
enable_sort: tableData["forms[" + id + "][enable_sort]"] === "on",
|
||||
searchable: tableData["forms[" + id + "][searchable]"],
|
||||
search_type: tableData["forms[" + id + "][search_type]"],
|
||||
});
|
||||
}
|
||||
// key data
|
||||
if (typeof tableData["keys[" + _key_id + "][name]"] !== "undefined") {
|
||||
keyTableData.push({
|
||||
_key_id: _key_id,
|
||||
name: tableData["keys[" + _key_id + "][name]"],
|
||||
columns: tableData["keys[" + _key_id + "][columns]"],
|
||||
type: tableData["keys[" + _key_id + "][type]"],
|
||||
});
|
||||
}
|
||||
_key_id++;
|
||||
id++;
|
||||
}
|
||||
|
||||
let formTableOldDataMap = {};
|
||||
layui.each(formTableDataOld, function (_, item) {
|
||||
if (!item.field) return;
|
||||
formTableOldDataMap[item._field_id] = item;
|
||||
});
|
||||
|
||||
// form data
|
||||
layui.each(columnTableData, function (_, item) {
|
||||
if (!item.field) return;
|
||||
let _field_id = item._field_id;
|
||||
if (!formTableOldDataMap[_field_id]) {
|
||||
formTableData.push({
|
||||
_field_id: _field_id,
|
||||
field : item.field, // column
|
||||
comment: item.comment, // column
|
||||
control: item.type.toLocaleString().indexOf("int") !== -1 ? "inputNumber" : "input",
|
||||
control_args: "",
|
||||
form_show: true,
|
||||
list_show: true,
|
||||
enable_sort: false,
|
||||
searchable: false,
|
||||
search_type: "normal",
|
||||
});
|
||||
} else {
|
||||
formTableData.push(formTableOldDataMap[_field_id]);
|
||||
}
|
||||
});
|
||||
|
||||
layui.table.reloadData("column-table", {data: columnTableData});
|
||||
layui.table.reloadData("form-table", {data: formTableData});
|
||||
layui.table.reloadData("key-table", {data: keyTableData});
|
||||
keyColumnMultiSelectRender();
|
||||
}
|
||||
|
||||
window.keyColumnMultiSelectRender = function () {
|
||||
layui.use(["jquery", "xmSelect", "table"], function () {
|
||||
let $ = layui.$;
|
||||
let table = layui.table;
|
||||
let columnData = table.getData("column-table");
|
||||
let data = [];
|
||||
layui.each(columnData, function (i, item) {
|
||||
if (item.field) {
|
||||
data.push({
|
||||
name: item.field, value:item.field
|
||||
});
|
||||
}
|
||||
});
|
||||
layui.each($(".key-columns-div"), function (_, dom) {
|
||||
let name = $(dom).attr("name");
|
||||
let value = $(dom).attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: dom,
|
||||
name: name,
|
||||
initValue: initValue,
|
||||
data: data,
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
keyColumnMultiSelectRender();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
//提交事件
|
||||
layui.form.on("submit(save)", function () {
|
||||
syncTableData();
|
||||
let data = layui.form.val("create-table-form");
|
||||
layui.$.ajax({
|
||||
url: MODIFY_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<input type="hidden" name="<?=htmlspecialchars($primary_key)?>" value="<?=htmlspecialchars($value)?>">
|
||||
<input type="hidden" name="table" value="<?=htmlspecialchars($table)?>">
|
||||
|
||||
<?=$form->html(5)?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
let PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/table/select" + location.search;
|
||||
const UPDATE_API = "/app/admin/table/update";
|
||||
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
let util = layui.util;
|
||||
$.ajax({
|
||||
url: SELECT_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
layui.each(res.data[0], function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
if (key === "password") {
|
||||
obj.attr("placeholder", "不更新密码请留空");
|
||||
return;
|
||||
}
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.val(value);
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
<?=$form->js(6)?>
|
||||
|
||||
// ajax返回失败
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
layui.use(["form", "popup"], function () {
|
||||
// 字段验证允许为空
|
||||
layui.form.verify({
|
||||
phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
|
||||
email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
|
||||
url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
|
||||
number: [/(^$)|^\d+$/,'只能填写数字'],
|
||||
date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
|
||||
identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
|
||||
});
|
||||
//提交事件
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>表详情</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<?=$form->html(5)?>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.table.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.table.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.table.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.table.delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
const TABLE_NAME = "<?=htmlspecialchars($table)?>";
|
||||
const PRIMARY_KEY = "<?=htmlspecialchars($primary_key)?>";
|
||||
const SELECT_API = "/app/admin/table/select?table=" + TABLE_NAME;
|
||||
const UPDATE_API = "/app/admin/table/update";
|
||||
const DELETE_API = "/app/admin/table/delete";
|
||||
const SCHEMA_API = "/app/admin/table/schema?table=" + TABLE_NAME;
|
||||
const INSERT_URL = "/app/admin/table/insert?table=" + TABLE_NAME;
|
||||
const UPDATE_URL = "/app/admin/table/update?table=" + TABLE_NAME;
|
||||
|
||||
<?=$form->js(3)?>
|
||||
|
||||
layui.use(["table", "form","common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
let apis = [];
|
||||
let apiResults = {};
|
||||
$.ajax({
|
||||
url: SCHEMA_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
let forms = res.data.forms;
|
||||
let cols = [{
|
||||
type: "checkbox"
|
||||
}];
|
||||
for (let i in forms) {
|
||||
let item = forms[i];
|
||||
let field = item.field;
|
||||
let schema = {
|
||||
title: item.comment || item.field,
|
||||
field: field,
|
||||
hide: !item.list_show,
|
||||
sort: item.enable_sort
|
||||
}
|
||||
|
||||
let control = item.control.toLowerCase();
|
||||
// switch 可以直接编辑
|
||||
if (control === "switch") {
|
||||
let props = getControlProps(item.control_args);
|
||||
let layText = props["lay-text"] || "";
|
||||
schema.templet = function (d) {
|
||||
form.on("switch("+field+")", function (data) {
|
||||
if (!PRIMARY_KEY) {
|
||||
return layui.popup.warning("该表没有主键，无法完成此操作");
|
||||
}
|
||||
let load = layer.load();
|
||||
let postData = { table: TABLE_NAME };
|
||||
postData[field] = data.elem.checked ? 1 : 0;
|
||||
postData[PRIMARY_KEY] = this.value;
|
||||
$.post(UPDATE_API, postData, function (res) {
|
||||
layer.close(load);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
})
|
||||
});
|
||||
let checked = d[field] === 1 ? "checked" : "";
|
||||
return '<input type="checkbox" value="'+util.escape(d[PRIMARY_KEY])+'" lay-filter="'+util.escape(field)+'" lay-skin="switch" lay-text="'+util.escape(layText)+'" '+checked+'/>';
|
||||
}
|
||||
} else if (control === "iconpicker") {
|
||||
schema.templet = function (d) {
|
||||
return '<i class="layui-icon ' + util.escape(d[field]) + '"></i>';
|
||||
};
|
||||
} else if (control === "upload") {
|
||||
schema.templet = function (d) {
|
||||
return '<a href="' + encodeURI(d[field]) + '" target="_blank">' + util.escape(d[field]) + '</a>';
|
||||
};
|
||||
} else if (control === "uploadimage") {
|
||||
schema.templet = function (d) {
|
||||
if (!d[field]) return "";
|
||||
let images = d[field].split(",");
|
||||
let imagesHtml = '';
|
||||
for (let i in images) {
|
||||
imagesHtml += '<img src="'+encodeURI(images[i])+'" style="max-width:32px;max-height:32px;" />';
|
||||
}
|
||||
return imagesHtml;
|
||||
};
|
||||
} else if (["select", "selectmulti", "treeselect", "treeselectmulti"].indexOf(control) !== -1) {
|
||||
let props = getControlProps(item.control_args);
|
||||
apiResults[field] = [];
|
||||
if (props.url) {
|
||||
apis.push([field, props.url]);
|
||||
} else if (props.data) {
|
||||
apiResults[field] = props.data;
|
||||
}
|
||||
schema.templet = function (d) {
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
}
|
||||
}
|
||||
cols.push(schema);
|
||||
}
|
||||
cols.push({
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
width: 130
|
||||
});
|
||||
|
||||
function render()
|
||||
{
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let count = apis.length;
|
||||
if (count) {
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
render();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
window.remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
window.edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
window.add();
|
||||
} else if (obj.event === "refresh") {
|
||||
window.refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
window.batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 字段验证允许为空
|
||||
form.verify({
|
||||
phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
|
||||
email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
|
||||
url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
|
||||
number: [/(^$)|^\d+$/,'只能填写数字'],
|
||||
date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
|
||||
identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
|
||||
});
|
||||
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
form.on("submit(table-reset)", function(data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
table.on("sort(data-table)", function(obj){
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
window.edit = function(obj) {
|
||||
if (!PRIMARY_KEY) {
|
||||
return layui.popup.warning("该表没有主键，无法完成此操作");
|
||||
}
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: UPDATE_URL + "&" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
window.remove = function(obj) {
|
||||
return window.doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
window.batchRemove = function(obj) {
|
||||
var checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
window.doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
window.doRemove = function (ids) {
|
||||
if (!PRIMARY_KEY) {
|
||||
return layui.popup.warning("该表没有主键，无法完成此操作");
|
||||
}
|
||||
let data = {
|
||||
table: TABLE_NAME
|
||||
};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 获取选择组件配置项
|
||||
function getControlProps(control_args)
|
||||
{
|
||||
if (!control_args) {
|
||||
return {};
|
||||
}
|
||||
let props = {};
|
||||
let split = control_args.split(";");
|
||||
for (let item of split) {
|
||||
let pos = item.indexOf(":");
|
||||
if (pos === -1) continue;
|
||||
let name = item.substring(0, pos).trim();
|
||||
let values = item.substring(pos + 1).trim();
|
||||
|
||||
// values = a:v,c:d
|
||||
pos = values.indexOf(":");
|
||||
if (pos !== -1) {
|
||||
let options = values.split(",");
|
||||
values = {};
|
||||
for (const option of options) {
|
||||
let [value, name] = option.split(":");
|
||||
values[value] = name;
|
||||
}
|
||||
}
|
||||
props[name] = values;
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,452 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类别</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="category" id="category" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">扩展名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="ext" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">名字</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上传时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="created_at">
|
||||
<input type="text" autocomplete="off" name="created_at[]" id="created_at-date-start" class="layui-input inline-block" placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" name="created_at[]" id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.upload.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.upload.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="select">选择</button>
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/upload/select";
|
||||
const UPDATE_API = "/app/admin/upload/update";
|
||||
const DELETE_API = "/app/admin/upload/delete";
|
||||
const INSERT_URL = "/app/admin/upload/insert";
|
||||
const UPDATE_URL = "/app/admin/upload/update";
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 字段 上传时间 created_at
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#created_at",
|
||||
range: ["#created_at-date-start", "#created_at-date-end"],
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 类别 category
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/dict/get/upload",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#category").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#category",
|
||||
name: "category",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
on: function(data){
|
||||
let value = data.arr[0] ? data.arr[0].value : "";
|
||||
table.reload("data-table", {
|
||||
where: {category: value}
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
},{
|
||||
title: "主键",
|
||||
field: "id",
|
||||
width: 80,
|
||||
sort: true,
|
||||
},{
|
||||
title: "名字",
|
||||
field: "name",
|
||||
},{
|
||||
title: "文件",
|
||||
field: "url",
|
||||
templet: function (d) {
|
||||
if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].indexOf(d.ext.toLowerCase()) !== -1) {
|
||||
return '<img src="' + encodeURI(d['url']) + '" style="max-width:32px;max-height:32px;" />';
|
||||
}
|
||||
return '<a href="' + encodeURI(d['url']) + '" target="_blank">' + util.escape(d['url']) + '</a>';
|
||||
}
|
||||
},{
|
||||
title: "管理员id",
|
||||
field: "admin_id",
|
||||
hide: true,
|
||||
},{
|
||||
title: "用户id",
|
||||
field: "user_id",
|
||||
hide: true,
|
||||
},{
|
||||
title: "文件大小",
|
||||
field: "file_size",
|
||||
templet: function (d) {
|
||||
return formatSize(d.file_size);
|
||||
}
|
||||
},{
|
||||
title: "mime类型",
|
||||
field: "mime_type",
|
||||
hide: true,
|
||||
},{
|
||||
title: "图片宽度",
|
||||
field: "image_width",
|
||||
},{
|
||||
title: "图片高度",
|
||||
field: "image_height",
|
||||
},{
|
||||
title: "扩展名",
|
||||
field: "ext",
|
||||
},{
|
||||
title: "存储位置",
|
||||
field: "storage",
|
||||
hide: true,
|
||||
},{
|
||||
title: "上传时间",
|
||||
field: "created_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "类别",
|
||||
field: "category",
|
||||
templet: function (d) {
|
||||
let field = "category";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
}
|
||||
},{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
// 查询指定后缀
|
||||
let searchExt = layui.url().search.ext;
|
||||
if (searchExt) {
|
||||
layui.$('.top-search-from input[name="ext"]').val(searchExt);
|
||||
}
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
where: {ext: searchExt},
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取表格中下拉或树形组件数据
|
||||
let apis = [];
|
||||
apis.push(["category", "/app/admin/dict/get/upload"]);
|
||||
let apiResults = {};
|
||||
apiResults["category"] = [];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 编辑删除或选择行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
} else if (obj.event === "select") {
|
||||
select(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function(data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function(obj){
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"380px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function(obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"380px"],
|
||||
content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 选择行
|
||||
let select = function (obj) {
|
||||
let index = parent.layer.getFrameIndex(window.name);
|
||||
let callback = parent.layui.$("#layui-layer" + index).data("callback");
|
||||
callback(obj.data);
|
||||
parent.layer.close(index);
|
||||
};
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
let formatSize = function(value) {
|
||||
if(null == value || "" === value){
|
||||
return "0 Bytes";
|
||||
}
|
||||
let unitArr = ["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"];
|
||||
let index = 0;
|
||||
let srcSize = parseFloat(value);
|
||||
index = Math.floor(Math.log(srcSize) / Math.log(1024));
|
||||
let size =srcSize / Math.pow(1024, index);
|
||||
size = size.toFixed(2);
|
||||
return size + unitArr[index];
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,434 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类别</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="category" id="category" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">名字</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">扩展名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="ext" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上传时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="created_at">
|
||||
<input type="text" autocomplete="off" name="created_at[]" id="created_at-date-start" class="layui-input inline-block" placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" name="created_at[]" id="created_at-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.upload.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.upload.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.upload.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.upload.delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/upload/select";
|
||||
const UPDATE_API = "/app/admin/upload/update";
|
||||
const DELETE_API = "/app/admin/upload/delete";
|
||||
const INSERT_URL = "/app/admin/upload/insert";
|
||||
const UPDATE_URL = "/app/admin/upload/update";
|
||||
|
||||
// 字段 上传时间 created_at
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#created_at",
|
||||
range: ["#created_at-date-start", "#created_at-date-end"],
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 类别 category
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/dict/get/upload",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#category").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#category",
|
||||
name: "category",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
});
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
},{
|
||||
title: "主键",
|
||||
field: "id",
|
||||
width: 80,
|
||||
sort: true,
|
||||
},{
|
||||
title: "名字",
|
||||
field: "name",
|
||||
},{
|
||||
title: "文件",
|
||||
field: "url",
|
||||
templet: function (d) {
|
||||
if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].indexOf(d.ext.toLowerCase()) !== -1) {
|
||||
return '<img src="' + encodeURI(d['url']) + '" style="max-width:32px;max-height:32px;" />';
|
||||
}
|
||||
return '<a href="' + encodeURI(d['url']) + '" target="_blank">' + util.escape(d['url']) + '</a>';
|
||||
}
|
||||
},{
|
||||
title: "管理员id",
|
||||
field: "admin_id",
|
||||
hide: true,
|
||||
},{
|
||||
title: "用户id",
|
||||
field: "user_id",
|
||||
hide: true,
|
||||
},{
|
||||
title: "文件大小",
|
||||
field: "file_size",
|
||||
templet: function (d) {
|
||||
return formatSize(d.file_size);
|
||||
}
|
||||
},{
|
||||
title: "mime类型",
|
||||
field: "mime_type",
|
||||
hide: true,
|
||||
},{
|
||||
title: "图片宽度",
|
||||
field: "image_width",
|
||||
},{
|
||||
title: "图片高度",
|
||||
field: "image_height",
|
||||
},{
|
||||
title: "扩展名",
|
||||
field: "ext",
|
||||
},{
|
||||
title: "存储位置",
|
||||
field: "storage",
|
||||
hide: true,
|
||||
},{
|
||||
title: "上传时间",
|
||||
field: "created_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "类别",
|
||||
field: "category",
|
||||
templet: function (d) {
|
||||
let field = "category";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
}
|
||||
},{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取表格中下拉或树形组件数据
|
||||
let apis = [];
|
||||
apis.push(["category", "/app/admin/dict/get/upload"]);
|
||||
let apiResults = {};
|
||||
apiResults["category"] = [];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 编辑删除或选择行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function(data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function(obj){
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"380px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function(obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"380px"],
|
||||
content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
let formatSize = function(value) {
|
||||
if(null == value || "" === value){
|
||||
return "0 Bytes";
|
||||
}
|
||||
let unitArr = ["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"];
|
||||
let index = 0;
|
||||
let srcSize = parseFloat(value);
|
||||
index = Math.floor(Math.log(srcSize) / Math.log(1024));
|
||||
let size =srcSize / Math.pow(1024, index);
|
||||
size = size.toFixed(2);
|
||||
return size + unitArr[index];
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类别</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="category" id="category" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">文件</label>
|
||||
<div class="layui-input-block">
|
||||
<span></span>
|
||||
<input type="text" style="display:none" name="url" value="" />
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="url">
|
||||
<i class="layui-icon layui-icon-upload"></i>上传文件
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 字段 文件 url
|
||||
layui.use(["upload", "layer", "popup", "util"], function() {
|
||||
let input = layui.$("#url").prev();
|
||||
input.prev().html(layui.util.escape(input.val()));
|
||||
layui.upload.render({
|
||||
elem: "#url",
|
||||
accept: "file",
|
||||
data: {category: function () {
|
||||
return layui.$('input[name="category"]').val();
|
||||
}},
|
||||
url: "/app/admin/upload/insert",
|
||||
field: "__file__",
|
||||
done: function (res) {
|
||||
if (res.code) return layui.popup.failure(res.msg);
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 类别 category
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/dict/get/upload",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#category").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#category",
|
||||
name: "category",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
});
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="width:inherit">类别</label>
|
||||
<div class="layui-input-block" style="margin-left:60px;">
|
||||
<div name="category" id="category" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/upload/select" + location.search;
|
||||
const UPDATE_API = "/app/admin/upload/update";
|
||||
|
||||
// 获取数据库记录
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: SELECT_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 给表单初始化数据
|
||||
layui.each(res.data[0], function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
obj.attr("value", value);
|
||||
});
|
||||
|
||||
// 字段 文件 url
|
||||
layui.use(["upload", "layer", "popup", "util"], function() {
|
||||
let input = layui.$("#url").prev();
|
||||
input.prev().html(layui.util.escape(input.val()));
|
||||
layui.upload.render({
|
||||
elem: "#url",
|
||||
url: "/app/admin/upload/update",
|
||||
accept: "file",
|
||||
field: "__file__",
|
||||
done: function (res) {
|
||||
if (res.code) return layui.popup.failure(res.msg);
|
||||
this.item.prev().val(res.data.url).prev().html(layui.util.escape(res.data.url));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 类别 category
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/dict/get/upload",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#category").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#category",
|
||||
name: "category",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
});
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,556 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>浏览页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
|
||||
<!-- 顶部查询表单 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form top-search-from">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">主键</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="id" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">昵称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="nickname" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">性别</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="sex" id="sex" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="email" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">等级</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="level" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">生日</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="birthday">
|
||||
<input type="text" autocomplete="off" name="birthday[]" id="birthday-date-start" class="layui-input inline-block" placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" name="birthday[]" id="birthday-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">余额(元)</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="money" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">积分</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="score" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">登录时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="last_time">
|
||||
<input type="text" autocomplete="off" name="last_time[]" id="last_time-date-start" class="layui-input inline-block" placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" name="last_time[]" id="last_time-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">登录ip</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="last_ip" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">注册时间</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-input-block" id="join_time">
|
||||
<input type="text" autocomplete="off" name="join_time[]" id="join_time-date-start" class="layui-input inline-block" placeholder="开始时间">
|
||||
-
|
||||
<input type="text" autocomplete="off" name="join_time[]" id="join_time-date-end" class="layui-input inline-block" placeholder="结束时间">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">注册ip</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="join_ip" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-inline">
|
||||
<label class="layui-form-label"></label>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
|
||||
<i class="layui-icon layui-icon-search"></i>查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
|
||||
<i class="layui-icon layui-icon-refresh"></i>重置
|
||||
</button>
|
||||
</div>
|
||||
<div class="toggle-btn">
|
||||
<a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
|
||||
<a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="data-table" lay-filter="data-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<script type="text/html" id="table-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.user.insert">
|
||||
<i class="layui-icon layui-icon-add-1"></i>新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.user.delete">
|
||||
<i class="layui-icon layui-icon-delete"></i>删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<!-- 表格行工具栏 -->
|
||||
<script type="text/html" id="table-bar">
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.user.update">编辑</button>
|
||||
<button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.user.delete">删除</button>
|
||||
</script>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script src="/app/admin/admin/js/common.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关常量
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/user/select";
|
||||
const UPDATE_API = "/app/admin/user/update";
|
||||
const DELETE_API = "/app/admin/user/delete";
|
||||
const INSERT_URL = "/app/admin/user/insert";
|
||||
const UPDATE_URL = "/app/admin/user/update";
|
||||
|
||||
// 字段 性别 sex
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/dict/get/sex",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#sex").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#sex",
|
||||
name: "sex",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
});
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 生日 birthday
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#birthday",
|
||||
range: ["#birthday-date-start", "#birthday-date-end"],
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 登录时间 last_time
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#last_time",
|
||||
range: ["#last_time-date-start", "#last_time-date-end"],
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 注册时间 join_time
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#join_time",
|
||||
range: ["#join_time-date-start", "#join_time-date-end"],
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 表格渲染
|
||||
layui.use(["table", "form", "common", "popup", "util"], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.$;
|
||||
let common = layui.common;
|
||||
let util = layui.util;
|
||||
|
||||
// 表头参数
|
||||
let cols = [
|
||||
{
|
||||
type: "checkbox"
|
||||
},{
|
||||
title: "主键",
|
||||
field: "id",
|
||||
sort: true,
|
||||
},{
|
||||
title: "用户名",
|
||||
field: "username",
|
||||
},{
|
||||
title: "昵称",
|
||||
field: "nickname",
|
||||
},{
|
||||
title: "密码",
|
||||
field: "password",
|
||||
hide: true,
|
||||
},{
|
||||
title: "性别",
|
||||
field: "sex",
|
||||
templet: function (d) {
|
||||
let field = "sex";
|
||||
if (typeof d[field] == "undefined") return "";
|
||||
let items = [];
|
||||
layui.each((d[field] + "").split(","), function (k , v) {
|
||||
items.push(apiResults[field][v] || v);
|
||||
});
|
||||
return util.escape(items.join(","));
|
||||
}
|
||||
},{
|
||||
title: "头像",
|
||||
field: "avatar",
|
||||
templet: function (d) {
|
||||
return '<img src="'+encodeURI(d['avatar'])+'" style="max-width:32px;max-height:32px;" alt="" />'
|
||||
}
|
||||
},{
|
||||
title: "邮箱",
|
||||
field: "email",
|
||||
},{
|
||||
title: "手机",
|
||||
field: "mobile",
|
||||
},{
|
||||
title: "等级",
|
||||
field: "level",
|
||||
hide: true,
|
||||
},{
|
||||
title: "生日",
|
||||
field: "birthday",
|
||||
hide: true,
|
||||
},{
|
||||
title: "余额(元)",
|
||||
field: "money",
|
||||
hide: true,
|
||||
},{
|
||||
title: "积分",
|
||||
field: "score",
|
||||
hide: true,
|
||||
},{
|
||||
title: "登录时间",
|
||||
field: "last_time",
|
||||
hide: true,
|
||||
},{
|
||||
title: "登录ip",
|
||||
field: "last_ip",
|
||||
hide: true,
|
||||
},{
|
||||
title: "注册时间",
|
||||
field: "join_time",
|
||||
hide: true,
|
||||
},{
|
||||
title: "注册ip",
|
||||
field: "join_ip",
|
||||
hide: true,
|
||||
},{
|
||||
title: "token",
|
||||
field: "token",
|
||||
hide: true,
|
||||
},{
|
||||
title: "创建时间",
|
||||
field: "created_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
hide: true,
|
||||
},{
|
||||
title: "角色",
|
||||
field: "role",
|
||||
hide: true,
|
||||
},{
|
||||
title: "禁用",
|
||||
field: "status",
|
||||
templet: function (d) {
|
||||
let field = "status";
|
||||
form.on("switch("+field+")", function (data) {
|
||||
let load = layer.load();
|
||||
let postData = {};
|
||||
postData[field] = data.elem.checked ? 1 : 0;
|
||||
postData[PRIMARY_KEY] = this.value;
|
||||
$.post(UPDATE_API, postData, function (res) {
|
||||
layer.close(load);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg, function () {
|
||||
data.elem.checked = !data.elem.checked;
|
||||
form.render();
|
||||
});
|
||||
}
|
||||
return layui.popup.success("操作成功");
|
||||
})
|
||||
});
|
||||
let checked = d[field] === 1 ? "checked" : "";
|
||||
return '<input type="checkbox" value="'+util.escape(d[PRIMARY_KEY])+'" lay-filter="'+util.escape(field)+'" lay-skin="switch" lay-text="'+util.escape('')+'" '+checked+'/>';
|
||||
}
|
||||
},{
|
||||
title: "操作",
|
||||
toolbar: "#table-bar",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
}
|
||||
];
|
||||
|
||||
// 渲染表格
|
||||
function render()
|
||||
{
|
||||
table.render({
|
||||
elem: "#data-table",
|
||||
url: SELECT_API,
|
||||
page: true,
|
||||
cols: [cols],
|
||||
skin: "line",
|
||||
size: "lg",
|
||||
toolbar: "#table-toolbar",
|
||||
autoSort: false,
|
||||
defaultToolbar: [{
|
||||
title: "刷新",
|
||||
layEvent: "refresh",
|
||||
icon: "layui-icon-refresh",
|
||||
}, "filter", "print", "exports"],
|
||||
done: function () {
|
||||
layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取表格中下拉或树形组件数据
|
||||
let apis = [];
|
||||
apis.push(["sex", "/app/admin/dict/get/sex"]);
|
||||
let apiResults = {};
|
||||
apiResults["sex"] = [];
|
||||
let count = apis.length;
|
||||
layui.each(apis, function (k, item) {
|
||||
let [field, url] = item;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dateType: "json",
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
function travel(items) {
|
||||
for (let k in items) {
|
||||
let item = items[k];
|
||||
apiResults[field][item.value] = item.name;
|
||||
if (item.children) {
|
||||
travel(item.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
travel(res.data);
|
||||
},
|
||||
complete: function () {
|
||||
if (--count === 0) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!count) {
|
||||
render();
|
||||
}
|
||||
|
||||
// 编辑或删除行事件
|
||||
table.on("tool(data-table)", function(obj) {
|
||||
if (obj.event === "remove") {
|
||||
remove(obj);
|
||||
} else if (obj.event === "edit") {
|
||||
edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部工具栏事件
|
||||
table.on("toolbar(data-table)", function(obj) {
|
||||
if (obj.event === "add") {
|
||||
add();
|
||||
} else if (obj.event === "refresh") {
|
||||
refreshTable();
|
||||
} else if (obj.event === "batchRemove") {
|
||||
batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
// 表格顶部搜索事件
|
||||
form.on("submit(table-query)", function(data) {
|
||||
table.reload("data-table", {
|
||||
page: {
|
||||
curr: 1
|
||||
},
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表格顶部搜索重置事件
|
||||
form.on("submit(table-reset)", function(data) {
|
||||
table.reload("data-table", {
|
||||
where: []
|
||||
})
|
||||
});
|
||||
|
||||
// 表格排序事件
|
||||
table.on("sort(data-table)", function(obj){
|
||||
table.reload("data-table", {
|
||||
initSort: obj,
|
||||
scrollPos: "fixed",
|
||||
where: {
|
||||
field: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表格新增数据
|
||||
let add = function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "新增",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: INSERT_URL
|
||||
});
|
||||
}
|
||||
|
||||
// 表格编辑数据
|
||||
let edit = function(obj) {
|
||||
let value = obj.data[PRIMARY_KEY];
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: "修改",
|
||||
shade: 0.1,
|
||||
area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
|
||||
content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
|
||||
});
|
||||
}
|
||||
|
||||
// 删除一行
|
||||
let remove = function(obj) {
|
||||
return doRemove(obj.data[PRIMARY_KEY]);
|
||||
}
|
||||
|
||||
// 删除多行
|
||||
let batchRemove = function(obj) {
|
||||
let checkIds = common.checkField(obj, PRIMARY_KEY);
|
||||
if (checkIds === "") {
|
||||
layui.popup.warning("未选中数据");
|
||||
return false;
|
||||
}
|
||||
doRemove(checkIds.split(","));
|
||||
}
|
||||
|
||||
// 执行删除
|
||||
let doRemove = function (ids) {
|
||||
let data = {};
|
||||
data[PRIMARY_KEY] = ids;
|
||||
layer.confirm("确定删除?", {
|
||||
icon: 3,
|
||||
title: "提示"
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: DELETE_API,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
type: "post",
|
||||
success: function(res) {
|
||||
layer.close(loading);
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", refreshTable);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
window.refreshTable = function() {
|
||||
table.reloadData("data-table", {
|
||||
scrollPos: "fixed",
|
||||
done: function (res, curr) {
|
||||
if (curr > 1 && res.data && !res.data.length) {
|
||||
curr = curr - 1;
|
||||
table.reloadData("data-table", {
|
||||
page: {
|
||||
curr: curr
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>新增页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form" action="">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">昵称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="nickname" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="password" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">性别</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="sex" id="sex" value="1" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">头像</label>
|
||||
<div class="layui-input-block">
|
||||
<img class="img-3" src=""/>
|
||||
<input type="text" style="display:none" name="avatar" value="" />
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="avatar" permission="app.admin.upload.avatar">
|
||||
<i class="layui-icon layui-icon-upload"></i>上传图片
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-avatar" permission="app.admin.upload.attachment">
|
||||
<i class="layui-icon layui-icon-align-left"></i>选择图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="email" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">等级</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="level" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">生日</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="birthday" id="birthday" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">余额(元)</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="money" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">积分</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="score" value="0" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">登录时间</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="last_time" id="last_time" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">登录ip</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="last_ip" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">注册时间</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="join_time" id="join_time" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">注册ip</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="join_ip" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">禁用</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" id="status" lay-filter="status" lay-skin="switch" />
|
||||
<input type="text" style="display:none" name="status" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
|
||||
lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const INSERT_API = "/app/admin/user/insert";
|
||||
|
||||
// 字段 性别 sex
|
||||
layui.use(["jquery", "xmSelect"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/dict/get/sex",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#sex").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#sex",
|
||||
name: "sex",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
value: "1",
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
});
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 头像 avatar
|
||||
layui.use(["upload", "layer"], function() {
|
||||
let input = layui.$("#avatar").prev();
|
||||
input.prev().attr("src", input.val());
|
||||
layui.$("#attachment-choose-avatar").on("click", function() {
|
||||
parent.layer.open({
|
||||
type: 2,
|
||||
title: "选择附件",
|
||||
content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
|
||||
area: ["95%", "90%"],
|
||||
success: function (layero, index) {
|
||||
parent.layui.$("#layui-layer" + index).data("callback", function (data) {
|
||||
input.val(data.url).prev().attr("src", data.url);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
layui.upload.render({
|
||||
elem: "#avatar",
|
||||
url: "/app/admin/upload/avatar",
|
||||
acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
|
||||
field: "__file__",
|
||||
done: function (res) {
|
||||
if (res.code > 0) return layui.layer.msg(res.msg);
|
||||
this.item.prev().val(res.data.url).prev().attr("src", res.data.url);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 生日 birthday
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#birthday",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 登录时间 last_time
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#last_time",
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 注册时间 join_time
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#join_time",
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 禁用 status
|
||||
layui.use(["form"], function() {
|
||||
layui.$("#status").attr("checked", layui.$('input[name="status"]').val() != 0);
|
||||
layui.form.render();
|
||||
layui.form.on("switch(status)", function(data) {
|
||||
layui.$('input[name="status"]').val(this.checked ? 1 : 0);
|
||||
});
|
||||
})
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
layui.$.ajax({
|
||||
url: INSERT_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>更新页面</title>
|
||||
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="layui-form">
|
||||
|
||||
<div class="mainBox">
|
||||
<div class="main-container mr-5">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">昵称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="nickname" value="" required lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="password" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">性别</label>
|
||||
<div class="layui-input-block">
|
||||
<div name="sex" id="sex" value="" ></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">头像</label>
|
||||
<div class="layui-input-block">
|
||||
<img class="img-3" src=""/>
|
||||
<input type="text" style="display:none" name="avatar" value="" />
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="avatar" permission="app.admin.upload.avatar">
|
||||
<i class="layui-icon layui-icon-upload"></i>上传图片
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-avatar" permission="app.admin.upload.attachment">
|
||||
<i class="layui-icon layui-icon-align-left"></i>选择图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="email" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="mobile" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">等级</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="level" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">生日</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="birthday" id="birthday" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">余额(元)</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="money" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">积分</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" name="score" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">登录时间</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="last_time" id="last_time" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">登录ip</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="last_ip" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">注册时间</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="join_time" id="join_time" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">注册ip</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="join_ip" value="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">禁用</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" id="status" lay-filter="status" lay-skin="switch" />
|
||||
<input type="text" style="display:none" name="status" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
||||
<script src="/app/admin/component/pear/pear.js"></script>
|
||||
<script src="/app/admin/admin/js/permission.js"></script>
|
||||
<script>
|
||||
|
||||
// 相关接口
|
||||
const PRIMARY_KEY = "id";
|
||||
const SELECT_API = "/app/admin/user/select" + location.search;
|
||||
const UPDATE_API = "/app/admin/user/update";
|
||||
|
||||
// 获取数据库记录
|
||||
layui.use(["form", "util", "popup"], function () {
|
||||
let $ = layui.$;
|
||||
$.ajax({
|
||||
url: SELECT_API,
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
|
||||
// 给表单初始化数据
|
||||
layui.each(res.data[0], function (key, value) {
|
||||
let obj = $('*[name="'+key+'"]');
|
||||
if (key === "password") {
|
||||
obj.attr("placeholder", "不更新密码请留空");
|
||||
return;
|
||||
}
|
||||
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
||||
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
||||
obj.val(layui.util.escape(value));
|
||||
} else {
|
||||
obj.attr("value", value);
|
||||
}
|
||||
});
|
||||
|
||||
// 字段 性别 sex
|
||||
layui.use(["jquery", "xmSelect", "popup"], function() {
|
||||
layui.$.ajax({
|
||||
url: "/app/admin/dict/get/sex",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
let value = layui.$("#sex").attr("value");
|
||||
let initValue = value ? value.split(",") : [];
|
||||
layui.xmSelect.render({
|
||||
el: "#sex",
|
||||
name: "sex",
|
||||
initValue: initValue,
|
||||
data: res.data,
|
||||
model: {"icon":"hidden","label":{"type":"text"}},
|
||||
clickClose: true,
|
||||
radio: true,
|
||||
});
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 头像 avatar
|
||||
layui.use(["upload", "layer"], function() {
|
||||
let input = layui.$("#avatar").prev();
|
||||
input.prev().attr("src", input.val());
|
||||
layui.$("#attachment-choose-avatar").on("click", function() {
|
||||
parent.layer.open({
|
||||
type: 2,
|
||||
title: "选择附件",
|
||||
content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
|
||||
area: ["95%", "90%"],
|
||||
success: function (layero, index) {
|
||||
parent.layui.$("#layui-layer" + index).data("callback", function (data) {
|
||||
input.val(data.url).prev().attr("src", data.url);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
layui.upload.render({
|
||||
elem: "#avatar",
|
||||
url: "/app/admin/upload/avatar",
|
||||
acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
|
||||
field: "__file__",
|
||||
done: function (res) {
|
||||
if (res.code > 0) return layui.layer.msg(res.msg);
|
||||
this.item.prev().val(res.data.url).prev().attr("src", res.data.url);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 字段 生日 birthday
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#birthday",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 登录时间 last_time
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#last_time",
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 注册时间 join_time
|
||||
layui.use(["laydate"], function() {
|
||||
layui.laydate.render({
|
||||
elem: "#join_time",
|
||||
type: "datetime",
|
||||
});
|
||||
})
|
||||
|
||||
// 字段 禁用 status
|
||||
layui.use(["form"], function() {
|
||||
layui.$("#status").attr("checked", layui.$('input[name="status"]').val() != 0);
|
||||
layui.form.render();
|
||||
layui.form.on("switch(status)", function(data) {
|
||||
layui.$('input[name="status"]').val(this.checked ? 1 : 0);
|
||||
});
|
||||
})
|
||||
|
||||
// ajax产生错误
|
||||
if (res.code) {
|
||||
layui.popup.failure(res.msg);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//提交事件
|
||||
layui.use(["form", "popup"], function () {
|
||||
layui.form.on("submit(save)", function (data) {
|
||||
data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
|
||||
layui.$.ajax({
|
||||
url: UPDATE_API,
|
||||
type: "POST",
|
||||
dateType: "json",
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
return layui.popup.failure(res.msg);
|
||||
}
|
||||
return layui.popup.success("操作成功", function () {
|
||||
parent.refreshTable();
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user