root
/
yibu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

支持path添加参数

main
pixel 5 years ago
parent
729b3d4146
commit
4df55c1348
1 changed files with 117 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 216
      web/src/view/superAdmin/menu/menu.vue

216
web/src/view/superAdmin/menu/menu.vue
View File

@ -37,20 +37,36 @@
</el-table-column>
</el-table>
<el-dialog :before-close="handleClose" :visible.sync="dialogFormVisible" :title="dialogTitle">
<el-dialog :before-close="handleClose" :title="dialogTitle" :visible.sync="dialogFormVisible">
<el-form
:inline="true"
:model="form"
:rules="rules"
label-position="top"
label-width="85px"
ref="menuForm"
label-position="top"
>
<el-form-item label="路由name" prop="path" style="width:30%">
<el-input autocomplete="off" placeholder="唯一英文字符串" @change="changeName" v-model="form.name"></el-input>
<el-input
@change="changeName"
autocomplete="off"
placeholder="唯一英文字符串"
v-model="form.name"
></el-input>
</el-form-item>
<el-form-item label="路由path" prop="path" style="width:30%">
<el-input autocomplete="off" placeholder="建议只在后方拼接参数" v-model="form.path"></el-input>
<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 label="是否隐藏" style="width:30%">
<el-select placeholder="是否在列表隐藏" v-model="form.hidden">
@ -61,11 +77,11 @@
<el-form-item label="父节点Id" style="width:30%">
<el-cascader
:disabled="!this.isEdit"
v-model="form.parentId"
:options="menuOption"
:show-all-levels="false"
:props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
:show-all-levels="false"
filterable
v-model="form.parentId"
></el-cascader>
</el-form-item>
<el-form-item label="文件路径" prop="component" style="width:30%">
@ -76,7 +92,7 @@
</el-form-item>
<el-form-item label="图标" prop="meta.icon" style="width:30%">
<icon :meta="form.meta">
<template slot="prepend" >el-icon-</template>
<template slot="prepend">el-icon-</template>
</icon>
</el-form-item>
<el-form-item label="排序标记" prop="sort" style="width:30%">
@ -107,205 +123,207 @@ import {
addBaseMenu,
deleteBaseMenu,
getBaseMenuById
} from "@/api/menu";
import infoList from "@/components/mixins/infoList";
import icon from '@/view/superAdmin/menu/icon';
} from '@/api/menu'
import infoList from '@/components/mixins/infoList'
import icon from '@/view/superAdmin/menu/icon'
export default {
name: "Menus",
name: 'Menus',
mixins: [infoList],
data() {
return {
checkFlag: false,
listApi: getMenuList,
dialogFormVisible: false,
dialogTitle: "新增菜单",
dialogTitle: '新增菜单',
menuOption: [
{
ID: "0",
title: "根菜单"
ID: '0',
title: '根菜单'
}
],
form: {
ID: 0,
path: "",
name: "",
hidden: "",
parentId: "",
component: "",
path: '',
name: '',
hidden: '',
parentId: '',
component: '',
meta: {
title: "",
icon: "",
title: '',
icon: '',
defaultMenu: false,
keepAlive: false
}
},
rules: {
path: [{ required: true, message: "请输入菜单name", trigger: "blur" }],
path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
component: [
{ required: true, message: "请输入文件路径", trigger: "blur" }
{ required: true, message: '请输入文件路径', trigger: 'blur' }
],
"meta.title": [
{ required: true, message: "请输入菜单展示名称", trigger: "blur" }
'meta.title': [
{ required: true, message: '请输入菜单展示名称', trigger: 'blur' }
]
},
isEdit: false,
test:''
};
test: ''
}
},
components:{
components: {
icon
},
methods: {
changeName(){
changeName() {
this.form.path = this.form.name
},
setOptions() {
this.menuOption = [
{
ID: "0",
title: "根目录"
ID: '0',
title: '根目录'
}
];
this.setMenuOptions(this.tableData, this.menuOption, false);
]
this.setMenuOptions(this.tableData, this.menuOption, false)
},
setMenuOptions(menuData, optionsData, disabled) {
menuData &&
menuData.map(item => {
if (item.children&&item.children.length) {
if (item.children && item.children.length) {
const option = {
title: item.meta.title,
ID: String(item.ID),
disabled: disabled || item.ID == this.form.ID,
children: []
};
}
this.setMenuOptions(
item.children,
option.children,
disabled || item.ID == this.form.ID
);
optionsData.push(option);
)
optionsData.push(option)
} else {
const option = {
title: item.meta.title,
ID: String(item.ID),
disabled: disabled || item.ID == this.form.ID
};
optionsData.push(option);
}
optionsData.push(option)
}
});
})
},
handleClose(done) {
this.initForm();
done();
this.initForm()
done()
},
// 懒加载子菜单
load(tree, treeNode, resolve) {
resolve([
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
]);
])
},
// 删除菜单
deleteMenu(ID) {
this.$confirm("此操作将永久删除所有角色下该菜单, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
const res = await deleteBaseMenu({ ID });
const res = await deleteBaseMenu({ ID })
if (res.code == 0) {
this.$message({
type: "success",
message: "删除成功!"
});
this.getTableData();
type: 'success',
message: '删除成功!'
})
this.getTableData()
}
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
type: 'info',
message: '已取消删除'
})
})
},
// 初始化弹窗内表格方法
initForm() {
this.$refs.menuForm.resetFields();
this.checkFlag = false
this.$refs.menuForm.resetFields()
this.form = {
ID: 0,
path: "",
name: "",
hidden: "",
parentId: "",
component: "",
path: '',
name: '',
hidden: '',
parentId: '',
component: '',
meta: {
title: "",
icon: "",
title: '',
icon: '',
defaultMenu: false,
keepAlive: ""
keepAlive: ''
}
};
}
},
// 关闭弹窗
closeDialog() {
this.initForm();
this.dialogFormVisible = false;
this.initForm()
this.dialogFormVisible = false
},
// 添加menu
async enterDialog() {
this.$refs.menuForm.validate(async valid => {
if (valid) {
let res;
let res
if (this.isEdit) {
res = await updateBaseMenu(this.form);
res = await updateBaseMenu(this.form)
} else {
res = await addBaseMenu(this.form);
res = await addBaseMenu(this.form)
}
if (res.code == 0) {
this.$message({
type: "success",
message: this.isEdit ? "编辑成功" : "添加成功!"
});
this.getTableData();
type: 'success',
message: this.isEdit ? '编辑成功' : '添加成功!'
})
this.getTableData()
}
this.initForm();
this.dialogFormVisible = false;
this.initForm()
this.dialogFormVisible = false
}
});
})
},
// 添加菜单方法，id为 0则为添加根菜单
addMenu(id) {
this.dialogTitle = "新增菜单";
this.form.parentId = String(id);
this.isEdit = false;
this.setOptions();
this.dialogFormVisible = true;
this.dialogTitle = '新增菜单'
this.form.parentId = String(id)
this.isEdit = false
this.setOptions()
this.dialogFormVisible = true
},
// 修改菜单方法
async editMenu(id) {
this.dialogTitle = "编辑菜单";
const res = await getBaseMenuById({ id });
this.form = res.data.menu;
this.isEdit = true;
this.setOptions();
this.dialogFormVisible = true;
this.dialogTitle = '编辑菜单'
const res = await getBaseMenuById({ id })
this.form = res.data.menu
this.isEdit = true
this.setOptions()
this.dialogFormVisible = true
}
},
async created() {
this.pageSize = 999;
await this.getTableData();
this.pageSize = 999
await this.getTableData()
}
};
}
</script>
<style scoped lang="scss">
.button-box {

Write Preview
Loading…
Cancel
Save