流程属性信息完成

base-server/src/main/resources/template/js/processAttr/processAttrEdit.js

+
+layui.config({
+	base: basePath,
+	version: skyeyeVersion
+}).extend({
+    window: 'js/winui.window'
+}).define(['window', 'jquery', 'winui', 'form', 'soulTable', 'table'], function (exports) {
+	winui.renderColor();
+	var index = parent.layer.getFrameIndex(window.name);
+	var $ = layui.$,
+		form = layui.form,
+		table = layui.table,
+		soulTable = layui.soulTable;
+	var tableDataList = new Array();
+	var alignmentData;
+	var rowNum = 1;
+	AjaxPostUtil.request({url: reqBasePath + "queryAttrTransformById", params: {id: parent.rowId}, type: 'json', method: "GET", callback: function (json) {
+		$("#showForm").html(getDataUseHandlebars($("#beanTemplate").html(), json));
+
+		AjaxPostUtil.request({url: reqBasePath + "queryAttrDefinitionList", params: {className: parent.objectId}, type: 'json', method: "POST", callback: function (data) {
+			$("#attrKey").html(getDataUseHandlebars(`<option value="">全部</option>{{#each rows}}<option value="{{attrKey}}">{{name}}</option>{{/each}}`, data));
+			$("#attrKey").val(json.bean.attrKey);
+		}, async: false});
+
+		skyeyeClassEnumUtil.showEnumDataListByClassName("dsFormShowType", 'select', "showType", json.bean.showType, form);
+		skyeyeClassEnumUtil.showEnumDataListByClassName("widthScale", 'select', "proportion", json.bean.proportion, form);
+		alignmentData = skyeyeClassEnumUtil.getEnumDataListByClassName("alignment");
+
+		if (json.bean.showType == 5) {
+			$("#tableBox").show();
+			$.each(json.bean.attrTransformTableList, function(j, item) {
+				item.id = rowNum;
+				tableDataList.push(item);
+				rowNum++;
+			});
+			buildTable();
+		} else {
+			$("#tableBox").hide();
+		}
+
+		matchingLanguage();
+		form.render();
+		form.on('submit(formEditBean)', function (data) {
+			if (winui.verifyForm(data.elem)) {
+				if ($("#showType").val() == 5) {
+					if (tableDataList.length == 0) {
+						winui.window.msg('请选择表格属性.', {icon: 2, time: 2000});
+						return false;
+					}
+					$.each(tableDataList, function (i, item) {
+						item.id = null;
+						item.className = parent.objectId;
+						item.parentAttrKey = $("#attrKey").val();
+						item.orderBy = i + 1;
+						item.actFlowId = parent.$("#actFlowId").val();
+					});
+				} else {
+					tableDataList = new Array();
+				}
+
+				var params = {
+					className: parent.objectId,
+					attrKey: $("#attrKey").val(),
+					orderBy: $("#orderBy").val(),
+					showType: $("#showType").val(),
+					attrTransformTableList: JSON.stringify(tableDataList),
+					proportion: $("#proportion").val(),
+					actFlowId: parent.$("#actFlowId").val(),
+					id: parent.rowId
+				};
+				AjaxPostUtil.request({url: reqBasePath + "writeAttrTransform", params: params, type: 'json', method: "POST", callback: function (json) {
+					parent.layer.close(index);
+					parent.refreshCode = '0';
+				}});
+			}
+			return false;
+		});
+	}, async: false});
+
+	form.on('select(attrKey)', function(data) {
+		tableDataList = new Array();
+		buildTable();
+	});
+	form.on('select(showType)', function(data) {
+		var value = data.value;
+		if (value == 5) {
+			$("#tableBox").show();
+		} else {
+			$("#tableBox").hide();
+		}
+		tableDataList = new Array();
+		buildTable();
+	});
+
+	function buildTable() {
+		if ($("#showType").val() == 5 && !isNull($("#attrKey").val())) {
+			var params = {
+				className: parent.objectId,
+				attrKey: $("#attrKey").val()
+			};
+			var childAttr = [];
+			AjaxPostUtil.request({url: reqBasePath + "queryChildAttrDefinitionList", params: params, type: 'json', method: "POST", callback: function (json) {
+				childAttr = [].concat(json.rows);
+			}, async: false});
+			table.render({
+				id: 'messageTable',
+				elem: '#messageTable',
+				method: 'get',
+				data: tableDataList,
+				even: true,
+				page: false,
+				rowDrag: {
+					trigger: 'row',
+					done: function(obj) {}
+				},
+				cols: [[
+					{ type: 'checkbox', align: 'center' },
+					{ field: 'attrKey', title: '属性', align: 'left', width: 150, templet: function (d) {
+						var _html = `<select lay-filter="tableSelect" lay-search="" id="attrKey${d.id}" cus-id="${d.id}" win-verify="required"><option value="">全部</option>`;
+						$.each(childAttr, function (i, item) {
+							if (item.attrKey == d.attrKey) {
+								_html += `<option value="${item.attrKey}" selected="selected">${item.name}</option>`;
+							} else {
+								_html += `<option value="${item.attrKey}">${item.name}</option>`;
+							}
+						});
+						_html += `</select>`;
+						return _html;
+					}},
+					{ field: 'align', title: '对齐方式', align: 'left', width: 120, templet: function (d) {
+						var _html = `<select lay-filter="tableSelect" lay-search="" id="align${d.id}" cus-id="${d.id}" win-verify="required"><option value="">全部</option>`;
+						$.each(alignmentData.rows, function (i, item) {
+							if (item.id == d.align) {
+								_html += `<option value="${item.id}" selected="selected">${item.name}</option>`;
+							} else {
+								_html += `<option value="${item.id}">${item.name}</option>`;
+							}
+						});
+						_html += `</select>`;
+						return _html;
+					}},
+					{ field: 'width', title: '宽度', align: 'left', width: 120, templet: function (d) {
+						return `<input type="text" id="width${d.id}" placeholder="请填写宽度" cus-id="${d.id}" class="layui-input tableInput" win-verify="required|number" ` +
+							`value="` + (isNull(d.width) ? "" : d.width) + `"/>`;
+					}},
+					{ field: 'templet', title: '脚本', align: 'left', width: 240, templet: function (d) {
+						return `<input type="text" id="templet${d.id}" placeholder="请填写脚本" cus-id="${d.id}" class="layui-input tableInput" ` +
+							`value="` + (isNull(d.templet) ? "" : d.templet) + `"/>`;
+					}},
+				]],
+				done: function(json) {
+					matchingLanguage();
+					if ($(`div[lay-id='messageTable']`).find('.place-holder').length == 0) {
+						$(`div[lay-id='messageTable']`).find('.layui-table-body').append('<div class="place-holder"></div>');
+					}
+					soulTable.render(this);
+				}
+			});
+		} else {
+			table.reloadData("messageTable", {data: tableDataList});
+		}
+	}
+
+	form.on('select(tableSelect)', function(data) {
+		var id = data.elem.id;
+		buildData($(`#${id}`))
+	});
+	$("body").on("input", ".tableInput", function () {
+		buildData($(this))
+	});
+	$("body").on("change", ".tableInput", function () {
+		buildData($(this))
+	});
+
+	function buildData(_this) {
+		var id = _this.attr('cus-id');
+		var key = _this.attr('id').replace(id, '');
+		$.each(tableDataList, function (j, item) {
+			if (item.id == id) {
+				item[key] = _this.val();
+			}
+		});
+	}
+
+	$("body").on("click", "#addRow", function() {
+		addRow();
+	});
+
+	$("body").on("click", "#deleteRow", function() {
+		deleteRow();
+	});
+
+	// 新增行
+	function addRow() {
+		tableDataList = [].concat(table.cache.messageTable);
+		tableDataList.push({id: rowNum});
+		table.reloadData("messageTable", {data: tableDataList});
+		rowNum++;
+	}
+
+	// 删除行
+	function deleteRow() {
+		tableDataList = [].concat(table.cache.messageTable);
+		var check_box = table.checkStatus('messageTable').data;
+		for (var i = 0;  i < check_box.length; i++){
+			var list = [];
+			$.each(tableDataList, function(j, item) {
+				if(item.id != check_box[i].id){
+					list.push(item);
+				}
+			});
+			tableDataList = [].concat(list);
+		}
+		table.reloadData("messageTable", {data: tableDataList});
+	}
+
+	$("body").on("click", "#cancle", function() {
+		parent.layer.close(index);
+	});
+});
\ No newline at end of file

base-server/src/main/resources/template/js/processAttr/processAttrList.js

@@ -86,9 +86,9 @@ layui.config({
 			return false;
 		}
 		_openNewWindows({
-			url: "../../tpl/processAttr/teamTemplateEdit.html",
+			url: "../../tpl/processAttr/processAttrEdit.html",
 			title: systemLanguage["com.skyeye.editPageTitle"][languageType],
-			pageId: "teamTemplateEdit",
+			pageId: "processAttrEdit",
 			area: ['90vw', '90vh'],
 			callBack: function (refreshCode) {
 				winui.window.msg(systemLanguage["com.skyeye.successfulOperation"][languageType], {icon: 1, time: 2000});

base-server/src/main/resources/template/tpl/processAttr/processAttrEdit.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
+    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
+	<style>
+		.layui-table-cell {
+			height: auto;
+			text-overflow: inherit;
+			overflow: visible;
+			white-space: normal;
+			word-wrap: break-word;
+		}
+
+		.layui-table-cell .layui-anim {
+			height: 180px;
+		}
+
+		.place-holder {
+			height: 200px;
+		}
+	</style>
+</head>
+<body>
+	<div style="margin: 0 auto; padding: 20px;">
+	    <form class="layui-form" action="" id="showForm" autocomplete="off">
+
+	    </form>
+	</div>
+
+	<script type="text/x-handlebars-template" id="beanTemplate">
+		{{#bean}}
+		<div class="layui-form-item layui-col-xs12">
+			<span class="hr-title">基本信息</span><hr>
+		</div>
+		<div class="layui-form-item layui-col-xs6">
+			<label class="layui-form-label">属性<i class="red">*</i></label>
+			<div class="layui-input-block">
+				<select lay-filter="attrKey" lay-search="" id="attrKey" win-verify="required">
+
+				</select>
+			</div>
+		</div>
+		<div class="layui-form-item layui-col-xs6">
+			<label class="layui-form-label">宽度比例<i class="red">*</i></label>
+			<div class="layui-input-block">
+				<select lay-filter="proportion" lay-search="" id="proportion" win-verify="required">
+
+				</select>
+			</div>
+		</div>
+		<div class="layui-form-item layui-col-xs6">
+			<label class="layui-form-label">序号<i class="red">*</i></label>
+			<div class="layui-input-block">
+				<input type="text" id="orderBy" name="orderBy" win-verify="required|number" placeholder="请输入序号" class="layui-input" value="{{orderBy}}"/>
+				<div class="layui-form-mid layui-word-aux">序号越大越往后。</div>
+			</div>
+		</div>
+		<div class="layui-form-item layui-col-xs6">
+			<label class="layui-form-label">显示类型<i class="red">*</i></label>
+			<div class="layui-input-block">
+				<select lay-filter="showType" lay-search="" id="showType" win-verify="required">
+
+				</select>
+			</div>
+		</div>
+		<div class="layui-form-item layui-col-xs12" id="tableBox">
+			<label class="layui-form-label">表格属性<i class="red">*</i></label>
+			<div class="layui-input-block">
+				<div class="winui-tip alert-info">
+					拖拽表格行可修改顺序。
+				</div>
+				<div class="winui-tool" style="text-align: left;">
+					<button id="addRow" class="winui-toolbtn" type="button"><i class="fa fa-plus" aria-hidden="true"></i>新增行</button>
+					<button id="deleteRow" class="winui-toolbtn" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i>删除行</button>
+				</div>
+				<table class="layui-table" id="messageTable">
+
+				</table>
+			</div>
+		</div>
+
+
+		<div class="layui-form-item layui-col-xs12">
+			<div class="layui-input-block">
+				<button class="winui-btn" id="cancle"><language showName="com.skyeye.cancel"></language></button>
+				<button class="winui-btn" lay-submit lay-filter="formEditBean"><language showName="com.skyeye.save"></language></button>
+			</div>
+		</div>
+		{{/bean}}
+	</script>
+
+	<script src="../../assets/lib/layui/layui.js"></script>
+   	<script src="../../assets/lib/layui/custom.js"></script>
+   	<script type="text/javascript">
+		layui.config({base: '../../js/processAttr/'}).use('processAttrEdit');
+	</script>
+</body>
+</html>
\ No newline at end of file