Skip to content

N
nse-ui
Commit 8ac047d6 by 周海峰
Options

用户管理

parent 451064d2
正在显示 包含 764 行增加 和 0 行删除
src/views/ruleConfig/keyManagement/index.vue 0 → 100644
<template>
<div class="key-management">
<!-- 标题 -->
<div class="title">
<i class="el-icon-lock"></i>
密钥管理
</div>
<!-- 密管选择区域 -->
<div class="section-card">
<div class="section-title">密管选择区域:</div>
<div class="section-content">
<div class="form-item">
<span class="label">密管方式</span>
<el-select v-model="keyManageType" placeholder="请选择" style="width: 200px;padding-right: 10px;">
<el-option label="三末加密机" value="threeTerm"></el-option>
</el-select>
<el-checkbox v-model="isEnabled">是否启用</el-checkbox>
<span class="tip">
* 平台只能选择一种密管方式，切换加密规则，平台可切换密管方式。
</span>
</div>
</div>
</div>
<!-- 参数配置区域 -->
<div class="section-card">
<div class="section-title">参数配置区域:</div>
<div class="section-content">
<div class="button-group">
<el-button type="primary">下载配置模板</el-button>
<el-button type="primary">上传配置文件</el-button>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="footer">
<el-button type="primary">编辑</el-button>
</div>
</div>
</template>
<script>
/**
* 规则管理-密钥管理
*/
export default {
name: 'KeyManagement',
data() {
return {
keyManageType: '三末加密机',
isEnabled: false
}
}
}
</script>
<style lang="scss" scoped>
.key-management {
padding: 20px;
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
i {
color: #409EFF;
margin-right: 8px;
}
}
.section-card {
background: #fff;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
.section-title {
color: #409EFF;
font-size: 14px;
margin-bottom: 20px;
position: relative;
padding-left: 12px;
&:before {
content: '';
width: 4px;
height: 14px;
background: #409EFF;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
.section-content {
.form-item {
display: flex;
align-items: center;
.label {
width: 100px;
margin-right: 10px;
}
.tip {
color: #f56c6c;
margin-left: 10px;
font-size: 12px;
}
}
.button-group {
button {
margin-right: 10px;
}
}
}
}
.footer {
text-align: center;
margin-top: 20px;
}
}
</style>
\ No newline at end of file
src/views/ruleConfig/规则管理 0 → 100644
++ "b/src/views/ruleConfig/\350\247\204\345\210\231\347\256\241\347\220\206"
src/views/safetyManagement/appUserConfig/appUserConfig.md 0 → 100644
# 应用用户维护
\ No newline at end of file
src/views/safetyManagement/groupConfig/groupConfig.md 0 → 100644
# 用户组维护
\ No newline at end of file
src/views/safetyManagement/roleConfig/index.vue 0 → 100644
<template>
<div class="user-config">
<!-- 标题 -->
<div class="title">
<el-icon><User /></el-icon>
角色
</div>
<!-- 搜索和操作区域 -->
<div class="search-area">
<el-form :inline="true" :model="searchForm" class="search-form">
<div class="left-area">
<el-form-item label="角色名:">
<el-input v-model="searchForm.roleName" placeholder="请输入角色名"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input v-model="searchForm.remark" placeholder="请输入备注"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
</el-form-item>
</div>
<div class="right-area">
<el-button type="primary" icon="Plus" @click="handleAdd">新增角色</el-button>
</div>
</el-form>
</div>
<!-- 列表 -->
<div class="user-list">
<div class="user-grid">
<div v-for="(user, index) in userList" :key="index" class="user-card">
<div class="user-info">
<div class="avatar">
<el-avatar :size="50" icon="User"></el-avatar>
</div>
<div class="info">
<div class="roleName">角色名: {{ user.roleName }}</div>
<div class="remark">备注: {{ user.remark }}</div>
</div>
<!-- 遮罩层和操作按钮 -->
<div class="hover-mask">
<div class="operation-buttons">
<div class="operation-btn" @click="handleDelete(user)">
<i class="el-icon-delete"></i>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<i class="el-icon-edit"></i>
<span>编辑</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination">
<div class="pagination-info">共有记录 1条，每页显示 8条，共 1页</div>
<el-pagination
background
layout="prev, pager, next, jumper"
:total="total"
:current-page.sync="currentPage"
:page-size="pageSize"
@current-change="handlePageChange">
</el-pagination>
</div>
<!-- 编辑弹窗 -->
<role-edit
v-model:visible="editVisible"
:form-data="editData"
@success="handleEditSuccess"
/>
</div>
</template>
<script>
import RoleEdit from './edit.vue'
export default {
name: 'RoleConfig',
components: {
RoleEdit
},
data() {
return {
searchForm: {
name: '',
roleName: '',
remark: ''
},
userList: [
{
realname: 'admin',
roleName: 'admin',
remark: ''
}
],
total: 1,
currentPage: 1,
pageSize: 8,
editVisible: false,
editData: null
}
},
methods: {
handleSearch() {
// 实现搜索逻辑
},
handleAdd() {
// 打开新增角色弹窗
this.editData = null
this.editVisible = true
},
handlePageChange(page) {
// 实现分页逻辑
},
handleDelete(row) {
// 实现删除角色逻辑
this.$confirm('确认删除该角色吗？', '提示', {
type: 'warning'
}).then(() => {
// 调用删除接口
console.log('删除角色', row)
}).catch(() => {})
},
handleEdit(row) {
// 打开编辑角色弹窗
this.editData = { ...row }
this.editVisible = true
},
handleEditSuccess() {
// 编辑成功后的回调
this.editVisible = false
// 刷新列表数据
this.getList()
},
getList() {
// 获取角色列表数据
}
}
}
</script>
<style lang="scss" scoped>
.user-config {
padding: 20px;
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
i {
color: #409EFF;
margin-right: 8px;
font-size: 20px;
}
}
.search-area {
background: #fff;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
.search-form {
display: flex;
justify-content: space-between;
align-items: center;
.left-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.right-area {
margin-left: 20px;
}
}
.el-form-item {
margin-bottom: 0;
}
}
.user-list {
margin-bottom: 20px;
.user-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.user-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.user-info {
display: flex;
align-items: center;
padding: 20px;
position: relative;
cursor: pointer;
height: 100%;
.avatar {
margin-right: 15px;
}
.info {
flex: 1;
.name {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
.roleName, .remark {
color: #666;
font-size: 14px;
margin-bottom: 5px;
}
}
.hover-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
.operation-buttons {
display: flex;
gap: 30px;
.operation-btn {
display: flex;
flex-direction: column;
align-items: center;
color: white;
cursor: pointer;
i {
font-size: 24px;
margin-bottom: 8px;
}
span {
font-size: 14px;
}
&:hover {
color: #409EFF;
}
}
}
}
&:hover {
.hover-mask {
display: flex;
}
}
}
.operation-time {
color: #666;
i {
margin-right: 5px;
}
}
}
.pagination {
background: #fff;
padding: 15px 20px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.pagination-info {
color: #666;
font-size: 14px;
}
}
}
</style>
src/views/safetyManagement/roleConfig/roleConfig.md 0 → 100644
# 角色维护
\ No newline at end of file
src/views/safetyManagement/safetyManagement.md 0 → 100644
# 用户管理模块 包含
# 用户
# 用户组
# 角色
# 应用用户
src/views/safetyManagement/userConfig/index.vue 0 → 100644
<template>
<div class="user-config">
<!-- 标题 -->
<div class="title">
<el-icon><User /></el-icon>
用户
</div>
<!-- 搜索和操作区域 -->
<div class="search-area">
<el-form :inline="true" :model="searchForm" class="search-form">
<div class="left-area">
<el-form-item label="姓名:">
<el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="用户名:">
<el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input v-model="searchForm.remark" placeholder="请输入备注"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
</el-form-item>
</div>
<div class="right-area">
<el-button type="primary" icon="Plus" @click="handleAdd">新增用户</el-button>
</div>
</el-form>
</div>
<!-- 用户列表 -->
<div class="user-list">
<div class="user-grid">
<div v-for="(user, index) in userList" :key="index" class="user-card">
<div class="user-info">
<div class="avatar">
<el-avatar :size="50" icon="User"></el-avatar>
</div>
<div class="info">
<div class="name">{{ user.realname }}</div>
<div class="username">用户名: {{ user.username }}</div>
<div class="remark">备注: {{ user.remark }}</div>
</div>
<!-- 遮罩层和操作按钮 -->
<div class="hover-mask">
<div class="operation-buttons">
<div class="operation-btn" @click="handleDelete(user)">
<i class="el-icon-delete"></i>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<i class="el-icon-edit"></i>
<span>编辑</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination">
<div class="pagination-info">共有记录 1条，每页显示 8条，共 1页</div>
<el-pagination
background
layout="prev, pager, next, jumper"
:total="total"
:current-page.sync="currentPage"
:page-size="pageSize"
@current-change="handlePageChange">
</el-pagination>
</div>
<!-- 编辑弹窗 -->
<user-edit
v-model:visible="editVisible"
:form-data="editData"
@success="handleEditSuccess"
/>
</div>
</template>
<script>
import UserEdit from './edit.vue'
export default {
name: 'UserConfig',
components: {
UserEdit
},
data() {
return {
searchForm: {
name: '',
username: '',
remark: ''
},
userList: [
{
realname: 'admin',
username: 'admin',
remark: ''
}
],
total: 1,
currentPage: 1,
pageSize: 8,
editVisible: false,
editData: null
}
},
methods: {
handleSearch() {
// 实现搜索逻辑
},
handleAdd() {
// 打开新增用户弹窗
this.editData = null
this.editVisible = true
},
handlePageChange(page) {
// 实现分页逻辑
},
handleDelete(row) {
// 实现删除用户逻辑
this.$confirm('确认删除该用户吗？', '提示', {
type: 'warning'
}).then(() => {
// 调用删除接口
console.log('删除用户', row)
}).catch(() => {})
},
handleEdit(row) {
// 打开编辑用户弹窗
this.editData = { ...row }
this.editVisible = true
},
handleEditSuccess() {
// 编辑成功后的回调
this.editVisible = false
// 刷新列表数据
this.getList()
},
getList() {
// 获取用户列表数据
}
}
}
</script>
<style lang="scss" scoped>
.user-config {
padding: 20px;
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
i {
color: #409EFF;
margin-right: 8px;
font-size: 20px;
}
}
.search-area {
background: #fff;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
.search-form {
display: flex;
justify-content: space-between;
align-items: center;
.left-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.right-area {
margin-left: 20px;
}
}
.el-form-item {
margin-bottom: 0;
}
}
.user-list {
margin-bottom: 20px;
.user-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.user-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.user-info {
display: flex;
align-items: center;
padding: 20px;
position: relative;
cursor: pointer;
height: 100%;
.avatar {
margin-right: 15px;
}
.info {
flex: 1;
.name {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
.username, .remark {
color: #666;
font-size: 14px;
margin-bottom: 5px;
}
}
.hover-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
.operation-buttons {
display: flex;
gap: 30px;
.operation-btn {
display: flex;
flex-direction: column;
align-items: center;
color: white;
cursor: pointer;
i {
font-size: 24px;
margin-bottom: 8px;
}
span {
font-size: 14px;
}
&:hover {
color: #409EFF;
}
}
}
}
&:hover {
.hover-mask {
display: flex;
}
}
}
.operation-time {
color: #666;
i {
margin-right: 5px;
}
}
}
.pagination {
background: #fff;
padding: 15px 20px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.pagination-info {
color: #666;
font-size: 14px;
}
}
}
</style>
src/views/safetyManagement/userConfig/userConfig.md 0 → 100644
# 用户维护
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论