Skip to content

GitLab

Commit 7a0d3b26 authored by 陈鑫's avatar 陈鑫
Browse files

增加路由备注

parent 6e137f66
Pipeline #21 failed with stages
in 0 seconds
Hide whitespace changes
Inline Side-by-side
src/views/permission/menu.vue
View file @ 7a0d3b26
...@@ -2,34 +2,19 @@ ...@@ -2,34 +2,19 @@
<div class="app-container"> <div class="app-container">
<p>管理动态路由</p> <p>管理动态路由</p>
<el-button type="primary" @click="addFirst">添加第一级路由</el-button> <el-button type="primary" @click="addFirst">添加第一级路由</el-button>
<el-tree <el-tree :data="data" node-key="id" default-expand-all :props="defaultProps" :expand-on-click-node="false">
:data="data"
node-key="id"
default-expand-all
:props="defaultProps"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }"> <span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
<span> <span>
<svg-icon v-if="!convertToBool(data.hidden)" icon-class="eye-open" /> <svg-icon v-if="!convertToBool(data.hidden)" icon-class="eye-open" />
<svg-icon v-else icon-class="eye" /> <svg-icon v-else icon-class="eye" />
<el-button <el-button type="text" size="mini" @click="() => append(data)" v-if="!data.parentId || data.parentId == 0">
type="text"
size="mini"
@click="() => append(data)"
v-if="!data.parentId || data.parentId == 0">
添加子路由 添加子路由
</el-button> </el-button>
<el-button <el-button type="text" size="mini" @click="() => edit(data)">
type="text"
size="mini"
@click="() => edit(data)">
修改路由 修改路由
</el-button> </el-button>
<el-button <el-button type="text" size="mini" @click="() => remove(data)">
type="text"
size="mini"
@click="() => remove(data)">
删除路由 删除路由
</el-button> </el-button>
</span> </span>
...@@ -42,22 +27,25 @@ ...@@ -42,22 +27,25 @@
<el-input v-model="permission.path" placeholder="路由path" /> <el-input v-model="permission.path" placeholder="路由path" />
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="permission.name" placeholder="路由名称" /> <el-input v-model="permission.name" placeholder="路由名称" />
</el-form-item>
<el-form-item label="路由备注">
<el-input v-model="permission.menuExplain" placeholder="路由备注" />
</el-form-item> </el-form-item>
<el-form-item label="组件名称" prop="component"> <el-form-item label="组件名称" prop="component">
<el-input v-model="permission.component" placeholder="组件名称" /> <el-input v-model="permission.component" placeholder="组件名称" />
</el-form-item> </el-form-item>
<el-form-item label="重定向路径" > <el-form-item label="重定向路径">
<el-input v-model="permission.redirect" placeholder="重定向路径" /> <el-input v-model="permission.redirect" placeholder="重定向路径" />
</el-form-item> </el-form-item>
<el-form-item label="主题" prop="meta.title"> <el-form-item label="主题" prop="meta.title">
<el-input v-model="permission.meta.title" placeholder="路由主题" /> <el-input v-model="permission.meta.title" placeholder="路由主题" />
</el-form-item> </el-form-item>
<el-form-item label="图标" > <el-form-item label="图标">
<el-input v-model="permission.meta.icon" placeholder="路由图标" /> <el-input v-model="permission.meta.icon" placeholder="路由图标" />
</el-form-item> </el-form-item>
<el-form-item label="高亮菜单"> <el-form-item label="高亮菜单">
<el-input v-model="permission.meta.activeMenu" placeholder="高亮菜单" /> <el-input v-model="permission.meta.activeMenu" placeholder="高亮菜单" />
</el-form-item> </el-form-item>
<el-checkbox v-model="permission.hidden" label="隐藏"></el-checkbox> <el-checkbox v-model="permission.hidden" label="隐藏"></el-checkbox>
...@@ -67,9 +55,9 @@ ...@@ -67,9 +55,9 @@
<el-checkbox v-model="permission.meta.breadcrumb" label="面包屑"></el-checkbox> <el-checkbox v-model="permission.meta.breadcrumb" label="面包屑"></el-checkbox>
</el-form> </el-form>
<br/> <br />
<div style="text-align:right;"> <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="comfirmMenu">提交</el-button> <el-button type="primary" @click="comfirmMenu">提交</el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -115,19 +103,19 @@ export default { ...@@ -115,19 +103,19 @@ export default {
children: 'children', children: 'children',
label: 'title' label: 'title'
}, },
rules:{ rules: {
path:[{ path: [{
required: true, validator:pathValid, trigger: "blur" required: true, validator: pathValid, trigger: "blur"
}], }],
name:[{ required: true, message: "请输入名称", trigger: "blur" }], name: [{ required: true, message: "请输入名称", trigger: "blur" }],
component:[{ required: true, message: "请输入组件名称", trigger: "blur" }], component: [{ required: true, message: "请输入组件名称", trigger: "blur" }],
'meta.title':[{required: true, message: "请输入主题", trigger: "blur"}] 'meta.title': [{ required: true, message: "请输入主题", trigger: "blur" }]
} }
} }
}, },
created(){ created() {
this.getMenuData() this.getMenuData()
}, },
...@@ -147,19 +135,19 @@ export default { ...@@ -147,19 +135,19 @@ export default {
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
deleteMenu(data.id).then(res=>{ deleteMenu(data.id).then(res => {
if(res.status == 'success'){ if (res.status == 'success') {
this.getMenuData() this.getMenuData()
this.$message({ this.$message({
type: 'success', type: 'success',
message: '删除成功!' message: '删除成功!'
}) })
}else{ } else {
this.$message.error(res.data) this.$message.error(res.data)
} }
})
}) })
})
.catch(err => { console.error(err) }) .catch(err => { console.error(err) })
}, },
...@@ -171,89 +159,92 @@ export default { ...@@ -171,89 +159,92 @@ export default {
this.dialogVisible = true this.dialogVisible = true
}, },
addFirst(){ addFirst() {
this.permission = deepClone(defaultPermisson) this.permission = deepClone(defaultPermisson)
this.dialogType = 'new' this.dialogType = 'new'
this.dialogVisible = true this.dialogVisible = true
this.dialogTitle = '新增一级菜单' this.dialogTitle = '新增一级菜单'
}, },
async comfirmMenu(){ async comfirmMenu() {
this.$refs.form.validate((valid)=>{ this.$refs.form.validate((valid) => {
if(valid){ if (valid) {
if ( this.dialogType === 'edit') { if (this.dialogType === 'edit') {
// 修改菜单信息 // 修改菜单信息
// 整理boolean属性 // 整理boolean属性
let submitMenu = deepClone(this.permission) let submitMenu = deepClone(this.permission)
// 删除子菜单（子菜单不一起更新） // 删除子菜单（子菜单不一起更新）
delete submitMenu.children delete submitMenu.children
submitMenu.hidden = this.convertToNumber(submitMenu.hidden) submitMenu.hidden = this.convertToNumber(submitMenu.hidden)
submitMenu.alwaysShow = this.convertToNumber(submitMenu.alwaysShow) submitMenu.alwaysShow = this.convertToNumber(submitMenu.alwaysShow)
submitMenu.meta.noCache = this.convertToNumber(submitMenu.meta.noCache) submitMenu.meta.noCache = this.convertToNumber(submitMenu.meta.noCache)
submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix) submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix)
submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb) submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb)
editMenu(submitMenu).then((res)=>{ editMenu(submitMenu).then((res) => {
if(res.status=="success"){ if (res.status == "success") {
this.$message({ this.getMenuData()
type: 'success', this.$message({
message: '修改成功!' type: 'success',
}) message: '修改成功!'
}else{ })
this.$message({ } else {
type: 'error', this.$message({
message: res.data type: 'error',
message: res.data
})
}
}).catch(err => {
this.$message({
type: 'error',
message: '修改失败!'
})
}) })
} this.dialogVisible = false
}).catch(err=>{ // setTimeout(() => {
this.$message({ // this.getMenuData()
type: 'error', // }, 500);
message: '修改失败!' this.permission = defaultPermisson
}) } else {
}) // 添加菜单信息
this.dialogVisible = false // 整理boolean属性
this.getMenuData() let submitMenu = deepClone(this.permission)
this.permission = defaultPermisson
} else {
// 添加菜单信息
// 整理boolean属性
let submitMenu = deepClone(this.permission)
submitMenu.hidden = this.convertToNumber(submitMenu.hidden) submitMenu.hidden = this.convertToNumber(submitMenu.hidden)
submitMenu.alwaysShow = this.convertToNumber(submitMenu.alwaysShow) submitMenu.alwaysShow = this.convertToNumber(submitMenu.alwaysShow)
submitMenu.meta.noCache = this.convertToNumber(submitMenu.meta.noCache) submitMenu.meta.noCache = this.convertToNumber(submitMenu.meta.noCache)
submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix) submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix)
submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb) submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb)
addMenu(submitMenu).then((res)=>{ addMenu(submitMenu).then((res) => {
if(res.status == "success"){ if (res.status == "success") {
this.$message({ this.$message({
type: 'success', type: 'success',
message: '添加成功!' message: '添加成功!'
}) })
this.getMenuData() this.getMenuData()
}else{ } else {
this.$message({
type: 'error',
message: res.data
})
}
}).catch(err => {
this.$message({ this.$message({
type: 'error', type: 'error',
message: res.data message: '添加失败!'
}) })
}
}).catch(err=>{
this.$message({
type: 'error',
message: '添加失败!'
}) })
}) this.dialogVisible = false
this.dialogVisible = false
this.permission = defaultPermisson
this.permission = defaultPermisson }
}
} }
}) })
}, },
async getMenuData(){ async getMenuData() {
// 请求后端，获取动态路由tree // 请求后端，获取动态路由tree
let res = await getMenuTree() let res = await getMenuTree()
// 按el-tree组件的要求，整理数据结构 // 按el-tree组件的要求，整理数据结构
...@@ -266,10 +257,10 @@ export default { ...@@ -266,10 +257,10 @@ export default {
for (let route of routes) { for (let route of routes) {
const data = route const data = route
// 将路由里面的title元数据，赋给data的title属性 // 将路由里面的title元数据，赋给data的title属性
data.title = route.meta && route.meta.title data.title = route.meta && route.meta.title,//route.meta && route.meta.title
// 将路由里面的相关属性的值，改成boolean类型 // 将路由里面的相关属性的值，改成boolean类型
data.hidden = this.convertToBool(data.hidden) data.hidden = this.convertToBool(data.hidden)
data.alwaysShow = this.convertToBool(data.alwaysShow) data.alwaysShow = this.convertToBool(data.alwaysShow)
data.meta.noCache = this.convertToBool(data.meta.noCache) data.meta.noCache = this.convertToBool(data.meta.noCache)
data.meta.affix = this.convertToBool(data.meta.affix) data.meta.affix = this.convertToBool(data.meta.affix)
...@@ -283,11 +274,11 @@ export default { ...@@ -283,11 +274,11 @@ export default {
} }
return res return res
}, },
convertToBool(v){ convertToBool(v) {
return v==0?false:true return v == 0 ? false : true
}, },
convertToNumber(v){ convertToNumber(v) {
return v?1:0 return v ? 1 : 0
} }
} }
}; };
...@@ -298,16 +289,18 @@ export default { ...@@ -298,16 +289,18 @@ export default {
.roles-table { .roles-table {
margin-top: 30px; margin-top: 30px;
} }
.permission-tree { .permission-tree {
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.custom-tree-node { .custom-tree-node {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
padding-right: 8px; padding-right: 8px;
} }
</style> </style>
src/views/permission/role.vue
View file @ 7a0d3b26
...@@ -159,7 +159,7 @@ export default { ...@@ -159,7 +159,7 @@ export default {
if(route.id != 1){ if(route.id != 1){
const data = { const data = {
path: path.resolve(basePath, route.path), path: path.resolve(basePath, route.path),
title: route.meta && route.meta.title, title: route.meta && (route.menuExplain ? `${route.meta.title}（${route.menuExplain}）`: route.meta.title),
id: route.id id: route.id
} }
if (route.children.length>0) { if (route.children.length>0) {
......
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