fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2026-03-31 

角色管理页面【权限授权】对话框样式优化
master
fengyuan_yang 2 weeks ago
parent
e91a950c1a
commit
4476dfa336
1 changed files with 95 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 162
      src/views/modules/sys/role-add-or-update.vue

162
src/views/modules/sys/role-add-or-update.vue
View File

@ -1,52 +1,59 @@
<template>
<el-dialog class="sl-menu-item" width="900px" :title="!dataForm.id ? buttons.add :buttons.edit " :close-on-click-modal="false" :visible.sync="visible">
<el-dialog class="sl-menu-item custom-role-dialog" width="900px" :title="!dataForm.id ? buttons.add :buttons.edit " :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item :label="buttons.roleName||'角色名称'" prop="roleName">
<el-input style="width: 100%" v-model="dataForm.roleName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="buttons.remark||'备注'" prop="remark">
<el-input style="width: 100%" v-model="dataForm.remark" placeholder="备注"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item size="mini" :label="buttons.authorize||'授权'">
<el-row>
<el-col :span="24">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
clearable
style="margin-bottom: 10px; width: 100%;">
</el-input>
<div class="form-section">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :label="buttons.roleName||'角色名称'" prop="roleName">
<el-input style="width: 100%" v-model="dataForm.roleName" placeholder="请输入角色名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col class="down-tree" :span="24">
<el-tree
:data="menuList"
:props="menuListTreeProps"
node-key="menuId"
ref="menuListTree"
:default-expand-all="false"
:filter-node-method="filterNode"
@check="handleTreeCheck"
show-checkbox>
<span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex; align-items: center; width: 100%;">
<span style="margin-right: 20px; white-space: nowrap;">{{ node.label }}</span>
<span v-if="data.buttonList && data.buttonList.length > 0" style="flex: 1; overflow-x: auto;">
<el-checkbox-group v-model="data.checkedButtons" @change="handleButtonChange(data)" @click.native.stop style="display: inline-block;">
<el-checkbox v-for="btn in data.buttonList" :key="btn.menuId" :label="Number(btn.menuId)">{{ btn.name }}</el-checkbox>
</el-checkbox-group>
</span>
</span>
</el-tree>
<el-col :span="12">
<el-form-item :label="buttons.remark||'备注'" prop="remark">
<el-input style="width: 100%" v-model="dataForm.remark" placeholder="请输入备注信息"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</div>
<div class="auth-section">
<el-form-item size="mini" :label="buttons.authorize||'权限授权'">
<el-row>
<el-col :span="24">
<el-input
placeholder="输入菜单或按钮名称进行过滤"
v-model="filterText"
clearable
prefix-icon="el-icon-search"
@keyup.enter.native.stop
class="filter-input">
</el-input>
</el-col>
</el-row>
<el-row>
<el-col class="down-tree" :span="24">
<el-tree
:data="menuList"
:props="menuListTreeProps"
node-key="menuId"
ref="menuListTree"
:default-expand-all="false"
:filter-node-method="filterNode"
@check="handleTreeCheck"
show-checkbox>
<span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex; align-items: center; width: 100%;">
<span style="margin-right: 20px; white-space: nowrap;">{{ node.label }}</span>
<span v-if="data.buttonList && data.buttonList.length > 0" style="flex: 1; overflow-x: auto;">
<el-checkbox-group v-model="data.checkedButtons" @change="handleButtonChange(data)" @click.native.stop style="display: inline-block;">
<el-checkbox v-for="btn in data.buttonList" :key="btn.menuId" :label="Number(btn.menuId)">{{ btn.name }}</el-checkbox>
</el-checkbox-group>
</span>
</span>
</el-tree>
</el-col>
</el-row>
</el-form-item>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ buttons.close || '关闭' }}</el-button>
@ -119,7 +126,7 @@ export default {
if (node.children && node.children.length > 0) {
let normalChildren = []
for (let child of node.children) {
if (child.specificType === 'button' || child.type === 2) {
if (child.type === 2) {
node.buttonList.push(child)
} else {
normalChildren.push(child)
@ -273,30 +280,51 @@ export default {
</script>
<style lang="scss">
.down-tree {
height: 400px;
display: block;
overflow-y: auto;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 10px;
background-color: #fff;
}
.custom-tree-node {
.el-checkbox {
margin-right: 15px;
.custom-role-dialog {
.el-dialog__body {
padding: 20px 30px;
}
.el-checkbox__label {
padding-left: 5px;
.form-section {
margin-bottom: 10px;
}
.auth-section {
border-top: 1px solid #ebeef5;
padding-top: 20px;
}
.filter-input {
margin-bottom: 15px;
}
.down-tree {
height: 400px;
display: block;
overflow-y: auto;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
background-color: #fafafa;
}
.el-tree {
background-color: transparent;
}
.custom-tree-node {
.el-checkbox {
margin-right: 15px;
}
.el-checkbox__label {
padding-left: 5px;
color: #606266;
}
}
}
/* 优化树形节点高度和样式 */
.el-tree-node__content {
height: auto;
min-height: 36px;
padding-top: 4px;
padding-bottom: 4px;
/* 优化树形节点高度和样式 */
.el-tree-node__content {
height: auto;
min-height: 36px;
padding-top: 4px;
padding-bottom: 4px;
}
.el-tree-node__content:hover {
background-color: #f0f7ff;
}
}
</style>
Write Preview
Loading…
Cancel
Save