管控系统-系统管理-表单配置,文件上传表单可按照数据类型进行动态表单配置

master
xiong_cl 5 months ago
parent e6a5ed9b4f
commit 7c594216e4
  1. 16
      shandan-system/src/main/java/com/keyware/shandan/frame/aspect/SafetyAspect.java
  2. 8
      shandan-system/src/main/java/com/keyware/shandan/system/constants/FormTypeEnum.java
  3. 6
      shandan-system/src/main/java/com/keyware/shandan/system/controller/SysFileController.java
  4. 56
      shandan-system/src/main/resources/static/js/sys/file/dirUpload.js
  5. 49
      shandan-system/src/main/resources/view/sys/file/dirUploadLayer.html
  6. 2
      shandan-system/src/main/resources/view/sys/file/fileView.html
  7. 63
      shandan-system/src/main/resources/view/sys/file/uploadIframeLayer.html

@ -13,6 +13,7 @@ import com.keyware.shandan.system.service.SysFormConfigService;
import com.keyware.shandan.system.service.SysRoleService;
import com.keyware.shandan.system.utils.SysSettingUtil;
import lombok.extern.slf4j.Slf4j;
import lombok.val;
import org.apache.commons.codec.binary.Base64;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import org.aspectj.lang.ProceedingJoinPoint;
@ -27,8 +28,7 @@ import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.List;
import java.util.*;
import java.util.stream.Collectors;
/**
@ -129,9 +129,19 @@ public class SafetyAspect {
//展示用户角色
modelAndView.addObject("userRole", userRoles.get(index));
List<SysFormConfig> formConfigList = formConfigService.list();
modelAndView.addObject("metadataFormConfig", formConfigList.stream().filter(conf -> "1".equals(conf.getFormType())).collect(Collectors.toList()));
//按照数据类型进行分类
Set<String> keys = new HashSet<>();
formConfigList.forEach(form -> {
keys.add(form.getFormType());
});
Map<String,List<SysFormConfig>> map = new HashMap<>();
for(String key : keys){
map.put(key,formConfigList.stream().filter(form -> key.equals(form.getFormType())).collect(Collectors.toList()));
}
modelAndView.addObject("uploadFormConfig", formConfigList.stream().filter(conf -> "2".equals(conf.getFormType())).collect(Collectors.toList()));
modelAndView.addObject("allUploadFormConfig", map);
modelAndView.addObject("uploadFormConfigKeys", keys);
setStaticResourceAddress(request, modelAndView);
}
return result;

@ -17,19 +17,19 @@ public enum FormTypeEnum {
/**
* 数据资源注册表单
*/
metadataEditForm(1,"数据资源注册表单"),
metadataEditForm("1","数据资源注册表单"),
/**
* 文件上传表单
*/
fileUploadForm(2, "文件上传表单"),
fileUploadForm("2", "文件上传表单"),
/**
* 文件夹上传表单
*/
@Deprecated
dirUploadForm(3, "文件夹上传表单");
dirUploadForm("3", "文件夹上传表单");
@EnumValue
private final Integer value;
private final String value;
/**
* 描述

@ -5,6 +5,7 @@ import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.ReflectUtil;
import cn.hutool.core.util.ZipUtil;
import cn.hutool.http.HttpUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.keyware.shandan.bianmu.service.DataLabelsService;
import com.keyware.shandan.common.controller.BaseController;
import com.keyware.shandan.common.entity.Result;
@ -21,6 +22,7 @@ import com.keyware.shandan.system.service.SysFormConfigService;
import com.keyware.shandan.system.service.SysSettingService;
import com.keyware.shandan.system.utils.DictUtil;
import com.keyware.shandan.system.utils.FileChunkUploadUtil;
import lombok.val;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.Assert;
import org.springframework.web.bind.annotation.*;
@ -191,6 +193,10 @@ public class SysFileController extends BaseController<SysFileService, SysFile, S
*/
@PostMapping("/upload/chunk/complete")
public Result<Object> mergerChunk(SysFile file) throws Exception {
//根据文件属性进行编码
System.out.println(file);
FileChunkUploadUtil.mergeChunk(file, sysFile -> sysFileService.save(sysFile));
return Result.of(sysFileService.autoCreateDirAndUpdateFile(file));
}

