动态表单添加组件

fill-manager/src/main/java/com/mortals/xhx/common/formdesign/ColumnsItem.java

@@ -11,6 +11,34 @@ public class ColumnsItem {
     @JSONField(name = "labelWidth")
     private Integer labelWidth;
 
+    @JSONField(name="china-area-data")
+    private String chinaAreaData;
+
+    @JSONField(name="props")
+    private Props props;
+
+    @JSONField(name="name")
+    private String name;
+
+
+    @JSONField(name="show-file-list")
+    private Boolean showFileList;
+
+    @JSONField(name="list-type")
+    private String listType;
+
+    @JSONField(name="tips")
+    private String tips;
+
+    @JSONField(name="buttonText")
+    private String buttonText;
+
+    @JSONField(name="showTip")
+    private Boolean showTip;
+
+    @JSONField(name="fileSize")
+    private Integer fileSize;
+
     @JSONField(name = "rules")
     private List<RulesItem> rules;
 
@@ -35,6 +63,10 @@ public class ColumnsItem {
     @JSONField(name = "action")
     private String action;
 
+    @JSONField(name="accept")
+    private String accept;
+
+
     @JSONField(name = "disabled")
     private Boolean disabled;
 

fill-manager/src/main/java/com/mortals/xhx/common/formdesign/TableColItem.java

@@ -19,4 +19,6 @@ public class TableColItem {
      * 列类型
      */
     private String colType;
+
+    private String uploadFileUrl;
 }

fill-manager/src/main/java/com/mortals/xhx/common/formdesign/component/DesignDynamicTableComponent.java

@@ -50,10 +50,10 @@ public class DesignDynamicTableComponent extends DesignComponent {
             //动态生成列元素
             List<ColumnsItem> columnsItemList = cons.getColList().stream().map(item -> {
                 ColumnsItem columnsItem = new ColumnsItem();
+                columnsItem.setId(item.getVal());
+                columnsItem.set_id(item.getVal());
                 if (item.getColType().equals(ComponentEnum.INPUT.getValue())) {
                     //创建输入框出初始值
-                    columnsItem.setId(item.getVal());
-                    columnsItem.set_id(item.getVal());
                     columnsItem.setCompType("input");
                     columnsItem.setCompName("单行文本");
                     columnsItem.setCompIcon("input");
@@ -82,8 +82,6 @@ public class DesignDynamicTableComponent extends DesignComponent {
                     columnsItem.setPrepend("");
                     columnsItem.setLayout("colItem");
                 }else if(item.getColType().equals(ComponentEnum.TEXTAREA.getValue())){
-                    columnsItem.setId(item.getVal());
-                    columnsItem.set_id(item.getVal());
                     columnsItem.setCompType("textarea");
                     columnsItem.setEle("el-input");
                     columnsItem.setCompName("多行文本");
@@ -109,10 +107,181 @@ public class DesignDynamicTableComponent extends DesignComponent {
                     columnsItem.setRules(Lists.newArrayList());
                     columnsItem.setRuleError("该字段不能为空");
                     columnsItem.setRulesType("default");
+                }else if(item.getColType().equals(ComponentEnum.SELECT.getValue())){
+                    columnsItem.setCompType("select");
+                    columnsItem.setCompName(item.getLabel());
+                    columnsItem.setCompIcon("select");
+                    columnsItem.setEle("el-select");
+                    columnsItem.setViewType("component");
+                    columnsItem.setConfig(true);
+                    columnsItem.setShowLabel(true);
+                    columnsItem.setLabel(item.getLabel());
+                    columnsItem.setLabelWidth(120);
+                    columnsItem.setPlaceholder("请输入"+item.getLabel());
+                    columnsItem.setMaxLength(50);
+                    columnsItem.setRequired(false);
+                    columnsItem.setMultiple(false);
+                    columnsItem.setCollapseTags(false);
+                    columnsItem.setDisabled(false);
+                    columnsItem.setGutter(15);
+                    columnsItem.setSpan(12);
+                    columnsItem.setDataType("static");
+                    columnsItem.setClearable(false);
+                    columnsItem.setRules(Lists.newArrayList());
                     columnsItem.setLayout("colItem");
-                }else if(item.getColType().equals(ComponentEnum.DATE.getValue())){
+                    columnsItem.setRuleError("该字段不能为空");
+                    columnsItem.setRulesType("default");
+                }else if(item.getColType().equals(ComponentEnum.RADIO.getValue())){
+                    columnsItem.setCompType("radio");
+                    columnsItem.setCompName(item.getLabel());
+                    columnsItem.setCompIcon("radio");
+                    columnsItem.setEle("el-radio-group");
+                    columnsItem.setViewType("component");
+                    columnsItem.setConfig(true);
+                    columnsItem.setShowLabel(true);
+                    columnsItem.setLabel(item.getLabel());
+                    columnsItem.setLabelWidth(120);
+                    columnsItem.setPlaceholder("请输入"+item.getLabel());
+                    columnsItem.setMaxLength(50);
+                    columnsItem.setRequired(false);
+                    columnsItem.setDisabled(false);
+                    columnsItem.setBorder(false);
+                    columnsItem.setSize("medium");
+                    columnsItem.setGutter(15);
+                    columnsItem.setSpan(12);
+                    columnsItem.setOptionType("default");
+                    columnsItem.setDataType("static");
+                    columnsItem.setClearable(false);
+                    columnsItem.setRules(Lists.newArrayList());
+                    columnsItem.setLayout("colItem");
+                    columnsItem.setRuleError("该字段不能为空");
+                }else if(item.getColType().equals(ComponentEnum.CHECKBOX.getValue())){
+                    columnsItem.setCompType("checkbox");
+                    columnsItem.setCompName(item.getLabel());
+                    columnsItem.setCompIcon("checkbox");
+                    columnsItem.setEle("el-checkbox-group");
+                    columnsItem.setViewType("component");
+                    columnsItem.setConfig(true);
+                    columnsItem.setShowLabel(true);
+                    columnsItem.setLabel(item.getLabel());
+                    columnsItem.setLabelWidth(120);
+                    columnsItem.setPlaceholder("请输入"+item.getLabel());
+                    columnsItem.setMaxLength(50);
+                    columnsItem.setRequired(false);
+                    columnsItem.setMultiple(false);
+                    columnsItem.setCollapseTags(false);
+                    columnsItem.setDisabled(false);
+                    columnsItem.setBorder(false);
+                    columnsItem.setSize("medium");
+                    columnsItem.setGutter(15);
+                    columnsItem.setSpan(12);
+                    columnsItem.setOptionType("default");
+                    columnsItem.setDataType("static");
+                    columnsItem.setAction("https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/options");
+                    columnsItem.setClearable(false);
+                    columnsItem.setValue("");
+                    columnsItem.setRules(Lists.newArrayList());
+                    columnsItem.setLayout("colItem");
+                    columnsItem.setRuleError("该字段不能为空");
+                    columnsItem.setRulesType("default");
+                }else if(item.getColType().equals(ComponentEnum.IMAGE.getValue())){
+                    columnsItem.setCompType("upload");
+                    columnsItem.setCompName("附件");
+                    columnsItem.setCompIcon("att");
+                    columnsItem.setEle("el-upload");
+                    columnsItem.setViewType("component");
+                    columnsItem.setConfig(true);
+                    columnsItem.setShowLabel(true);
+                    columnsItem.setLabel(item.getLabel());
+                    columnsItem.setLabelWidth(120);
+                    columnsItem.setMultiple(false);
+                    columnsItem.setRequired(false);
+                    columnsItem.setAction(item.getUploadFileUrl());
+                    columnsItem.setName("file");
+                    columnsItem.setShowFileList(true);
+                    columnsItem.setListType("picture-card");
+                    columnsItem.setShowTip(false);
+                    columnsItem.setTips("点击按钮上传附件");
+                    columnsItem.setAccept("jpg,png,jpeg,bmp");
+                    columnsItem.setFileSize(10);
+                }else if(item.getColType().equals(ComponentEnum.BUTTON.getValue())){
+                    columnsItem.setCompType("button");
+                    columnsItem.setCompName(item.getLabel());
+                    columnsItem.setCompIcon("button");
+                    columnsItem.setEle("el-button");
+                    columnsItem.setViewType("component");
+                    columnsItem.setConfig(true);
+                    columnsItem.setShowLabel(true);
+                    columnsItem.setLabel(item.getLabel());
+                    columnsItem.setLabelWidth(120);
+                    columnsItem.setType("primary");
+                    columnsItem.setText("按钮");
+                    columnsItem.setPlain(true);
+                    columnsItem.setRound(false);
+                    columnsItem.setCircle(false);
+                    columnsItem.setLoading(false);
+                    columnsItem.setLayout("colItem");
+                }else if(item.getColType().equals(ComponentEnum.CASCADE.getValue())){
                     columnsItem.setId(item.getVal());
                     columnsItem.set_id(item.getVal());
+                    columnsItem.setCompType("cascader");
+                    columnsItem.setEle("el-cascader");
+                    columnsItem.setCompName("级联选择");
+                    columnsItem.setCompIcon("cascader");
+                    columnsItem.setViewType("component");
+                    columnsItem.setConfig(true);
+                    columnsItem.setShowLabel(true);
+                    columnsItem.setLabel(item.getLabel());
+                    columnsItem.setLabelWidth(120);
+                    columnsItem.setPlaceholder("请选择" + item.getLabel());
+                    columnsItem.setRequired(false);
+                    columnsItem.setGutter(15);
+                    columnsItem.setSpan(24);
+
+                    columnsItem.setSize("medium");
+                    columnsItem.setDisabled(false);
+                    columnsItem.setDataType("static");
+                    columnsItem.setChinaAreaData("");
+                    columnsItem.setAction("");
+
+                    //Props 设置
+                    Props props = new Props();
+                    props.setClearable(false);
+                    props.setSeparator("-");
+                    props.setShowAllLevels(true);
+                    props.setFilterable(false);
+
+                    Props propsChild = new Props();
+                    propsChild.setExpandTrigger("click");
+                    propsChild.setMultiple(false);
+                    propsChild.setCheckStrictly(false);
+                    propsChild.setLabel("label");
+                    propsChild.setValue("value");
+                    propsChild.setChildren("children");
+                    props.setProps(propsChild);
+                    columnsItem.setProps(props);
+
+                    //设置options
+                    List<OptionsItem> options = new ArrayList<>();
+                    OptionsItem optionsItem = new OptionsItem();
+                    optionsItem.setValue("zhinan");
+                    optionsItem.setLabel("指南");
+                    List<ChildrenItem> children = new ArrayList<>();
+                    ChildrenItem child = new ChildrenItem();
+                    child.setValue("shejiyuanze");
+                    child.setLabel("设计原则");
+                    children.add(child);
+                    optionsItem.setChildren(children);
+
+                    List<ChildrenItem> children1 = new ArrayList<>();
+                    ChildrenItem child1 = new ChildrenItem();
+                    child1.setValue("yizhi");
+                    child1.setLabel("一致");
+                    children1.add(child1);
+                    child.setChildren(children1);
+
+                    columnsItem.setOptions(options);
+                }else if(item.getColType().equals(ComponentEnum.DATE.getValue())){
                     columnsItem.setCompType("date");
                     columnsItem.setEle("el-date-picker");
                     columnsItem.setCompName("日期");
@@ -133,16 +302,13 @@ public class DesignDynamicTableComponent extends DesignComponent {
                     columnsItem.setDisabled(false);
                     columnsItem.setReadonly(false);
                     columnsItem.setRules(new ArrayList<>());
-//                    columnsItem.setRangeSeparator("-");
-//                    columnsItem.setFormat("yyyy-MM-dd");
-//                    columnsItem.setValueFormat("yyyy-MM-dd");
                     columnsItem.setRangeSeparator(" ");
                     columnsItem.setFormat("yyyy 年 MM 月 dd 日");
                     columnsItem.setValueFormat("yyyy 年 MM 月 dd 日");
                     columnsItem.setStartPlaceholder("开始日期");
                     columnsItem.setEndPlaceholder("结束日期");
-                    columnsItem.setLayout("colItem");
                 }
+                columnsItem.setLayout("colItem");
                 return columnsItem;
             }).collect(Collectors.toList());
             listItem.setColumns(columnsItemList);