接口API新增出入参配置

api/src/main/resources/template/js/apiPage/apiPage.js

@@ -4,7 +4,7 @@ layui.config({
 	version: skyeyeVersion
 }).extend({
     window: 'js/winui.window'
-}).define(['window', 'jquery', 'winui', 'cookie', 'orgChart', 'element', 'table'].concat(dsFormUtil.mastHaveImport), function (exports) {
+}).define(['window', 'jquery', 'winui', 'cookie', 'orgChart', 'element', 'table', 'jsonEditor'].concat(dsFormUtil.mastHaveImport), function (exports) {
 	winui.renderColor();
 	var index = parent.layer.getFrameIndex(window.name);
 	var $ = layui.$,
@@ -242,6 +242,16 @@ layui.config({
 				}
 				// 切换到接口信息的Tab项
 				element.tabChange('docTabBrief', "apiMationTab");
+				// 加载接口参数
+				$("#apiListParams").find(".layui-tab-title").html("");
+				$("#apiListParams").find(".layui-tab-content").html("");
+				$.each(json.bean.apiParamsList, function (i, item) {
+					item.requestBody = JSON.stringify(item.requestBody);
+					item.responseBody = JSON.stringify(item.responseBody);
+					addTabPatams({
+						rows: [item]
+					});
+				});
 			}});
 		}
 	});
@@ -347,6 +357,93 @@ layui.config({
 		}});
 	});
 
+	var requestBody = {};
+	var responseBody = {};
+	// 新增出入参示例
+	$("body").on("click", "#tabAdd", function() {
+		addTabPatams(null);
+	});
+
+	function addTabPatams(params) {
+		var tabParams = params == null ? {
+			rows: [{
+				id: "RM" + new Date().getTime(),
+				title: '新出入参' + (Math.random() * 1000 | 0)
+			}]
+		} : params;
+		element.tabAdd('apiListParams', {
+			title: tabParams.rows[0].title,
+			content: getDataUseHandlebars($("#apiParamsListTabContent").html(), tabParams),
+			id: tabParams.rows[0].id
+		});
+		$("#apiListParams").find('.layui-tab-title').find('li').append('<i class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>');
+
+		requestBody[tabParams.rows[0].id] = new JsonEditor('#requestBody' + tabParams.rows[0].id, params == null ? {} : JSON.parse(tabParams.rows[0].requestBody));
+		responseBody[tabParams.rows[0].id] = new JsonEditor('#responseBody' + tabParams.rows[0].id, params == null ? {} : JSON.parse(tabParams.rows[0].responseBody));
+
+		form.render();
+		saveApiParamsBtn(tabParams.rows[0].id);
+		element.tabChange('apiListParams', tabParams.rows[0].id);
+	}
+
+	function saveApiParamsBtn(id) {
+		form.on('submit(formAddBean' + id + ')', function (data) {
+			if (winui.verifyForm(data.elem)) {
+				var _this = $(this);
+				// formId如果是新增，需要新增成功后替换id
+				var formId = _this.parents(".apiParamsForm").attr("id");
+				var dataId = formId;
+				if(formId.startsWith('RM')){
+					dataId = "";
+				}
+				var params = {
+					id: dataId,
+					title: $("#title" + id).val(),
+					requestUrl: $("#appList .active").attr("rowid"),
+					requestBody: JSON.stringify(requestBody[id].get()),
+					responseBody: JSON.stringify(responseBody[id].get()),
+					appId: $("#apiMicroservicesId").val()
+				};
+				AjaxPostUtil.request({url: reqBasePath + "writeApiMation", params: params, type: 'json', method: "POST", callback: function(json) {
+					winui.window.msg("保存成功", {icon: 1, time: 2000});
+					if (formId.startsWith('RM')) {
+						_this.parents(".apiParamsForm").attr("id", json.bean.id);
+						_this.parents(".layui-tab").eq(0).find('li[lay-id="' + id + '"]').attr("lay-id", json.bean.id);
+					}
+					_this.parents(".layui-tab").eq(0).find('li[lay-id="' + json.bean.id + '"]').html(json.bean.title + '<i class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>');
+				}});
+			}
+			return false;
+		});
+	}
+
+	// 请求入参内容变化事件
+	$("body").on("input", ".requestBodyText", function (e) {
+		var id = $(this).attr("id").replace("requestBodyText", "");
+		var value = $(this).val();
+		try {
+			requestBody[id].load(JSON.parse(value));
+		} catch (ex) {}
+	});
+	// 请求出参内容变化事件
+	$("body").on("input", ".responseBodyText", function (e) {
+		var id = $(this).attr("id").replace("responseBodyText", "");
+		var value = $(this).val();
+		try {
+			requestBody[id].load(JSON.parse(value));
+		} catch (ex) {}
+	});
+	$("body").on("click", ".layui-tab-close", function (e) {
+		var formId = $(this).parents(".layui-tab").eq(0).find('.layui-show').find('form').attr("id");
+		element.tabDelete('apiListParams', formId);
+		$("#" + formId).parent().remove();
+		winui.window.msg("删除成功", {icon: 1, time: 2000});
+		if (!formId.startsWith('RM')) {
+			AjaxPostUtil.request({url: reqBasePath + "deleteApiMationById", params: {id: formId}, type: 'json', method: "DELETE", callback: function(json) {
+			}});
+		}
+	});
+
 	// 获取前端限制条件
 	function getReceptionLimitMation(){
 		var list = new Array();

api/src/main/resources/template/tpl/apiPage/apiPage.html

@@ -43,16 +43,27 @@
 			</div>
 			<div class="api-right" style="overflow: hidden">
 				<div class="layui-tab vertical-tab" lay-filter="docTabBrief">
-					<ul class="layui-tab-title">
+					<ul class="layui-tab-title layui-tab-title-customer">
 						<li class="layui-this">API配置信息</li>
 						<li lay-id="apiMationTab" class="apiLi" style="display: none">接口信息</li>
 						<li class="apiLi" style="display: none">出入参示例</li>
 						<li class="apiLi" style="display: none" id="advancedSearch">高级搜索配置</li>
 					</ul>
-					<div class="layui-tab-content">
+					<div class="layui-tab-content layui-tab-content-customer">
 						<div class="layui-tab-item layui-show" id="contentDesc"></div>
 						<div class="layui-tab-item" id="apiMation"></div>
-						<div class="layui-tab-item">暂无</div>
+						<div class="layui-tab-item">
+							<!-- 接口参数信息 -->
+							<button class="layui-btn layui-btn-xs layui-btn-normal" type="button" id="tabAdd">新增</button>
+							<div class="layui-tab" lay-filter="apiListParams" id="apiListParams">
+								<ul class="layui-tab-title">
+
+								</ul>
+								<div class="layui-tab-content">
+
+								</div>
+							</div>
+						</div>
 						<div class="layui-tab-item">
 							<div class="winui-toolbar layui-col-xs12">
 								<button type="button" class="layui-btn layui-btn-normal" id="saveAdvancedSearch" auth="1657962237576">保存</button>
@@ -67,6 +78,36 @@
 		</form>
 	</div>
 
+	<script type="text/x-handlebars-template" id="apiParamsListTabContent">
+		{{#each rows}}
+			<form class="layui-form apiParamsForm" action="" id="{{id}}">
+				<div class="api-right-params">
+					<font class="method-color">标题<i class="red">*</i>：</font>
+					<input type="text" id="title{{id}}" name="title{{id}}" win-verify="required" placeholder="请输入标题" class="layui-input" value="{{title}}"/>
+				</div>
+				<div class="api-right-params">
+					<font class="method-color">请求入参：</font>
+					<div class="layui-col-xs12">
+						<textarea id="requestBodyText{{id}}" class="layui-textarea requestBodyText layui-col-xs6" style="height: 260px; width: 50%">{{requestBody}}</textarea>
+						<pre id="requestBody{{id}}" class="layui-col-xs6" style="height: 260px"></pre>
+					</div>
+				</div>
+				<div class="api-right-params">
+					<font class="method-color">请求出参：</font>
+					<div class="layui-col-xs12">
+						<textarea id="responseBodyText{{id}}" class="layui-textarea responseBodyText layui-col-xs6" style="height: 260px; width: 50%">{{responseBody}}</textarea>
+						<pre id="responseBody{{id}}" class="layui-col-xs6" style="height: 260px"></pre>
+					</div>
+				</div>
+				<div class="layui-form-item layui-col-xs12">
+					<div class="layui-input-block">
+						<button class="winui-btn" lay-submit lay-filter="formAddBean{{id}}">保存</button>
+					</div>
+				</div>
+			</form>
+		{{/each}}
+	</script>
+
 	<script type="text/x-handlebars-template" id="defaultTemplate">
 		{{#bean}}
 			<div class="api-right-title">

web/src/main/resources/template/assets/lib/layui/lay/modules/jsonEditor/jquery.json-editor.min.js

+layui.define(["jquery"], function (exports) {
+    var jQuery = layui.jquery;
+    !function () {
+        var e = '/* Syntax highlighting for JSON objects */ .json-editor-blackbord {   background: #1c2833;   color: #fff;   font-size: 13px;   font-family: Menlo,Monaco,Consolas,"Courier New",monospace; } @media screen and (min-width: 1600px) {   .json-editor-blackbord {     font-size: 14px;   } }  ul.json-dict, ol.json-array {   list-style-type: none;   margin: 0 0 0 1px;   border-left: 1px dotted #525252;   padding-left: 2em; } .json-string {   /*color: #0B7500;*/   /*color: #BCCB86;*/   color: #0ad161; } .json-literal {   /*color: #1A01CC;*/   /*font-weight: bold;*/   color: #ff8c00; } .json-url {   color: #1e90ff; } .json-property {   color: #4fdee5;   line-height: 160%;   font-weight: 500; }  /* Toggle button */ a.json-toggle {   position: relative;   color: inherit;   text-decoration: none;   cursor: pointer; } a.json-toggle:focus {   outline: none; } a.json-toggle:before {   color: #aaa;   content: "\\25BC"; /* down arrow */   position: absolute;   display: inline-block;   width: 1em;   left: -1em; } a.json-toggle.collapsed:before {   transform: rotate(-90deg); /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */   -ms-transform: rotate(-90deg);   -webkit-transform: rotate(-90deg); }   /* Collapsable placeholder links */ a.json-placeholder {   color: #aaa;   padding: 0 1em;   text-decoration: none;   cursor: pointer; } a.json-placeholder:hover {   text-decoration: underline; }',
+            o = function (e) {
+                var o = document.getElementsByTagName("head")[0], t = document.createElement("style");
+                if (o.appendChild(t), t.styleSheet) t.styleSheet.disabled || (t.styleSheet.cssText = e); else try {
+                    t.innerHTML = e
+                } catch (n) {
+                    t.innerText = e
+                }
+            };
+        o(e)
+    }(), function (e) {
+        function o(e) {
+            return e instanceof Object && Object.keys(e).length > 0
+        }
+
+        function t(e) {
+            var o = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+            return o.test(e)
+        }
+
+        function n(e, r) {
+            var s = "";
+            if ("string" == typeof e) e = e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), s += t(e) ? '<a href="' + e + '" class="json-string json-url">"' + e + '"</a>' : '<span class="json-string">"' + e + '"</span>'; else if ("number" == typeof e) s += '<span class="json-literal json-literal-number">' + e + "</span>"; else if ("boolean" == typeof e) s += '<span class="json-literal json-literal-boolean">' + e + "</span>"; else if (null === e) s += '<span class="json-literal json-literal-null">null</span>'; else if (e instanceof Array) if (e.length > 0) {
+                s += '[<ol class="json-array">';
+                for (var l = 0; l < e.length; ++l) s += "<li>", o(e[l]) && (s += '<a href class="json-toggle"></a>'), s += n(e[l], r), l < e.length - 1 && (s += ","), s += "</li>";
+                s += "</ol>]"
+            } else s += "[]"; else if ("object" == typeof e) {
+                var a = Object.keys(e).length;
+                if (a > 0) {
+                    s += '{<ul class="json-dict">';
+                    for (var i in e) if (e.hasOwnProperty(i)) {
+                        s += "<li>";
+                        var c = r.withQuotes ? '<span class="json-string json-property">"' + i + '"</span>' : '<span class="json-property">' + i + "</span>";
+                        s += o(e[i]) ? '<a href class="json-toggle"></a>' + c : c, s += ": " + n(e[i], r), --a > 0 && (s += ","), s += "</li>"
+                    }
+                    s += "</ul>}"
+                } else s += "{}"
+            }
+            return s
+        }
+
+        e.fn.jsonViewer = function (t, r) {
+            return r = r || {}, this.each(function () {
+                var s = n(t, r);
+                o(t) && (s = '<a href class="json-toggle"></a>' + s), e(this).html(s), e(this).off("click"), e(this).on("click", "a.json-toggle", function () {
+                    var o = e(this).toggleClass("collapsed").siblings("ul.json-dict, ol.json-array");
+                    if (o.toggle(), o.is(":visible")) o.siblings(".json-placeholder").remove(); else {
+                        var t = o.children("li").length, n = t + (t > 1 ? " items" : " item");
+                        o.after('<a href class="json-placeholder">' + n + "</a>")
+                    }
+                    return !1
+                }), e(this).on("click", "a.json-placeholder", function () {
+                    return e(this).siblings("a.json-toggle").click(), !1
+                }), 1 == r.collapsed && e(this).find("a.json-toggle").click()
+            })
+        }
+    }(jQuery), function (e) {
+        function o(e) {
+            var o = {'"': '\\"', "\\": "\\\\", "\b": "\\b", "\f": "\\f", "\n": "\\n", "\r": "\\r", "	": "\\t"};
+            return e.replace(/["\\\b\f\n\r\t]/g, function (e) {
+                return o[e]
+            })
+        }
+
+        function t(e) {
+            if ("string" == typeof e) return o(e);
+            if ("object" == typeof e) for (var n in e) e[n] = t(e[n]); else if (Array.isArray(e)) for (var r = 0; r < e.length; r++) e[r] = t(e[r]);
+            return e
+        }
+
+        function n(o, t, n) {
+            n = n || {}, n.editable !== !1 && (n.editable = !0), this.$container = e(o), this.options = n, this.load(t)
+        }
+
+        n.prototype = {
+            constructor: n, load: function (e) {
+                this.$container.jsonViewer(t(e), {
+                    collapsed: this.options.defaultCollapsed,
+                    withQuotes: !0
+                }).addClass("json-editor-blackbord").attr("contenteditable", !!this.options.editable)
+            }, get: function () {
+                try {
+                    return this.$container.find(".collapsed").click(), JSON.parse(this.$container.text())
+                } catch (e) {
+                    throw new Error(e)
+                }
+            }
+        }, window.JsonEditor = n
+    }(jQuery);
+    exports('jsonEditor', null);
+});
\ No newline at end of file

web/src/main/resources/template/assets/lib/layui/layui.js

@@ -322,7 +322,8 @@ function getCookie(name) {
 			excel: 'ext/excel', //soulTable 依赖的插件
 			weixinAudio: 'audio/weixinAudio', //音频播放插件
 			spop: 'spop/spop', //气泡提示
-			orgChart: "orgChart/js/jquery.orgchart" //组织结构图
+			orgChart: "orgChart/js/jquery.orgchart", //组织结构图
+			jsonEditor: 'jsonEditor/jquery.json-editor.min', //json格式的数据编辑器
 		};
 
 	// 记录基础数据

web/src/main/resources/template/assets/lib/winui/css/customer/skyeye-custom.css

@@ -64,12 +64,12 @@
 
 /***************************竖向选项卡开始********************************/
 
-.vertical-tab .layui-tab-title li {
+.vertical-tab .layui-tab-title-customer li {
     display: block;
     padding: 0 8px;
 }
 
-.vertical-tab .layui-tab-title {
+.vertical-tab .layui-tab-title-customer {
     float: left;
     border-bottom-width: 0px;
     border-right-width: 1px;
@@ -78,7 +78,7 @@
     width: 100px;
 }
 
-.vertical-tab .layui-tab-title .layui-this:after {
+.vertical-tab .layui-tab-title-customer .layui-this:after {
     position: absolute;
     left: 1px;
     top: 0;
@@ -94,24 +94,24 @@
     pointer-events: none;
 }
 
-.vertical-tab .layui-tab-content {
+.vertical-tab .layui-tab-content-customer {
     float: left;
     width: calc(100% - 121px);
     height: 100%;
 }
 
-.vertical-tab .layui-tab-content .layui-tab-item {
+.vertical-tab .layui-tab-content-customer .layui-tab-item {
     width: 100%;
     height: calc(100% - 15px);
     overflow-x: auto;
 }
 
-.vertical-tab .layui-tab-content .layui-tab-item .CodeMirrorBox {
+.vertical-tab .layui-tab-content-customer .layui-tab-item .CodeMirrorBox {
     height: calc(100% - 50px) !important;
     float: left;
 }
 
-.vertical-tab .layui-tab-content .layui-tab-item .CodeMirror {
+.vertical-tab .layui-tab-content-customer .layui-tab-item .CodeMirror {
     margin-top: 0px;
 }