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

调整了动态表单组件，增加组件列表显示功能，增加了动态表单后台处理逻辑代码

Browse Source
This commit is contained in:
wanggeng 2022-04-14 00:28:12 +08:00
parent d44adf33fc
commit 3bce18ef87
24 changed files with 502 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
module-form/src/main/java/ink/wgink/module/form/consts/IFormDesignConst.java
View File

@ -15,5 +15,6 @@ public interface IFormDesignConst {
String TAG = "tag";
String COLUMNS = "columns";
String LIST = "list";
String LIST_SHOW = "listShow";
}

2
module-form/src/main/java/ink/wgink/module/form/dao/design/IFormFieldDao.java
View File

@ -29,4 +29,6 @@ public interface IFormFieldDao extends IInitBaseTable {
List<FormFieldDTO> list(Map<String, Object> params) throws SearchException;
List<FormFieldPO> listPO(Map<String, Object> params) throws SearchException;
List<String> listFieldName(Map<String, Object> params) throws SearchException;
}

4
module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java
View File

@ -28,7 +28,9 @@ public enum FormFieldTypeEnum {
RATE("rate", "评分"),
CAROUSEL("carousel", "轮播图"),
UPLOAD_IMAGE("uploadImage", "上传图片"),
FILE("file", "上传文件"),
UPLOAD_FILE("uploadFile", "上传文件"),
UPLOAD_VIDEO("uploadVideo", "上传视频"),
UPLOAD_AUDIO("uploadAudio", "上传音频"),
TEXTAREA("textarea", "多行文本"),
EDITOR("editor", "编辑器"),
GRID("grid", "布局网格");

9
module-form/src/main/java/ink/wgink/module/form/pojo/pos/design/FormFieldPO.java
View File

@ -13,6 +13,7 @@ public class FormFieldPO implements Serializable {
private String fieldType;
private String fieldTag;
private String fieldDefault;
private Boolean listShow;
public Long getId() {
return id;
@ -77,4 +78,12 @@ public class FormFieldPO implements Serializable {
public void setFieldDefault(String fieldDefault) {
this.fieldDefault = fieldDefault;
}
public Boolean getListShow() {
return listShow;
}
public void setListShow(Boolean listShow) {
this.listShow = listShow;
}
}

9
module-form/src/main/java/ink/wgink/module/form/pojo/pos/design/FormPO.java
View File

@ -21,6 +21,7 @@ public class FormPO implements Serializable {
private String appShowPageCode;
private String formTableName;
private Integer formVersion;
private String mainTitleTpl;
private String creator;
private String gmtCreate;
private String modifier;
@ -155,6 +156,14 @@ public class FormPO implements Serializable {
this.formVersion = formVersion;
}
public String getMainTitleTpl() {
return mainTitleTpl == null ? "" : mainTitleTpl.trim();
}
public void setMainTitleTpl(String mainTitleTpl) {
this.mainTitleTpl = mainTitleTpl;
}
public String getCreator() {
return creator;
}

10
module-form/src/main/java/ink/wgink/module/form/pojo/vos/design/FormFieldVO.java
View File

@ -18,6 +18,8 @@ public class FormFieldVO {
private String fieldTag;
@ApiModelProperty(name = "fieldDefault", value = "字段默认值")
private String fieldDefault;
@ApiModelProperty(name = "listShow", value = "列表显示")
private String listShow;
public String getFormId() {
return formId;
@ -66,4 +68,12 @@ public class FormFieldVO {
public void setFieldDefault(String fieldDefault) {
this.fieldDefault = fieldDefault;
}
public String getListShow() {
return listShow == null ? "false" : listShow.trim();
}
public void setListShow(String listShow) {
this.listShow = listShow;
}
}

15
module-form/src/main/java/ink/wgink/module/form/service/design/IFormFieldService.java
View File

@ -85,6 +85,7 @@ public interface IFormFieldService {
/**
* 列表
*
* @param formId 表单ID
* @return
*/
@ -114,5 +115,19 @@ public interface IFormFieldService {
*/
SuccessResultList<List<FormFieldDTO>> listPage(ListPage page);
/**
* 字段名列表
*
* @param params
* @return
*/
List<String> listFieldName(Map<String, Object> params);
/**
* 字段名列表
*
* @param listShow 列表显示状态
* @return
*/
List<String> listFieldNameByListShow(String listShow);
}

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

@ -160,6 +160,7 @@ public class FormDesignServiceImpl extends DefaultBaseService implements IFormDe
String index = dataJsonObject.getString(IFormDesignConst.INDEX);
String label = dataJsonObject.getString(IFormDesignConst.LABEL);
String tag = dataJsonObject.getString(IFormDesignConst.TAG);
String listShow = dataJsonObject.getString(IFormDesignConst.LIST_SHOW);
// grid特殊，需要递归处理
if (StringUtils.equals(FormFieldTypeEnum.GRID.getType(), tag)) {
JSONArray columnJsonArray = dataJsonObject.getJSONArray(IFormDesignConst.COLUMNS);
@ -176,6 +177,7 @@ public class FormDesignServiceImpl extends DefaultBaseService implements IFormDe
formField.setFieldTag(tag);
formField.setFieldExplain(label);
formField.setFieldType(getSingleFieldType(tag));
formField.setListShow(listShow);
formFields.add(formField);
}
}
@ -204,10 +206,14 @@ public class FormDesignServiceImpl extends DefaultBaseService implements IFormDe
return "TEXT";
} else if (StringUtils.equals(FormFieldTypeEnum.CAROUSEL.getType(), fieldTag)) {
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.FILE.getType(), fieldTag)) {
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.UPLOAD_FILE.getType(), fieldTag)) {
return "VARCHAR(1000)";
} else if (StringUtils.equals(FormFieldTypeEnum.UPLOAD_IMAGE.getType(), fieldTag)) {
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.UPLOAD_VIDEO.getType(), fieldTag)) {
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.UPLOAD_AUDIO.getType(), fieldTag)) {
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.RATE.getType(), fieldTag)) {
return "DOUBLE(11,2)";
} else if (StringUtils.equals(FormFieldTypeEnum.DATE.getType(), fieldTag)) {

13
module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormFieldServiceImpl.java
View File

@ -113,4 +113,17 @@ public class FormFieldServiceImpl extends DefaultBaseService implements IFormFie
PageInfo<FormFieldDTO> pageInfo = new PageInfo<>(dataDTOs);
return new SuccessResultList<>(dataDTOs, pageInfo.getPageNum(), pageInfo.getTotal());
}
@Override
public List<String> listFieldName(Map<String, Object> params) {
params = params == null ? getHashMap(0) : params;
return formFieldDao.listFieldName(params);
}
@Override
public List<String> listFieldNameByListShow(String listShow) {
Map<String, Object> params = getHashMap(2);
params.put("listShow", listShow);
return listFieldName(params);
}
}

