<template>
|
<div class="page">
|
<div class="page-title">
|
<div><h2>三员控制</h2><p>系统管理员、安全保密管理员、安全审计管理员；第一版先保留角色和分配界面</p></div>
|
</div>
|
<div class="member-grid">
|
<section v-for="role in roles" :key="role.id" class="member-card" :class="role.roleType">
|
<div class="member-icon"><i :class="roleIcon(role.roleType)"></i></div>
|
<div class="member-content">
|
<h3>{{ role.name }}</h3>
|
<p>{{ role.remark }}</p>
|
<el-tag size="small" type="info">{{ role.code }}</el-tag>
|
<div class="member-user"><span>当前用户</span><b>{{ role.roleType === 'SYSTEM_ADMIN' ? 'admin' : '待分配' }}</b></div>
|
</div>
|
</section>
|
</div>
|
<section class="info-band">
|
<h3>控制原则</h3>
|
<el-steps :active="3" align-center finish-status="success">
|
<el-step title="系统管理员" description="负责用户、角色、菜单和基础数据维护"></el-step>
|
<el-step title="安全保密管理员" description="负责安全策略和涉密标识维护"></el-step>
|
<el-step title="安全审计管理员" description="负责操作日志和访问行为审计"></el-step>
|
</el-steps>
|
</section>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
export default {
|
name: 'ThreeMember',
|
data() { return { roles: [] } },
|
created() { api.get('/system/three-member').then(res => { this.roles = (res.data && res.data.roles) || [] }) },
|
methods: {
|
roleIcon(type) { return { SYSTEM_ADMIN: 'el-icon-setting', SECURITY_ADMIN: 'el-icon-lock', AUDIT_ADMIN: 'el-icon-view' }[type] || 'el-icon-user' }
|
}
|
}
|
</script>
|
<style scoped>
|
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
.member-card { display: flex; gap: 18px; padding: 22px; border: 1px solid #dce4ec; border-radius: 4px; background: #fff; }
|
.member-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; background: #2c7fb8; font-size: 28px; flex-shrink: 0; }
|
.member-card.SECURITY_ADMIN .member-icon { background: #4f7d67; }
|
.member-card.AUDIT_ADMIN .member-icon { background: #8a6d3b; }
|
.member-content { min-width: 0; }
|
.member-content h3 { margin: 0 0 8px; color: #31465d; }
|
.member-content p { min-height: 42px; margin: 0 0 10px; color: #738296; font-size: 13px; line-height: 20px; }
|
.member-user { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 1px solid #edf1f5; color: #738296; }
|
.info-band { margin-top: 12px; padding: 20px; border: 1px solid #dce4ec; border-radius: 4px; background: #fff; }
|
.info-band h3 { margin: 0 0 20px; color: #31465d; font-size: 15px; }
|
@media (max-width: 1000px) { .member-grid { grid-template-columns: 1fr; } }
|
</style>
|
