Skip to content

GitLab

Commit 25c87351 authored by cx49085's avatar cx49085
Browse files

修改路由备注样式，增加角色表单校验

parent 098c6731
Show whitespace changes
Inline Side-by-side
.env.development
View file @ 25c87351
......@@ -4,4 +4,5 @@ ENV = 'development'
# base api 后端url
#VUE_APP_BASE_API = 'http://192.168.10.107:7080'
VUE_APP_BASE_API = 'http://192.168.10.109:11523'
#'http://www.aishuhong.com:11549/prod-api/'
#VUE_APP_BASE_API = 'http://192.168.31.100:7081'
src/views/permission/role.vue
View file @ 25c87351
......@@ -22,51 +22,36 @@
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope)" >编辑角色信息和分配角色路由</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope)" >删除角色</el-button>
<el-button type="primary" size="small" @click="handleEdit(scope)">编辑角色信息和分配角色路由</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope)">删除角色</el-button>
</template>
</el-table-column>
</el-table>
<div class="footer">
<el-pagination
:current-page.sync="roleQuery.pageNum"
:page-size="roleQuery.pageSize"
layout="total, prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
/>
<el-pagination :current-page.sync="roleQuery.pageNum" :page-size="roleQuery.pageSize"
layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
</div>
<el-dialog :visible.sync="dialogVisible" :title="dialogType">
<el-form :model="role" label-width="80px" label-position="left">
<el-form-item label="角色名称">
<el-form :model="role" label-width="80px" label-position="left" :rules="rules">
<el-form-item label="角色名称" prop="rlName">
<el-input v-model="role.rlName" placeholder="角色名称" />
</el-form-item>
<el-form-item label="角色描述">
<el-input
v-model="role.rlDesc"
:autosize="{ minRows: 2, maxRows: 4}"
type="textarea"
placeholder="角色描述"
/>
<el-form-item label="角色描述" prop="rlDesc">
<el-input v-model="role.rlDesc" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="角色描述" />
</el-form-item>
<el-form-item label="路由树">
<el-tree
ref="tree"
:check-strictly="checkStrictly"
:data="routesData"
:props="defaultProps"
@check="checkTree"
show-checkbox
default-expand-all
node-key="id"
class="permission-tree"
/>
<el-tree ref="tree" :check-strictly="true" :data="routesData" @check="checkTree" show-checkbox default-expand-all node-key="id">
<span slot-scope="{data}">
{{data.title}}
<span class="explain-text">{{ data.explain }}</span>
</span>
</el-tree>
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
<el-button type="danger" @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmRole">提交</el-button>
</div>
</el-dialog>
......@@ -78,20 +63,20 @@
<script>
import path from 'path'
import { deepClone } from '@/utils'
import { getRoles,addRole,deleteRole, updateRole} from '@/api/role'
import { getRoutes} from '@/api/auth'
import { getRoles, addRole, deleteRole, updateRole } from '@/api/role'
import { getRoutes } from '@/api/auth'
const defaultRole = {
rlId: 0,
rlName: '',
rlDesc: '',
routes: [],
companyId:'',
companyId: '',
}
export default {
data(){
return{
data() {
return {
roleQuery: {
companyId: null,
pageNum: 1,
......@@ -99,54 +84,53 @@ export default {
},
total: 0,
role: Object.assign({}, defaultRole),
rolesList:[],
routes:null,
rolesList: [],
routes: null,
dialogType:"新增角色",
dialogVisible:false,
checkStrictly: true,// 父子节点 checkbox的选择是否关联
defaultProps: { // 角色树
children: 'children',
label: 'title'
},
companyId:'',
dialogType: "新增角色",
dialogVisible: false,
companyId: '',
rules: {
rlName: [{ required: true, message: "角色名称"}],
rlDesc: [{ required: true, message: "角色描述" }]
}
}
},
created() {
this.roleQuery.companyId = this.$store.getters.companyId
this.companyId=this.$store.getters.companyId;
this.companyId = this.$store.getters.companyId;
this.getRoutes()
this.getRoles()
},
computed: {
routesData() {
console.log(this.routes)
return this.routes
},
},
methods:{
methods: {
//handleCurrentChange
handleCurrentChange(val){
handleCurrentChange(val) {
this.roleQuery.pageNum = val
this.getRoles()
},
//获取角色
getRoles() {
getRoles (this.roleQuery).then((res)=>{
if(res.status == "success"){
getRoles(this.roleQuery).then((res) => {
if (res.status == "success") {
this.rolesList = res.data.list
this.total = res.data.total
}else{
} else {
this.$message.error(res.data)
}
}).catch((error)=>{
}).catch((error) => {
this.$message.error("查询数据失败")
})
},
//获取路由
getRoutes() {
getRoutes().then((res)=>{
if(res.status == "success"){
getRoutes().then((res) => {
if (res.status == "success") {
this.serviceRoutes = res.data
this.routes = this.generateRoutes(res.data)
}
......@@ -155,33 +139,35 @@ export default {
//处理路由数据
generateRoutes(routes, basePath = '/') {
const res = []
console.log(routes)
if(this.$store.getters.roles[0] != 1){
// console.log(routes)
if (this.$store.getters.roles[0] != 1) {
//不是超管
for (let route of routes) {
if(route.id != 1 && route.id != 113){
if (route.id != 1 && route.id != 113) {
const data = {
path: path.resolve(basePath, route.path),
title: route.meta && (route.menuExplain ? `${route.meta.title}（${route.menuExplain}）`: route.meta.title),
title: route.meta && route.meta.title,
explain: route.menuExplain,
id: route.id
}
if (route.children.length>0) {
if (route.children.length > 0) {
data.children = this.generateRoutes(route.children, data.path)
}
res.push(data)
}
}
}else{
} else {
//是超管
for (let route of routes) {
const data = {
path: path.resolve(basePath, route.path),
title: route.meta && (route.menuExplain ? `${route.meta.title}（${route.menuExplain}）`: route.meta.title),
title: route.meta && route.meta.title,
explain: route.menuExplain,
id: route.id
}
if (route.children.length>0) {
if (route.children.length > 0) {
data.children = this.generateRoutes(route.children, data.path)
}
res.push(data)
......@@ -193,7 +179,7 @@ export default {
return res
},
//新增角色
handleAddRole(){
handleAddRole() {
this.role = Object.assign({}, defaultRole)
this.role.companyId = this.$store.getters.companyId
if (this.$refs.tree) {
......@@ -203,10 +189,10 @@ export default {
this.dialogVisible = true
},
//编辑角色
handleEdit(scope){
handleEdit(scope) {
this.dialogType = '编辑角色'
this.dialogVisible = true
console.log(scope)
// console.log(scope)
this.role = deepClone(scope.row)
this.$nextTick(() => {
const selectedKeys = this.generateArr(this.role.routes)
......@@ -221,70 +207,70 @@ export default {
if (temp.length > 0) {
data = [...data, ...temp]
}
}else{
} else {
data.push(route.id)
}
})
return data
},
//删除角色
handleDelete({ $index, row }){
handleDelete({ $index, row }) {
this.$confirm('确定要删除该角色吗?', 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteRole(row.rlId).then((res)=>{
if(res.status == 'success'){
deleteRole(row.rlId).then((res) => {
if (res.status == 'success') {
this.$message.success("删除成功")
this.rolesList.splice($index, 1)
}else{
} else {
this.$message.error(res.data)
}
}).catch((error)=>{
}).catch((error) => {
this.$message.error("删除失败")
})
})
.catch(err => { console.error(err) })
},
//提交
confirmRole(){
confirmRole() {
const isEdit = this.dialogType === '编辑角色'
// 获取选中权限树id
const checkedKeys = this.$refs.tree.getCheckedKeys()
if (checkedKeys){
if (checkedKeys) {
let routes = []
checkedKeys.forEach(key => {
let obj = {id:key}
let obj = { id: key }
routes.push(obj)
})
// 将menu对象数组，赋给要添加的role
this.role.routes = routes
}
if (isEdit) { // 修改角色
updateRole(this.role).then((res)=>{
if(res.status=="success"){
updateRole(this.role).then((res) => {
if (res.status == "success") {
this.$message.success("修改成功")
this.getRoles()
}else{
} else {
this.$message.error(res.data)
}
}).catch((error)=>{
}).catch((error) => {
this.$message.error("修改失败")
})
}else{
} else {
//新增角色
addRole(this.role).then((res)=>{
if(res.status=="success"){
addRole(this.role).then((res) => {
if (res.status == "success") {
this.$message.success("添加成功")
this.getRoles()
}else{
} else {
this.$message.error(res.data)
}
}).catch((error)=>{
}).catch((error) => {
this.$message.error("添加失败")
})
}
......@@ -294,7 +280,7 @@ export default {
//点击树
checkTree(data){
checkTree(data) {
const node = this.$refs.tree.getNode(data.id);
this.setNode(node);
},
......@@ -332,4 +318,11 @@ export default {
.footer {
text-align: right;
}
.explain-text {
font-size: 12px;
font-weight: 400;
display: inline-block;
padding-left: 10px;
color: #949494;
}
</style>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment