TaoLer/public/static/component/pear/module/design.js

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);
	}
	var jscodehtml = jscode();
	$('.js-show').text(jscodehtml)
	form.on('submit(formDemo)', function(data) {
		layer.msg(JSON.stringify(data.field));
		return false;
	});
	exports('design', {});
});