261 lines
10 KiB
HTML
261 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
||
<link href="/assets/bootstrap/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
|
||
<link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="/assets/bootstrap/js/bootstrap-multitabs/multitabs.min.css" rel="stylesheet" type="text/css">
|
||
<link href="/assets/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
|
||
<link href="/assets/bootstrap/css/style.min.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container-fluid p-t-15">
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">接口授权</div>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<div class="alert alert-warning" role="alert">
|
||
接口地址支持通配符(*)，其中 * 表示 1 级，** 表示 n 级。
|
||
</div>
|
||
|
||
<div class="input-group mb-3">
|
||
<div class="input-group-prepend">
|
||
<label class="input-group-text" for="request_method">选择请求方式</label>
|
||
</div>
|
||
<select class="custom-select" id="request_method">
|
||
<option value="GET">GET</option>
|
||
<option value="POST">POST</option>
|
||
<option value="PUT">PUT</option>
|
||
<option value="DELETE">DELETE</option>
|
||
<option value="PATCH">PATCH</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="input-group mb-3">
|
||
<div class="input-group-prepend">
|
||
<span class="input-group-text" id="inputGroup-sizing-default">输入接口地址</span>
|
||
</div>
|
||
<input type="text" class="form-control" maxlength="60" id="request_api"
|
||
placeholder="接口地址">
|
||
</div>
|
||
|
||
<button type="button" id="btnOk" class="btn btn-primary">确认</button>
|
||
<button type="button" id="btnLoading" class="btn btn-primary" disabled style="display: none">
|
||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||
执行中...
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<header class="card-header">
|
||
<div class="card-title">已授权接口<small id="businessKey"></small></div>
|
||
</header>
|
||
<div class="card-body apis">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/popper.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/bootstrap.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/jquery-confirm/jquery-confirm.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/bootstrap-multitabs/multitabs.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/httpclient/httpclient.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function () {
|
||
|
||
const hash_id = {{ .HashID }}
|
||
|
||
$("input#request_api").maxlength({
|
||
warningClass: "badge badge-info",
|
||
limitReachedClass: "badge badge-warning"
|
||
});
|
||
|
||
// 加载列表页数据
|
||
getListData();
|
||
|
||
function getListData() {
|
||
AjaxForm(
|
||
"GET",
|
||
"/api/authorized_api",
|
||
{id: hash_id},
|
||
function () {
|
||
|
||
},
|
||
function (data) {
|
||
$("#businessKey").html("（授权方：" + data.business_key + "）");
|
||
if (data.list.length > 0) {
|
||
var badgeMethodClass = "";
|
||
|
||
$.each(data.list, function (index, value) {
|
||
if (value.method === "GET") {
|
||
badgeMethodClass = "badge-primary";
|
||
} else if (value.method === "POST") {
|
||
badgeMethodClass = "badge-success";
|
||
} else if (value.method === "DELETE") {
|
||
badgeMethodClass = "badge-danger";
|
||
} else if (value.method === "PUT") {
|
||
badgeMethodClass = "badge-yellow";
|
||
} else if (value.method === "PATCH") {
|
||
badgeMethodClass = "badge-cyan";
|
||
} else {
|
||
badgeMethodClass = "badge-dark";
|
||
}
|
||
|
||
const p = '<p>\n' +
|
||
'<a href="#!" data-id="' + value.hash_id + '" data-api="' + value.api + '" class="del">' +
|
||
'<span class="badge badge-dark"><i class="mdi mdi-window-close"></i></span>\n' +
|
||
'</a>\n' +
|
||
'<span class="badge ' + badgeMethodClass + '">' + value.method + '</span>\n' + value.api
|
||
;
|
||
|
||
$(".apis").append(p);
|
||
})
|
||
} else {
|
||
// 数据为空
|
||
const p = '<p>暂无授权接口</p>';
|
||
$(".apis").append(p);
|
||
}
|
||
},
|
||
function (response) {
|
||
AjaxError(response);
|
||
}
|
||
|
||
);
|
||
}
|
||
|
||
$('#btnOk').on('click', function () {
|
||
const requestMethod = $("#request_method").val();
|
||
const requestApi = $("#request_api").val();
|
||
if (requestMethod === "") {
|
||
$.alert({
|
||
title: '温馨提示',
|
||
icon: 'mdi mdi-alert',
|
||
type: 'orange',
|
||
content: '请选择请求方式。',
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (requestApi === "") {
|
||
$.alert({
|
||
title: '温馨提示',
|
||
icon: 'mdi mdi-alert',
|
||
type: 'orange',
|
||
content: '请输入请求地址。',
|
||
});
|
||
return false;
|
||
}
|
||
|
||
const postData = {
|
||
method: requestMethod,
|
||
api: requestApi,
|
||
id: hash_id,
|
||
};
|
||
|
||
AjaxForm(
|
||
"POST",
|
||
"/api/authorized_api",
|
||
postData,
|
||
function () {
|
||
$(this).hide();
|
||
$("#btnLoading").show();
|
||
},
|
||
function () {
|
||
$("#btnLoading").hide();
|
||
$("#btnOk").show();
|
||
|
||
$.alert({
|
||
title: '操作成功',
|
||
icon: 'mdi mdi-check-decagram',
|
||
type: 'green',
|
||
content: '接口：' + requestApi + ' 授权完成。',
|
||
buttons: {
|
||
okay: {
|
||
text: '关闭',
|
||
action: function () {
|
||
location.reload();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
function (response) {
|
||
$("#btnLoading").hide();
|
||
$("#btnOk").show();
|
||
|
||
AjaxError(response);
|
||
}
|
||
);
|
||
});
|
||
|
||
$(document).on('click', '.del', function () {
|
||
const id = $(this).attr('data-id');
|
||
const api = $(this).attr('data-api');
|
||
|
||
$.confirm({
|
||
title: '谨慎操作',
|
||
content: '确认要 <strong style="color: red">取消授权</strong> 吗？',
|
||
icon: 'mdi mdi-alert',
|
||
animation: 'scale',
|
||
closeAnimation: 'zoom',
|
||
buttons: {
|
||
okay: {
|
||
text: '确认',
|
||
keys: ['enter'],
|
||
btnClass: 'btn-orange',
|
||
action: function () {
|
||
AjaxForm(
|
||
"DELETE",
|
||
'/api/authorized_api/' + id,
|
||
"",
|
||
function () {
|
||
|
||
},
|
||
function () {
|
||
$.alert({
|
||
title: '操作成功',
|
||
icon: 'mdi mdi-check-decagram',
|
||
type: 'green',
|
||
content: '接口：' + api + ' 已取消授权。',
|
||
buttons: {
|
||
okay: {
|
||
text: '关闭',
|
||
action: function () {
|
||
location.reload();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
function (response) {
|
||
AjaxError(response);
|
||
}
|
||
);
|
||
}
|
||
},
|
||
cancel: {
|
||
text: '取消',
|
||
keys: ['ctrl', 'shift'],
|
||
}
|
||
}
|
||
});
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|