提交 b3804bde 编写于 作者: J jinlan.du

Merge branch 'gin-vue-admin_v2_dev' of...

Merge branch 'gin-vue-admin_v2_dev' of https://github.com/flipped-aurora/gin-vue-admin into gin-vue-admin_v2_dev
...@@ -70,7 +70,7 @@ func AddBaseMenu(c *gin.Context) { ...@@ -70,7 +70,7 @@ func AddBaseMenu(c *gin.Context) {
var menu model.SysBaseMenu var menu model.SysBaseMenu
_ = c.ShouldBindJSON(&menu) _ = c.ShouldBindJSON(&menu)
MenuVerify := utils.Rules{ MenuVerify := utils.Rules{
"Path": {"notEmpty"}, "Path": {utils.NotEmpty()},
"ParentId": {utils.NotEmpty()}, "ParentId": {utils.NotEmpty()},
"Name": {utils.NotEmpty()}, "Name": {utils.NotEmpty()},
"Component": {utils.NotEmpty()}, "Component": {utils.NotEmpty()},
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<el-table :data="tableData" border row-key="ID" stripe> <el-table :data="tableData" border row-key="ID" stripe>
<el-table-column label="ID" min-width="100" prop="ID"></el-table-column> <el-table-column label="ID" min-width="100" prop="ID"></el-table-column>
<el-table-column label="路由Name" min-width="160" prop="name"></el-table-column> <el-table-column label="路由Name" min-width="160" prop="name"></el-table-column>
<el-table-column label="路由Path" min-width="160" prop="path"></el-table-column>
<el-table-column label="是否隐藏" min-width="100" prop="hidden"> <el-table-column label="是否隐藏" min-width="100" prop="hidden">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.hidden?"隐藏":"显示"}}</span> <span>{{scope.row.hidden?"隐藏":"显示"}}</span>
...@@ -36,17 +37,36 @@ ...@@ -36,17 +37,36 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog :before-close="handleClose" :visible.sync="dialogFormVisible" :title="dialogTitle"> <el-dialog :before-close="handleClose" :title="dialogTitle" :visible.sync="dialogFormVisible">
<el-form <el-form
:inline="true" :inline="true"
:model="form" :model="form"
:rules="rules" :rules="rules"
label-position="top"
label-width="85px" label-width="85px"
ref="menuForm" ref="menuForm"
label-position="top"
> >
<el-form-item label="路由name" prop="path" style="width:30%"> <el-form-item label="路由name" prop="path" style="width:30%">
<el-input autocomplete="off" placeholder="唯一英文字符串" v-model="form.path"></el-input> <el-input
@change="changeName"
autocomplete="off"
placeholder="唯一英文字符串"
v-model="form.name"
></el-input>
</el-form-item>
<el-form-item prop="path" style="width:30%">
<div style="display:inline-block" slot="label">
路由path
<el-checkbox style="float:right;margin-left:20px;" v-model="checkFlag">添加参数</el-checkbox>
</div>
<el-input
:disabled="!checkFlag"
autocomplete="off"
placeholder="建议只在后方拼接参数"
v-model="form.path"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="是否隐藏" style="width:30%"> <el-form-item label="是否隐藏" style="width:30%">
<el-select placeholder="是否在列表隐藏" v-model="form.hidden"> <el-select placeholder="是否在列表隐藏" v-model="form.hidden">
...@@ -57,11 +77,11 @@ ...@@ -57,11 +77,11 @@
<el-form-item label="父节点Id" style="width:30%"> <el-form-item label="父节点Id" style="width:30%">
<el-cascader <el-cascader
:disabled="!this.isEdit" :disabled="!this.isEdit"
v-model="form.parentId"
:options="menuOption" :options="menuOption"
:show-all-levels="false"
:props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}" :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
:show-all-levels="false"
filterable filterable
v-model="form.parentId"
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="文件路径" prop="component" style="width:30%"> <el-form-item label="文件路径" prop="component" style="width:30%">
...@@ -72,7 +92,7 @@ ...@@ -72,7 +92,7 @@
</el-form-item> </el-form-item>
<el-form-item label="图标" prop="meta.icon" style="width:30%"> <el-form-item label="图标" prop="meta.icon" style="width:30%">
<icon :meta="form.meta"> <icon :meta="form.meta">
<template slot="prepend" >el-icon-</template> <template slot="prepend">el-icon-</template>
</icon> </icon>
</el-form-item> </el-form-item>
<el-form-item label="排序标记" prop="sort" style="width:30%"> <el-form-item label="排序标记" prop="sort" style="width:30%">
...@@ -103,203 +123,207 @@ import { ...@@ -103,203 +123,207 @@ import {
addBaseMenu, addBaseMenu,
deleteBaseMenu, deleteBaseMenu,
getBaseMenuById getBaseMenuById
} from "@/api/menu"; } from '@/api/menu'
import infoList from "@/components/mixins/infoList"; import infoList from '@/components/mixins/infoList'
import icon from '@/view/superAdmin/menu/icon'; import icon from '@/view/superAdmin/menu/icon'
export default { export default {
name: "Menus", name: 'Menus',
mixins: [infoList], mixins: [infoList],
data() { data() {
return { return {
checkFlag: false,
listApi: getMenuList, listApi: getMenuList,
dialogFormVisible: false, dialogFormVisible: false,
dialogTitle: "新增菜单", dialogTitle: '新增菜单',
menuOption: [ menuOption: [
{ {
ID: "0", ID: '0',
title: "根菜单" title: '根菜单'
} }
], ],
form: { form: {
ID: 0, ID: 0,
path: "", path: '',
name: "", name: '',
hidden: "", hidden: '',
parentId: "", parentId: '',
component: "", component: '',
meta: { meta: {
title: "", title: '',
icon: "", icon: '',
defaultMenu: false, defaultMenu: false,
keepAlive: false keepAlive: false
} }
}, },
rules: { rules: {
path: [{ required: true, message: "请输入菜单name", trigger: "blur" }], path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
component: [ component: [
{ required: true, message: "请输入文件路径", trigger: "blur" } { required: true, message: '请输入文件路径', trigger: 'blur' }
], ],
"meta.title": [ 'meta.title': [
{ required: true, message: "请输入菜单展示名称", trigger: "blur" } { required: true, message: '请输入菜单展示名称', trigger: 'blur' }
] ]
}, },
isEdit: false, isEdit: false,
test:'' test: ''
}; }
}, },
components:{ components: {
icon icon
}, },
methods: { methods: {
changeName() {
this.form.path = this.form.name
},
setOptions() { setOptions() {
this.menuOption = [ this.menuOption = [
{ {
ID: "0", ID: '0',
title: "根目录" title: '根目录'
} }
]; ]
this.setMenuOptions(this.tableData, this.menuOption, false); this.setMenuOptions(this.tableData, this.menuOption, false)
}, },
setMenuOptions(menuData, optionsData, disabled) { setMenuOptions(menuData, optionsData, disabled) {
menuData && menuData &&
menuData.map(item => { menuData.map(item => {
if (item.children&&item.children.length) { if (item.children && item.children.length) {
const option = { const option = {
title: item.meta.title, title: item.meta.title,
ID: String(item.ID), ID: String(item.ID),
disabled: disabled || item.ID == this.form.ID, disabled: disabled || item.ID == this.form.ID,
children: [] children: []
}; }
this.setMenuOptions( this.setMenuOptions(
item.children, item.children,
option.children, option.children,
disabled || item.ID == this.form.ID disabled || item.ID == this.form.ID
); )
optionsData.push(option); optionsData.push(option)
} else { } else {
const option = { const option = {
title: item.meta.title, title: item.meta.title,
ID: String(item.ID), ID: String(item.ID),
disabled: disabled || item.ID == this.form.ID disabled: disabled || item.ID == this.form.ID
}; }
optionsData.push(option); optionsData.push(option)
} }
}); })
}, },
handleClose(done) { handleClose(done) {
this.initForm(); this.initForm()
done(); done()
}, },
// 懒加载子菜单 // 懒加载子菜单
load(tree, treeNode, resolve) { load(tree, treeNode, resolve) {
resolve([ resolve([
{ {
id: 31, id: 31,
date: "2016-05-01", date: '2016-05-01',
name: "王小虎", name: '王小虎',
address: "上海市普陀区金沙江路 1519 弄" address: '上海市普陀区金沙江路 1519 弄'
}, },
{ {
id: 32, id: 32,
date: "2016-05-01", date: '2016-05-01',
name: "王小虎", name: '王小虎',
address: "上海市普陀区金沙江路 1519 弄" address: '上海市普陀区金沙江路 1519 弄'
} }
]); ])
}, },
// 删除菜单 // 删除菜单
deleteMenu(ID) { deleteMenu(ID) {
this.$confirm("此操作将永久删除所有角色下该菜单, 是否继续?", "提示", { this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning" type: 'warning'
}) })
.then(async () => { .then(async () => {
const res = await deleteBaseMenu({ ID }); const res = await deleteBaseMenu({ ID })
if (res.code == 0) { if (res.code == 0) {
this.$message({ this.$message({
type: "success", type: 'success',
message: "删除成功!" message: '删除成功!'
}); })
this.getTableData(); this.getTableData()
} }
}) })
.catch(() => { .catch(() => {
this.$message({ this.$message({
type: "info", type: 'info',
message: "已取消删除" message: '已取消删除'
}); })
}); })
}, },
// 初始化弹窗内表格方法 // 初始化弹窗内表格方法
initForm() { initForm() {
this.$refs.menuForm.resetFields(); this.checkFlag = false
this.$refs.menuForm.resetFields()
this.form = { this.form = {
ID: 0, ID: 0,
path: "", path: '',
name: "", name: '',
hidden: "", hidden: '',
parentId: "", parentId: '',
component: "", component: '',
meta: { meta: {
title: "", title: '',
icon: "", icon: '',
defaultMenu: false, defaultMenu: false,
keepAlive: "" keepAlive: ''
} }
}; }
}, },
// 关闭弹窗 // 关闭弹窗
closeDialog() { closeDialog() {
this.initForm(); this.initForm()
this.dialogFormVisible = false; this.dialogFormVisible = false
}, },
// 添加menu // 添加menu
async enterDialog() { async enterDialog() {
this.$refs.menuForm.validate(async valid => { this.$refs.menuForm.validate(async valid => {
if (valid) { if (valid) {
let res; let res
this.form.name = this.form.path;
if (this.isEdit) { if (this.isEdit) {
res = await updateBaseMenu(this.form); res = await updateBaseMenu(this.form)
} else { } else {
res = await addBaseMenu(this.form); res = await addBaseMenu(this.form)
} }
if (res.code == 0) { if (res.code == 0) {
this.$message({ this.$message({
type: "success", type: 'success',
message: this.isEdit ? "编辑成功" : "添加成功!" message: this.isEdit ? '编辑成功' : '添加成功!'
}); })
this.getTableData(); this.getTableData()
} }
this.initForm(); this.initForm()
this.dialogFormVisible = false; this.dialogFormVisible = false
} }
}); })
}, },
// 添加菜单方法,id为 0则为添加根菜单 // 添加菜单方法,id为 0则为添加根菜单
addMenu(id) { addMenu(id) {
this.dialogTitle = "新增菜单"; this.dialogTitle = '新增菜单'
this.form.parentId = String(id); this.form.parentId = String(id)
this.isEdit = false; this.isEdit = false
this.setOptions(); this.setOptions()
this.dialogFormVisible = true; this.dialogFormVisible = true
}, },
// 修改菜单方法 // 修改菜单方法
async editMenu(id) { async editMenu(id) {
this.dialogTitle = "编辑菜单"; this.dialogTitle = '编辑菜单'
const res = await getBaseMenuById({ id }); const res = await getBaseMenuById({ id })
this.form = res.data.menu; this.form = res.data.menu
this.isEdit = true; this.isEdit = true
this.setOptions(); this.setOptions()
this.dialogFormVisible = true; this.dialogFormVisible = true
} }
}, },
async created() { async created() {
this.pageSize = 999; this.pageSize = 999
await this.getTableData(); await this.getTableData()
} }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.button-box { .button-box {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册