角色配置修改菜单,车库按钮注释

This commit is contained in:
shenyanpei
2021-08-30 15:32:16 +08:00
parent 59171f9543
commit ebe387e932
2 changed files with 710 additions and 602 deletions
+190 -82
View File
@@ -32,17 +32,20 @@
class="common-button-primary add-button" class="common-button-primary add-button"
@click="roleAdd" @click="roleAdd"
v-btn-permission="'93e75b6ec0b2b6b0b40d2b11adeba88a'" v-btn-permission="'93e75b6ec0b2b6b0b40d2b11adeba88a'"
size="mini">配置角色权限</el-button> size="mini">配置角色权限
</el-button>
<el-button type="primary" <el-button type="primary"
class="common-button-primary add-button" class="common-button-primary add-button"
@click="roleAddData" @click="roleAddData"
v-btn-permission="'bb2571b08179edb36880aae169cb2e54'" v-btn-permission="'bb2571b08179edb36880aae169cb2e54'"
size="mini">配置数据权限</el-button> size="mini">配置数据权限
</el-button>
<el-button type="primary" <el-button type="primary"
class="common-button-primary add-button" class="common-button-primary add-button"
@click="RolesAdd(1)" @click="RolesAdd(1)"
v-btn-permission="'3e0cee86b3522d4233df8f1f11ab02c7'" v-btn-permission="'3e0cee86b3522d4233df8f1f11ab02c7'"
size="mini">新增角色</el-button> size="mini">新增角色
</el-button>
</div> </div>
<div class="content"> <div class="content">
<el-table <el-table
@@ -74,7 +77,7 @@
label="角色状态" label="角色状态"
width="170px"> width="170px">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.useFlag===0?'禁用':'启用' }}</span> <span>{{ scope.row.useFlag === 0 ? '禁用' : '启用' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@@ -95,8 +98,12 @@
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<i class="iconfont">&#xe61e;</i> <i class="iconfont">&#xe61e;</i>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-btn-permission="'38e362493fd7603dc7fddd1f3ac8971c'" :command="[scope.row, '编辑']">编辑</el-dropdown-item> <el-dropdown-item v-btn-permission="'38e362493fd7603dc7fddd1f3ac8971c'" :command="[scope.row, '编辑']">
<el-dropdown-item v-btn-permission="'025368d14944c4c4c86da29109b5f383'" :command="[scope.row, '删除']">删除</el-dropdown-item> 编辑
</el-dropdown-item>
<el-dropdown-item v-btn-permission="'025368d14944c4c4c86da29109b5f383'" :command="[scope.row, '删除']">
删除
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
@@ -118,20 +125,24 @@
v-if="modalshowflag" v-if="modalshowflag"
node-key="id" node-key="id"
class="filter-tree" class="filter-tree"
v-loading="twoLoading"
:data="treeData2" :data="treeData2"
:props="defaultProps2" :props="defaultProps2"
:default-checked-keys="nodeList" :default-checked-keys="nodeList"
:expand-on-click-node="false" :expand-on-click-node="false"
default-expand-all default-expand-all
highlight-current highlight-current
show-checkbox :show-checkbox="true"
check-strictly :check-strictly="true"
@check="nodeClick2"
ref="tree2"> ref="tree2">
</el-tree> </el-tree>
</div> </div>
<div slot="footer"> <div slot="footer">
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="closeDialog">取消</el-button> <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="closeDialog">取消</el-button>
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="confirmDialog">确定</el-button> <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="confirmDialog">
确定
</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog
@@ -151,14 +162,18 @@
default-expand-all default-expand-all
highlight-current highlight-current
:expand-on-click-node="false" :expand-on-click-node="false"
show-checkbox :show-checkbox="true"
check-strictly :check-strictly="true"
@check="nodeClick"
ref="tree3"> ref="tree3">
</el-tree> </el-tree>
</div> </div>
<div slot="footer"> <div slot="footer">
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="closeDialogData">取消</el-button> <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="closeDialogData">取消
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="confirmDialogData">确定</el-button> </el-button>
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="confirmDialogData">
确定
</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog
@@ -207,7 +222,8 @@
</div> </div>
<div slot="footer"> <div slot="footer">
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="AddRoleCancel">取消</el-button> <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="AddRoleCancel">取消</el-button>
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="AddRoleOk">确定</el-button> <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="AddRoleOk">确定
</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-drawer <el-drawer
@@ -240,8 +256,10 @@
icon="el-icon-check" icon="el-icon-check"
type="primary" type="primary"
@click="SuperiorRoleOk" @click="SuperiorRoleOk"
>确定</el-button> >确定
<el-button size="mini" class="common-button-default" icon="el-icon-close" @click="SuperiorRoleCancle">取消</el-button> </el-button>
<el-button size="mini" class="common-button-default" icon="el-icon-close" @click="SuperiorRoleCancle">取消
</el-button>
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
@@ -250,8 +268,9 @@
<script> <script>
export default { export default {
name: 'role-manage', name: 'role-manage',
data () { data() {
return { return {
twoLoading: false,
type: '', // 新增/编辑状态 type: '', // 新增/编辑状态
addRoleTitle: '', addRoleTitle: '',
SuperiorRoleData: {}, SuperiorRoleData: {},
@@ -259,11 +278,11 @@ export default {
SuperiorRoleModel: false, SuperiorRoleModel: false,
addFormRules: { addFormRules: {
name: [ name: [
{ required: true, message: '请输入角色名称', trigger: 'blur' }, {required: true, message: '请输入角色名称', trigger: 'blur'},
{type: 'string', max: 100, message: '角色名称不能超过100个字符', trigger: 'blur'} {type: 'string', max: 100, message: '角色名称不能超过100个字符', trigger: 'blur'}
], ],
useFlag: [ useFlag: [
{ required: true, message: '请选择角色状态', trigger: 'change' }, {required: true, message: '请选择角色状态', trigger: 'change'},
] ]
}, },
addForm: { addForm: {
@@ -313,7 +332,7 @@ export default {
} }
}, },
methods: { methods: {
handleCommand (command) { handleCommand(command) {
switch (command[1]) { switch (command[1]) {
case '编辑': case '编辑':
this.RolesAdd(0, command[0]) this.RolesAdd(0, command[0])
@@ -323,7 +342,7 @@ export default {
break break
} }
}, },
deleteRole (row) { // 删除角色 deleteRole(row) { // 删除角色
this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', { this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@@ -347,33 +366,33 @@ export default {
}); });
}); });
}, },
drawerCheck (data) { drawerCheck(data) {
var getlist = this.$refs.tree4.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()); var getlist = this.$refs.tree4.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
if(getlist.length == 1) { if (getlist.length == 1) {
}else { } else {
this.$refs.tree4.setCheckedKeys([data.id]); this.$refs.tree4.setCheckedKeys([data.id]);
} }
this.SuperiorRoleData = data this.SuperiorRoleData = data
}, },
SuperiorRoleOk () { // 上级角色确定 SuperiorRoleOk() { // 上级角色确定
this.addForm.parentId = this.SuperiorRoleData.id this.addForm.parentId = this.SuperiorRoleData.id
this.addForm.parent = this.SuperiorRoleData.name this.addForm.parent = this.SuperiorRoleData.name
this.nodeList3 = [] this.nodeList3 = []
this.nodeList3.push(this.addForm.parentId) this.nodeList3.push(this.addForm.parentId)
this.SuperiorRoleModel = false this.SuperiorRoleModel = false
}, },
SuperiorRoleCancle () { // 上级角色取消 SuperiorRoleCancle() { // 上级角色取消
this.SuperiorRoleModel = false this.SuperiorRoleModel = false
}, },
AddRoleCancel () { // 新增角色取消 AddRoleCancel() { // 新增角色取消
this.$refs['addForm'].resetFields(); this.$refs['addForm'].resetFields();
this.addModel = false this.addModel = false
}, },
AddRoleOk () { // 新增角色确定 AddRoleOk() { // 新增角色确定
this.$refs['addForm'].validate((valid) => { this.$refs['addForm'].validate((valid) => {
if (valid) { if (valid) {
if (this.type === 1) { // 新增 if (this.type === 1) { // 新增
this.$http.postData('sarRole/role',this.addForm , {}, res=> { this.$http.postData('sarRole/role', this.addForm, {}, res => {
if (res.ok) { if (res.ok) {
this.$message.success('新增角色成功') this.$message.success('新增角色成功')
this.addModel = false this.addModel = false
@@ -384,7 +403,7 @@ export default {
} }
}) })
} else { // 编辑 } else { // 编辑
this.$http.putData('sarRole/role',this.addForm , {}, res=> { this.$http.putData('sarRole/role', this.addForm, {}, res => {
if (res.ok) { if (res.ok) {
this.$message.success('修改角色信息成功') this.$message.success('修改角色信息成功')
this.addModel = false this.addModel = false
@@ -399,10 +418,10 @@ export default {
} }
}) })
}, },
SuperiorRole () { // 点击选择上级角色按钮 SuperiorRole() { // 点击选择上级角色按钮
this.SuperiorRoleModel = true this.SuperiorRoleModel = true
}, },
RolesAdd (type, row) { // 新增/编辑角色按钮 RolesAdd(type, row) { // 新增/编辑角色按钮
this.type = type this.type = type
if (type === 1) { if (type === 1) {
this.addRoleTitle = '新增角色' this.addRoleTitle = '新增角色'
@@ -423,79 +442,147 @@ export default {
} }
this.addModel = true this.addModel = true
}, },
getTree3 () { getTree3() {
this.$http.get('sarResource/ts-resource', {}, {}, res=> { this.$http.get('sarResource/ts-resource', {}, {}, res => {
if (res.ok) { if (res.ok) {
this.treeData3 = res.data this.treeData3 = res.data
} }
}) })
}, },
confirmDialogData () { confirmDialogData() {
this.$http.postData('sarRole/role/resource', { this.$http.postData('sarRole/role/resource', {
resourceIds: this.$refs.tree3.getCheckedKeys().concat(this.$refs.tree3.getHalfCheckedKeys()), resourceIds: this.$refs.tree3.getCheckedKeys().concat(this.$refs.tree3.getHalfCheckedKeys()),
roleId: this.id roleId: this.id
}, {}, res=> { }, {}, res => {
if (res.ok) { if (res.ok) {
this.$message.success('设置权限成功') this.$message.success('设置权限成功')
this.modalflag = false this.modalflag = false
} }
}) })
}, },
closeDialogData () { closeDialogData() {
this.modalflag = false this.modalflag = false
}, },
roleAddData () { /** 父子节点的级联 */
nodeClick(currentObj, treeStatus) {
// 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
this.selectedParent(currentObj)
this.selectedParent2(currentObj)
// 统一处理子节点为相同的勾选状态
this.uniteChildSame(currentObj, true)
} else {
// 未选中 处理子节点全部未选中
if (currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, false)
}
}
},
// 统一处理子节点为相同的勾选状态
uniteChildSame(treeList, isSelected) {
// this.$refs.tree3.setChecked(treeList.id, isSelected)
this.$refs.tree2.setChecked(treeList.id, isSelected)
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected)
}
},
// 统一处理父节点为选中
selectedParent(currentObj) {
let currentNode = this.$refs.tree3.getNode(currentObj)
if (currentNode.parent.key !== undefined) {
this.$refs.tree3.setChecked(currentNode.parent, true)
this.selectedParent(currentNode.parent)
}
},
nodeClick2(currentObj, treeStatus) {
// 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
this.selectedParent2(currentObj)
// 统一处理子节点为相同的勾选状态
this.uniteChildSame2(currentObj, true)
} else {
// 未选中 处理子节点全部未选中
if (currentObj.children.length !== 0) {
this.uniteChildSame2(currentObj, false)
}
}
},
// 统一处理子节点为相同的勾选状态
uniteChildSame2(treeList, isSelected) {
this.$refs.tree2.setChecked(treeList.id, isSelected)
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame2(treeList.children[i], isSelected)
}
},
selectedParent2(currentObj) {
let currentNode = this.$refs.tree2.getNode(currentObj)
if (currentNode.parent.key !== undefined) {
this.$refs.tree2.setChecked(currentNode.parent, true)
this.selectedParent2(currentNode.parent)
}
},
roleAddData() {
this.$http.get('sarRole/role/resource', { this.$http.get('sarRole/role/resource', {
roleId: this.id roleId: this.id
}, {}, res=> { }, {}, res => {
if (res.ok) { if (res.ok) {
this.nodeList2 = res.data this.nodeList2 = res.data
this.modalflag = true this.modalflag = true
} }
}) })
}, },
closeDialog () { closeDialog() {
this.modalshowflag = false this.modalshowflag = false
}, },
confirmDialog () { confirmDialog() {
this.$http.postData('sarRole/role/menu', { this.$http.postData('sarRole/role/menu', {
menuIds: this.$refs.tree2.getCheckedKeys().concat(this.$refs.tree2.getHalfCheckedKeys()), menuIds: this.$refs.tree2.getCheckedKeys().concat(this.$refs.tree2.getHalfCheckedKeys()),
roleId: this.id roleId: this.id
}, {}, res=> { }, {}, res => {
if (res.ok) { if (res.ok) {
this.$message.success('设置权限成功') this.$message.success('设置权限成功')
this.modalshowflag = false this.modalshowflag = false
} }
}) })
}, },
getTree2 () { getTree2() {
this.$http.get('lawss/sarMenu', {}, {}, res=> { this.$http.get('lawss/sarMenu', {}, {}, res => {
if (res.ok) { if (res.ok) {
this.treeData2 = res.data this.treeData2 = res.data
this.twoLoading = false
} }
}) })
}, },
roleAdd () { // 配置角色资源 roleAdd() { // 配置角色资源
this.treeTwoLoading = true
this.$http.get('sarRole/role/menu', { this.$http.get('sarRole/role/menu', {
roleId: this.id roleId: this.id,
}, {}, res=> { }, {}, res => {
if (res.ok) { if (res.ok) {
this.modalshowflag = true
this.nodeList = res.data this.nodeList = res.data
this.twoLoading = true
this.modalshowflag = true
this.getTree2()
} }
}) })
}, },
handleNodeClick (data) { handleNodeClick(data) {
this.id = data.id this.id = data.id
this.getData() this.getData()
}, },
getData () { getData() {
this.$http.get('sarRole/role/id', { this.$http.get('sarRole/role/id', {
roleId: this.id roleId: this.id
},{ }, {
_this: this, _this: this,
loading: 'Loading' loading: 'Loading'
}, res=> { }, res => {
if (res.ok) { if (res.ok) {
this.data = [] this.data = []
this.data.push(res.data) this.data.push(res.data)
@@ -506,14 +593,14 @@ export default {
if (!value) return true; if (!value) return true;
return data.name.indexOf(value) !== -1; return data.name.indexOf(value) !== -1;
}, },
treeCollapse () { treeCollapse() {
this.sideClose = !this.sideClose this.sideClose = !this.sideClose
}, },
getTree () { getTree() {
this.$http.get('sarRole/role', {}, { this.$http.get('sarRole/role', {}, {
_this: this, _this: this,
loading: 'treeLoading' loading: 'treeLoading'
}, res=> { }, res => {
this.treeData = res.data this.treeData = res.data
this.id = res.data[0].id this.id = res.data[0].id
this.getData() this.getData()
@@ -525,68 +612,79 @@ export default {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
} }
}, },
computed:{ computed: {
newForm() { newForm() {
return JSON.parse(JSON.stringify(this.addForm)) return JSON.parse(JSON.stringify(this.addForm))
} }
}, },
mounted () { mounted() {
this.getTree() this.getTree()
this.getTree2()
this.getTree3() this.getTree3()
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '~@/assets/styles/mixins'; @import '~@/assets/styles/mixins';
.role-manage {
.role-manage {
display: flex; display: flex;
height: 100%; height: 100%;
/deep/.el-form-item__content {
/deep/ .el-form-item__content {
width: 100%; width: 100%;
} }
.filter-tree1 { .filter-tree1 {
height: 100%; height: 100%;
} }
.tree-close{
.tree{ .tree-close {
.tree {
left: -200px !important; left: -200px !important;
} }
.tree-right{
.tree-right {
width: calc(~'100% - 15px') !important; width: calc(~'100% - 15px') !important;
} }
.side-bar-collapse{
.side-bar-collapse {
background: #5596CC !important; background: #5596CC !important;
color: #FFF; color: #FFF;
} }
} }
.tree-closed { .tree-closed {
width: 15px !important; width: 15px !important;
} }
.tree-content { .tree-content {
background: #fff; background: #fff;
width: 16%; width: 16%;
position: relative; position: relative;
.tree { .tree {
width: 95%; width: 95%;
position: absolute; position: absolute;
left: 0; left: 0;
} }
.tree-collapse { .tree-collapse {
position: absolute; position: absolute;
right: 0; right: 0;
} }
} }
.tree-right { .tree-right {
overflow-y: hidden; overflow-y: hidden;
padding:0; padding: 0;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.content{
.content {
padding: 0px; padding: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -594,31 +692,41 @@ export default {
flex: auto; flex: auto;
//height: calc(~'100% - 105px - 56px'); //height: calc(~'100% - 105px - 56px');
} }
.pagination{
.pagination {
position: static; position: static;
width: 100% !important; width: 100% !important;
left: 0 !important; left: 0 !important;
} }
} }
} }
.myDialog {
/deep/.el-tree { /deep/ .el-dialog {
height: 300px; margin-top: 9vh !important;
width: 35%;
}
.myDialog {
/deep/ .el-tree {
height: 500px;
overflow: auto; overflow: auto;
} }
} }
/deep/.el-select__tags {
/deep/ .el-select__tags {
overflow-x: hidden; overflow-x: hidden;
} }
/deep/.width-all{
/deep/ .width-all {
width: 100%; width: 100%;
} }
.laws-tree{
/deep/.clearable { .laws-tree {
/deep/ .clearable {
top: 20px; top: 20px;
} }
} }
.add-form-item {
.add-form-item {
display: flex; display: flex;
} }
</style> </style>
@@ -39,9 +39,9 @@
</div> </div>
</el-card> </el-card>
<div class="action-bar"> <div class="action-bar">
<el-button plain class="common-button-primary" v-btn-permission="''" size="mini" @click="transfer">调取</el-button> <!-- <el-button plain class="common-button-primary" v-btn-permission="''" size="mini" @click="transfer">调取</el-button>-->
<el-button plain class="common-button-primary" v-btn-permission="''" size="mini" @click="deleteList">批量删除 <!-- <el-button plain class="common-button-primary" v-btn-permission="''" size="mini" @click="deleteList">批量删除-->
</el-button> <!-- </el-button>-->
<el-button class="common-button-default export-button" <el-button class="common-button-default export-button"
size="mini" @click="exportStandard" size="mini" @click="exportStandard"
v-btn-permission="''" v-btn-permission="''"