You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
266 lines
13 KiB
266 lines
13 KiB
3 weeks ago
|
@@master_page.html
|
||
|
|
<link href="css/page_table_list.css?v=1" rel="stylesheet" />
|
||
|
|
<!--<link href="css/page_jwt_token_management.css?v=1" rel="stylesheet" />-->
|
||
|
|
<script src="js/ace/src-min/ace.js"></script>
|
||
|
|
<script src="js/ace/src-min/ext-language_tools.js"></script>
|
||
|
|
<div id="apibox" class="card mypage">
|
||
|
|
<!--正文-->
|
||
|
|
<div class="card">
|
||
|
|
<div class="search-bar"> </div>
|
||
|
|
<div class="card">
|
||
|
|
<form id="frmSearach" onsubmit="return false;">
|
||
|
|
<div class="row ">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="col-md-1"><label class="form-control m-l-15">搜索:</label></div>
|
||
|
|
<div class="col-md-11">
|
||
|
|
<div class="input-group">
|
||
|
|
<input id="txtSearch" type="text" style="width:150px;margin-left:20px; margin-right:10px" class="form-control" value="" name="keyword" placeholder="请输入用户名">
|
||
|
|
<a class="btn btn-secondary m-r-5" id="btnSearch" data-toggle="tooltip" @click="onSearch()" href="#!"><i class="mdi mdi-magnify"></i> 搜索</a>
|
||
|
|
<button onclick="frmSearach.reset()" type="submit" class="btn btn-close">清空</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<div class="card-toolbar clearfix">
|
||
|
|
<div class="toolbar-btn-action">
|
||
|
|
<a @click="openAddDiv()" data-toggle="modal" data-target="#gridSystemModal" class="btn btn-primary m-r-10" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="table-responsive">
|
||
|
|
<div class="master-table-container">
|
||
|
|
<table class="table table-bordered">
|
||
|
|
<thead>
|
||
|
|
<tr v-if="data && data.Columns && data.Columns.length > 0">
|
||
|
|
<th class="width30">
|
||
|
|
<label class="lyear-checkbox checkbox-primary">
|
||
|
|
<input type="checkbox" @change="selectAll" id="check-all"><span></span>
|
||
|
|
</label>
|
||
|
|
</th>
|
||
|
|
<th v-for="column in data.Columns">{{ column.ColumnDescription }}</th>
|
||
|
|
<th>操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody v-if="data && data.Data">
|
||
|
|
<tr v-if="data.Columns && data.Columns.length > 0" v-for="item in data.Data">
|
||
|
|
<td>
|
||
|
|
<label class="lyear-checkbox checkbox-primary">
|
||
|
|
<input type="checkbox" name="ids[]" v-model="selectedItems" :alt="item.Id" :value="item.Id"><span></span>
|
||
|
|
</label>
|
||
|
|
</td>
|
||
|
|
<td v-for="column in data.Columns">
|
||
|
|
<template v-if="column.PropertyName === 'Token'">
|
||
|
|
{{ item[column.PropertyName].substring(0, 20) }}...
|
||
|
|
<button @click="copyToClipboard(item[column.PropertyName])" class="btn btn-link btn-sm">复制</button>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
{{ item[column.PropertyName] }}
|
||
|
|
</template>
|
||
|
|
</td>
|
||
|
|
<td class="table_opt2">
|
||
|
|
<button data-toggle="modal" @click="openEditDiv(item)" data-target="#gridSystemModal" class="btn btn-link" type="button">
|
||
|
|
<i class="mdi mdi-lead-pencil"></i> 修改
|
||
|
|
</button>
|
||
|
|
<button data-toggle="modal" @click="deleteAndConfirm(item)" data-target="#divDelBox" class="btn btn-link" type="button">
|
||
|
|
<i class="mdi mdi-do-not-disturb"></i> 删除
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@@page_control.html
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--插入或者新增-->
|
||
|
|
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal" style="display: none;">
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
|
|
<h4 class="modal-title" id="exampleModalLabel">{{title}}</h4>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<form id="frmEdit">
|
||
|
|
<input type="hidden" v-model="formData.Id" name="Id" />
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label">用户名：</label>
|
||
|
|
<input :readonly="isReadOnly" v-if="users.length > 0&& users[0]" oninput="tools.validateDatalist(this,'userList')" list="userList" v-model="formData.UserName" class="form-control" placeholder="请选择用户名">
|
||
|
|
<datalist id="userList" v-if="users.length > 0&& users[0]">
|
||
|
|
<option v-for="user in users" :value="user">{{ user }}</option>
|
||
|
|
</datalist>
|
||
|
|
<div v-else class="alert alert-warning">
|
||
|
|
JWT的信息没有配置完整，不能加载下拉列表
|
||
|
|
详细：{{bizUserErrorMessage}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="message-text" class="control-label">描述：</label>
|
||
|
|
<input type="text" placeholder="描述" v-model="formData.Description" name="Description" class="form-control">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="message-text" class="control-label">使用期限：</label>
|
||
|
|
<input :readonly="isReadOnly" type="date" v-model="formData.Expiration" name="Expiration" class="form-control">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="message-text" class="control-label">JWT Token：</label>
|
||
|
|
<textarea readonly="readonly" placeholder="JWT Token 自动生成" class="form-control" v-model="formData.Token" name="Token"></textarea>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" id="btnCloseEdit" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
|
|
<button type="button" @click="addOrUpdate()" class="btn btn-primary">保存</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var vueObj = new Vue({
|
||
|
|
el: '#apibox',
|
||
|
|
data: {
|
||
|
|
data: null,
|
||
|
|
error: null,
|
||
|
|
bizUserErrorMessage: "",
|
||
|
|
title: "添加JWT Token",
|
||
|
|
formData: {
|
||
|
|
Id: 0,
|
||
|
|
UserName: '',
|
||
|
|
Description: '',
|
||
|
|
Expiration: '',
|
||
|
|
Token: ''
|
||
|
|
},
|
||
|
|
selectedItems: [],
|
||
|
|
users: [], // 添加用户列表
|
||
|
|
isReadOnly: false // 添加只读状态
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.fetchData("");
|
||
|
|
this.fetchUsers();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fetchData: function (append) {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/GetZeroJwtTokenManagementPage" + append;
|
||
|
|
axios.get(url, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
this.data = response.data;
|
||
|
|
this.error = null;
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.error = error.message;
|
||
|
|
this.data = null;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
fetchUsers: function () {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/GetBizUsers"; // 获取用户列表的API
|
||
|
|
axios.get(url, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
if (Array.isArray(response.data)) {
|
||
|
|
this.users = response.data;
|
||
|
|
} else if (response.data.message) {
|
||
|
|
this.bizUserErrorMessage = response.data.message;
|
||
|
|
this.users = [""];
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.error = error.message;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onSearch: function (page) {
|
||
|
|
var urlParameters = "?" + tools.objectToQueryString({
|
||
|
|
__pageNumber: page,
|
||
|
|
__pageSize: tools.getValue("selPageSize"),
|
||
|
|
UserName: txtSearch.value,
|
||
|
|
OrderByType:1
|
||
|
|
});
|
||
|
|
this.fetchData(urlParameters);
|
||
|
|
},
|
||
|
|
selectAll: function (event) {
|
||
|
|
if (event.target.checked) {
|
||
|
|
// 全选
|
||
|
|
this.selectedItems = this.data.Data.map(item => item.Id);
|
||
|
|
} else {
|
||
|
|
// 全不选
|
||
|
|
this.selectedItems = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deleteAndConfirm: function (item) {
|
||
|
|
if (item == null) {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/DeleteTokenManage?Id=" + localStorage.delId;
|
||
|
|
axios.get(url, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
if (response.data.message) {
|
||
|
|
tools.alert(response.data.message);
|
||
|
|
}
|
||
|
|
this.data = response.data;
|
||
|
|
this.error = null;
|
||
|
|
this.onSearch();
|
||
|
|
btnDelClose.click();
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.error = error.message;
|
||
|
|
this.data = null;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
localStorage.delId = item.Id;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
openEditDiv: function (item) {
|
||
|
|
var th = this;
|
||
|
|
this.title = "修改JWT Token";
|
||
|
|
this.isReadOnly = true; // 设置只读状态
|
||
|
|
var urlById = "/PrivateReZeroRoute/100003/GetTokenManageById?id=" + item.Id;
|
||
|
|
if (item.Id) {
|
||
|
|
axios.get(urlById, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
th.formData = response.data;
|
||
|
|
th.formData.Expiration =tools.formatDate(th.formData.Expiration);
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.error = error.message;
|
||
|
|
this.data = null;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
openAddDiv: function () {
|
||
|
|
this.title = "添加JWT Token";
|
||
|
|
this.isReadOnly = false; // 取消只读状态
|
||
|
|
this.formData = {
|
||
|
|
Id: 0,
|
||
|
|
UserName: '',
|
||
|
|
Description: '',
|
||
|
|
Expiration: '',
|
||
|
|
Token: ''
|
||
|
|
};
|
||
|
|
btnSave.click();
|
||
|
|
},
|
||
|
|
addOrUpdate: function () {
|
||
|
|
var formData = this.formData;
|
||
|
|
var url = formData.Id ?
|
||
|
|
"/PrivateReZeroRoute/100003/UpdateTokenManage" :
|
||
|
|
"/PrivateReZeroRoute/100003/AddTokenManage";
|
||
|
|
axios.post(url, formData, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
if (response.data == true) {
|
||
|
|
btnCloseEdit.click();
|
||
|
|
this.error = null;
|
||
|
|
this.onSearch();
|
||
|
|
} else {
|
||
|
|
tools.alert(response.data.message);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.error = error.message;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
copyToClipboard: function (text) {
|
||
|
|
tools.copyText(text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});</script>
|
||
|
|
|