表单布局设计界面新增属性的展示

common/src/main/resources/template/js/dsFormPage/dsFormPageDesign.js

@@ -18,12 +18,18 @@ layui.config({
 		form = layui.form;
 	
 	authBtn('1567732055673');//保存控件
+	var className = GetUrlParam("className");
+	if (isNull(className)) {
+		winui.window.msg("请传入适用对象信息", {icon: 2, time: 2000});
+		return false;
+	}
+
+	// 加载表单控件
+	loadLeftBoxItem();
+	// 加载属性
+	loadClassAttr();
 	
 	AjaxPostUtil.request({url: reqBasePath + "dsformpage004", params: {pageId: parent.rowId}, type: 'json', method: 'GET', callback: function (json) {
-		// 加载表单控件
-		loadLeftBoxItem();
-		// 加载拖拽
-		setup_draggable();
 		// 加载页面内容
 		loadPageMation(json);
  	}});
@@ -80,7 +86,7 @@ layui.config({
  	}
  	
  	// 加载表单控件
- 	function loadLeftBoxItem(){
+ 	function loadLeftBoxItem() {
  		showGrid({
 		 	id: "btnBox",
 		 	url: reqBasePath + "queryAllDsFormComponentList",
@@ -98,36 +104,57 @@ layui.config({
 			},
 		 	ajaxSendAfter:function (json) {
 		 		form.render();
+				$(".draggable").draggable({
+					appendTo: "body",
+					helper: "clone",
+					drag: function (event, ui) {},
+					stop: function () {}
+				});
+				$(".droppable").droppable({
+					accept: ".draggable",
+					helper: "clone",
+					hoverClass: "droppable-active",
+					drop: function(event, ui) {
+						$(".empty-form").remove();
+						var _this = $(ui.draggable);
+						if (!_this.hasClass("dropped")) {
+							getFormPageControlContent(_this.attr("rowid"));
+						} else {
+							if ($(this)[0] != _this.parent()[0]) {
+								var $el = _this.clone().appendTo(this);
+								_this.remove()
+							}
+						}
+					}
+				}).sortable();
 		 	}
 		});
  	}
+
+	// 加载属性
+	function loadClassAttr() {
+		showGrid({
+			id: "attrBox",
+			url: reqBasePath + "queryAttrDefinitionList",
+			params: {className: className},
+			pagination: false,
+			method: 'POST',
+			template: $("#leftAttrBoxItem").html(),
+			ajaxSendLoadBefore: function (hdb, json) {
+				$.each(json.rows, function (i, item) {
+					if (isNull(item.dsFormComponent)) {
+						item.class = "no-choose";
+					} else {
+						item.iLabelClass = "i-label-class";
+					}
+				});
+			},
+			ajaxSendAfter:function (json) {
+
+			}
+		});
+	}
  	
- 	var setup_draggable = function() {
-	    $(".draggable").draggable({
-	        appendTo: "body",
-	        helper: "clone",
-			drag: function (event, ui) {},
-			stop: function () {}
-	    });
-	    $(".droppable").droppable({
-	        accept: ".draggable",
-	        helper: "clone",
-	        hoverClass: "droppable-active",
-			drop: function(event, ui) {
-	        	$(".empty-form").remove();
-	        	var _this = $(ui.draggable);
-	            if (!_this.hasClass("dropped")) {
-	            	getFormPageControlContent(_this.attr("rowid"));
-	            } else {
-	                if ($(this)[0] != _this.parent()[0]) {
-	                    var $el = _this.clone().appendTo(this);
-	                    _this.remove()
-	                }
-	            }
-	        }
-	    }).sortable();
-	};
-	
 	function getFormPageControlContent(id) {
 		var linkedData; //控件关联的数据
 		var defaultData; //选择事件的默认数据

common/src/main/resources/template/js/dsFormPage/pageList.js

@@ -84,7 +84,7 @@ layui.config({
 	function control(data) {
 		rowId = data.id;
 		parent.parent._openNewWindows({
-			url: "../../tpl/dsFormPage/dsFormPageDesign.html",
+			url: "../../tpl/dsFormPage/dsFormPageDesign.html?className=" + objectId,
 			title: "表单设计",
 			pageId: "dsFormPageDesign",
 			area: ['100vw', '100vh'],

common/src/main/resources/template/tpl/dsFormPage/dsFormPageDesign.css

@@ -10,7 +10,6 @@
     display: inline-block;
     background: #fff;
     color: #000;
-    width: 85px;
     height: 70px;
     line-height: 1;
     text-align: center;
@@ -18,6 +17,26 @@
     z-index: 2;
 }
 
+.attr-mation {
+    height: 28px;
+    line-height: 28px;
+    text-align: left;
+    padding: 0px 10px;
+}
+
+.no-choose {
+    cursor: not-allowed;
+    color: grey;
+}
+
+.attr-mation .fa {
+    margin-right: 5px;
+}
+
+.attr-mation .i-label-class {
+    cursor: move;
+}
+
 .btntext:hover {
     background-color: #2e73ff;
     color: #ffffff;

common/src/main/resources/template/tpl/dsFormPage/dsFormPageDesign.html

@@ -9,13 +9,22 @@
 	<link href="dsFormPageDesign.css" rel="stylesheet" />
 </head>
 	<body style="background-color: rgb(234, 234, 234)">
-		<div class="winui-toolbar" style="position: fixed; width: 100%; z-index: 100;">
+		<div class="winui-toolbar" style="position: fixed; width: calc(100% - 10px); z-index: 100; text-align: right">
 	        <div class="winui-tool">
 	            <button id="save" class="winui-toolbtn" auth="1567732055673"><i class="fa fa-save" aria-hidden="true"></i><language showName="com.skyeye.save"></language></button>
 	        </div>
 	    </div>
-	    <div class="left-box-form" id="btnBox">
-		    
+	    <div class="left-box-form">
+			<div class="layui-tab layui-tab-brief">
+				<ul class="layui-tab-title">
+					<li class="layui-this">基本组件</li>
+					<li class="">属性</li>
+				</ul>
+				<div class="layui-tab-content">
+					<div class="layui-tab-item layui-show" id="btnBox"></div>
+					<div class="layui-tab-item" id="attrBox"></div>
+				</div>
+			</div>
 		</div>
 	    <div class="center-box-form">
 		    <form class="layui-form droppable sortable ui-droppable ui-sortable" action="" id="showForm" autocomplete="off">
@@ -47,6 +56,16 @@
 		{{/each}}
 	</script>
 
+	<script type="text/html" id="leftAttrBoxItem">
+		{{#each rows}}
+			<div class="form-group draggable ui-draggable btntext attr-mation layui-col-xs12 {{class}}" rowid="{{attrKey}}">
+				<label class="col-sm-12 {{class}}">
+					<i class="fa fa-arrows fa-fw {{iLabelClass}}"></i>{{name}}
+				</label>
+			</div>
+		{{/each}}
+	</script>
+
 	<script type="text/html" id="controlItemEdit">
 		{{#bean}}
 		<div class="layui-form-item layui-col-xs12">

web/src/main/resources/template/assets/lib/fontawesome-free-5.11.2/css/all.css

@@ -73,8 +73,8 @@
 
 .fa-fw {
     text-align: center;
-    width: 1.25em;
-    height: 1.25em;
+    width: 1em;
+    height: 1em;
 }
 
 .fa-ul {