作者 朱兆平

权限配置优化

... ... @@ -15,6 +15,7 @@ import 'font-awesome/css/font-awesome.min.css'
import * as socketApi from './api/socket'
import '@/styles/index.scss'
import '@/styles/element-ui.scss'
import sys_init from '@/common/init/sys_init'
... ...
... ... @@ -83,3 +83,7 @@
display: block
}
}
.el-col {
margin-right: 0px;
}
\ No newline at end of file
... ...
... ... @@ -52,7 +52,7 @@
<!--编辑界面-->
<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
<el-form-item label="ID">
<span>{{editForm.permissionId}}</span>
</el-form-item>
... ... @@ -81,8 +81,7 @@
inactive-color="#ff4949"
active-text="是"
inactive-text="否"
active-value="1"
inactive-value="0">
>
</el-switch>
</el-form-item>
</el-form>
... ... @@ -94,25 +93,46 @@
<!--新增界面-->
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="权限名称" prop="name">
<el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称:例如:用户新增权限"></el-input>
</el-form-item>
<el-form-item label="权限描述" prop="description">
<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述:例如:用户管理员"></el-input>
</el-form-item>
<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
<el-row>
<el-col :span="12">
<el-form-item label="权限名称" prop="name">
<el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称:例如:用户新增权限"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="权限描述" prop="description">
<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述:例如:用户管理员"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="权限总路径" prop="path">
<el-input v-model="addForm.path" auto-complete="off" placeholder="请输入父目录ID:例如:123"></el-input>
</el-form-item>
<el-form-item label="权限路径" prop="url">
<el-input v-model="addForm.url" auto-complete="off" placeholder="请输入权限描述:例如:/user/update"></el-input>
</el-form-item>
<el-form-item label="权限排序" prop="permissionOrder">
<el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序:例如:123"></el-input>
</el-form-item>
<el-form-item label="父目录ID" prop="parentId">
<el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入父目录ID:例如:123"></el-input>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="权限排序" prop="permissionOrder">
<el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序:例如:123"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="设置权限上级" prop="parentId">
<el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入或者选择适配权限"></el-input>
<div style ="float:left">
<el-button type="text" @click="drawer = true">设置权限上级</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="ismenu" prop="ismenu">
<el-switch
v-model="addForm.ismenu"
... ... @@ -130,6 +150,24 @@
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<el-drawer
title="设置权限上级"
:visible.sync="drawer"
append-to-body
withHeader>
<el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
<el-button type="primary" @click.native="treeMerge(true)">展开节点</el-button>
<span style="color:#E6A23C">不设置为顶级权限</span>
<el-tree :data="tableList" :props="treeDefaultProps"
@check="clickDeal"
:default-expand-all = "treeExpand"
show-checkbox
highlight-current
check-strictly
node-key="permissionId" ref="tree">
</el-tree>
</el-drawer>
</section>
</template>
... ... @@ -147,7 +185,7 @@
tableList: [],
total: 0,
pageNum: 1,
pageSize: 100,
pageSize: 500,
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
... ... @@ -166,11 +204,19 @@
url: '',
path: '',
parentId: '',
ismenu: '',
permissionOrder:''
ismenu: true,
permissionOrder:'',
chidren: [],
component: '',
method: ''
},
treeDefaultProps: {
children: 'children',
label: 'name',
},
treeExpand: true,
addFormVisible: false,//新增界面是否显示
drawer: false,
addLoading: false,
addFormRules: {
name: [
... ... @@ -187,9 +233,6 @@
],
permissionOrder: [
{ required: true, message: '请输入排序字段', trigger: 'blur' }
],
parentId: [
{ required: true, message: '请输入父类ID', trigger: 'blur' }
]
},
//新增界面数据
... ... @@ -198,9 +241,9 @@
name: '',
url: '',
path: '',
parentId: '',
parentId: 0,
ismenu: '',
permissionOrder:''
permissionOrder:'0'
}
... ... @@ -283,14 +326,14 @@
handleAdd: function () {
this.addFormVisible = true;
this.addForm = {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
description: '',
name: '',
url: '',
path: '',
parentId: 0,
ismenu: '',
permissionOrder:'0'
};
},
//编辑
... ... @@ -366,6 +409,17 @@
}).catch(() => {
});
},
clickDeal: function (currentObj, treeStatus) {
this.addForm.parentId = currentObj.permissionId;
this.$refs.tree.setCheckedKeys([currentObj.permissionId]);
// this.drawer = false;
},
treeMerge: function (expand) {
this.treeExpand = expand;
for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
}
}
},
mounted() {
... ... @@ -375,6 +429,9 @@
</script>
<style scoped>
<style rel="stylesheet/scss" lang="scss">
.el-drawer.rtl {
overflow: scroll
}
</style>
\ No newline at end of file
... ...