完善了动态表单数据表页面功能

module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java

@@ -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)) {

module-form/src/main/resources/static/form/css/form.css

@@ -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 {
 

module-form/src/main/resources/static/form/js/form-util.js

@@ -436,17 +436,20 @@ function FormUtil(layui, viewer) {
         var deleteBtnClass = '.delete-' + fieldName + '-btn';
 
         function init() {
-            var fileIds = $(id).val();
+            var files = $(id).val();
-            var fileIdArray = fileIds ? fileIds.split(',') : [];
+            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 files = $(id).val();
-            var fileIdArray = fileIds ? fileIds.split(',') : [];
+            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();
             });
         }

module-form/src/main/resources/templates/form-report/list.html

@@ -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(
+                if(showField.fieldTag === 'uploadImage') {
-                    {
+                    cols.push(
-                        field: showField.fieldName,
+                        {
-                        width:200,
+                            field: showField.fieldName,
-                        title: showField.fieldExplain,
+                            width: 200,
-                        align:'center',
+                            title: showField.fieldExplain,
-                        templet: function(row) {
+                            align:'center',
-                            var rowData = row[this.field];
+                            templet: function(row) {
-                            if(!rowData) {
+                                var fieldName = this.field;
-                                return '-';
+                                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: '表单设计器',
+                    title: '新增',
-                    url: top.restAjax.path('route/form-design/save', []),
+                    url: top.restAjax.path('route/form-report/save/code/{formCode}/version/{formVersion}', [formCode, formVersion]),
-                    width: '99%',
+                    width: '500px',
-                    height: '99%',
+                    height: '85%',
                     onClose: function () {
                         reloadTable();
                     }
@@ -224,10 +321,10 @@
                     top.dialog.msg(top.dataMessage.table.selectOneEdit);
                 } else {
                     top.dialog.open({
-                        title: '表单设计器',
+                        title: '编辑',
-                        url: top.restAjax.path('route/form-design/update?formId={formId}', [checkDatas[0].formId]),
+                        url: top.restAjax.path('route/form-report/update/code/{formCode}/version/{formVersion}?uid={uid}', [formCode, formVersion, checkDatas[0].uid]),
-                        width: '99%',
+                        width: '500px',
-                        height: '99%',
+                        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>

module-form/src/main/resources/templates/form/list.html

@@ -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>';
                             }