|
|
@@ -1,152 +1,125 @@
|
|
|
<template>
|
|
|
<basic-container>
|
|
|
- <avue-crud :option="option"
|
|
|
- :data="data"
|
|
|
- ref="crud"
|
|
|
- v-model="form"
|
|
|
- :permission="permissionList"
|
|
|
- :before-open="beforeOpen"
|
|
|
- @row-del="rowDel"
|
|
|
- @row-update="rowUpdate"
|
|
|
- @row-save="rowSave"
|
|
|
- @tree-load="treeLoad">
|
|
|
- <template slot-scope="scope"
|
|
|
- slot="icon">
|
|
|
- <div style="text-align:center">
|
|
|
- <i :class="scope.row.icon"></i>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template slot-scope="scope"
|
|
|
- slot="type">
|
|
|
- <div style="text-align:center">
|
|
|
- <el-tag v-if="scope.row.type !== '1'" size="small" type="success">菜单</el-tag>
|
|
|
- <el-tag v-else-if="scope.row.type === '1'" size="small" type="info">按钮</el-tag>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </avue-crud>
|
|
|
+ <div class="avue-crud">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button v-if="permissions.sys_menu_add" icon="el-icon-plus" type="primary"
|
|
|
+ @click="addOrUpdateHandle(false)">
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ v-loading="loading"
|
|
|
+ :data="menuList"
|
|
|
+ row-key="id"
|
|
|
+ :tree-props="{children: 'children', hasChildren: 'hasChildrens'}">
|
|
|
+ <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="icon" label="图标" align="center" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i :class="scope.row.icon"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="sort" label="排序" width="60"></el-table-column>
|
|
|
+ <el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
|
|
|
+ <el-table-column prop="type" label="类型" width="80" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag type="success" v-if="scope.row.type === '0'">左菜单</el-tag>
|
|
|
+ <el-tag type="success" v-if="scope.row.type === '2'">顶菜单</el-tag>
|
|
|
+ <el-tag type="info" v-if="scope.row.type === '1'">按钮</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="keepAlive" label="缓冲" width="80" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag type="info" v-if="scope.row.keepAlive === '0'">关闭</el-tag>
|
|
|
+ <el-tag type="success" v-if="scope.row.keepAlive === '1'">开启</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addOrUpdateHandle(false,scope.row.id)"
|
|
|
+ v-if="permissions.sys_menu_add">新增
|
|
|
+ </el-button>
|
|
|
+ <el-button size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="addOrUpdateHandle(true,scope.row.id)"
|
|
|
+ v-if="permissions.sys_menu_edit">修改
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-if="permissions.sys_menu_del">删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></table-form>
|
|
|
+ </div>
|
|
|
</basic-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {addObj, delObj, fetchMenuTree, getObj, putObj} from '@/api/admin/menu'
|
|
|
- import {validatenull} from '@/util/validate'
|
|
|
- import {mapGetters} from "vuex";
|
|
|
- import {tableOption} from '@/const/crud/admin/menu'
|
|
|
+ import {delObj, fetchMenuTree} from '@/api/admin/menu'
|
|
|
+ import TableForm from './menu-form'
|
|
|
+ import {mapGetters} from 'vuex'
|
|
|
|
|
|
export default {
|
|
|
+ name: "Menu",
|
|
|
+ components: {TableForm},
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {},
|
|
|
- option: tableOption,
|
|
|
- lazy: true,
|
|
|
- data: []
|
|
|
+ addOrUpdateVisible: false,
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 菜单表格树数据
|
|
|
+ menuList: [],
|
|
|
+ // 菜单树选项
|
|
|
+ menuOptions: [],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.onLoad()
|
|
|
- },
|
|
|
- watch: {
|
|
|
- 'form.type'() {
|
|
|
- this.showHide()
|
|
|
- }
|
|
|
+ this.getList();
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(["permissions"]),
|
|
|
- permissionList() {
|
|
|
- return {
|
|
|
- addBtn: this.vaildData(this.permissions.sys_menu_add, false),
|
|
|
- delBtn: this.vaildData(this.permissions.sys_menu_del, false),
|
|
|
- editBtn: this.vaildData(this.permissions.sys_menu_edit, false)
|
|
|
- };
|
|
|
- }
|
|
|
+ ...mapGetters(['permissions']),
|
|
|
},
|
|
|
methods: {
|
|
|
- rowSave(row, done) {
|
|
|
- if (validatenull(row.parentId)) {
|
|
|
- row.parentId = -1
|
|
|
- }
|
|
|
- addObj(row).then(res => {
|
|
|
- row.id = res.data.data.menuId;
|
|
|
- done(row);
|
|
|
- this.$message.success("添加成功");
|
|
|
- });
|
|
|
+ addOrUpdateHandle(isEdit, id) {
|
|
|
+ this.addOrUpdateVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.addOrUpdate.init(isEdit, id)
|
|
|
+ })
|
|
|
},
|
|
|
- rowUpdate(row, index, done, loading) {
|
|
|
- if (validatenull(row.parentId)) {
|
|
|
- row.parentId = -1
|
|
|
- }
|
|
|
- putObj(row).then(() => {
|
|
|
- done(row)
|
|
|
- this.$message.success("修改成功");
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ fetchMenuTree(false).then(response => {
|
|
|
+ this.menuList = response.data.data
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
- rowDel(row, index, done) {
|
|
|
- this.$confirm("确定将选择数据删除?", {
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning"
|
|
|
- }).then(() => {
|
|
|
+ }).then(function () {
|
|
|
return delObj(row.id);
|
|
|
}).then(() => {
|
|
|
- done(row);
|
|
|
- this.$message.success("删除成功");
|
|
|
- });
|
|
|
- },
|
|
|
- beforeOpen(done, type) {
|
|
|
- if (["edit", "view"].includes(type)) {
|
|
|
- getObj(this.form.id).then(res => {
|
|
|
- this.form = res.data.data;
|
|
|
- });
|
|
|
- }
|
|
|
- done();
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- fetchMenuTree(this.option.lazy).then(res => {
|
|
|
- this.data = res.data.data;
|
|
|
- });
|
|
|
- },
|
|
|
- treeLoad(node, child, resolve) {
|
|
|
- fetchMenuTree(this.option.lazy, node.id).then(res => {
|
|
|
- resolve(res.data.data)
|
|
|
+ this.getList();
|
|
|
+ this.$message.success('删除成功')
|
|
|
})
|
|
|
- },
|
|
|
- showHide() {
|
|
|
- this.$refs.crud.option.column.filter(item => {
|
|
|
- // 不是按钮类型 要输入path
|
|
|
- if (item.prop === "path") {
|
|
|
- item.addDisplay = this.form.type !== "1"
|
|
|
- item.editDisplay = this.form.type !== "1"
|
|
|
- }
|
|
|
- // 不是按钮类型 要输入path
|
|
|
- if (item.prop === "icon") {
|
|
|
- item.addDisplay = this.form.type !== "1"
|
|
|
- item.editDisplay = this.form.type !== "1"
|
|
|
- }
|
|
|
-
|
|
|
- // 是按钮类型输入permission
|
|
|
- if (item.prop === "permission") {
|
|
|
- item.addDisplay = this.form.type === "1"
|
|
|
- item.editDisplay = this.form.type === "1"
|
|
|
- }
|
|
|
-
|
|
|
- // 是顶部菜单不显示上级菜单
|
|
|
- if (item.prop === "parentId") {
|
|
|
- item.addDisplay = this.form.type !== "2"
|
|
|
- item.editDisplay = this.form.type !== "2"
|
|
|
- item.rules[0].required = this.form.type === "1"
|
|
|
- }
|
|
|
-
|
|
|
- // 菜单开启 keepAlive 选择
|
|
|
- if (item.prop === "keepAlive") {
|
|
|
- item.addDisplay = this.form.type === "0"
|
|
|
- item.editDisplay = this.form.type === "0"
|
|
|
- item.rules[0].required = this.form.type === "0"
|
|
|
- }
|
|
|
- });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-</style>
|
冷冷