74
module-form/src/main/java/ink/wgink/module/form/service/report/impl/FormReportServiceImpl.java
View File

@ -3,7 +3,12 @@ package ink.wgink.module.form.service.report.impl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import ink.wgink.common.base.DefaultBaseService;
import ink.wgink.exceptions.SearchException;
import ink.wgink.interfaces.consts.ISystemConstant;
import ink.wgink.module.form.dao.formreport.IFormReportDao;
import ink.wgink.module.form.pojo.pos.design.FormPO;
import ink.wgink.module.form.service.design.IFormFieldService;
import ink.wgink.module.form.service.design.IFormService;
import ink.wgink.module.form.service.report.IFormReportService;
import ink.wgink.pojo.ListPage;
import ink.wgink.pojo.result.SuccessResultList;
@ -17,6 +22,8 @@ import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
/**
* @ClassName: FormReportServiceImpl
@ -30,6 +37,11 @@ public class FormReportServiceImpl extends DefaultBaseService implements IFormRe
@Autowired
private IFormReportDao formReportDao;
@Autowired
private IFormService formService;
@Autowired
private IFormFieldService formFieldService;
private static Pattern MAIN_TITLE_CODE = Pattern.compile("\\$\\{\\w+\\}");
@Override
public void save(String formCode, Integer formVersion, Map<String, Object> params) {
@ -123,28 +135,88 @@ public class FormReportServiceImpl extends DefaultBaseService implements IFormRe
@Override
public List<Map<String, Object>> list(String formCode, Integer formVersion, Map<String, Object> params) {
FormPO formPO = formService.getPOByCodeAndVersion(formCode, formVersion);
if (formPO == null) {
throw new SearchException("表单不存在");
}
List<String> queryList = conditionList(params);
Map<String, Object> queryParams = getHashMap(6);
queryParams.put("formCode", formCode);
queryParams.put("formVersion", formVersion);
queryParams.put("queryList", queryList);
return formReportDao.list(queryParams);
queryParams.put("listShowField", listShowField(formPO));
List<Map<String, Object>> mapList = formReportDao.list(queryParams);
setMainTitle(formPO, mapList);
return mapList;
}
@Override
public SuccessResultList<List<Map<String, Object>>> listPage(String formCode, Integer formVersion, ListPage page) {
FormPO formPO = formService.getPOByCodeAndVersion(formCode, formVersion);
if (formPO == null) {
throw new SearchException("表单不存在");
}
List<String> queryList = conditionList(page.getParams());
Map<String, Object> queryParams = getHashMap(6);
queryParams.put("formCode", formCode);
queryParams.put("formVersion", formVersion);
queryParams.put("queryList", queryList);
queryParams.put("listShowField", listShowField(formPO));
PageHelper.startPage(page.getPage(), page.getRows());
List<Map<String, Object>> mapList = formReportDao.list(queryParams);
setMainTitle(formPO, mapList);
PageInfo<Map<String, Object>> pageInfo = new PageInfo<>(mapList);
return new SuccessResultList<>(mapList, pageInfo.getPageNum(), pageInfo.getTotal());
}
/**
* 显示字段
*
* @param formPO
* @return
*/
private List<String> listShowField(FormPO formPO) {
return formFieldService.listFieldNameByListShow(ISystemConstant.IS_TRUE);
}
/**
* 设置主标题
*
* @param formPO
* @param mapList
*/
private void setMainTitle(FormPO formPO, List<Map<String, Object>> mapList) {
if (mapList.isEmpty()) {
return;
}
if (StringUtils.isBlank(formPO.getMainTitleTpl())) {
return;
}
List<String> tpls = new ArrayList<>();
Matcher matcher = MAIN_TITLE_CODE.matcher(formPO.getMainTitleTpl());
while (matcher.find()) {
tpls.add(matcher.group());
}
for (Map<String, Object> map : mapList) {
String mainTitle = null;
for (String tpl : tpls) {
Object tplObj = map.get(tpl);
if (tplObj != null) {
mainTitle = formPO.getMainTitleTpl().replaceAll(tpl, tplObj.toString());
} else {
mainTitle = formPO.getMainTitleTpl().replaceAll(tpl, "");
}
}
if (StringUtils.isBlank(mainTitle)) {
map.put("MAIN_TITLE", mainTitle);
}
}
}
/**
* 条件列表
*

39
module-form/src/main/resources/mybatis/mapper/design/form-field-mapper.xml
View File

@ -11,6 +11,7 @@
<result column="field_type" property="fieldType"/>
<result column="field_tag" property="fieldTag"/>
<result column="field_default" property="fieldDefault"/>
<result column="list_show" property="listShow"/>
</resultMap>
<resultMap id="formFieldDTO" type="ink.wgink.module.form.pojo.dtos.design.FormFieldDTO">
@ -21,6 +22,7 @@
<result column="field_type" property="fieldType"/>
<result column="field_tag" property="fieldTag"/>
<result column="field_default" property="fieldDefault"/>
<result column="list_show" property="listShow"/>
</resultMap>
<!-- 建表 -->
@ -34,8 +36,9 @@
`field_type` varchar(255) DEFAULT NULL COMMENT '字段类型',
`field_tag` varchar(255) DEFAULT NULL COMMENT '标签类型',
`field_default` varchar(255) DEFAULT NULL COMMENT '字段默认',
`list_show` varchar(10) DEFAULT 'false' COMMENT '是否列表显示',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='字段字段';
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='字段字段';
</update>
<!-- 新增字段 -->
@ -47,7 +50,8 @@
field_explain,
field_type,
field_tag,
field_default
field_default,
list_show
) VALUES(
#{fieldId},
#{formId},
@ -55,7 +59,8 @@
#{fieldExplain},
#{fieldType},
#{fieldTag},
#{fieldDefault}
#{fieldDefault},
#{listShow}
)
</insert>
@ -90,7 +95,8 @@
field_explain = #{fieldExplain},
field_type = #{fieldType},
field_tag = #{fieldTag},
field_default = #{fieldDefault}
field_default = #{fieldDefault},
list_show = #{listShow}
WHERE
field_id = #{fieldId}
</update>
@ -104,7 +110,8 @@
field_explain,
field_type,
field_tag,
field_default
field_default,
list_show
FROM
form_field
WHERE
@ -120,7 +127,8 @@
field_explain,
field_type,
field_tag,
field_default
field_default,
list_show
FROM
form_field
WHERE
@ -136,7 +144,8 @@
field_explain,
field_type,
field_tag,
field_default
field_default,
list_show
FROM
form_field
<where>
@ -156,7 +165,8 @@
field_explain,
field_type,
field_tag,
field_default
field_default,
list_show
FROM
form_field
<where>
@ -167,4 +177,17 @@
</where>
</select>
<!-- 字段名列表 -->
<select id="listFieldName" parameterType="map" resultType="java.lang.String" useCache="true">
SELECT
field_name
FROM
form_field
<where>
<if test="listShow != null and listShow != ''">
list_show = #{listShow}
</if>
</where>
</select>
</mapper>

22
module-form/src/main/resources/mybatis/mapper/design/form-mapper.xml
View File

@ -19,6 +19,7 @@
<result column="app_show_page_code" property="appShowPageCode"/>
<result column="form_table_name" property="formTableName"/>
<result column="form_version" property="formVersion"/>
<result column="main_title_tpl" property="mainTitleTpl"/>
<result column="creator" property="creator"/>
<result column="gmt_create" property="gmtCreate"/>
<result column="modifier" property="modifier"/>
@ -42,6 +43,7 @@
<result column="app_show_page_code" property="appShowPageCode"/>
<result column="form_table_name" property="formTableName"/>
<result column="form_version" property="formVersion"/>
<result column="main_title_tpl" property="mainTitleTpl"/>
<result column="gmt_create" property="gmtCreate"/>
</resultMap>
@ -64,13 +66,14 @@
`app_show_page_code` longtext COMMENT 'APP展示页面代码',
`form_table_name` varchar(255) DEFAULT NULL COMMENT '表单表名',
`form_version` int(11) DEFAULT NULL COMMENT '表单版本',
`main_title_tpl` varchar(255) DEFAULT NULL COMMENT '主标题模板'
`creator` char(36) DEFAULT NULL COMMENT '创建人',
`gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
`modifier` char(36) DEFAULT NULL COMMENT '修改人',
`gmt_modified` datetime DEFAULT NULL COMMENT '修改时间',
`is_delete` int(1) DEFAULT '0' COMMENT '是否删除',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='表单';
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='表单';
</update>
<!-- 建表 -->
@ -96,6 +99,7 @@
app_show_page_code,
form_table_name,
form_version,
main_title_tpl,
creator,
gmt_create,
modifier,
@ -117,6 +121,7 @@
#{appShowPageCode},
#{formTableName},
#{formVersion},
#{mainTitleTpl},
#{creator},
#{gmtCreate},
#{modifier},
@ -197,6 +202,9 @@
</if>
<if test="formVersion != null">
form_version = #{formVersion},
</if>
<if test="mainTitleTpl != null">
main_title_tpl = #{mainTitleTpl},
</if>
modifier = #{modifier},
gmt_modified = #{gmtModified}
@ -215,7 +223,8 @@
form_status,
form_source_data,
form_table_name,
form_version
form_version,
main_title_tpl
FROM
form_form
WHERE
@ -247,7 +256,8 @@
app_update_page_code,
app_show_page_code,
form_table_name,
form_version
form_version,
main_title_tpl
FROM
form_form
WHERE
@ -291,7 +301,8 @@
form_type,
form_status,
form_table_name,
form_version
form_version,
main_title_tpl
FROM
form_form
WHERE
@ -319,7 +330,8 @@
form_type,
form_status,
form_table_name,
form_version
form_version,
main_title_tpl
FROM
form_form
WHERE

5
module-form/src/main/resources/mybatis/mapper/form-report/form-report-mapper.xml
View File

@ -66,7 +66,10 @@
<!-- 列表 -->
<select id="list" parameterType="map" resultType="map">
SELECT
*
<foreach collection="listShowField" index="item" separator=",">
${item}
</foreach>
uid
FROM
df_${formCode}_v${formVersion}
WHERE

36
module-form/src/main/resources/static/form-design/modules/components/date.js
View File

@ -94,42 +94,6 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) {
max: item.dataMaxValue,
});
},
genScript: function(item) {
return {
func: {
save: [
' function init'+ item.id + '() {',
' laydate.render({',
' elem: \'#' + item.tag + item.id + '\' ,',
' type: \'' + item.datetype + '\',',
' format: \'' + item.dateformat + '\',',
' value: \'' + item.dateDefaultValue + '\',',
' min: \'' + item.dataMinValue + '\',',
' max: \'' + item.dataMaxValue + '\',',
' trigger: \'click\'',
' });',
' }'
].join('\n'),
update: [
' function init'+ item.id + '() {',
' laydate.render({',
' elem: \'#' + item.tag + item.id + '\' ,',
' type: \'' + item.datetype + '\',',
' format: \'' + item.dateformat + '\',',
' min: \'' + item.dataMinValue + '\',',
' max: \'' + item.dataMaxValue + '\',',
' trigger: \'click\'',
' });',
' }'
].join('\n')
},
init: {
save: ' init'+ item.id + '();',
update: ' init'+ item.id + '();'
},
commit: '',
}
}
};
exports('date', date);

77
module-form/src/main/resources/static/form-design/modules/components/uploadAudio.js Normal file
View File

@ -0,0 +1,77 @@
layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(exports) {
var $ = layui.jquery;
var upload = layui.upload;
var utils = layui.formUtils;
var dialog = layui.dialog;
var restAjax = layui.restajax;
var formField = layui.formField;
var viewerObj = {};
var HTML_ARRAY = [
'<div id="{0}Box" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label">{0}:</label>',
' <button type="button" class="layui-btn" id="{0}UploadBtn">',
' 上传音频',
' </button>',
' <div>',
' <input type="hidden" id="{0}" name="{0}">',
' <div class="layui-btn-container" id="{0}FileBox"></div>',
' </div>',
'</div>'
];
var uploadAudio = {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.label);
_html += HTML_ARRAY[2].format(json.id);
_html += HTML_ARRAY[3];
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
_html += HTML_ARRAY[6].format(json.id);
_html += HTML_ARRAY[7].format(json.id);
_html += HTML_ARRAY[8];
_html += HTML_ARRAY[9];
return _html;
},
update: function (json) {
$('#'+ json.id +'Box .layui-form-label').text(json.label);
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.uploadAudio));
_json.id = id == undefined ? utils.guid() : id;
_json.index = index;
return _json;
},
/* 根据 json 对象显示对应的属性 */
property: function (json) {
$('#columnProperty').empty();
var _html = '';
_html = utils.renderCommonProperty(json); //获取通用属性HTML字符串
//处理特殊字符串
for (var key in json) {
if (key === 'index') {
continue;
}
}
$('#columnProperty').append(_html);
},
componentRender: function(item) {
}
};
exports('uploadAudio', uploadAudio);
});

