Tenlion/cm-cloud
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整动态表单显示

Browse Source
This commit is contained in:
wenc000 2020-01-31 23:05:00 +08:00
parent 0aca26b6ff
commit a58991853d
2 changed files with 136 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
cloud-common-plugin-dynamic/src/main/resources/templates/dynamic/config/form/save.html
View File

@ -67,9 +67,9 @@
<option value="currentRole">当前角色</option>
<option value="currentGroup">当前组</option>
<option value="currentPosition">当前职位</option>
<option value="leftJoin">左联表</option>
<option value="innerJoin">内联表</option>
<option value="rightJoin">右联表</option>
<option value="leftJoin">左联动态表</option>
<option value="innerJoin">内联动态表</option>
<option value="rightJoin">右联动态表</option>
</select>
</div>
</div>
@ -108,39 +108,45 @@
</div>
</div>
<div id="normalFieldBox">
<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 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 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 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 class="layui-form-item">
<label class="layui-form-label">校验类型 *</label>
<div class="layui-input-block">
<select name="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 id="verifyBox">
<div class="layui-form-item">
<label class="layui-form-label">校验类型 *</label>
<div class="layui-input-block">
<select name="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>
<div class="layui-form-item">
<label class="layui-form-label">校验正则</label>
<div class="layui-input-block">
<input type="text" name="verifyRegular" placeholder="请输入校验正则" class="layui-input">
<div class="layui-form-item">
<label class="layui-form-label">校验正则</label>
<div class="layui-input-block">
<input type="text" name="verifyRegular" placeholder="请输入校验正则" class="layui-input">
</div>
</div>
</div>
</div>
@ -230,13 +236,38 @@
}
});
form.on('select(fieldType)', function(data) {
// 联表
if(data.value === 'leftJoin' || data.value === 'innerJoin' || data.value === 'rightJoin') {
$('#normalFieldBox').hide();
$('#joinFieldBox').show();
} else {
$('#joinFieldBox').hide();
$('#normalFieldBox').show();
$('#fieldDefaultBox').hide();
$('#verifyBox').hide();
if($('#joinTable').val() != '') {
$('#joinFieldDetailBox').show();
} else {
$('#joinFieldDetailBox').hide();
}
return;
}
$('#joinFieldBox').hide();
$('#normalFieldBox').show();
// 选择关联字典
if(data.value === 'select' || data.value === 'checkbox' || data.value === 'radio') {
$('#dictionaryNameBox').show();
return;
}
$('#dictionaryNameBox').hide();
if(data.value === 'string') {
$('#verifyBox').show();
$('#fieldDefaultBox').show();
return;
}
$('#verifyBox').hide();
if(data.value === 'number' || data.value === 'double') {
$('#fieldDefaultBox').show();
return;
}
$('#fieldDefaultBox').hide();
});
$(document.body).on('click', '#dictionaryName', function() {
top.dialog.tree({

115
cloud-common-plugin-dynamic/src/main/resources/templates/dynamic/config/form/update.html
View File

@ -108,39 +108,45 @@
</div>
</div>
<div id="normalFieldBox">
<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 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 class="layui-form-item">
<label class="layui-form-label">字段字典ID</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 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 class="layui-form-item">
<label class="layui-form-label">校验类型 *</label>
<div class="layui-input-block">
<select name="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 id="verifyBox">
<div class="layui-form-item">
<label class="layui-form-label">校验类型 *</label>
<div class="layui-input-block">
<select name="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>
<div class="layui-form-item">
<label class="layui-form-label">校验正则</label>
<div class="layui-input-block">
<input type="text" name="verifyRegular" placeholder="请输入校验正则" class="layui-input">
<div class="layui-form-item">
<label class="layui-form-label">校验正则</label>
<div class="layui-input-block">
<input type="text" name="verifyRegular" placeholder="请输入校验正则" class="layui-input">
</div>
</div>
</div>
</div>
@ -214,18 +220,10 @@
joinTableFormShow: data.joinTableFormShow
});
form.render(null, 'dataForm');
if(data.fieldType === 'leftJoin' || data.fieldType === 'innerJoin' || data.fieldType === 'rightJoin') {
$('#normalFieldBox').hide();
$('#joinFieldBox').show();
if($('#joinTable').val()) {
$('#joinFieldDetailBox').show();
}
} else {
$('#joinFieldBox').hide();
$('#normalFieldBox').show();
}
initFormItemShowHide(data.fieldType);
}, function(code, data) {
top.DialogBox.msg(data.msg);
top.dialog.msg(data.msg);
}, function() {
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
}, function() {
@ -269,14 +267,43 @@
}
}
});
form.on('select(fieldType)', function(data) {
if(data.value === 'leftJoin' || data.value === 'innerJoin' || data.value === 'rightJoin') {
// 显示或隐藏form表单元素
function initFormItemShowHide(value) {
// 联表
if(value === 'leftJoin' || value === 'innerJoin' || value === 'rightJoin') {
$('#normalFieldBox').hide();
$('#joinFieldBox').show();
} else {
$('#joinFieldBox').hide();
$('#normalFieldBox').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);
});
$(document.body).on('click', '#dictionaryName', function() {
top.dialog.tree({