git init
This commit is contained in:
Lwei
@@ -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>
|
||||
Reference in New Issue
Block a user