91
module-form/src/main/resources/static/form-design/modules/components/uploadFile.js
View File

@ -7,7 +7,16 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}Box" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label">{0}:</label>',
' <button type="button" class="layui-btn" id="{0}UploadBtn">',
' 上传文件',
' </button>',
' <div>',
' <input type="hidden" id="{0}" name="{0}">',
' <div class="layui-btn-container" id="{0}FileBox"></div>',
' </div>',
'</div>'
];
var uploadFile = {
@ -20,25 +29,20 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
if (selected === undefined) {
selected = false;
}
var _html = '<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += '<label class="layui-form-label {0}">{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label);
_html += '<div class="layui-input-block">';
_html += '<div class="layui-upload">';
_html += '<button type="button" class="layui-btn layui-btn-normal" id="{0}">选择多文件</button> '.format(json.tag + json.id);
_html += ' <div class="layui-upload-list" style="max-width: 1000px;"><table class="layui-table">';
_html += '<colgroup><col><col width="150"><col width="260"><col width="150"></colgroup>';
_html += '<thead><tr><th>文件名</th><th>大小</th><th>上传进度</th><th>操作</th></tr></thead>';
_html += '<tbody id="list-{0}"></tbody></table></div>'.format(json.id);
_html += '<button type="button" class="layui-btn" id="listAction-{0}">开始上传</button>'.format(json.id);
_html += '</div>';
_html += '</blockquote>';
_html += '</div>';
_html += '</div>';
_html += '</div>';
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.label);
_html += HTML_ARRAY[2].format(json.id);
_html += HTML_ARRAY[3];
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
_html += HTML_ARRAY[6].format(json.id);
_html += HTML_ARRAY[7].format(json.id);
_html += HTML_ARRAY[8];
_html += HTML_ARRAY[9];
return _html;
},
update: function(json) {
$('#'+ json.id +' .layui-form-label').text(json.label);
$('#'+ json.id +'Box .layui-form-label').text(json.label);
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
@ -62,59 +66,6 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
$('#columnProperty').append(_html);
},
componentRender: function(item) {
upload.render({
elem: '#' + item.tag + item.id,
elemList: $('#list-' + item.id),
url: '' + item.uploadUrl + '',
accept: 'file',
multiple: true,
number: 3,
auto: false,
bindAction: '#listAction-' + item.id,
choose: function (obj) {
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
},
done: function (res, index, upload) { //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-' + index),
tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
},
allDone: function (obj) { //多文件上传完毕后的状态回调
console.log(obj)
},
error: function (index, upload) { //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-' + index),
tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
},
progress: function (n, elem, e, index) {
element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
}
};

53
module-form/src/main/resources/static/form-design/modules/components/uploadImage.js
View File

@ -9,34 +9,18 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
var viewerObj = {};
var HTML_ARRAY = [
'<div id="{0}Box" class="layui-form-item layui-form-text {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
'<div id="{0}Box" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label">{0}:</label>',
' <div class="layui-input-block">',
' <input type="hidden" id="{0}File" name="{0}">',
' <div class="layui-btn-container" id="{0}FileBox" style="border: 1px solid #e6e6e6;"></div>',
' <button type="button" class="layui-btn" id="{0}UploadBtn">',
' 上传图片',
' </button>',
' <div>',
' <input type="hidden" id="{0}" name="{0}">',
' <div class="layui-btn-container" id="{0}FileBox"></div>',
' </div>',
'</div>'
];
// 初始化图片图片上传
function initUploadImage(fileName, fileExplain) {
var boxId = '#' + fileName + 'FileBox';
function initImage(callback) {
var upload = [
'<div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">',
' <a href="javascript:void(0);" class="' + fileName + '-upload" data-explain="' + fileExplain + '" data-name="' + fileName + '">',
' <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>',
' </a>',
'</div>'
].join('\n');
$(boxId).empty();
$(boxId).append(upload);
callback ? callback() : '';
};
// 初始化
initImage(function () {});
}
var uploadImage = {
/**
* 根据json对象生成html对象
@ -50,11 +34,14 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.label);
_html += HTML_ARRAY[2];
_html += HTML_ARRAY[3].format(json.id);
_html += HTML_ARRAY[4].format(json.id);
_html += HTML_ARRAY[2].format(json.id);
_html += HTML_ARRAY[3];
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
_html += HTML_ARRAY[6];
_html += HTML_ARRAY[6].format(json.id);
_html += HTML_ARRAY[7].format(json.id);
_html += HTML_ARRAY[8];
_html += HTML_ARRAY[9];
return _html;
},
update: function (json) {
@ -82,18 +69,6 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
$('#columnProperty').append(_html);
},
componentRender: function(item) {
initUploadImage(item.id, item.label);
},
code: {
html: [],
script: {
func: [],
init: {
save: [],
update: []
},
submit: [],
}
}
};

75
module-form/src/main/resources/static/form-design/modules/components/uploadVideo.js Normal file
View File

@ -0,0 +1,75 @@
layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(exports) {
var $ = layui.jquery;
var upload = layui.upload;
var utils = layui.formUtils;
var dialog = layui.dialog;
var restAjax = layui.restajax;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}Box" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label">{0}:</label>',
' <button type="button" class="layui-btn" id="{0}UploadBtn">',
' 上传视频',
' </button>',
' <div>',
' <input type="hidden" id="{0}" name="{0}">',
' <div class="layui-btn-container" id="{0}FileBox"></div>',
' </div>',
'</div>'
];
var uploadVideo = {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.label);
_html += HTML_ARRAY[2].format(json.id);
_html += HTML_ARRAY[3];
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
_html += HTML_ARRAY[6].format(json.id);
_html += HTML_ARRAY[7].format(json.id);
_html += HTML_ARRAY[8];
_html += HTML_ARRAY[9];
return _html;
},
update: function (json) {
$('#'+ json.id +'Box .layui-form-label').text(json.label);
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.uploadVideo));
_json.id = id == undefined ? utils.guid() : id;
_json.index = index;
return _json;
},
/* 根据 json 对象显示对应的属性 */
property: function (json) {
$('#columnProperty').empty();
var _html = '';
_html = utils.renderCommonProperty(json); //获取通用属性HTML字符串
//处理特殊字符串
for (var key in json) {
if (key === 'index') {
continue;
}
}
$('#columnProperty').append(_html);
},
componentRender: function(item) {
}
};
exports('uploadVideo', uploadVideo);
});

