227 lines
8.9 KiB
HTML
227 lines
8.9 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="../../bootstrap/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
|
|
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../../bootstrap/js/bootstrap-multitabs/multitabs.min.css" rel="stylesheet" type="text/css">
|
|
<link href="../../bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
|
|
<link href="../../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">已授权接口</div>
|
|
</header>
|
|
<div class="card-body apis">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="../../bootstrap/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/popper.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/jquery-confirm/jquery-confirm.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap-multitabs/multitabs.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/util.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() {
|
|
$.get("/api/authorized_list", {id: hash_id}, function (data) {
|
|
// 成功
|
|
if (data.list.length > 0) {
|
|
$.each(data.list, function (index, value) {
|
|
const p = '<p>\n' +
|
|
'<a href="#!" data-id="' + value.hash_id + '" data-api="' + value.api + '" class="del">' +
|
|
'<span class="badge badge-secondary"><i class="mdi mdi-window-close"></i></span>\n' +
|
|
'</a>\n' +
|
|
'<span class="badge badge-success">' + value.method + '</span>\n' + value.api
|
|
;
|
|
|
|
$(".apis").append(p);
|
|
})
|
|
} else {
|
|
// 数据为空
|
|
const p = '<p>暂无授权接口</p>';
|
|
$(".apis").append(p);
|
|
}
|
|
}).fail(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;
|
|
}
|
|
|
|
$(this).hide();
|
|
$("#btnLoading").show();
|
|
|
|
const postData = {
|
|
method: requestMethod,
|
|
api: requestApi,
|
|
id: hash_id,
|
|
};
|
|
|
|
$.post("/api/authorized_api", JSON.stringify(postData), function () {
|
|
$("#btnLoading").hide();
|
|
$("#btnOk").show();
|
|
|
|
$.alert({
|
|
title: '操作成功',
|
|
icon: 'mdi mdi-check-decagram',
|
|
type: 'green',
|
|
content: '接口：' + requestApi + ' 授权完成。',
|
|
buttons: {
|
|
okay: {
|
|
text: '关闭',
|
|
action: function () {
|
|
location.reload();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
}).fail(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 () {
|
|
$.ajax({
|
|
url: '/api/authorized_api/' + id,
|
|
type: 'DELETE',
|
|
success: function () {
|
|
$.alert({
|
|
title: '操作成功',
|
|
icon: 'mdi mdi-check-decagram',
|
|
type: 'green',
|
|
content: '接口：' + api + ' 已取消授权。',
|
|
buttons: {
|
|
okay: {
|
|
text: '关闭',
|
|
action: function () {
|
|
location.reload();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
error: function (response) {
|
|
AjaxError(response);
|
|
},
|
|
|
|
});
|
|
}
|
|
},
|
|
cancel: {
|
|
text: '取消',
|
|
keys: ['ctrl', 'shift'],
|
|
}
|
|
}
|
|
});
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|