anyushi-layuiFormDesigner
/
form-designer.html

<html>
	<head>
		<title>layui表单设计器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="assets/libs/layui/css/layui.css" />
		<link rel="stylesheet" href="assets/css/anyushi.css" />
	</head>
	<body>
		<div class="ays-header">
			安宇士表单设计器
		</div>
		<div>			<!-- 左树 -->
			<div id="ctlMenus" class="ays-designer-container" style="float: left; width: 300px;">
				<div class="ays-ctrl-menu-group-title">常用控件</div>
				<div class="ays-ctrl-menu" mode="input">
					<i class="layui-icon layui-icon-layouts"></i>单行文本框
				</div>
				<div class="ays-ctrl-menu" mode="select">
					<i class="layui-icon layui-icon-layouts"></i>下拉框
				</div>
				<div class="ays-ctrl-menu" mode="checkbox">
					<i class="layui-icon layui-icon-layouts"></i>复选框
				</div>
				<div class="ays-ctrl-menu" mode="field">
					<i class="layui-icon layui-icon-layouts"></i>分割线
				</div>
				<div class="clear"></div>
				<div class="ays-ctrl-menu-group-title ays-mt10">容器控件</div>
				<div class="ays-ctrl-menu" mode="grid">
					<i class="layui-icon layui-icon-layouts"></i>栅格布局
				</div>
			</div>
			<!-- 设计模板 -->
			<div class="ays-designer-container" style="float: left; width: calc(100% - 606px);">
				<div class="layui-btn-group">
					<div id="btnPrev" class="layui-btn layui-btn-sm layui-btn-normal">预览</div>
					<div id="btnCodePrev" class="layui-btn layui-btn-sm layui-btn-normal">代码</div>
				</div>
				<div id="mainContainer" class="layui-form">
				</div>
			</div>
			<!-- 控件属性 -->
			<div class="ays-designer-container" style="float: right; width: 300px;">
				<iframe id="properties"></iframe>
			</div>
			<div class="clear"></div>
		</div>

		<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
		<script type="text/javascript" src="assets/libs/Sortable.min.js"></script>
		<script type="text/javascript" language="javascript">
			var provider = {};
			layui.use(["form", "layer", "jquery", "anyushi"], function() {
				var $ = layui.jquery;
				var form = layui.form;
				var layer = layui.layer;
				var anyushi = layui.anyushi;

				var ctl = document.getElementById("ctlMenus");
				var sortable = new Sortable(ctl, {
					group: {
						name: 'shared',
						pull: 'clone',
						put: false
					},
					sort: false,
					draggable: ".ays-ctrl-menu",
					// 结束拖拽
					onEnd: function( /**Event*/ evt) {
						evt.item.style.width = "138px";
					},
					// 拖拽移动的时候
					onMove: function( /**Event*/ evt, /**Event*/ originalEvent) {
						evt.dragged.style.width = "100%";
					}
				});
				var mainContainer = document.getElementById("mainContainer");

				new Sortable(mainContainer, {
					group: {
						name: 'shared',
						pull: true
					},
					//draggable: '.ays-ctrl,.ays-ctrl-container',
					handle: '.widget-view-drag',
					animation: 150,
					onAdd: function(evt /**Event*/ ) {
						addCtrl(evt);
					}
				});

				var loadSortable = function(element) {
					new Sortable(element, {
						group: {
							name: 'shared',
							pull: true
						},
						//draggable: '.ays-ctrl,.ays-ctrl-container',
						handle: '.widget-view-drag',
						animation: 150,
						onAdd: function(evt /**Event*/ ) {
							addCtrl(evt);
						}
					});
				}
				provider.loadSortable = loadSortable;

				var addCtrl = function(evt) {
					var item = evt.item;
					var mode = item.getAttribute("mode");
					if (mode) {
						var newElem = anyushi.factory.instance(item.getAttribute("mode"));
						item.parentNode.replaceChild(newElem, item);
						var containers = newElem.getElementsByClassName("ays-ctrl-container")
						for (i=0;i<containers.length;i++) {
							loadSortable(containers[i]);
						}
						form.render();
					}
				}

				$("#btnPrev").click(function() {
					var index = layer.open({
						type: 1,
						title: "表单预览",
						content: buidHtml(),
						maxmin: true,
						area: ['700px', '500px'],
						success: function(){
							form.render();
						}
					});
					layer.full(index);
				})

				$("#btnCodePrev").click(function() {
					var index = layer.open({
						type: 2,
						title: "代码预览",
						content: "code-prev.html",
						//area: ['100%', '100%'],
						success: function(layero, index) {
							layer.full(index);
							var iframeWin = window[layero.find('iframe')[0]['name']];
							//layer.iframeAuto(index);
							iframeWin.setCode(buidHtml());
						},
					});

				})

				var buidHtml = function() {
					var mainContainer = $('#mainContainer').clone();
					mainContainer.find('.ays-ctrl').removeClass('ays-ctrl');
					mainContainer.find('.ays-ctrl-container').removeClass('ays-ctrl-container');
					mainContainer.find('.widget-view-drag').remove();
					mainContainer.find('.widget-view-action').remove();
					mainContainer.find('.widget-view-ctrl-action').removeClass('widget-view-ctrl-action');
					mainContainer.find('input').removeAttr("readonly");
					mainContainer.find('select').removeAttr("disabled");
					mainContainer.find('.layui-form-select').remove();
					mainContainer.find('checkbox').removeAttr("disabled");
					mainContainer.find('.layui-form-checkbox').remove();

					mainContainer.removeAttr('id');
					mainContainer.addClass('ays-form-prev');
					var formDiv = $('<div></div>');
					formDiv.append(mainContainer);
					return formDiv.html();
				}

				form.render();
			});
		</script>
	</body>
</html>