7
module-form/src/main/resources/static/form-design/modules/consts.js
View File

@ -86,8 +86,11 @@ layui.define([], function (exports) {
bottom: '按钮组件',
buttonVlaue: '按钮文字',
laySign: '签名组件',
uploadImage: '上传图片',
uploadFile: '上传文件',
uploadImage: '图片上传',
uploadFile: '文件上传',
uploadVideo: '视频上传',
uploadAudio: '音频上传',
listShow: '列表显示',
count: '总数'
};
var expressions = [

64
module-form/src/main/resources/static/form-design/modules/formDesigner.js
View File

@ -16,11 +16,14 @@ layui.config({
layCarousel: 'components/layCarousel',
uploadImage: 'components/uploadImage',
uploadFile: 'components/uploadFile',
uploadVideo: 'components/uploadVideo',
uploadAudio: 'components/uploadAudio',
laySign: 'components/laySign',
}).define(["layer", "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "layedit", "carousel", "upload", "formField", "iconPicker", "cron", "labelGeneration",
'consts',
'input', 'numberInput', 'password', 'grid', 'textarea',
'select', 'radio', 'checkbox', 'laySwitch', 'laySlider', 'date', 'layRate', 'layCarousel', 'uploadImage', 'uploadFile',
'select', 'radio', 'checkbox', 'laySwitch', 'laySlider', 'date', 'layRate', 'layCarousel',
'uploadImage', 'uploadFile', 'uploadVideo', 'uploadAudio',
'laySign'
], function (exports) {
var $ = layui.jquery,
@ -48,6 +51,8 @@ layui.config({
layCarousel = layui.layCarousel,
uploadImage = layui.uploadImage,
uploadFile = layui.uploadFile,
uploadVideo = layui.uploadVideo,
uploadAudio = layui.uploadAudio,
laySign = layui.laySign,
consts = layui.consts,
lang = consts.lang,
@ -110,9 +115,15 @@ layui.config({
' <input type="text" id="formSummary" name="formSummary" lay-verify="required" placeholder="请输入表单描述" class="layui-input">',
' </div>',
' </div>',
' <div class="layui-form-item">',
' <label class="layui-form-label">主标题模板</label>',
' <div class="layui-input-block">',
' <input type="text" id="mainTitleTpl" name="mainTitleTpl" placeholder="请输入主标题模板" class="layui-input">',
' </div>',
' <div class="layui-form-mid layui-word-aux">提示：列表中显示的标题（<b>MAIN_TITLE</b> 字段，组合为空则没有该字段），由表单可在列表中显示的指定字段组合而成，组合方法为至少一个 <b>${唯一标识}</b> 按顺序排列即可。如：${name1}${name2}，那么最终在列表数据中的标题便会赋值为 name1的值 + name2的值。</div>',
' </div>',
' <div class="layui-btn-group">',
' <button id="save" type="button" class="layui-btn">保存</button>',
' <button id="preview" type="button" class="layui-btn layui-btn-primary">预览</button>',
' </div>',
' <!--//end-->',
' </div>',
@ -276,8 +287,11 @@ layui.config({
date: date,
rate: layRate,
carousel: layCarousel,
uploadImage: uploadImage,
uploadFile: uploadFile,
uploadVideo: uploadVideo,
uploadAudio: uploadAudio,
grid: grid,
@ -612,7 +626,7 @@ layui.config({
form.on('switch', function (data) {
var _key = data.elem.name;
var _value = data.elem.checked ? true : false;
if (_key === 'readonly' || _key == 'disabled' || _key === 'required' || _key === 'half' || _key === 'text' || _key === 'switchValue' || _key === 'isInput' || _key == 'iconPickerSearch' || _key === 'iconPickerPage' || _key === 'isEnter' || _key === 'isLabel') {
if (_key === 'readonly' || _key == 'disabled' || _key === 'required' || _key === 'listShow' || _key === 'half' || _key === 'text' || _key === 'switchValue' || _key === 'isInput' || _key == 'iconPickerSearch' || _key === 'iconPickerPage' || _key === 'isEnter' || _key === 'isLabel') {
_json[_key] = _value;
that.components[_json.tag].update(_json); //局部更新
}
@ -795,13 +809,6 @@ layui.config({
that.components[_json.tag].update(_json); //局部更新
}
}
if (_key == 'uploadImage') {
_json[_key] = _value;
layedit.build(_json.tag + _json.id, {
height: _json['height'],
uploadImage: _value
}); //建立编辑器
}
if (_key === 'defaultValue') {
_json[_key] = _value;
if (_json.tag === 'slider') {
@ -883,6 +890,9 @@ layui.config({
_json[_key] = _value;
$('#' + _json.id).find('.layui-input').attr('readonly', _value);
}
if (_key === 'listShow') {
_json[_key] = _value;
}
if (_key === 'select-text' || _key === 'select-value' || _key === 'radio-text' || _key === 'radio-value' || _key === 'checkbox-text' || _key === 'checkbox-value') {
//找到 id=key 下的 option值
var _index = parseInt($(this).parent().parent().attr("data-index"));
@ -910,6 +920,7 @@ layui.config({
}
}
});
// 更新 option json
$(document).off('blur', '#columnProperty .layui-input').on('blur', '#columnProperty .layui-input', function () {
if ($(this).attr("name") !== undefined) {
//改变json的值
@ -917,15 +928,22 @@ layui.config({
var _value = $(this).val();
var _json = options.selectItem;
var _oldid = _json.id;
if (_key === 'id' && _value !== _oldid) { //标识的更改
if (_key === 'id' && _value !== _oldid) {
if(_value === 'MAIN_TITLE') {
layer.msg('MAIN_TITLE为关键字');
_json[_key] = _oldid;
that.renderForm();
return;
}
//检测id是否存在重复
var _checkid = that.findJsonItem(options.data, _value);
if (_checkid === undefined) {
_json[_key] = _value;
that.renderForm();
} else {
//提示层
layer.msg('ID已经存在');
_json[_key] = _oldid;
that.renderForm();
}
}
}
@ -1258,7 +1276,13 @@ layui.config({
return fieldArray;
}
// 提交
$('#save').on('click', function () {
var fieldData = options.data;
if (fieldData.length == 0) {
top.dialog.msg('请添加组件');
return;
}
var formName = $('#formName').val();
if (!formName) {
top.dialog.msg('请输入表单名称');
@ -1269,11 +1293,6 @@ layui.config({
top.dialog.msg('请输入表单描述');
return;
}
var fieldData = options.data;
if (fieldData.length == 0) {
top.dialog.msg('请添加组件');
return;
}
var fieldHtmlArray = listField(fieldData);
var fields = [];
$.each(fieldHtmlArray, function (index, item) {
@ -1282,6 +1301,8 @@ layui.config({
html: item.elem.prop('outerHTML')
})
});
console.log(options)
return;
top.dialog.confirm(top.dataMessage.commit, function (index) {
top.dialog.close(index);
var loadLayerIndex;
@ -1359,6 +1380,10 @@ layui.config({
uploadImage.componentRender(item);
} else if (item.tag === 'uploadFile') {
uploadFile.componentRender(item);
} else if (item.tag === 'uploadVideo') {
uploadVideo.componentRender(item);
} else if (item.tag === 'uploadAudio') {
uploadAudio.componentRender(item);
}
});
};
@ -1443,11 +1468,6 @@ layui.config({
$('#formName').val(options.formName);
$('#formSummary').val(options.formSummary);
};
/* 渲染预览框 */
Class.prototype.renderPreview = function () {
var that = this,
options = that.config;
};
Class.prototype.reload = function (id, options) {
var that = this;
options = options || {}; //如果是空的话，就赋值 {}

79
module-form/src/main/resources/static/form-design/modules/formField.js
View File

@ -17,7 +17,8 @@ layui.define(['layer'], function (exports) {
disabled: false,
required: true,
expression: "",
document: ''
document: '',
listShow: true
},
password: {
id: '-1',
@ -35,7 +36,8 @@ layui.define(['layer'], function (exports) {
readonly: false,
disabled: false,
required: true,
document: ''
document: '',
listShow: true
},
select: {
id: '-1',
@ -66,7 +68,8 @@ layui.define(['layer'], function (exports) {
text: 'option3',
value: 'value3',
checked: false,
},]
},],
listShow: true
},
radio: {
id: '-1',
@ -94,7 +97,8 @@ layui.define(['layer'], function (exports) {
text: 'option3',
value: 'value3',
checked: false,
},]
},],
listShow: true
},
checkbox: {
id: '-1',
@ -123,7 +127,8 @@ layui.define(['layer'], function (exports) {
text: 'option3',
value: 'value3',
checked: false,
},]
},],
listShow: true
},
switch: {
id: '-1',
@ -137,6 +142,7 @@ layui.define(['layer'], function (exports) {
showWordLimit: false,
disabled: false,
document: '',
listShow: true
},
slider: {
id: '-1',
@ -153,6 +159,7 @@ layui.define(['layer'], function (exports) {
isInput: true,
disabled: false,
document: '',
listShow: true
},
numberInput: {
id: '-1',
@ -168,6 +175,7 @@ layui.define(['layer'], function (exports) {
stepValue: 1,
disabled: false,
document: '',
listShow: true
},
labelGeneration: {
id: '-1',
@ -180,6 +188,7 @@ layui.define(['layer'], function (exports) {
isEnter: false,
disabled: false,
document: '',
listShow: true
},
bottom: {
id: '-1',
@ -195,6 +204,7 @@ layui.define(['layer'], function (exports) {
isLabel: true,
disabled: false,
document: '',
listShow: true
},
laySign: {
id: '-1',
@ -208,6 +218,7 @@ layui.define(['layer'], function (exports) {
data: "",
disabled: false,
document: '',
listShow: true
},
iconPicker: {
id: '-1',
@ -223,6 +234,7 @@ layui.define(['layer'], function (exports) {
iconPickerCellWidth: '43px',
disabled: false,
document: '',
listShow: true
},
cron: {
id: '-1',
@ -238,6 +250,7 @@ layui.define(['layer'], function (exports) {
disabled: false,
required: true,
document: '',
listShow: true
},
date: {
id: '-1',
@ -265,6 +278,7 @@ layui.define(['layer'], function (exports) {
disabled: false,
required: true,
document: '',
listShow: true
},
dateRange: {
id: '-1',
@ -291,6 +305,7 @@ layui.define(['layer'], function (exports) {
disabled: false,
required: true,
document: '',
listShow: true
},
rate: {
id: '-1',
@ -307,6 +322,7 @@ layui.define(['layer'], function (exports) {
showBottom: true,
readonly: false,
document: '',
listShow: true
},
carousel: {
id: '-1',
@ -340,7 +356,8 @@ layui.define(['layer'], function (exports) {
text: 'banner3',
value: './ayq/images/banner3.PNG',
checked: false,
},]
},],
listShow: true
},
uploadImage: {
id: '-1',
@ -349,8 +366,8 @@ layui.define(['layer'], function (exports) {
tag: "uploadImage",
tagIcon: 'image',
document: '',
uploadUrl: '${imageUploadPath}',
count: 9
count: 9,
listShow: true
},
uploadFile: {
id: '-1',
@ -359,8 +376,28 @@ layui.define(['layer'], function (exports) {
tag: "uploadFile",
tagIcon: 'file',
document: '',
uploadUrl: '${fileUploadPath}',
count: 9
count: 9,
listShow: true
},
uploadVideo: {
id: '-1',
index: '-1',
label: "上传视频",
tag: "uploadVideo",
tagIcon: 'video',
document: '',
count: 1,
listShow: true
},
uploadAudio: {
id: '-1',
index: '-1',
label: "上传音频",
tag: "uploadAudio",
tagIcon: 'audio',
document: '',
count: 1,
listShow: true
},
colorpicker: {
id: '-1',
@ -377,6 +414,7 @@ layui.define(['layer'], function (exports) {
showBottom: true,
disabled: false,
document: '',
listShow: true
},
textarea: {
id: '-1',
@ -390,23 +428,8 @@ layui.define(['layer'], function (exports) {
readonly: false,
disabled: false, //这里就是readonly的医生
required: true,
document: ''
},
editor: {
id: '-1',
index: '-1',
label: "编辑器",
tag: "editor",
tagIcon: 'editor',
width: "100%",
clearable: true,
maxlength: null,
showWordLimit: false,
menu: ['backColor', 'fontSize', 'foreColor', 'bold', 'italic', 'underline', 'strikeThrough', 'justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'insertOrderedList', 'insertUnorderedList', 'superscript', 'subscript', 'createLink', 'unlink', 'hr', 'face', 'table', 'files', 'music', 'video', 'insertImage', 'removeFormat', 'code', 'line'],
height: "200px",
uploadUrl: '/upload/',
disabled: false,
document: ''
document: '',
listShow: true
},
grid: {
id: '-1',
@ -435,7 +458,7 @@ layui.define(['layer'], function (exports) {
},
c4: {
name: "上传组件",
list: ['uploadImage'/*, 'uploadFile'*/]
list: ['uploadImage', 'uploadFile', 'uploadVideo', 'uploadAudio']
},
c5: {
name: "扩展组件",

12
module-form/src/main/resources/static/form-design/modules/formUtils.js
View File

@ -34,7 +34,7 @@ layui.define(['form', 'laytpl', 'restajax', 'dialog', 'consts'], function (expor
}
_html += ' </div>';
_html += '</div>';
} else if (key === 'readonly' || key === 'disabled' || key === 'required' || key === 'half' || key === "text" || key === "autoplay" || key === "full" || key === "verification" || key === 'autoplay' || key === 'isInput' || key === 'expression' || key === 'iconPickerSearch' || key === 'iconPickerPage' || key === 'isEnter' || key === 'isLabel') {
} else if (key === 'readonly' || key === 'disabled' || key === 'required' || key === 'listShow' || key === 'half' || key === "text" || key === "autoplay" || key === "full" || key === "verification" || key === 'autoplay' || key === 'isInput' || key === 'expression' || key === 'iconPickerSearch' || key === 'iconPickerPage' || key === 'isEnter' || key === 'isLabel') {
var yes = "是";
var no = "否";
if (key === 'isInput') {
@ -91,6 +91,16 @@ layui.define(['form', 'laytpl', 'restajax', 'dialog', 'consts'], function (expor
_html += ' </div>';
_html += '</div>';
}
if (key === 'listShow') {
yes = "显示";
no = "不显示";
_html += '<div class="layui-form-item" >';
_html += ' <label class="layui-form-label">{0}</label>'.format(lang[key]);
_html += ' <div class="layui-input-block">';
_html += ' <input type="checkbox" id="{1}" {0} name="{1}" lay-skin="switch" lay-text="{2}|{3}">'.format(json[key] ? 'checked' : '', key, yes, no);
_html += ' </div>';
_html += '</div>';
}
if (key === 'expression') {
_html += '<div class="layui-form-item" >';
_html += ' <label class="layui-form-label">验证</label>';

3
module-form/src/main/resources/static/form/js/form-util.js
View File

@ -2,6 +2,7 @@ function FormUtil(layui, viewer) {
var $ = layui.$;
var layer = layui.layer;
var upload = layui.upload;
var laydate = layui.laydate;
var Viewer = viewer;
var restAjax = layui.restajax;
var viewerObj = {};
@ -430,7 +431,7 @@ function FormUtil(layui, viewer) {
* 初始化日期
* @param opt
*/
this.initDate = function (laydate, opt) {
this.initDate = function (opt) {
laydate.render({
elem: '#' + opt.id,
type: opt.datetype,

12
module-form/src/main/resources/templates/ftl/page/web/form-save.ftl
View File

@ -77,13 +77,19 @@
});
}
// 初始化内容
// 初始化
function initData() {
<#list fields as field>
<#if field.tag == 'uploadImage'>
formUtil.initUploadImage('${field.id}', ${field.count});
<#elseif field.tag == 'uploadFile'>
formUtil.initUploadFile('${field.id}', ${field.count});
<#elseif field.tag == 'uploadVideo'>
formUtil.initUploadVideo('${field.id}', ${field.count});
<#elseif field.tag == 'uploadAudio'>
formUtil.initUploadAudio('${field.id}', ${field.count});
<#elseif field.tag == 'date'>
formUtil.initDate(laydate, {
formUtil.initDate({
id: '${field.id}',
datetype: '${field.datetype}',
dateformat: '${field.dateformat}',
@ -94,7 +100,6 @@
</#if>
</#list>
}
initData();
// 关闭页面
@ -108,6 +113,7 @@
layer.confirm('确定提交吗?', function(confirmLayerIndex) {
layer.close(confirmLayerIndex);
// 提交前赋值
<#list fields as field>
<#if field.tag == 'checkbox'>
formUtil.setCheckboxValue(formData, '${field.id}');