Skip to content

S
Stusystem Web

cxt104926 / Stusystem Web

通知 4
Star 0
Fork 0
S
Stusystem Web

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 5ceec6fa 编写于 作者: cxt104926's avatar cxt104926
浏览文件
操作

菜单管理

上级 d881f8a5
隐藏空白更改
内联 并排
Showing with 207 addition and 155 deletion
src/views/system/stuMenu/index.vue
浏览文件 @ 5ceec6fa
......@@ -13,19 +13,21 @@
:filters="[{ text: '目录', value: 'M' }, { text: '菜单', value: 'C' }, { text: '按钮', value: 'B' }]"
:filter-method="filterTag" filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag :type="scope.row.menuType === 'M' ? 'success':'primary'" disable-transitions>{{ scope.row.menuType }}</el-tag>
<el-tag :type="scope.row.menuType === 'M' ? 'success':'primary'" disable-transitions>{{scope.row.menuType}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="code" label="权限code" width="200" align="center"></el-table-column>
<el-table-column prop="code" label="权限code" width="180" align="center"></el-table-column>
<el-table-column prop="isVisible" label="是否启用" width="80" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.isVisible === true ? 'success':'danger'" >{{ scope.row.isVisible === true ? '启用':'禁用' }}</el-tag>
<el-tag :type="scope.row.isVisible === true ? 'success':'danger'">
{{ scope.row.isVisible === true ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="iconImg" label="菜单图标" width="150" align="center"></el-table-column>
<el-table-column prop="pid" label="父级" align="center" width="150"></el-table-column>
<el-table-column prop="url" label="页面url" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<el-table-column prop="iconImg" label="菜单图标" width="120" align="center"></el-table-column>
<el-table-column prop="pid" label="父级" align="center" width="100"></el-table-column>
<el-table-column prop="url" label="页面url" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editData(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
......@@ -35,7 +37,8 @@
</section>
<!--新增/编辑模态框-->
<el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible" :before-close="handleDialogClose">
<el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
:before-close="handleDialogClose">
<el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
<el-row>
<el-col :span="10">
......@@ -43,26 +46,26 @@
<el-input v-model="addAndEditFormData.name" placeholder="请输入菜单名称" style="width:100%" type="text" autosize></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item prop="code" label="权限code：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:98%" type="text" autosize></el-input>
<el-col :span="12">
<el-form-item prop="pid" label="父级：" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.pid" placeholder="请选择父级菜单" style="width:100%" clearable>
<el-option :value="pidTemp.id" :label="pidTemp.name" style="height:150px;overflow: auto;background-color:#fff">
<el-tree :data="pidData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item prop="url" label="页面url：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:80%" type="text" autosize></el-input>
<el-form-item prop="code" label="权限code：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:90%" type="text" autosize></el-input>
</el-form-item>
<el-form-item prop="pid" label="父级：" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.pid" placeholder="请选择是否关闭" style="width:80%" clearable>
<el-option :value="pidData.id" :label="pidData.label" style="height:200px;overflow: auto;background-color:#fff">
<el-tree :data="pidData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-option>
</el-select>
<el-form-item prop="url" label="页面url：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:90%" type="text" autosize></el-input>
</el-form-item>
<el-row>
<el-col :span="10">
<el-form-item prop="menuType" label="菜单类型：" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.menuType" placeholder="请选择是否关闭" style="width:100%" clearable >
<el-select v-model="addAndEditFormData.menuType" placeholder="请选择是否关闭" style="width:100%" clearable>
<el-option value="M" label="目录"></el-option>
<el-option value="C" label="菜单"></el-option>
<el-option value="B" label="按钮"></el-option>
......@@ -71,19 +74,21 @@
</el-col>
<el-col :span="10">
<el-form-item prop="isVisible" label="是否启用：" :label-width="formLabelWidth">
<el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
<el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66"
inactive-color="#ff4949"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item prop="orderNum" label="排序：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.orderNum" placeholder="请输入菜单排序" style="width:100%" type="number" min="0" autosize></el-input>
<el-input v-model="addAndEditFormData.orderNum" placeholder="请输入菜单排序" style="width:100%" type="number"
min="0" autosize></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item prop="iconImg" label="菜单图标：" :label-width="formLabelWidth">
<el-popover placement="bottom" title="点击选择需要设置的图标" width="260" trigger="click">
<el-popover placement="top" title="点击选择需要设置的图标" width="260" trigger="click">
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-eleme"></i>
<i class="el-icon-delete-solid"></i>
......@@ -104,155 +109,202 @@
</template>
<script>
export default {
name: "stuMenu",
data() {
return {
tableData: [],
/* 模态框相关 */
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
isEditable: true, // 标志是否是编辑
showAddAndEditForm: false,
showForm: false,
formLabelWidth: '150px',
addAndEditFormData: {
id: '',
iconImg: '',
name: '',
url: '',
code: '',
pid: '',
menuType: '',
isVisible: '',
orderNum: ''
export default {
name: "stuMenu",
data() {
return {
tableData: [],
/* 模态框相关 */
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
isEditable: true, // 标志是否是编辑
showAddAndEditForm: false,
showForm: false,
formLabelWidth: '150px',
addAndEditFormData: {
id: '',
iconImg: '',
name: '',
url: '',
code: '',
pid: '',
menuType: '',
isVisible: '',
orderNum: ''
},
addAndEditRules: {
name: {
required: true, message: '菜单名称不能为空', trigger: 'blur'
},
addAndEditRules: {
name: {
required: true, message: '菜单名称不能为空', trigger: 'blur'
},
code: {
required: true, message: '权限code不能为空', trigger: 'blur'
},
code: {
required: true, message: '权限code不能为空', trigger: 'blur'
},
// 下拉树形
pidData: [],
defaultProps: {
children: 'children',
label: 'label'
orderNum: {
required: true, message: '排序不能为空', trigger: 'blur'
},
}
},
created() {
this.getList();
},
methods: {
getList(){
// 加载表格数据
this.api.getApi("/menu/get").then(res => {
this.tableData = res.data.list;
// debugger
// 分页
})
},
// 筛选菜单类型
filterTag(value, row) {
return row.menuType === value;
/* 下拉树形 */
pidData: [],
defaultProps: {
children: 'child',
label: 'name'
},
// 树形下拉
handleNodeClick(data) {
console.log(data);
pidTemp: {
id: '11',
name: '1'
},
}
},
created() {
this.getList();
},
methods: {
getList() {
// 加载表格数据
this.api.getApi("/menu/get").then(res => {
this.tableData = res.data.list;
// debugger
// 分页
// 加载树形菜单
})
},
// 筛选菜单类型
filterTag(value, row) {
return row.menuType === value;
},
// 编辑
editData(index, row){
this.title = "编辑";
this.isEditable = true;
this.$set(this.addAndEditFormData, 'id', row.id);
this.$set(this.addAndEditFormData, 'url', row.url);
this.$set(this.addAndEditFormData, 'iconImg', row.iconImg);
this.$set(this.addAndEditFormData, 'name', row.name);
this.$set(this.addAndEditFormData, 'code', row.code);
this.$set(this.addAndEditFormData, 'pid', row.pid);
this.$set(this.addAndEditFormData, 'menuType', row.menuType);
this.$set(this.addAndEditFormData, 'isVisible', row.isVisible);
this.$set(this.addAndEditFormData, 'orderNum', row.orderNum);
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
},
// 树形下拉
handleNodeClick(data) {
this.pidTemp.id = data.id;
this.$set(this.addAndEditFormData, 'pid', data.id);
this.pidTemp.name = data.name;
},
// 删除
deleteData(id) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.api.deleteApi("/menu/delete?id="+id).then(res => {
if (res.data.code === 200){
this.getList();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 加载树形菜单
async getTreeMenuData(pid) {
await this.api.getApi("/menu/get/treeMenu").then(res => {
this.pidData = res.data;
// pid不为空时候去给pidTemp设置相应数值
if (pid !== ''){
for (let i = 0;i<res.data.length;i++) {
let temp = res.data[i];
if (temp.id === pid){
this.pidTemp.id = temp.id;
this.pidTemp.name = temp.name;
return;
}
if (temp.child !== undefined) {
this.findPid(temp.child, pid);
}
}
}
})
},
// 关闭模态框
handleDialogClose() {
this.showAddAndEditForm = false;
this.addAndEditFormData = {};
this.addAndEditDialogFormVisible = false;
},
// 查找
findPid(data,pid){
for (let i = 0;i<data.length;i++){
let temp = data[i];
if (temp.id === pid){
this.pidTemp.id = temp.id;
this.pidTemp.name = temp.name;
return;
}
if (temp.child !== undefined){
this.findPid(temp.child, pid);
}
}
},
// 确定修改
handleConfirmEvent(formName){
this.$refs[formName].validate(async valid => {
if (valid) {
let formData = this.addAndEditFormData;
if (this.isEditable){
this.api.putApi("/menu/update",formData).then(res => {
if (res.data.code === 200){
this.getList();
this.handleDialogClose();
}
})
}else {
this.api.postApi("/menu/add",formData).then(res => {
if (res.data.code === 200){
this.getList();
this.handleDialogClose();
}
})
}
// 编辑
editData(index, row) {
this.getTreeMenuData(row.pid);
this.title = "编辑";
this.isEditable = true;
this.$set(this.addAndEditFormData, 'id', row.id);
this.$set(this.addAndEditFormData, 'url', row.url);
this.$set(this.addAndEditFormData, 'iconImg', row.iconImg);
this.$set(this.addAndEditFormData, 'name', row.name);
this.$set(this.addAndEditFormData, 'code', row.code);
this.$set(this.addAndEditFormData, 'pid', row.pid);
this.$set(this.addAndEditFormData, 'menuType', row.menuType);
this.$set(this.addAndEditFormData, 'isVisible', row.isVisible);
this.$set(this.addAndEditFormData, 'orderNum', row.orderNum);
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
},
// 删除
deleteData(id) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.api.deleteApi("/menu/delete?id=" + id).then(res => {
if (res.data.code === 200) {
this.getList();
}
})
},
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 新增
addMenu(){
this.title = "新增";
this.isEditable = false;
this.$set(this.addAndEditFormData, 'menuType', 'M');
this.$set(this.addAndEditFormData, 'isVisible', true);
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
},
// 关闭模态框
handleDialogClose() {
this.showAddAndEditForm = false;
this.addAndEditFormData = {};
this.addAndEditDialogFormVisible = false;
},
// 保存/修改
handleConfirmEvent(formName) {
this.$refs[formName].validate(async valid => {
if (valid) {
let formData = this.addAndEditFormData;
if (formData.id === formData.pid){
this.$message.error('出现错误，父级不可以是自己');
return;
}
if (this.isEditable) {
this.api.putApi("/menu/update", formData).then(res => {
if (res.data.code === 200) {
this.getList();
this.handleDialogClose();
}
})
} else {
this.api.postApi("/menu/add", formData).then(res => {
if (res.data.code === 200) {
this.getList();
this.handleDialogClose();
}
})
}
}
})
},
// 新增
addMenu() {
this.getTreeMenuData();
this.title = "新增";
this.isEditable = false;
this.$set(this.addAndEditFormData, 'menuType', 'M');
this.$set(this.addAndEditFormData, 'isVisible', true);
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
},
}
}
}
</script>
<style scoped>
......@@ -260,7 +312,7 @@
margin: 10px 10px 10px 0;
}
.title-add button{
.title-add button {
padding: 12px 7px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或