diff --git a/index.html b/index.html index 69449bab552b7bab6b045784d9bc1edd9866c3d8..5f63cf24b28002d7f056fb85444e187813d1094e 100644 --- a/index.html +++ b/index.html @@ -1,71 +1,162 @@ - + - -SwiftAdmin Layui 表单设计器 - - - - - - + + SwiftAdmin Layui 表单设计器 + + + + + + - -
-
- -
表单设计
-
-
-
-
+ + + +
+
+
+
  • 表单组件
  • 表单模板
-
-
+
+ +
+ +
+ +
+
-
表单组件
-
-
    单行输入
-
    多行输入
-
    单选框
-
    多选框
-
    下拉框
-
    日期组件
-
    颜色选择器
-
    滑块
-
    评分
-
    开关
-
    级联选择器
-
    富文本
-
    文件上传
-
    标签选择器
-
    JSON组件
+
+
+ 表单组件 +
+
+
    +
    +
    单行输入
    +
+
    +
    +
    +
    多行输入
    +
+
    +
    +
    单选框
    +
+
    +
    +
    多选框
    +
+
    +
    +
    下拉框
    +
+
    +
    +
    日期组件
    +
+
    +
    +
    颜色选择器
    +
+
    +
    +
    滑块
    +
+
    +
    +
    +
    评分
    +
+
    +
    + +
    +
    开关
    +
+
    +
    +
    级联选择器
    +
+
    +
    +
    富文本
    +
+
    +
    +
    文件上传
    +
+
    +
    +
    标签选择器
    +
+
    +
    +
    JSON组件
    +
+
- +
-
辅助组件
-
-
    提示
-
    按钮
-
    便签
-
    分割线
+
+
+ 辅助组件 +
+
+
    +
    +
    提示
    +
+
    +
    +
    按钮
    +
+
    +
    +
    便签
    +
+
    +
    +
    +
    分割线
    +
+
+
-
布局组件
-
-
    TAB选项卡
-
    栅格
-
    间距
+
+
布局组件
+
+
    +
    +
    +
    TAB选项卡
    +
+
    +
    +
    +
    栅格
    +
+
    +
    +
    间距
    +
+
+
@@ -75,61 +166,73 @@
-
-
-
- - - - +
+
+
+ +
+ + + + + +
+
+
+ +
- -
- -
-
-
+
+
  • 组件属性
  • 表单属性
- -
-
-
-
- -
- +
+ +
+
+ +
+
+
+ * 表单ID +
+
+
-
- -
- - - - +
+
表单类型
+
+ +
- -
- -
- - - - +
+
表单按钮
+
+ +
-
- -
- - - - +
+
表单宽高
+
+ +
@@ -138,61 +241,81 @@
- -
- - -
-
-'; html = html.replace(/]+>/g, '').replace(/<\/ol>/g, ''); html = html.replace(/
.*?<\/div>/g, ''); - // 获取提交代码 - subHtml = html.substring(0, html.indexOf('')); - subHtml += '
'; - subHtml += ''; - subHtml += ''; - subHtml += '
'; - subHtml += html.substring(html.indexOf('')); - html = subHtml; var formWidth = $('#formWidth').val(); if (formWidth) { @@ -954,23 +946,49 @@ layui.define(['form', 'jquery', 'layer', 'cascader', 'tags'], function (exports) }) }) - // 导出表单 + // 导出表单JSON $('body').on('click', '.layui-btn-export', function (e) { - + var width = $("#formBuilder").width; + var height = $(window).height; $('#json-code').val(JSON.stringify(options.data, null, 4)); $('#import-code').addClass(STR_HIDE); $('#copy-code').removeClass(STR_HIDE); layer.open({ type: 1 - , offset: '130px' + , offset: '0' , content: $('.layui-htmlview') - , area: ['800px', '660px'] + , area: [width, height] , shade: false - , resize: false + , resize: true , success: function (layero, index) { } }); }) + // 导出表单HTML + $('body').on('click', '.layui-btn-exportHTML', function (e) { + var width = $("#formBuilder").width; + var height = $(window).height; + + $(".layui-component-tools").remove(); + var code = $('#formBuilder').html(); + + var elem = ` 标题 ${code}`; + console.log(elem); + $('#json-code').val(elem); + $('#import-code').addClass(STR_HIDE); + $('#copy-code').removeClass(STR_HIDE); + layer.open({ + type: 1 + , offset: '0' + , content: $('.layui-htmlview') + , area: [width, height] + , shade: false + , resize: true + , success: function (layero, index) { } + }); + }) + + // 复制代码 $('body').on('click', '#copy-code', function (e) { var data = document.getElementById("json-code"); diff --git a/module/formDesign/formdesign.css b/module/formDesign/formdesign.css index 372dd20dfbfc6178e771b9b62df1232dd7d14f96..102fed48f8ed0a023508743afdf508a816021e14 100644 --- a/module/formDesign/formdesign.css +++ b/module/formDesign/formdesign.css @@ -351,7 +351,7 @@ input:disabled { } #tpl_main,#tpl_right_main { - margin: 25% auto; + /* margin: 25% auto;S */ text-align: center; font-size: 18px; color: #c9e0f3;