完善了动态表单数据表页面功能
This commit is contained in:
parent
736a5a7b99
commit
9b38550ed3
@ -187,7 +187,7 @@ public class FormDesignServiceImpl extends DefaultBaseService implements IFormDe
|
||||
model.put(ISystemConstant.FORM_HIDDEN_INPUT_LIST, Arrays.asList(new String[]{"formCode", "formVersion"}));
|
||||
model.put(ISystemConstant.FORM_INIT_URL, "api/form-report/get/code/{formCode}/version/{formVersion}/uid/{uid}");
|
||||
model.put(ISystemConstant.FORM_INIT_PARAM_LIST, Arrays.asList(new String[]{"formCode", "formVersion"}));
|
||||
model.put(ISystemConstant.FORM_COMMIT_URL, "api/form-report/save/code/{formCode}/version/{formVersion}/uid/{uid}");
|
||||
model.put(ISystemConstant.FORM_COMMIT_URL, "api/form-report/update/code/{formCode}/version/{formVersion}/uid/{uid}");
|
||||
model.put(ISystemConstant.FORM_COMMIT_PARAM_LIST, Arrays.asList(new String[]{"formCode", "formVersion"}));
|
||||
model.put(ISystemConstant.FORM_TYPE, formType);
|
||||
} else if (StringUtils.equals(FormTypeEnum.OA.getValue(), formType)) {
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
.layui-card-body {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.form-report-foot {
|
||||
padding: 0 !important;
|
||||
}
|
||||
@ -23,6 +26,13 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layui-form-item .upload-image-box {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 上传附件 */
|
||||
.form-upload-file {
|
||||
|
||||
|
||||
@ -436,17 +436,20 @@ function FormUtil(layui, viewer) {
|
||||
var deleteBtnClass = '.delete-' + fieldName + '-btn';
|
||||
|
||||
function init() {
|
||||
var fileIds = $(id).val();
|
||||
var fileIdArray = fileIds ? fileIds.split(',') : [];
|
||||
var files = $(id).val();
|
||||
var fileArray = files ? files.split(',') : [];
|
||||
var html = '';
|
||||
for (var i = 0, fileId; fileId = fileIdArray[i++];) {
|
||||
for (var i = 0, file; file = fileArray[i++];) {
|
||||
var idNameArray = file.split(':');
|
||||
var fileId = idNameArray[0];
|
||||
var fileName = idNameArray[1];
|
||||
html += [
|
||||
'<div class="form-upload-video">',
|
||||
' <video width="320" height="240" controls>',
|
||||
' <source src="route/file/download/true/' + fileId + '" type="video/mp4">',
|
||||
' 您的浏览器不支持 video 标签',
|
||||
' </video>',
|
||||
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fieldName + '">',
|
||||
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
|
||||
' <i class="fa fa-trash-o"></i>',
|
||||
' </a>',
|
||||
'</div>',
|
||||
@ -456,7 +459,7 @@ function FormUtil(layui, viewer) {
|
||||
$(fileBoxId).empty();
|
||||
$(fileBoxId).append(html);
|
||||
|
||||
if (fileIdArray.length < maxCount) {
|
||||
if (fileArray.length < maxCount) {
|
||||
$(uploadBtnId).removeClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', false);
|
||||
} else {
|
||||
@ -493,7 +496,7 @@ function FormUtil(layui, viewer) {
|
||||
if (files.length > 0) {
|
||||
files += ',';
|
||||
}
|
||||
files += res.data.fileId;
|
||||
files += res.data.fileId + ':' + res.data.fileName;
|
||||
$('#' + name).val(files);
|
||||
init();
|
||||
},
|
||||
@ -513,7 +516,8 @@ function FormUtil(layui, viewer) {
|
||||
$(document).on('click', deleteBtnClass, function () {
|
||||
var name = this.dataset.name;
|
||||
var id = this.dataset.id;
|
||||
var files = $('#' + name).val().replace(id, '');
|
||||
var fieldName = this.dataset.fieldName;
|
||||
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
|
||||
files = files.replace(/\,+/g, ',');
|
||||
if (files.charAt(0) == ',') {
|
||||
files = files.substring(1);
|
||||
@ -521,7 +525,7 @@ function FormUtil(layui, viewer) {
|
||||
if (files.charAt(files.length - 1) == ',') {
|
||||
files = files.substring(0, files.length - 1);
|
||||
}
|
||||
$('#' + name).val(files);
|
||||
$('#' + fieldName).val(files);
|
||||
init();
|
||||
});
|
||||
}
|
||||
@ -615,16 +619,19 @@ function FormUtil(layui, viewer) {
|
||||
var deleteBtnClass = '.delete-' + fieldName + '-btn';
|
||||
|
||||
function init() {
|
||||
var fileIds = $(id).val();
|
||||
var fileIdArray = fileIds ? fileIds.split(',') : [];
|
||||
var files = $(id).val();
|
||||
var fileArray = files ? files.split(',') : [];
|
||||
var html = '';
|
||||
for (var i = 0, fileId; fileId = fileIdArray[i++];) {
|
||||
for (var i = 0, file; file = fileArray[i++];) {
|
||||
var idNameArray = file.split(':');
|
||||
var fileId = idNameArray[0];
|
||||
var fileName = idNameArray[1];
|
||||
html += [
|
||||
'<div class="form-upload-video">',
|
||||
' <audio src="route/file/download/true/' + fileId + '" controls>',
|
||||
' 您的浏览器不支持 audio 标签。',
|
||||
' </audio>',
|
||||
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fieldName + '">',
|
||||
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
|
||||
' <i class="fa fa-trash-o"></i>',
|
||||
' </a>',
|
||||
'</div>',
|
||||
@ -634,7 +641,7 @@ function FormUtil(layui, viewer) {
|
||||
$(fileBoxId).empty();
|
||||
$(fileBoxId).append(html);
|
||||
|
||||
if (fileIdArray.length < maxCount) {
|
||||
if (fileArray.length < maxCount) {
|
||||
$(uploadBtnId).removeClass('layui-btn-disabled');
|
||||
$(uploadBtnId).attr('disabled', false);
|
||||
} else {
|
||||
@ -674,7 +681,7 @@ function FormUtil(layui, viewer) {
|
||||
if (files.length > 0) {
|
||||
files += ',';
|
||||
}
|
||||
files += res.data.fileId;
|
||||
files += res.data.fileId + ':' + res.data.fileName;
|
||||
$('#' + name).val(files);
|
||||
init();
|
||||
},
|
||||
@ -694,7 +701,8 @@ function FormUtil(layui, viewer) {
|
||||
$(document).on('click', deleteBtnClass, function () {
|
||||
var name = this.dataset.name;
|
||||
var id = this.dataset.id;
|
||||
var files = $('#' + name).val().replace(id, '');
|
||||
var fieldName = this.dataset.fieldName;
|
||||
var files = $('#' + fieldName).val().replace(id + ':' + name, '');
|
||||
files = files.replace(/\,+/g, ',');
|
||||
if (files.charAt(0) == ',') {
|
||||
files = files.substring(1);
|
||||
@ -702,7 +710,7 @@ function FormUtil(layui, viewer) {
|
||||
if (files.charAt(files.length - 1) == ',') {
|
||||
files = files.substring(0, files.length - 1);
|
||||
}
|
||||
$('#' + name).val(files);
|
||||
$('#' + fieldName).val(files);
|
||||
init();
|
||||
});
|
||||
}
|
||||
|
||||
@ -9,6 +9,11 @@
|
||||
<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" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
|
||||
<style>
|
||||
.list-img-box .list-img{width: 28px; height: 28px; object-fit: cover; margin: 2px;}
|
||||
.list-img-box .list-img{width: 28px; height: 28px; object-fit: cover; margin: 2px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-anim layui-anim-fadein">
|
||||
@ -16,14 +21,6 @@
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
<div class="layui-inline">
|
||||
<input type="text" id="keywords" class="layui-input search-item" placeholder="输入关键字">
|
||||
</div>
|
||||
<button type="button" id="search" class="layui-btn layui-btn-sm">
|
||||
<i class="fa fa-lg fa-search"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
|
||||
<!-- 表头按钮字典 -->
|
||||
<script type="text/html" id="headerToolBar">
|
||||
@ -34,7 +31,7 @@
|
||||
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update" th:if="${formType eq 'default'}">
|
||||
<i class="fa fa-lg fa-edit"></i> 编辑
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove" th:if="${formType eq 'default' or formType eq 'freeReport'}">
|
||||
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove" th:if="${formType eq 'default'}">
|
||||
<i class="fa fa-lg fa-trash"></i> 删除
|
||||
</button>
|
||||
</div>
|
||||
@ -44,6 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script type="text/javascript" th:inline="javascript">
|
||||
layui.config({
|
||||
@ -65,7 +63,6 @@
|
||||
|
||||
// 初始化表格
|
||||
function initTable() {
|
||||
console.log(showFields);
|
||||
var cols = [
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
@ -80,21 +77,121 @@
|
||||
},
|
||||
];
|
||||
for(var i = 0, showField; showField = showFields[i++];) {
|
||||
cols.push(
|
||||
{
|
||||
field: showField.fieldName,
|
||||
width:200,
|
||||
title: showField.fieldExplain,
|
||||
align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(!rowData) {
|
||||
return '-';
|
||||
if(showField.fieldTag === 'uploadImage') {
|
||||
cols.push(
|
||||
{
|
||||
field: showField.fieldName,
|
||||
width: 200,
|
||||
title: showField.fieldExplain,
|
||||
align:'center',
|
||||
templet: function(row) {
|
||||
var fieldName = this.field;
|
||||
var rowData = row[fieldName];
|
||||
if(!rowData) {
|
||||
return '-';
|
||||
}
|
||||
var downloadFile = '<div id="'+fieldName +'ListImg" class="list-img-box">';
|
||||
var datas = rowData.split(',');
|
||||
for(var i = 0, item = datas[i]; item = datas[i++];) {
|
||||
downloadFile += '<img class="list-img" src="route/file/download/true/'+ item +'"/>'
|
||||
}
|
||||
downloadFile += '</div>';
|
||||
setTimeout(function() {
|
||||
new Viewer(document.getElementById(fieldName +'ListImg'), {navbar: true});
|
||||
}, 50);
|
||||
return downloadFile;
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
} else if(showField.fieldTag === 'uploadFile') {
|
||||
cols.push(
|
||||
{
|
||||
field: showField.fieldName,
|
||||
width: 300,
|
||||
title: showField.fieldExplain,
|
||||
align:'center',
|
||||
templet: function(row) {
|
||||
var fieldName = this.field;
|
||||
var rowData = row[fieldName];
|
||||
if(!rowData) {
|
||||
return '-';
|
||||
}
|
||||
var downloadFile = '<div class="list-file-box">';
|
||||
var datas = rowData.split(',');
|
||||
for(var i = 0, item = datas[i]; item = datas[i++];) {
|
||||
var fileNameArray = item.split(':');
|
||||
downloadFile += '['+ i +'.<a class="list-file" href="route/file/download/false/'+ fileNameArray[0] +'" target="_blank">'+ fileNameArray[1] +'</a>] '
|
||||
}
|
||||
downloadFile += '</div>';
|
||||
return downloadFile;
|
||||
}
|
||||
}
|
||||
)
|
||||
} else if(showField.fieldTag === 'uploadVideo') {
|
||||
cols.push(
|
||||
{
|
||||
field: showField.fieldName,
|
||||
width: 300,
|
||||
title: showField.fieldExplain,
|
||||
align:'center',
|
||||
templet: function(row) {
|
||||
var fieldName = this.field;
|
||||
var rowData = row[fieldName];
|
||||
if(!rowData) {
|
||||
return '-';
|
||||
}
|
||||
var downloadFile = '<div class="list-file-box">';
|
||||
var datas = rowData.split(',');
|
||||
for(var i = 0, item = datas[i]; item = datas[i++];) {
|
||||
var fileNameArray = item.split(':');
|
||||
downloadFile += '['+ i +'.<a class="list-file" href="javascript:void(0);" lay-event="showVideoEvent" data-file-id="'+ fileNameArray[0] +'">'+ fileNameArray[1] +'</a>] '
|
||||
}
|
||||
downloadFile += '</div>';
|
||||
return downloadFile;
|
||||
}
|
||||
}
|
||||
)
|
||||
} else if(showField.fieldTag === 'uploadAudio') {
|
||||
cols.push(
|
||||
{
|
||||
field: showField.fieldName,
|
||||
width: 300,
|
||||
title: showField.fieldExplain,
|
||||
align:'center',
|
||||
templet: function(row) {
|
||||
var fieldName = this.field;
|
||||
var rowData = row[fieldName];
|
||||
if(!rowData) {
|
||||
return '-';
|
||||
}
|
||||
var downloadFile = '<div class="list-file-box">';
|
||||
var datas = rowData.split(',');
|
||||
for(var i = 0, item = datas[i]; item = datas[i++];) {
|
||||
var fileNameArray = item.split(':');
|
||||
downloadFile += '['+ i +'.<a class="list-file" href="javascript:void(0);" lay-event="showAudioEvent" data-file-id="'+ fileNameArray[0] +'">'+ fileNameArray[1] +'</a>] '
|
||||
}
|
||||
downloadFile += '</div>';
|
||||
return downloadFile;
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
cols.push(
|
||||
{
|
||||
field: showField.fieldName,
|
||||
width: 180,
|
||||
title: showField.fieldExplain,
|
||||
align:'center',
|
||||
templet: function(row) {
|
||||
var rowData = row[this.field];
|
||||
if(!rowData) {
|
||||
return '-';
|
||||
}
|
||||
return rowData;
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
cols.push(
|
||||
{field:'creator', width: 200, title: '创建人', align:'center',
|
||||
@ -139,7 +236,7 @@
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path('api/form-report/listpage-all-fields/code/{formCode}/version/{formVersion}', [formCode, formVersion]),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 60,
|
||||
height: $win.height() - 22,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: '#headerToolBar',
|
||||
@ -178,7 +275,7 @@
|
||||
yes: function (index) {
|
||||
top.dialog.close(index);
|
||||
var layIndex;
|
||||
top.restAjax.delete(top.restAjax.path('api/form/remove/{ids}', [ids]), {}, null, function (code, data) {
|
||||
top.restAjax.delete(top.restAjax.path('api/form-report/remove/code/{formCode}/version/{formVersion}/uids/{uids}', [formCode, formVersion, ids]), {}, null, function (code, data) {
|
||||
top.dialog.msg(top.dataMessage.deleteSuccess, {time: 1000});
|
||||
reloadTable();
|
||||
}, function (code, data) {
|
||||
@ -209,10 +306,10 @@
|
||||
var checkDatas = checkStatus.data;
|
||||
if(layEvent === 'save') {
|
||||
top.dialog.open({
|
||||
title: '表单设计器',
|
||||
url: top.restAjax.path('route/form-design/save', []),
|
||||
width: '99%',
|
||||
height: '99%',
|
||||
title: '新增',
|
||||
url: top.restAjax.path('route/form-report/save/code/{formCode}/version/{formVersion}', [formCode, formVersion]),
|
||||
width: '500px',
|
||||
height: '85%',
|
||||
onClose: function () {
|
||||
reloadTable();
|
||||
}
|
||||
@ -224,10 +321,10 @@
|
||||
top.dialog.msg(top.dataMessage.table.selectOneEdit);
|
||||
} else {
|
||||
top.dialog.open({
|
||||
title: '表单设计器',
|
||||
url: top.restAjax.path('route/form-design/update?formId={formId}', [checkDatas[0].formId]),
|
||||
width: '99%',
|
||||
height: '99%',
|
||||
title: '编辑',
|
||||
url: top.restAjax.path('route/form-report/update/code/{formCode}/version/{formVersion}?uid={uid}', [formCode, formVersion, checkDatas[0].uid]),
|
||||
width: '500px',
|
||||
height: '85%',
|
||||
onClose: function () {
|
||||
reloadTable();
|
||||
}
|
||||
@ -242,12 +339,36 @@
|
||||
if(i > 1) {
|
||||
ids += '_';
|
||||
}
|
||||
ids += item.formId;
|
||||
ids += item.uid;
|
||||
}
|
||||
removeData(ids);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
table.on('tool(dataTable)', function(obj) {
|
||||
var data = obj.data;
|
||||
var event = obj.event;
|
||||
if(event === 'showVideoEvent') {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
area: ['320px', '240px'],
|
||||
closeBtn: 0,
|
||||
shadeClose: true,
|
||||
content: '<video width="320" height="240" controls><source src="route/file/download/true/'+ this.dataset.fileId +'" type="video/mp4"></video>'
|
||||
});
|
||||
} else if(event === 'showAudioEvent') {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
area: ['300px', '100px'],
|
||||
closeBtn: 0,
|
||||
shadeClose: true,
|
||||
content: '<audio width="300" height="100" controls><source src="route/file/download/true/'+ this.dataset.fileId +'" type="audio/mpeg"></audio>'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -140,11 +140,11 @@
|
||||
return '<button class="layui-btn layui-btn-xs" lay-event="showDataEvent">查看数据</button>';
|
||||
}
|
||||
},
|
||||
{field:'opition', width:210, title: '操作', fixed:'right', align:'center',
|
||||
{field:'opition', width:150, title: '操作', fixed:'right', align:'center',
|
||||
templet: function(item) {
|
||||
return '<div class="layui-btn-group">' +
|
||||
'<button type="button" class="layui-btn layui-btn-xs" lay-event="reportListEvent">数据列表</button>'+
|
||||
'<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="formFieldEvent">字段列表</button>'+
|
||||
// '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="formFieldEvent">字段列表</button>'+
|
||||
'<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteEvent" title="该操作将连同物理表（无数据）一并删除">物理删除</button>'+
|
||||
'</div>';
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user