From 90f8b0a306a9a4721fa463cc33f1e14b338712de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Thu, 3 Sep 2020 22:56:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E5=B7=A5=E5=85=B7=20--=20?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=9E=84=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/data/menu.json | 19 +++- component/code/css/style.css | 9 ++ component/code/index.html | 76 ++++++++++++++ component/pear/module/design.js | 176 ++++++++++++++++++++++++++++++++ component/pear/pear.js | 3 +- 5 files changed, 280 insertions(+), 3 deletions(-) create mode 100644 component/code/css/style.css create mode 100644 component/code/index.html create mode 100644 component/pear/module/design.js diff --git a/admin/data/menu.json b/admin/data/menu.json index 30eff4d..57ec7d4 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -5,7 +5,7 @@ "icon": "layui-icon layui-icon-console", "href": "", "children": [{ - "id": 0, + "id": 10, "title": "控制后台", "icon": "layui-icon layui-icon-console", "type": 1, @@ -217,7 +217,7 @@ { "id": "error", "title": "错误页面", - "icon": "layui-icon layui-icon-auz", + "icon": "layui-icon layui-icon-face-cry", "type": 0, "href": "", "children": [{ @@ -312,5 +312,20 @@ "openType": "_iframe", "href": "view/system/space.html" }] + }, + { + "id": "code", + "title": "开发工具", + "icon": "layui-icon layui-icon-util", + "type": 0, + "href": "", + "children": [{ + "id": 801, + "title": "表单构建", + "icon": "layui-icon layui-icon-util", + "type": 1, + "openType": "_iframe", + "href": "component/code/index.html" + }] } ] diff --git a/component/code/css/style.css b/component/code/css/style.css new file mode 100644 index 0000000..ef2986e --- /dev/null +++ b/component/code/css/style.css @@ -0,0 +1,9 @@ +html,body{background-color: whitesmoke} +.layui-fluid{margin-top: 15px;} +.content{min-height: 796px;} +.nav{text-align: center;} +.nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;} +.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;} +.code-show{min-height: 454px;} +.js-show{min-height: 200px;} +.del-form{line-height: initial;position: absolute;right: 15px;top: 50%;margin-top: -15px;} \ No newline at end of file diff --git a/component/code/index.html b/component/code/index.html new file mode 100644 index 0000000..169e0cd --- /dev/null +++ b/component/code/index.html @@ -0,0 +1,76 @@ + + + + + + + layui表单生成器 + + + + +
+
+
+
+
长
+
+ + + + + + + + +
+
+
+
短
+
+ + + + + + + + +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
html
+
+ +
+
+
+
JS
+
+ +
+
+
+
+
+ + + + + diff --git a/component/pear/module/design.js b/component/pear/module/design.js new file mode 100644 index 0000000..43fd0f8 --- /dev/null +++ b/component/pear/module/design.js @@ -0,0 +1,176 @@ +/** + * time: 2018年11月21日 15:25:32 + * author: dbag + * blog: http://www.cnblogs.com/phper8/ + */ +layui.define(['layer', 'form'], function(exports){ + var layer = layui.layer,form = layui.form,$ = layui.$,key = ''; + delHtml() + $('button').on('click',function(){ + var _this = $(this), + size = _this.data('size'), + type = _this.data('type'), + html = ''; + key = randStrName(); + switch (type) { + case 'text': + html = input(type,size) + break; + case 'password': + html = input(type,size) + break; + case 'select': + html = select(size) + break; + case 'checkbox_a': + html = checkbox_a(size) + break; + case 'checkbox_b': + html = checkbox_b(size) + break; + case 'radio': + html = radio(size) + break; + case 'textarea': + html = textarea(size) + break; + case 'submit': + html = submits(size) + break; + case 'del': + $('form').html("\n") + delHtml() + $('.code-show').text('') + return false + break; + default: + layer.msg('类型错误',{icon:2}) + } + + $('form').append(html); + form.render(); + setHtml(html) + + + }) + + function delHtml() { + layui.data('form_html', { + key: 'html' + ,remove: true + }); + } + + function setHtml(html) { + var h = layui.data('form_html'); + if(h && h.html ){ + var _d = h.html+html + }else{ + var _d = html + } + layui.data('form_html',{ + key:'html', + value:_d + }) + $('.code-show').text('
\n' +_d+ '
') + + } + + function input(type,size) { + var name = type==='text'?'输入框':(type==='password'?'密码框':''); + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + function select(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + function checkbox_a(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + ' \n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + function checkbox_b(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + function radio(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + function textarea(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + function submits(size) { + var html = '
\n' + + '
\n' + + ' \n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + function jscode() { + var html = ''; + return html; + } + function randStrName() { + return Math.random().toString(36).substr(8); + } + $('.click-but button').click() + var jscodehtml = jscode(); + $('.js-show').text(jscodehtml) + form.on('submit(formDemo)', function(data){ + layer.msg(JSON.stringify(data.field)); + return false; + }); + exports('design', {}); +}); \ No newline at end of file diff --git a/component/pear/pear.js b/component/pear/pear.js index e39a08e..e39f810 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -28,5 +28,6 @@ layui.config({ area:"area", count:"count", topBar: "topBar", - button: "button" + button: "button", + design: "design" });