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.
489 lines
21 KiB
489 lines
21 KiB
6 months ago
|
@@master_page.html
|
||
|
|
<link href="css/page_table_list.css" rel="stylesheet" />
|
||
|
|
<script src="js/ace/src-min/ace.js"></script>
|
||
|
|
<script src="js/ace/src-min/ext-language_tools.js"></script>
|
||
|
|
<style>
|
||
|
|
#divGroupedItems {
|
||
|
|
max-height: 300px; /* 限制高度，启用滚动条 */
|
||
|
|
overflow-y: auto; /* 垂直滚动条 */
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ddd; /* 边框颜色 */
|
||
|
|
border-radius: 5px; /* 圆角 */
|
||
|
|
background-color: #f9f9f9; /* 背景色 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#divGroupedItems .permission-group {
|
||
|
|
margin-bottom: 10px; /* 分组间距 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#divGroupedItems .permission-group label {
|
||
|
|
font-size: 14px; /* 字体大小 */
|
||
|
|
font-weight: 500; /* 字体权重 */
|
||
|
|
color: #333; /* 字体颜色 */
|
||
|
|
display: block; /* 独占一行 */
|
||
|
|
margin-bottom: 5px; /* 标签与内容间距 */
|
||
|
|
text-align:left
|
||
|
|
}
|
||
|
|
|
||
|
|
#divGroupedItems .permission-items {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap; /* 多行排列 */
|
||
|
|
gap: 8px; /* 项目间距 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#divGroupedItems .permission-items label {
|
||
|
|
font-size: 12px; /* 字体大小 */
|
||
|
|
color: #555; /* 字体颜色 */
|
||
|
|
background-color: #fff; /* 背景色 */
|
||
|
|
border: 1px solid #ddd; /* 边框颜色 */
|
||
|
|
border-radius: 3px; /* 圆角 */
|
||
|
|
padding: 4px 8px; /* 内边距 */
|
||
|
|
cursor: pointer; /* 鼠标样式 */
|
||
|
|
transition: background-color 0.3s ease; /* 动画效果 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#divGroupedItems .permission-items label:hover {
|
||
|
|
background-color: #f0f0f0; /* 悬停背景色 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#divGroupedItems .permission-items input[type="checkbox"] {
|
||
|
|
margin-right: 5px; /* 复选框与文字间距 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-users {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 8px; /* 卡片间距 */
|
||
|
|
padding: 8px;
|
||
|
|
border: 1px solid #ddd; /* 边框颜色 */
|
||
|
|
border-radius: 5px; /* 圆角 */
|
||
|
|
background-color: #f9f9f9; /* 背景色 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-users .user-badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #e6f7ff; /* 卡片背景色 */
|
||
|
|
color: #1890ff; /* 字体颜色 */
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: 12px; /* 圆角 */
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 500;
|
||
|
|
border: 1px solid #91d5ff; /* 卡片边框 */
|
||
|
|
transition: all 0.3s ease; /* 动画效果 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-users .user-badge button {
|
||
|
|
margin-left: 6px;
|
||
|
|
background-color: #ff7875; /* 删除按钮背景色 */
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s ease; /* 动画效果 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-users .user-badge button:hover {
|
||
|
|
background-color: #d9363e; /* 删除按钮悬停颜色 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-users .add-user-btn {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #52c41a; /* 添加按钮背景色 */
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s ease; /* 动画效果 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-users .add-user-btn:hover {
|
||
|
|
background-color: #389e0d; /* 添加按钮悬停颜色 */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="apibox" class="card">
|
||
|
|
<!-- 搜索栏 -->
|
||
|
|
<div class="search-bar">
|
||
|
|
<form id="frmSearch" onsubmit="return false;">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3">
|
||
|
|
<input class="form-control" type="text" id="txtPermissionName" placeholder="权限名称">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<select class="form-control" id="ddlUserName">
|
||
|
|
<option value="">请选择用户</option>
|
||
|
|
<option v-for="user in users" :key="user" :value="user">{{ user }}</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<button @click="onSearch()" id="btnSearch" class="btn btn-secondary"><i class="mdi mdi-magnify"></i> 搜索</button>
|
||
|
|
<button onclick="frmSearch.reset()" class="btn btn-close m-l-15" type="submit">清空</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 工具栏 -->
|
||
|
|
<div class="card-toolbar clearfix">
|
||
|
|
<div class="toolbar-btn-action">
|
||
|
|
<a class="btn btn-primary m-r-5" @click="openAdd()" 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-for="item in data.Data">
|
||
|
|
<td>
|
||
|
|
<label class="lyear-checkbox checkbox-primary">
|
||
|
|
<input type="checkbox" v-model="selectedItems" :value="item.Id"><span></span>
|
||
|
|
</label>
|
||
|
|
</td>
|
||
|
|
<td v-for="column in data.Columns">
|
||
|
|
{{ item[column.PropertyName] }}
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<button @click="openEdit(item)" class="btn btn-link"><i class="mdi mdi-lead-pencil"></i> 修改</button>
|
||
|
|
<button @click="deleteItem(item)" class="btn btn-link"><i class="mdi mdi-delete"></i> 删除</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
@@page_control.html
|
||
|
|
|
||
|
|
<!-- 编辑/新增模态框 -->
|
||
|
|
<div id="modalEdit" class="modal fade" tabindex="-1" role="dialog">
|
||
|
|
<div class="modal-dialog width1000 " role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">{{ modalTitle }}</h5>
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<form>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="permissionName">权限名称</label>
|
||
|
|
<input type="text" v-model="formData.Name" class="form-control" placeholder="请输入权限名称">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="description">描述</label>
|
||
|
|
<input id="description" v-model="formData.EasyDescription" class="form-control" placeholder="请输入描述" />
|
||
|
|
<input v-model="formData.Id" type="hidden" />
|
||
|
|
</div>
|
||
|
|
<!-- Users 多选下拉框 -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label>选择用户</label>
|
||
|
|
<div class="selected-users">
|
||
|
|
<!-- 循环显示已选用户 -->
|
||
|
|
<span v-if="users.length > 0&& users[0]" v-for="(user, index) in formData.Users" :key="index" class="user-badge">
|
||
|
|
{{ user }}
|
||
|
|
<button type="button" class="btn btn-sm btn-danger" @click="removeUser(index)">-</button>
|
||
|
|
</span>
|
||
|
|
<!-- 添加用户按钮 -->
|
||
|
|
<button v-if="users.length > 0&& users[0]" type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addUserModal">+</button>
|
||
|
|
<div v-else class="alert alert-warning">
|
||
|
|
JWT的信息没有配置完整，不能加载下拉列表
|
||
|
|
{{bizUserErrorMessage}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 权限接口选项 -->
|
||
|
|
<div class="form-group">
|
||
|
|
<label>授权</label>
|
||
|
|
</div>
|
||
|
|
<div id="divGroupedItems" class="form-group">
|
||
|
|
<div>
|
||
|
|
<!-- 总的 CheckBox -->
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" v-model="cbGroupedItemsRooot" @change="toggleAllGroups"> 全选
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div v-for="(group, typeName) in groupedItems" :key="typeName" class="permission-group">
|
||
|
|
<!-- 分组 CheckBox -->
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" :checked="isGroupChecked(typeName)" @change="toggleGroup(typeName)">{{ typeName }}</span>
|
||
|
|
</label>
|
||
|
|
<div class="permission-items">
|
||
|
|
<label v-for="item in group" :key="item.ZeroInterfaceList.Id">
|
||
|
|
<input type="checkbox" v-model="selectedItems" :value="item.ZeroInterfaceList.Id"> <span style="font-weight:100">{{ item.ZeroInterfaceList.Name }}</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
|
||
|
|
<button type="button" class="btn btn-primary" @click="saveData()">保存</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 添加用户模态框 -->
|
||
|
|
<div id="addUserModal" class="modal fade" tabindex="-1" role="dialog">
|
||
|
|
<div class="modal-dialog border3CCC width350" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">选择用户</h5>
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="userSelect">用户列表</label>
|
||
|
|
<select id="userSelect" class="form-control" v-model="selectedUser">
|
||
|
|
<option v-for="user in users" :value="user">{{ user }}</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
|
||
|
|
<button type="button" class="btn btn-primary" @click="confirmAddUser">添加</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var vueObj = new Vue({
|
||
|
|
el: '#apibox',
|
||
|
|
data: {
|
||
|
|
data: null,
|
||
|
|
selectedItems: [],
|
||
|
|
cbGroupedItemsRooot: false,
|
||
|
|
users: [], // 用户列表
|
||
|
|
groupedItems: [],
|
||
|
|
bizUserErrorMessage:"",
|
||
|
|
formData: {
|
||
|
|
Id: 0,
|
||
|
|
PermissionName: '',
|
||
|
|
Description: '',
|
||
|
|
Items: [],
|
||
|
|
Users: []
|
||
|
|
},
|
||
|
|
modalTitle: '',
|
||
|
|
isEdit: false,
|
||
|
|
selectedUser: null // 当前选中的用户
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取数据
|
||
|
|
fetchData: function () {
|
||
|
|
this.fetchUsers();
|
||
|
|
this.fetchPermissionPageList();
|
||
|
|
},
|
||
|
|
// 搜索
|
||
|
|
onSearch: function () {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/GetPermissionList?PermissionName=" + encodeURIComponent(document.getElementById('txtPermissionName').value) + "&userName=" + ddlUserName.value;
|
||
|
|
axios.get(url, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
this.data = response.data;
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 打开新增模态框
|
||
|
|
openAdd: function () {
|
||
|
|
this.isEdit = false;
|
||
|
|
this.modalTitle = "新增权限";
|
||
|
|
this.fetchPermissionItems(0);
|
||
|
|
$('#modalEdit').modal('show');
|
||
|
|
},
|
||
|
|
// 打开编辑模态框
|
||
|
|
openEdit: function (item) {
|
||
|
|
this.isEdit = true;
|
||
|
|
this.modalTitle = "编辑权限";
|
||
|
|
this.fetchPermissionItems(item.Id);
|
||
|
|
$('#modalEdit').modal('show');
|
||
|
|
},
|
||
|
|
// 保存数据
|
||
|
|
saveData: function () {
|
||
|
|
// 遍历 formData.Items，更新 Checked 值
|
||
|
|
if (this.formData.Items && this.formData.Items.length > 0) {
|
||
|
|
this.formData.Items.forEach(item => {
|
||
|
|
if (item.ZeroInterfaceList && this.selectedItems.includes(item.ZeroInterfaceList.Id)) {
|
||
|
|
item.Checked = true; // 如果在 selectedItems 中，设置为 true
|
||
|
|
} else {
|
||
|
|
item.Checked = false; // 如果不在 selectedItems 中，设置为 false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var url = this.isEdit ? "/PrivateReZeroRoute/100003/UpdatePermission" : "/PrivateReZeroRoute/100003/AddPermission";
|
||
|
|
axios.post(url, this.formData, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
if (response.data == true) {
|
||
|
|
$('#modalEdit').modal('hide');
|
||
|
|
this.error = null;
|
||
|
|
this.onSearch();
|
||
|
|
} else {
|
||
|
|
tools.alert(response.data.message);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 删除数据
|
||
|
|
deleteItem: function (item) {
|
||
|
|
if (confirm("确定要删除该权限吗？")) {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/DeletePermission?Id=" + item.Id;
|
||
|
|
axios.get(url, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
if (response.data) {
|
||
|
|
this.fetchData();
|
||
|
|
} else {
|
||
|
|
alert("删除失败");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 全选/取消全选
|
||
|
|
selectAll: function (event) {
|
||
|
|
if (event.target.checked) {
|
||
|
|
this.selectedItems = this.data.Data.map(item => item.Id);
|
||
|
|
} else {
|
||
|
|
this.selectedItems = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 加载权限列表
|
||
|
|
fetchPermissionPageList: function () {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/GetPermissionList";
|
||
|
|
axios.get(url, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
this.data = response.data;
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 获取用户列表
|
||
|
|
fetchUsers: function () {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/GetBizUsers";
|
||
|
|
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 => {
|
||
|
|
console.error("获取用户列表失败", error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 获取权限接口选项
|
||
|
|
fetchPermissionItems: function (id) {
|
||
|
|
var url = "/PrivateReZeroRoute/100003/GetSavePermissionModelById?id=" + id;
|
||
|
|
axios.get(url, jwHeader)
|
||
|
|
.then(response => {
|
||
|
|
this.formData = response.data;
|
||
|
|
// 遍历 formData.Items，根据 Checked 值更新 selectedItems
|
||
|
|
if (this.formData.Items && this.formData.Items.length > 0) {
|
||
|
|
this.selectedItems = this.formData.Items
|
||
|
|
.filter(item => item.Checked && item.ZeroInterfaceList) // 筛选出 Checked 为 true 的项
|
||
|
|
.map(item => item.ZeroInterfaceList.Id); // 获取对应的 ID
|
||
|
|
}
|
||
|
|
this.groupItemsByTypeName();
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error("获取权限接口选项失败", error);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 按 TypeName 分组权限接口选项
|
||
|
|
groupItemsByTypeName: function () {
|
||
|
|
this.groupedItems = this.formData.Items.reduce((groups, item) => {
|
||
|
|
const typeName = item.TypeName || "未分类";
|
||
|
|
if (!groups[typeName]) {
|
||
|
|
groups[typeName] = [];
|
||
|
|
}
|
||
|
|
groups[typeName].push(item);
|
||
|
|
return groups;
|
||
|
|
}, {});
|
||
|
|
},
|
||
|
|
// 切换总的全选状态
|
||
|
|
toggleAllGroups: function () {
|
||
|
|
if (this.cbGroupedItemsRooot) {
|
||
|
|
this.selectedItems = this.formData.Items.map(item => item.ZeroInterfaceList.Id);
|
||
|
|
} else {
|
||
|
|
this.selectedItems = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 检查分组是否全选
|
||
|
|
isGroupChecked: function (typeName) {
|
||
|
|
const group = this.groupedItems[typeName];
|
||
|
|
return group.every(item => this.selectedItems.includes(item.ZeroInterfaceList.Id));
|
||
|
|
},
|
||
|
|
// 切换分组全选状态
|
||
|
|
toggleGroup: function (typeName) {
|
||
|
|
const group = this.groupedItems[typeName];
|
||
|
|
const groupIds = group.map(item => item.ZeroInterfaceList.Id);
|
||
|
|
const isChecked = this.isGroupChecked(typeName);
|
||
|
|
|
||
|
|
if (isChecked) {
|
||
|
|
// 如果分组已全选，则取消选中
|
||
|
|
this.selectedItems = this.selectedItems.filter(id => !groupIds.includes(id));
|
||
|
|
} else {
|
||
|
|
// 如果分组未全选，则选中所有
|
||
|
|
this.selectedItems = [...new Set([...this.selectedItems, ...groupIds])];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 添加用户
|
||
|
|
confirmAddUser: function () {
|
||
|
|
if (this.selectedUser && !this.formData.Users.includes(this.selectedUser)) {
|
||
|
|
this.formData.Users.push(this.selectedUser);
|
||
|
|
$('#addUserModal').modal('hide'); // 关闭模态框
|
||
|
|
} else if (this.formData.Users.includes(this.selectedUser)) {
|
||
|
|
tools.alert("用户已存在！");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 删除用户
|
||
|
|
removeUser: function (index) {
|
||
|
|
this.formData.Users.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|