Pear-Admin-Layui/component/pear/module/design.js

/**
 * 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('<form class="layui-form" action="" onsubmit="return false">\n' +_d+ '</form>')

    }

    function input(type,size) {
        var name = type==='text'?'输入框':(type==='password'?'密码框':'');
        var html = '  <div class="layui-form-item">\n' +
          '    <label class="layui-form-label">'+name+'</label>\n' +
          '    <div class="layui-input-'+size+'">\n' +
          '      <input type="'+type+'" name="'+key+'" required  lay-verify="required" placeholder="请输入'+name+'内容" autocomplete="off" class="layui-input">\n' +
          '    </div>\n' +
          '  </div>\n';
        return html;
    }
    function select(size) {
        var html = '  <div class="layui-form-item">\n' +
          '    <label class="layui-form-label">选择框</label>\n' +
          '    <div class="layui-input-'+size+'">\n' +
          '      <select name="'+key+'" lay-verify="required" lay-search>\n' +
          '        <option value=""></option>\n' +
          '        <option value="0">北京</option>\n' +
          '        <option value="1">上海</option>\n' +
          '        <option value="2">广州</option>\n' +
          '        <option value="3">深圳</option>\n' +
          '        <option value="4">杭州</option>\n' +
          '      </select>\n' +
          '    </div>\n' +
          '  </div>\n';
        return html;
    }
    function checkbox_a(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">复选框</label>\n' +
            '    <div class="layui-input-'+size+'">\n' +
            '      <input type="checkbox" name="'+key+'[]" title="写作">\n' +
            '      <input type="checkbox" name="'+key+'[]" title="阅读" checked>\n' +
            '      <input type="checkbox" name="'+key+'[]" title="发呆">\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }
    function checkbox_b(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">开关</label>\n' +
            '    <div class="layui-input-'+size+'">\n' +
            '      <input type="checkbox" name="'+key+'" lay-skin="switch">\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }
    function radio(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">单选框</label>\n' +
            '    <div class="layui-input-'+size+'">\n' +
            '      <input type="radio" name="'+key+'" value="男" title="男">\n' +
            '      <input type="radio" name="'+key+'" value="女" title="女" checked>\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }
    function textarea(size) {
        var html = '  <div class="layui-form-item layui-form-text">\n' +
            '    <label class="layui-form-label">文本域</label>\n' +
            '    <div class="layui-input-'+size+'">\n' +
            '      <textarea name="'+key+'" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }
    function submits(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <div class="layui-input-'+size+'">\n' +
            '      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
            '      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }
    function jscode() {
        var html = '<script>\n' +
            '  layui.use(\'form\', function(){\n' +
            '    var form = layui.form;\n' +
            '    form.on(\'submit(formDemo)\', function(data){\n' +
            '      layer.msg(JSON.stringify(data.field));\n' +
            '      return false;\n' +
            '    });\n' +
            '  });\n' +
            '</script>';
        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', {});
});