wg-basic/login-base/src/main/resources/templates/login/form/update.html
2022-07-08 09:31:15 +08:00

657 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html 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">
<link rel="stylesheet" href="assets/js/vendor/codemirror/codemirror.css">
<link rel="stylesheet" href="assets/js/vendor/codemirror/theme/dracula.css">
<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
<style>
.resource-img, .resource-img-path {text-align: center}
.layui-btn-container .layui-btn {margin-bottom: 0px}
.layui-table {width: auto;}
.CodeMirror {font-size : 13px;line-height: 150%;}
</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="name" lay-verify="required" placeholder="请输入名称" class="layui-input" maxlength="255">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" name="summary" placeholder="请输入说明" class="layui-input" maxlength="255">
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">是否激活 *</label>
<div class="layui-input-block" >
<input type="radio" name="isActive" value="0" title="否" checked>
<input type="radio" name="isActive" value="1" title="是">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">预览图</label>
<div class="layui-input-block">
<input type="hidden" id="preview" name="preview">
<div class="layui-btn-container" id="previewFileBox" style="border: 1px solid #e6e6e6;"></div>
<script id="previewFileDownload" type="text/html">
{{# var fileName = 'preview'; }}
{{# if(d[fileName].length > 0) { }}
{{# var files = d[fileName];}}
{{# for(var i = 0, item = files[i]; item = files[i++];) { }}
<div class="upload-image-box">
<span class="upload-image-span">
<img src="route/file/download/true/{{item.fileId}}" align="加载失败">
</span>
<a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="previewRemoveFile">
<i class="fa fa-trash-o"></i>
</a>
</div>
{{# } }}
{{# } }}
{{# if(d[fileName].length < 1) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding: 15px;">
<a href="javascript:void(0);" lay-form-button data-explain="预览图" data-name="preview" lay-filter="previewUploadFile">
<i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
</a>
</div>
{{# } }}
</script>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源图</label>
<div class="layui-input-block">
<input type="hidden" id="resourceImgs" name="resourceImgs">
<div class="layui-btn-container" id="resourceImgsFileBox" style="border: 1px solid #e6e6e6;"></div>
<script id="resourceImgsFileDownload" type="text/html">
{{# var fileName = 'resourceImgs'; }}
{{# if(d[fileName].length > 0) { }}
{{# var files = d[fileName];}}
<table class="layui-table" style="margin: 15px 15px 0 15px;">
<colgroup>
<col width="100">
<col width="600">
<col>
</colgroup>
<tbody>
{{# for(var i = 0, item = files[i]; item = files[i++];) { }}
<tr>
<td class="resource-img">
<img src="route/file/download/false/{{item.fileId}}" align="加载失败">
</td>
<td class="resource-img-path">图片路径route/file/download/false/{{item.fileId}}</td>
<td>
<a class="layui-btn layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="resourceImgsRemoveFile">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
{{# } }}
</tbody>
</table>
{{# } }}
{{# if(d[fileName].length < 20) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding: 15px;">
<a href="javascript:void(0);" lay-form-button data-explain="资源图" data-name="resourceImgs" lay-filter="resourceImgsUploadFile">
<i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
</a>
</div>
{{# } }}
</script>
</div>
</div>
<blockquote class="layui-elem-quote">
<ul>
<li>1. form表单的ID为<b>loginForm</b></li>
<li>2. form表单代码表单的HTML代码。</li>
<li>3. form表单样式表单的CSS代码。</li>
<li>4. dom节点的条件判断使用vue判断根据<b>pageParams</b>中的属性动态判断dom元素的展示方式。</li>
<li>5. pageParams 属性说明:</li>
<li>
<table class="layui-table">
<colgroup>
<col width="200">
<col width="200">
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>字段名</th>
<th>说明</th>
<th>默认值</th>
<th>能否为空</th>
<th>取值范围</th>
</tr>
</thead>
<tbody>
<tr>
<td>pageParams.serverUrl</td>
<td>服务地址</td>
<td></td>
<td>N</td>
<td></td>
</tr>
<tr>
<td>pageParams.systemLogo</td>
<td>系统Logo文件ID</td>
<td></td>
<td>Y</td>
<td></td>
</tr>
<tr>
<td>pageParams.systemTitle</td>
<td>系统主标题</td>
<td></td>
<td>N</td>
<td></td>
</tr>
<tr>
<td>pageParams.systemTitleSize</td>
<td>系统主标题字体大小</td>
<td>26</td>
<td>Y</td>
<td>13+</td>
</tr>
<tr>
<td>pageParams.systemSubTitle</td>
<td>系统副标题</td>
<td></td>
<td>Y</td>
<td></td>
</tr>
<tr>
<td>pageParams.systemSubTitleSize</td>
<td>系统主标题字体大小</td>
<td>16</td>
<td>Y</td>
<td>13+</td>
</tr>
<tr>
<td>pageParams.copyRightYear</td>
<td>版权年份</td>
<td></td>
<td>Y</td>
<td></td>
</tr>
<tr>
<td>pageParams.copyleft</td>
<td>版权所属</td>
<td></td>
<td>Y</td>
<td></td>
</tr>
<tr>
<td>pageParams.officialUrl</td>
<td>官方链接</td>
<td></td>
<td>Y</td>
<td></td>
</tr>
<tr>
<td>pageParams.verificationCode</td>
<td>开启验证码</td>
<td></td>
<td>Y</td>
<td>true | false</td>
</tr>
<tr>
<td>pageParams.loginBoxPosition</td>
<td>登录框位置</td>
<td></td>
<td>N</td>
<td>left | center | right</td>
</tr>
<tr>
<td>pageParams.loginFormAction</td>
<td>form表单action路径</td>
<td></td>
<td>N</td>
<td></td>
</tr>
</tbody>
</table>
</li>
<li>6. 表单提交method为<b>POST</b></li>
<li>7. form表单上添加<b>@submit.prevent="submitForm"</b>用于控制表单提交</li>
<li>8. 表单具体内容如下表所示</li>
<li>
<table class="layui-table">
<colgroup>
<col width="100">
<col width="120">
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>name值表单名</th>
<th>v-model值vue绑定值</th>
<th>lay-verify值前端校验</th>
</tr>
</thead>
<tbody>
<tr>
<td>用户名</td>
<td>input[text]</td>
<td>username</td>
<td>formData.username</td>
<td>username</td>
</tr>
<tr>
<td>密码</td>
<td>input[password]</td>
<td>password</td>
<td>formData.password</td>
<td>password</td>
</tr>
<tr>
<td>验证码</td>
<td>input[text]</td>
<td>verificationCode</td>
<td>formData.verificationCode</td>
<td>verificationCode</td>
</tr>
<tr>
<td>记住密码</td>
<td>input[checkbox]</td>
<td>remember</td>
<td>formData.remember</td>
<td></td>
</tr>
</tbody>
</table>
</li>
<li>9. 图形验证码的地址为:<b>oauth/verification-code/png</b></li>
<li>10. 提交按钮固定写法
<xmp><button type="submit" lay-submit>登 录</button></xmp>
</li>
<li>11. 表单中必须添加隐藏验证参数,否则将无法登录系统
<xmp><input type="hidden" name="referToken" v-model="formData.referToken"/></xmp>
</li>
</ul>
</blockquote>
<div class="layui-row layui-col-space15">
<div class="layui-col-md8 layui-col-xs12">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">form表单代码 *</label>
<div class="layui-input-block">
<textarea id="formHtml" name="formHtml"></textarea>
</div>
</div>
</div>
<div class="layui-col-md4 layui-col-xs12">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">form表单样式</label>
<div class="layui-input-block">
<textarea id="formCss" name="formCss"></textarea>
</div>
</div>
</div>
</div>
<blockquote class="layui-elem-quote">
以下CSS样式控制的是Form表单的对其方式左、中、右需单独设置。设置完成后激活表单<b>系统配置</b>中控制表单的对其方式。
</blockquote>
<div class="layui-row layui-col-space15">
<div class="layui-col-md4 layui-col-xs12">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">form表单居左样式</label>
<div class="layui-input-block">
<textarea id="formLeftCss" name="formLeftCss"></textarea>
</div>
</div>
</div>
<div class="layui-col-md4 layui-col-xs12">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">form表单居中样式</label>
<div class="layui-input-block">
<textarea id="formCenterCss" name="formCenterCss"></textarea>
</div>
</div>
</div>
<div class="layui-col-md4 layui-col-xs12">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">form表单居右样式</label>
<div class="layui-input-block">
<textarea id="formRightCss" name="formRightCss"></textarea>
</div>
</div>
</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>
<button type="button" class="layui-btn layui-btn-normal" id="previewPageBtn">预览页面</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/js/vendor/codemirror/codemirror.js"></script>
<script src="assets/js/vendor/codemirror/mode/css/css.js"></script>
<script src="assets/js/vendor/codemirror/mode/javascript/javascript.js"></script>
<script src="assets/js/vendor/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<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 laytpl = layui.laytpl;
var loginFormId = top.restAjax.params(window.location.href).loginFormId;
var viewerObj = {};
var codeMirrorConfig = {
lineNumbers: true,
theme: 'dracula',
matchBrackets: true,
indentUnit : 4,
indentWithTabs: 4,
flattenSpans: false,
tabSize : 4,
extraKeys: {
'Shift-Tab': function (cm) {
if (cm.somethingSelected()) {
cm.indentSelection('subtract');
} else {
cm.indentLine(cm.getCursor().line, "subtract");
}
return;
},
}
};
function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
function refreshDownloadTemplet(fileName, file) {
var dataRander = {};
dataRander[fileName] = file;
laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
document.getElementById(fileName +'FileBox').innerHTML = html;
});
}
// 初始化文件列表
function initFileList(fileName, ids, callback) {
var dataForm = {};
dataForm[fileName] = ids;
form.val('dataForm', dataForm);
if(!ids) {
refreshDownloadTemplet(fileName, []);
if(callback) {
callback(fileName, []);
}
return;
}
top.restAjax.get(top.restAjax.path('api/file/list', []), {
ids: ids
}, null, function(code, data) {
refreshDownloadTemplet(fileName, data);
if(callback) {
callback(fileName, data);
}
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 初始化预览图预览图上传
function initPreviewUploadFile() {
var files = $('#preview').val();
initFileList('preview', files, function(fileName) {
var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
viewerObj[fileName] = viewer;
});
form.on('button(previewUploadFile)', function(obj) {
var name = this.dataset.name;
var explain = this.dataset.explain;
top.dialog.file({
type: 'image',
title: '上传'+ explain,
width: '400px',
height: '420px',
maxFileCount: '1',
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var files = $('#'+ name).val();
for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
if(files.length > 0) {
files += ',';
}
files += file.data;
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
}
}
});
});
form.on('button(previewRemoveFile)', function(obj) {
var name = this.dataset.name;
var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
}
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
});
}
// 初始化预览图预览图上传
function initResourceImgsUploadFile() {
var files = $('#resourceImgs').val();
initFileList('resourceImgs', files, function(fileName) {
var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
viewerObj[fileName] = viewer;
});
form.on('button(resourceImgsUploadFile)', function(obj) {
var name = this.dataset.name;
var explain = this.dataset.explain;
top.dialog.file({
type: 'image',
title: '上传'+ explain,
width: '400px',
height: '420px',
maxFileCount: '1',
onClose: function() {
var uploadFileArray = top.dialog.dialogData.uploadFileArray;
if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
var files = $('#'+ name).val();
for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
if(files.length > 0) {
files += ',';
}
files += file.data;
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
}
}
});
});
form.on('button(resourceImgsRemoveFile)', function(obj) {
var name = this.dataset.name;
var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, '');
files = files.replace(/\,+/g, ',');
if(files.charAt(0) == ',') {
files = files.substring(1);
}
if(files.charAt(files.length - 1) == ',') {
files = files.substring(0, files.length - 1);
}
initFileList(name, files, function(fileName) {
viewerObj[fileName].update();
});
});
}
function initFormHtml(value) {
var editor = CodeMirror.fromTextArea(document.getElementById('formHtml'), codeMirrorConfig);
editor.setValue(value);
editor.on('change', function(self, changeValue) {
$('#formHtml').val(self.getValue());
})
}
function initFormCss(value) {
codeMirrorConfig.mode = 'css';
var editor = CodeMirror.fromTextArea(document.getElementById('formCss'), codeMirrorConfig);
editor.setValue(value);
editor.on('change', function(self, changeValue) {
$('#formCss').val(self.getValue());
})
}
function initFormLeftCss(value) {
codeMirrorConfig.mode = 'css';
var editor = CodeMirror.fromTextArea(document.getElementById('formLeftCss'), codeMirrorConfig);
editor.setValue(value);
editor.on('change', function(self, changeValue) {
$('#formLeftCss').val(self.getValue());
})
}
function initFormCenterCss(value) {
codeMirrorConfig.mode = 'css';
var editor = CodeMirror.fromTextArea(document.getElementById('formCenterCss'), codeMirrorConfig);
editor.setValue(value);
editor.on('change', function(self, changeValue) {
$('#formCenterCss').val(self.getValue());
})
}
function initFormRightCss(value) {
codeMirrorConfig.mode = 'css';
var editor = CodeMirror.fromTextArea(document.getElementById('formRightCss'), codeMirrorConfig);
editor.setValue(value);
editor.on('change', function(self, changeValue) {
$('#formRightCss').val(self.getValue());
})
}
// 初始化
function initData() {
var loadLayerIndex;
top.restAjax.get(top.restAjax.path('api/login-form/get/{loginFormId}', [loginFormId]), {}, null, function(code, data) {
form.val('dataForm', {
name: data.name,
summary: data.summary,
isActive: data.isActive,
preview: data.preview,
resourceImgs: data.resourceImgs,
formHtml: data.formHtml,
formCss: data.formCss,
formLeftCss: data.formLeftCss,
formCenterCss: data.formCenterCss,
formRightCss: data.formRightCss,
});
form.render(null, 'dataForm');
initPreviewUploadFile();
initResourceImgsUploadFile();
initFormHtml(data.formHtml);
initFormCss(data.formCss);
initFormLeftCss(data.formLeftCss);
initFormCenterCss(data.formCenterCss);
initFormRightCss(data.formRightCss);
}, function(code, data) {
top.DialogBox.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/login-form/update/{loginFormId}', [loginFormId]), 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;
});
$('#previewPageBtn').on('click', function() {
window.open(top.restAjax.path('route/login-form/get-login-preview/{loginFormId}', [loginFormId]));
});
$('.close').on('click', function() {
closeBox();
});
});
</script>
</body>
</html>