493 lines
24 KiB
HTML
493 lines
24 KiB
HTML
<!doctype html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<base th:href="${#request.getContextPath() + '/'} ">
|
|
<meta charset="utf-8">
|
|
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
|
<style>
|
|
.layui-form-select dl {
|
|
max-height: 150px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-fluid layui-anim layui-anim-fadein">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
<span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
|
|
<a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
|
|
<a href="javascript:void(0);"><cite>编辑内容</cite></a>
|
|
</span>
|
|
</div>
|
|
<div class="layui-card-body" style="padding: 15px;">
|
|
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">表名 *</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="tableName" lay-verify="required|noSpecial" placeholder="请输入表名" class="layui-input" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">字段名 *</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="fieldName" lay-verify="required|noSpecial" placeholder="请输入字段名" 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="fieldExplain" lay-verify="required" placeholder="请输入字段说明" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">字段类型 *</label>
|
|
<div class="layui-input-block">
|
|
<select name="fieldType" lay-verify="required" lay-filter="fieldType">
|
|
<option value="string">文本</option>
|
|
<option value="datetime">时间戳</option>
|
|
<option value="date">日期</option>
|
|
<option value="number">整形</option>
|
|
<option value="double">双精度</option>
|
|
<option value="textarea">文本域</option>
|
|
<option value="richText">富文本</option>
|
|
<option value="select">下拉选择</option>
|
|
<option value="checkbox">复选</option>
|
|
<option value="radio">单选</option>
|
|
<option value="selectUser">选择人员</option>
|
|
<option value="selectDepartment">选择部门</option>
|
|
<option value="file">文件</option>
|
|
<option value="image">图片</option>
|
|
<option value="video">视频</option>
|
|
<option value="audio">音频</option>
|
|
<option value="join">主联字段</option>
|
|
<option value="currentUser">当前用户</option>
|
|
<option value="currentDepartment">当前组织</option>
|
|
<option value="currentRole">当前角色</option>
|
|
<option value="currentGroup">当前组</option>
|
|
<option value="currentPosition">当前职位</option>
|
|
<option value="leftJoin">左联表</option>
|
|
<option value="innerJoin">内联表</option>
|
|
<option value="rightJoin">右联表</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="joinFieldBox" style="display: none;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">关联表</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="joinTable" name="joinTable" placeholder="请选择关联表" class="layui-input" readonly style="cursor: pointer;">
|
|
</div>
|
|
</div>
|
|
<div id="joinFieldDetailBox" style="display: none;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">关联字段</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="joinTableField" name="joinTableField" placeholder="请输入关联字段" class="layui-input" readonly style="cursor: pointer;">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">关联顺序</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="joinTableSort" placeholder="请输入关联顺序" class="layui-input" value="1">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">列表显示</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="joinTableListShow" name="joinTableListShow" placeholder="请选择关联表需要在列表中显示的字段，不包括被关联表中的关联字段" class="layui-input" readonly style="cursor: pointer;">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">表单显示</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="joinTableFormShow" name="joinTableFormShow" placeholder="请选择关联表需要在表单中回显的字段，不包括被关联表中的关联字段" class="layui-input" readonly style="cursor: pointer;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="normalFieldBox">
|
|
<div id="fieldDefaultBox">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">字段默认值</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="fieldDefault" placeholder="请输入字段默认值" class="layui-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="dictionaryNameBox" style="display: none;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">关联字典</label>
|
|
<div class="layui-input-block">
|
|
<input type="hidden" id="dictionaryId" name="dictionaryId">
|
|
<input type="text" id="dictionaryName" name="dictionaryName" placeholder="点击选择字典" class="layui-input" readonly style="cursor: pointer;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="verifyBox">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">校验类型 *</label>
|
|
<div class="layui-input-block">
|
|
<select name="verifyType" lay-filter="verifyType" lay-verify="required">
|
|
<option value="none">无</option>
|
|
<option value="required">不为空</option>
|
|
<option value="phone">手机号</option>
|
|
<option value="email">邮件</option>
|
|
<option value="url">链接</option>
|
|
<option value="number">数字</option>
|
|
<option value="date">日期</option>
|
|
<option value="identity">身份证</option>
|
|
<option value="custom">自定义</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="verifyRegularBox" class="layui-form-item" style="display: none">
|
|
<label class="layui-form-label">校验正则</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="verifyRegular" placeholder="请输入校验正则" class="layui-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item" pane>
|
|
<label class="layui-form-label">列表显示 *</label>
|
|
<div class="layui-input-block">
|
|
<input type="radio" name="listShow" value="0" title="关闭">
|
|
<input type="radio" name="listShow" value="1" title="开启" checked>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">列表宽度 *</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="listShowWidth" placeholder="请输入列表宽度" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item" pane>
|
|
<label class="layui-form-label">表单显示 *</label>
|
|
<div class="layui-input-block">
|
|
<input type="radio" name="formShow" value="0" title="关闭">
|
|
<input type="radio" name="formShow" value="1" title="开启" checked>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">排序 *</label>
|
|
<div class="layui-input-block">
|
|
<input type="number" name="fieldSort" lay-verify="number" placeholder="请输入排序" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-layout-admin">
|
|
<div class="layui-input-block">
|
|
<div class="layui-footer" style="left: 0;">
|
|
<button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交编辑</button>
|
|
<button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="id" th:value="${id}">
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script>
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'form', 'laydate'], function(){
|
|
var $ = layui.$;
|
|
var form = layui.form;
|
|
var id = $('#id').val();
|
|
function closeBox() {
|
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
|
}
|
|
|
|
// 显示或隐藏form表单元素
|
|
function initFormItemShowHide(value) {
|
|
// 联表
|
|
if(value === 'leftJoin' || value === 'innerJoin' || value === 'rightJoin') {
|
|
$('#normalFieldBox').hide();
|
|
$('#joinFieldBox').show();
|
|
$('#fieldDefaultBox').hide();
|
|
$('#verifyBox').hide();
|
|
if($('#joinTable').val() != '') {
|
|
$('#joinFieldDetailBox').show();
|
|
} else {
|
|
$('#joinFieldDetailBox').hide();
|
|
}
|
|
return;
|
|
}
|
|
$('#joinFieldBox').hide();
|
|
$('#normalFieldBox').show();
|
|
// 选择关联字典
|
|
if(value === 'select' || value === 'checkbox' || value === 'radio') {
|
|
$('#dictionaryNameBox').show();
|
|
return;
|
|
}
|
|
$('#dictionaryNameBox').hide();
|
|
if(value === 'string') {
|
|
$('#verifyBox').show();
|
|
$('#fieldDefaultBox').show();
|
|
return;
|
|
}
|
|
$('#verifyBox').hide();
|
|
if(value === 'number' || value === 'double') {
|
|
$('#fieldDefaultBox').show();
|
|
return;
|
|
}
|
|
$('#fieldDefaultBox').hide();
|
|
}
|
|
form.on('select(fieldType)', function(data) {
|
|
initFormItemShowHide(data.value);
|
|
});
|
|
// 验证
|
|
function initVerifyRegular(value) {
|
|
if(value === 'custom') {
|
|
$('#verifyRegularBox').show();
|
|
return;
|
|
}
|
|
$('#verifyRegularBox').hide();
|
|
}
|
|
form.on('select(verifyType)', function(data) {
|
|
initVerifyRegular(data.value);
|
|
});
|
|
|
|
// 初始化
|
|
function initData() {
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/dynamicconfigtable/dynamicconfigform/getformbyid/{id}', [id]), {}, null, function(code, data) {
|
|
initFormItemShowHide(data.fieldType);
|
|
initVerifyRegular(data.verifyType);
|
|
|
|
form.val('dataForm', {
|
|
tableName: data.tableName,
|
|
fieldName: data.fieldName,
|
|
fieldExplain: data.fieldExplain,
|
|
fieldType: data.fieldType,
|
|
fieldDefault: data.fieldDefault,
|
|
dictionaryId: data.dictionaryId,
|
|
dictionaryName: data.dictionaryName,
|
|
verifyType: data.verifyType == '' ? 'none' : data.verifyType,
|
|
verifyRegular: data.verifyRegular,
|
|
fieldSort: data.fieldSort,
|
|
listShow: data.listShow.toString(),
|
|
listShowWidth: data.listShowWidth,
|
|
formShow: data.formShow.toString(),
|
|
joinTable: data.joinTable,
|
|
joinTableField: data.joinTableField,
|
|
joinTableSort: data.joinTableSort,
|
|
joinTableListShow: data.joinTableListShow,
|
|
joinTableFormShow: data.joinTableFormShow
|
|
});
|
|
form.render(null, 'dataForm');
|
|
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
}
|
|
initData();
|
|
|
|
// 提交表单
|
|
form.on('submit(submitForm)', function(formData) {
|
|
top.dialog.confirm(top.dataMessage.commit, function(index) {
|
|
top.dialog.close(index);
|
|
var loadLayerIndex;
|
|
top.restAjax.put(top.restAjax.path('api/dynamicconfigtable/dynamicconfigform/updateform/{id}', [id]), formData.field, null, function(code, data) {
|
|
var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
|
|
time: 0,
|
|
btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
|
|
shade: 0.3,
|
|
yes: function(index) {
|
|
top.dialog.close(index);
|
|
window.location.reload();
|
|
},
|
|
btn2: function() {
|
|
closeBox();
|
|
}
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
});
|
|
return false;
|
|
});
|
|
form.verify({
|
|
noSpecial: function(value, item){
|
|
if(!new RegExp("^[a-zA-Z0-9_\\s·]+$").test(value)){
|
|
return '不能有特殊字符';
|
|
}
|
|
}
|
|
});
|
|
$(document.body).on('click', '#dictionaryName', function() {
|
|
top.dialog.tree({
|
|
title: '绑定数据字典',
|
|
apiUri: top.restAjax.path('api/datadictionary/listztreedictionary', []),
|
|
width: '250px',
|
|
height: '400px',
|
|
dataFilter: function(treeId, parentNode, childNodes) {
|
|
return childNodes;
|
|
},
|
|
selectedNodes: [
|
|
{
|
|
id: $('#dictionaryId').val(),
|
|
name: $('#dictionaryName').val(),
|
|
title: $('#dictionaryName').val()
|
|
}
|
|
],
|
|
onClose: function() {
|
|
var selectNodes = top.dialog.dialogTreeData.selectedNodes;
|
|
if(typeof(selectNodes) != 'undefined' && selectNodes != null) {
|
|
var dictionaryId = '';
|
|
var dictionaryName = '';
|
|
if(selectNodes.length > 0) {
|
|
var selectedNode = selectNodes[0];
|
|
dictionaryId = selectedNode.id;
|
|
dictionaryName = selectedNode.name;
|
|
}
|
|
form.val('dataForm', {
|
|
dictionaryId: dictionaryId,
|
|
dictionaryName: dictionaryName
|
|
});
|
|
form.render(null, 'dataForm');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
// 选择联表
|
|
$(document.body).on('click', '#joinTable', function() {
|
|
var joinTable = $('#joinTable').val();
|
|
top.dialog.tree({
|
|
title: '选择关联表',
|
|
apiUri: top.restAjax.path('api/dynamicconfigtable/listtable', []),
|
|
width: '250px',
|
|
height: '400px',
|
|
dataFilter: function(treeId, parentNode, childNodes) {
|
|
for(var i = 0, item = childNodes[i]; item = childNodes[i++];) {
|
|
item.name = item.tableName;
|
|
item.id = item.tableName;
|
|
item.title = item.tableName;
|
|
}
|
|
return childNodes;
|
|
},
|
|
selectedNodes: [{
|
|
id: joinTable,
|
|
name: joinTable,
|
|
title: joinTable
|
|
}],
|
|
onClose: function() {
|
|
var selectNodes = top.dialog.dialogTreeData.selectedNodes;
|
|
if(typeof(selectNodes) != 'undefined' && selectNodes != null) {
|
|
if(selectNodes.length > 0) {
|
|
$('#joinTable').val(selectNodes[0].id);
|
|
$('#joinTableField').val(selectNodes[0].id +'Id');
|
|
$('#joinFieldDetailBox').show();
|
|
} else {
|
|
$('#joinTable').val('');
|
|
$('#joinTableField').val('');
|
|
$('#joinFieldDetailBox').hide();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
/**
|
|
* 选择字段
|
|
* @param isList 是否列表
|
|
*/
|
|
function selectJoinField(isList) {
|
|
var check = null;
|
|
var selectedNodes = [];
|
|
if(isList) {
|
|
check = {
|
|
enable: true,
|
|
selectType: 'checkbox',
|
|
checkboxType: {Y: 'ps', N: 'ps'},
|
|
radioType: 'level',
|
|
}
|
|
var joinTableListShow = $('#joinTableListShow').val();
|
|
if(joinTableListShow) {
|
|
var joinTableListShowArray = joinTableListShow.split(',');
|
|
for(var i = 0, item; item = joinTableListShowArray[i++];) {
|
|
selectedNodes.push({
|
|
id: item,
|
|
name: item,
|
|
title: item
|
|
})
|
|
}
|
|
}
|
|
|
|
} else {
|
|
var joinTableFormShow = $('#joinTableFormShow').val();
|
|
selectedNodes.push({
|
|
id: joinTableFormShow,
|
|
name: joinTableFormShow,
|
|
title: joinTableFormShow
|
|
});
|
|
}
|
|
top.dialog.tree({
|
|
title: '选择联表显示字段',
|
|
apiUri: top.restAjax.path('api/dynamicconfigtable/dynamicconfigform/listform/{tableName}', [$('#joinTable').val()]),
|
|
width: '250px',
|
|
height: '400px',
|
|
dataFilter: function(treeId, parentNode, childNodes) {
|
|
for(var i = 0, item = childNodes[i]; item = childNodes[i++];) {
|
|
item.name = item.fieldName;
|
|
item.id = item.fieldName;
|
|
item.title = item.fieldName;
|
|
}
|
|
return childNodes;
|
|
},
|
|
check: check,
|
|
selectedNodes: selectedNodes,
|
|
onClose: function() {
|
|
var selectNodes = top.dialog.dialogTreeData.selectedNodes;
|
|
if(typeof(selectNodes) != 'undefined' && selectNodes != null) {
|
|
if(selectNodes.length > 0) {
|
|
var selectNodeValue = '';
|
|
for(var j = 0, selectNode = selectNodes[j]; selectNode = selectNodes[j++];) {
|
|
if(selectNodeValue.length > 0) {
|
|
selectNodeValue += ',';
|
|
}
|
|
selectNodeValue += selectNode.id;
|
|
}
|
|
if(isList) {
|
|
$('#joinTableListShow').val(selectNodeValue);
|
|
} else {
|
|
$('#joinTableFormShow').val(selectNodeValue);
|
|
}
|
|
} else {
|
|
if(isList) {
|
|
$('#joinTableListShow').val('');
|
|
} else {
|
|
$('#joinTableFormShow').val('');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
$(document.body).on('click', '#joinTableListShow', function() {
|
|
selectJoinField(true);
|
|
});
|
|
$(document.body).on('click', '#joinTableFormShow', function() {
|
|
selectJoinField(false);
|
|
});
|
|
$('.close').on('click', function() {
|
|
closeBox();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |