【API】修改树样式

pull/64/head
chenjinlong 2021-01-22 18:08:42 +08:00
parent 35a6dbfe5d
commit 4863d75e29
2 changed files with 126 additions and 91 deletions

View File

@ -1,10 +1,11 @@
layui.use(['layer', 'form', 'table', 'HttpRequest', 'func', 'tree'], function () {
layui.use(['layer', 'form', 'table', 'util', 'admin', 'tree', 'dropdown', 'xmSelect', 'treeTable', 'func', 'HttpRequest'], function () {
var $ = layui.jquery;
var form = layui.form;
var table = layui.table;
var HttpRequest = layui.HttpRequest;
var func = layui.func;
var tree = layui.tree;
var HttpRequest = layui.HttpRequest;
var selObj;
/**
* Api管理的参数
@ -19,7 +20,6 @@ layui.use(['layer', 'form', 'table', 'HttpRequest', 'func', 'tree'], function ()
// 选择api树上的接口时
ApiManager.onClickApi = function (obj) {
ApiManager.condition.resourceCode = obj.data.id;
// 如果是具体接口,则查看接口详情
if (obj.data.resourceFlag === true) {
ApiManager.search();
@ -67,22 +67,18 @@ layui.use(['layer', 'form', 'table', 'HttpRequest', 'func', 'tree'], function ()
};
// 初始化api树
var request = new HttpRequest(Feng.ctxPath + '/resource/getTree', 'get', function (data) {
new HttpRequest(Feng.ctxPath + '/resource/getTree', 'get', function (data) {
tree.render({
elem: '#apiTree',
elem: '#organizationTree',
onlyIconControl: true,
data: data.data,
click: ApiManager.onClickApi,
onlyIconControl: true
click: function (obj) {
selObj = obj;
$('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
$(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
ApiManager.onClickApi(selObj)
}
});
});
request.start();
});
$(function () {
var panehHidden = false;
if ($(this).width() < 769) {
panehHidden = true;
}
$('#myContiner').layout({initClosed: panehHidden, west__size: 330});
});
$('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
}).start();
});

View File

@ -1,90 +1,129 @@
@layout("/layout/_tree_container.html", {plugins:["jquery-layout"], js:["/assets/modular/api/api.js"]}){
@layout("/layout/_container.html",{js:["/assets/modular/api/api.js"]}){
<style>
/* 左树 */
#organizationTreeBar {
padding: 10px 15px;
border: 1px solid #e6e6e6;
background-color: #f2f2f2;
}
<div class="layui-body-header">
<span class="layui-body-header-title">API接口文档</span>
</div>
#organizationTree {
border: 1px solid #e6e6e6;
border-top: none;
padding: 10px 5px;
overflow: auto;
height: -webkit-calc(100vh - 125px);
height: -moz-calc(100vh - 125px);
height: calc(100vh - 125px);
}
<div id="myContiner" style="height: 100%">
<div class="ui-layout-west">
<div class="box box-main">
<div class="ui-layout-content">
<div id="apiTree"></div>
.layui-tree-entry .layui-tree-txt {
padding: 0 5px;
border: 1px transparent solid;
text-decoration: none !important;
}
.layui-tree-entry.ew-tree-click .layui-tree-txt {
background-color: #fff3e0;
border: 1px #FFE6B0 solid;
}
/* 右表搜索表单 */
#organizationUserTbSearchForm .layui-form-label {
box-sizing: border-box !important;
width: 90px !important;
}
#organizationUserTbSearchForm .layui-input-block {
margin-left: 90px !important;
}
</style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid" style="padding-bottom: 0;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md2">
<div class="layui-card">
<div class="layui-card-body" style="padding: 10px;">
<!-- 树工具栏 -->
<div class="layui-form toolbar" id="organizationTreeBar">
</div>
<!-- 左树 -->
<div id="organizationTree"></div>
</div>
</div>
</div>
</div>
<div class="ui-layout-center" style="height: 97%;overflow: scroll">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>接口详情</legend>
</fieldset>
<form class="layui-form" lay-filter="apiDetailForm">
<div class="layui-row">
<div class="layui-col-xs2">
<div class="layui-form-item">
<label class="wide-layui-form-label">http请求方法</label>
<div class="wide-layui-input-block">
<input type="text" name="httpMethod" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
</div>
<div class="layui-col-xs10">
<div class="layui-form-item">
<label class="wide-layui-form-label">资源的请求路径</label>
<div class="wide-layui-input-block">
<input type="text" name="url" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
<div class="layui-col-md10">
<div class="layui-card">
<div class="layui-card-body" style="padding: 10px;">
<div class="layui-form-item layui-row">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>接口详情</legend>
</fieldset>
<form class="layui-form" lay-filter="apiDetailForm">
<div class="layui-row">
<div class="layui-col-xs2">
<div class="layui-form-item">
<label class="wide-layui-form-label">http请求方法</label>
<div class="wide-layui-input-block">
<input type="text" name="httpMethod" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">API名称</label>
<div class="wide-layui-input-block">
<input type="text" name="resourceName" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
<div class="layui-col-xs10">
<div class="layui-form-item">
<label class="wide-layui-form-label">资源的请求路径</label>
<div class="wide-layui-input-block">
<input type="text" name="url" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">控制器类名称</label>
<div class="wide-layui-input-block">
<input type="text" name="className" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">API名称</label>
<div class="wide-layui-input-block">
<input type="text" name="resourceName" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">控制器中的方法名称</label>
<div class="wide-layui-input-block">
<input type="text" name="methodName" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">控制器类名称</label>
<div class="wide-layui-input-block">
<input type="text" name="className" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">是否需要登录</label>
<div class="wide-layui-input-block">
<input type="text" name="requiredLoginFlag" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">控制器中的方法名称</label>
<div class="wide-layui-input-block">
<input type="text" name="methodName" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">是否需要鉴权</label>
<div class="wide-layui-input-block">
<input type="text" name="requiredPermissionFlag" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">是否需要登录</label>
<div class="wide-layui-input-block">
<input type="text" name="requiredLoginFlag" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</form>
</div>
<div class="layui-form-item">
<label class="wide-layui-form-label">是否需要鉴权</label>
<div class="wide-layui-input-block">
<input type="text" name="requiredPermissionFlag" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
</div>
</div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
<legend>请求参数</legend>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
<legend>请求参数</legend>
</fieldset>
<table class="layui-hide" id="requestParamsTable" lay-filter="requestParamsTable"></table>
<table class="layui-hide" id="requestParamsTable" lay-filter="requestParamsTable"></table>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
<legend>响应参数</legend>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
<legend>响应参数</legend>
</fieldset>
<table class="layui-hide" id="responseParamsTable" lay-filter="responseParamsTable"></table>
</div>
<table class="layui-hide" id="responseParamsTable" lay-filter="responseParamsTable"></table>
</div>
</div>
</div>
@ -92,4 +131,4 @@
</div>
</div>
@}
@}