@ -12,13 +12,14 @@ let saveResult = {
success: false,
data: null
};
layui.use(['layer', 'uploader', 'element', 'form', 'laydate', 'dict', 'datalabel'], function () {
layui.use(['layer', 'uploader', 'element', 'form', 'laydate', 'dict', 'datalabel','jquery'], function () {
let form = layui.form,
laydate = layui.laydate;
let param = layui.url().search || {};
var $ = layui.jquery;
let lastDataType = 'drill_base';
bindDatetimePlugins();
layui.dict.setData('dict-dataType','drill_base')
let uploader = layui.uploader.render({
url: `${ctx}/sys/file/upload/chunk`,//上传文件服务器地址,必填
fileCheckUrl: `${ctx}/sys/file/upload/check`,//文件校验地址
@ -86,9 +87,8 @@ layui.use(['layer', 'uploader', 'element', 'form', 'laydate', 'dict', 'datalabel
showErrorMsg('装备型号不能为空')
return false;
}
}
$('#fileUploadAction').addClass('layui-disabled').attr('disabled', 'true')
$('#fileUploadAction').addClass('layui-disabled').attr('disabled', 'true');
uploader.uploadToServer();
});
@ -96,6 +96,16 @@ layui.use(['layer', 'uploader', 'element', 'form', 'laydate', 'dict', 'datalabel
$('#cancelBtn').show().on('click', closeWindow);
}
//数据类型加上监听事件
layui.dict.onchange('dict-dataType', (data)=>{
if(lastDataType != data.value){
$(".item-"+lastDataType).addClass("layui-hide");
lastDataType = data.value;
$(".item-"+data.value).removeClass("layui-hide");
form.render()
}
})
function closeWindow() {
window.layerCancelCallback && window.layerCancelCallback();
}
@ -118,14 +128,48 @@ layui.use(['layer', 'uploader', 'element', 'form', 'laydate', 'dict', 'datalabel
*/
function getFormVal() {
let formVal = form.val('file-form');
//任务时间
formVal.inputDate = $(".item-"+lastDataType+"-inputDate").find("input[name='inputDate']").val();
//录入人员
formVal.entryStaff = $(".item-"+lastDataType+"-entryStaff").find("input[name='entryStaff']").val();
//是否演训数据
formVal.exerciseData = $(".item-"+lastDataType+"-exerciseData").find("input[name='exerciseData']:checked").val();
//主题任务
formVal.themeTask = $(".item-"+lastDataType+"-themeTask").find("input[name='themeTask']").val();
//文件描述
formVal.remark = $(".item-"+lastDataType+"-remark").find("textarea[name='remark']").val();
//文件密级
formVal.secretLevel = $(".item-"+lastDataType+"-secretLevel"+ " .layui-form-select .layui-this").attr('lay-value');
//文件来源
var source = $(".item-"+lastDataType+"-source"+ " .layui-form-select .layui-this").attr('lay-value');
formVal.source = !!source ? source : "";
//目标/靶标类型
var tn = $(".item-"+lastDataType+"-targetNumber"+ " .layui-form-select .layui-this").attr('lay-value');
formVal.targetNumber = !!tn ? tn : "";
//任务代号
var tc = $(".item-"+lastDataType+"-taskCode"+ " .layui-form-select .layui-this").attr('lay-value');
formVal.taskCode = !!tc ? tc : "";
//任务性质
var taskNature = $(".item-"+lastDataType+"-taskNature"+ " .layui-form-select .layui-this").attr('lay-value');
formVal.taskNature = !!taskNature ? taskNature : "";
//部队代号
var troopCode = $(".item-"+lastDataType+"-troopCode"+ " .layui-form-select .layui-this").attr('lay-value');
formVal.troopCode = !!troopCode ? troopCode : "";
//装备型号
var em = $(".item-"+lastDataType+"-equipmentModel"+ " .layui-form-select .layui-this").attr('lay-value');
formVal.equipmentModel = !!em ? em : "";
//导弹编号
var mn = $(".item-"+lastDataType+"-missileNumber"+ " .layui-form-select .layui-this").attr('lay-value');
formVal.missileNumber = !!mn ? mn : "";
formVal.entityId = param.directoryId;
formVal.inputDate = formVal.inputDate ? formVal.inputDate + '.000' : '';
// 置标标签数据
formVal.labelStr = JSON.stringify(layui.datalabel.getData(formVal.id, 'file'));
console.log(formVal)
//数据只能编码
return formVal;
}
/**
* 绑定日期时间插件
*/

@ -1,12 +1,15 @@
<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.thymeleaf.org" xmlns:layui="http://www.layui.com/layui/">
<head>
<!-- 引入公用部分 -->
<script th:replace="common/head::static"></script>
<!-- 样式 -->
<link th:href="@{/css/common/contianer.css}" rel="stylesheet" type="text/css"/>
<script th:inline="javascript">
const FormTypeEnum = /*[[${FormTypeEnum}]]*/ {};
</script>
<style>
.webuploader-pick {
width: auto !important;
@ -27,7 +30,11 @@
background-color: #FFF;
border-top: 1px solid #eee;
}
.no-style {
margin: 0;
padding: 0;
display: inline; /* 或者使用其他合适的display值 */
}
</style>
</head>
<body style="height: 100%; overflow: auto">
@ -37,45 +44,19 @@
<div style="overflow: hidden; flex: 1">
<div class="layui-upload" id="uploader-table"></div>
</div>
<div class="layui-form dynamic-form" lay-filter="file-form"
<div class="layui-form dynamic-form " lay-filter="file-form"
style="border: 1px solid #eee; padding-top:15px; margin-bottom: 50px;"
th:object="${@securityUtil.getLoginSysUser()}">
<div class="layui-form-item"
th:each="field,iterStat : ${uploadFormConfig}"
th:if="${field.isShow}"
th:style="${field.fieldType == 'textarea' ? 'width: calc(100% - 30px);' : ''}"
th:with="username=*{userName}">
th:if="${field.isShow && field.fieldName=='dataType'}">
<label th:if="${field.isRequired}" class="layui-form-label">
<label style="color: red">*</label>
<label th:text="${field.showTitle}">*</label>
</label>
<label th:if="${!field.isRequired}" class="layui-form-label" th:text="${field.showTitle}"></label>
<div class="layui-input-block">
<!-- 文本框类型 -->
<input class="layui-input" type="text" autocomplete="off"
th:if="${field.fieldType == 'input' || field.fieldType == 'date'}"
th:name="${field.fieldName}"
th:value="${field.fieldName=='entryStaff'?username:''}"
th:disabled="${field.isDisabled}"
th:placeholder="${field.showTitle}"
th:lay-verify="${field.isRequired ? 'required' : ''}">
<!-- 文本域类型 -->
<textarea class="layui-textarea" type="text" autocomplete="off"
th:if="${field.fieldType == 'textarea'}"
th:name="${field.fieldName}"
th:disabled="${field.isDisabled}"
th:placeholder="${field.showTitle}"
th:lay-verify="${field.isRequired ? 'required' : ''}"></textarea>
<th:block th:if="${field.fieldType == 'radio' && field.isShow}">
<input class="layui-inline" type="radio"
th:each="exp, stat : ${#strings.listSplit(field.dictType, ';')}"
th:with="tmp=${#strings.arraySplit(exp, '-')}, value=${tmp[0]}, title=${tmp[1]}, checked=${#arrays.length(tmp)==3?tmp[2]:false}"
th:name="${field.fieldName}"
th:value="${value}"
th:title="${title}"
th:checked="${checked}"
/>
</th:block>
<!-- 数据字典类型 -->
<div dict-component="select"
th:if="${field.fieldType == 'dict'}"
@ -85,6 +66,11 @@
th:id="${'dict-'+field.fieldName}"></div>
</div>
</div>
<th:block th:each="item : ${uploadFormConfigKeys}" th:if="${item != '1'}">
<div th:replace="sys/file/uploadIframeLayer :: frame(dataType=${allUploadFormConfig.get(item)},tag=${item})"></div>
</th:block>
<div class="layui-form-item" style="width: 100%" th:each="labelSet, iterState:${LabelConfigSet}">
<label class="layui-form-label" th:text="${labelSet.fieldTitle}">标签类型</label>
<div class="layui-input-block">
@ -105,6 +91,7 @@
</div>
</div>
</div>
<div class="bottom-btns">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal btn-ok" id="fileUploadAction">
上传并保存

@ -42,7 +42,7 @@
</div>
<div class="file-property"
th:each="field,iterStat : ${uploadFormConfig}"
th:if="${field.isShow}"
th:if="${field.isShow && field.fieldName != 'dataType'}"
th:style="${field.fieldType == 'textarea' ? 'width: calc(100% - 30px);' : ''}"
th:with="username=*{userName}">
<label class="field-name" th:text="${field.showTitle}">文件名称</label>

@ -0,0 +1,63 @@
<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<frame th:fragment="myFragment">
<div th:class=" 'layui-form-item ' + ${'item-'+ tag }+ ' ' + ${tag=='drill_base' ? 'item-'+tag+'-'+field.fieldName: 'layui-hide item-'+tag+'-'+field.fieldName }"
th:each="field,iterStat : ${dataType}"
th:if="${field.isShow && field.fieldName!='dataType'}"
th:style="${field.fieldType == 'textarea' ? 'width: calc(100% - 30px);' : ''}"
th:with="username=*{userName}">
<label th:if="${field.isRequired}" class="layui-form-label">
<label style="color: red">*</label>
<label th:text="${field.showTitle}">*</label>
</label>
<label th:if="${!field.isRequired}" class="layui-form-label" th:text="${field.showTitle}"></label>
<div class="layui-input-block">
<!-- 文本框类型 -->
<input class="layui-input" type="text" autocomplete="off"
th:if="${field.fieldType == 'input' || field.fieldType == 'date'}"
th:name="${field.fieldName}"
th:value="${field.fieldName=='entryStaff'?username:''}"
th:disabled="${field.isDisabled}"
th:placeholder="${field.showTitle}"
th:lay-verify="${field.isRequired ? 'required' : ''}">
<!-- 文本域类型 -->
<textarea class="layui-textarea" type="text" autocomplete="off"
th:if="${field.fieldType == 'textarea'}"
th:name="${field.fieldName}"
th:disabled="${field.isDisabled}"
th:placeholder="${field.showTitle}"
th:lay-verify="${field.isRequired ? 'required' : ''}"></textarea>
<th:block th:if="${field.fieldType == 'radio' && field.isShow}">
<input class="layui-inline" type="radio"
th:each="exp, stat : ${#strings.listSplit(field.dictType, ';')}"
th:with="tmp=${#strings.arraySplit(exp, '-')}, value=${tmp[0]}, title=${tmp[1]}, checked=${#arrays.length(tmp)==3?tmp[2]:false}"
th:name="${field.fieldName}"
th:value="${value}"
th:title="${title}"
th:checked="${checked}"
/>
</th:block>
<!-- 数据字典类型 -->
<div dict-component="select"
th:if="${field.fieldType == 'dict'}"
th:disabled="${field.isDisabled}"
th:dict-type="${field.dictType}"
th:dict-name="${field.fieldName}"
th:id="${'dict-'+tag+field.fieldName}"></div>
</div>
</div>
</frame>
<script>
</script>
</body>
</html>