center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 系统管理弹框改为隐藏路由

Browse Source
This commit is contained in:
fit2cloud-chenyw 2021-04-29 12:46:51 +08:00
parent 3526d39e01
commit 1285ba494d
12 changed files with 558 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/src/main/java/io/dataease/controller/sys/SysMenuController.java
View File

@ -7,6 +7,7 @@ import io.dataease.commons.utils.BeanUtils;
import io.dataease.controller.sys.request.MenuCreateRequest;
import io.dataease.controller.sys.request.MenuDeleteRequest;
import io.dataease.controller.sys.response.MenuNodeResponse;
import io.dataease.controller.sys.response.MenuTreeNode;
import io.dataease.service.sys.MenuService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
@ -62,6 +63,12 @@ public class SysMenuController {
sets.add(pid);
return sets;
}
@PostMapping("/nodesByMenuId/{menuId}")
public List<MenuTreeNode> nodesByMenuId(@PathVariable("menuId") Long menuId) {
return menuService.searchTree(menuId);
}
}

26
backend/src/main/java/io/dataease/controller/sys/response/MenuTreeNode.java Normal file
View File

@ -0,0 +1,26 @@
package io.dataease.controller.sys.response;
import com.fasterxml.jackson.annotation.JsonInclude;
import lombok.Data;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
@Data
@JsonInclude(JsonInclude.Include.NON_NULL)
public class MenuTreeNode implements Serializable {
private Long id;
private String label;
private Boolean hasChildren;
private List<MenuTreeNode> children;
public List<MenuTreeNode> toList(){
List<MenuTreeNode> lists = new ArrayList<>();
lists.add(this);
return lists;
}
}

31
backend/src/main/java/io/dataease/service/sys/MenuService.java
View File

@ -1,5 +1,6 @@
package io.dataease.service.sys;
import io.dataease.base.domain.SysDept;
import io.dataease.base.domain.SysMenu;
import io.dataease.base.domain.SysMenuExample;
import io.dataease.base.mapper.SysMenuMapper;
@ -7,8 +8,10 @@ import io.dataease.base.mapper.ext.ExtMenuMapper;
import io.dataease.commons.utils.BeanUtils;
import io.dataease.controller.sys.request.MenuCreateRequest;
import io.dataease.controller.sys.request.MenuDeleteRequest;
import io.dataease.controller.sys.response.DeptTreeNode;
import io.dataease.controller.sys.response.MenuNodeResponse;
import io.dataease.controller.sys.response.MenuTreeNode;
import org.apache.commons.collections4.CollectionUtils;
import org.apache.commons.lang3.ObjectUtils;
import org.springframework.stereotype.Service;
@ -16,6 +19,7 @@ import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.HashSet;
import java.util.List;
import java.util.Optional;
import java.util.Set;
import java.util.stream.Collectors;
@ -121,6 +125,24 @@ public class MenuService {
return responses;
}
public List<MenuTreeNode> searchTree(Long menuId) {
List<SysMenu> roots = nodesByPid(0L);
if (menuId == MENU_ROOT_PID) return roots.stream().map(this::format).collect(Collectors.toList());
SysMenu sysMenu = sysMenuMapper.selectByPrimaryKey(menuId);
if (roots.stream().anyMatch(node -> node.getMenuId() == menuId)) return roots.stream().map(this::format).collect(Collectors.toList());
SysMenu current = sysMenu;
MenuTreeNode currentNode = format(sysMenu);
while (current.getPid() != MENU_ROOT_PID){
SysMenu parent = sysMenuMapper.selectByPrimaryKey(current.getPid()); //pid上有索引 所以效率不会太差
MenuTreeNode parentNode = format(parent);
parentNode.setChildren(currentNode.toList());
current = parent;
currentNode = parentNode;
}
MenuTreeNode targetRootNode = currentNode;
return roots.stream().map(node -> node.getMenuId() == targetRootNode.getId() ? targetRootNode : format(node)).collect(Collectors.toList());
}
private Set<SysMenu> getChilds(List<SysMenu> lists, Set<SysMenu> sets){
lists.forEach(menu -> {
sets.add(menu);
@ -132,6 +154,15 @@ public class MenuService {
return sets;
}
private MenuTreeNode format(SysMenu sysMenu) {
MenuTreeNode menuTreeNode = new MenuTreeNode();
menuTreeNode.setId(sysMenu.getMenuId());
menuTreeNode.setLabel(sysMenu.getName());
menuTreeNode.setHasChildren(false);
Optional.ofNullable(sysMenu.getMenuSort()).ifPresent(num -> menuTreeNode.setHasChildren(num > 0));
return menuTreeNode;
}
public List<MenuNodeResponse> convert(List<SysMenu> menus){
return menus.stream().map(node -> {
MenuNodeResponse menuNodeResponse = BeanUtils.copyBean(new MenuNodeResponse(), node);

9
frontend/src/api/system/menu.js
View File

@ -46,4 +46,11 @@ export function editMenu(data) {
})
}
export default { addMenu, editMenu, delMenu, getMenusTree, getChild }
export function treeByMenuId(menuId) {
return request({
url: '/api/menu/nodesByMenuId/' + menuId,
method: 'post'
})
}
export default { addMenu, editMenu, delMenu, getMenusTree, getChild, treeByMenuId }

4
frontend/src/components/business/complex-table/index.vue
View File

@ -46,9 +46,13 @@ export default {
type: Array,
default: () => []
},
// eslint-disable-next-line vue/require-default-prop
localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
// eslint-disable-next-line vue/require-default-prop
header: String,
// eslint-disable-next-line vue/require-default-prop
searchConfig: Object,
// eslint-disable-next-line vue/require-default-prop
paginationConfig: Object
},
data() {

173
frontend/src/views/system/dept/form.vue Normal file
View File

@ -0,0 +1,173 @@
<template>
<layout-content :header="formType=='add' ? $t('organization.create') : $t('organization.modify')" back-name="组织管理">
<el-form ref="deptForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
<el-form-item label="组织名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="组织排序" prop="deptSort">
<el-input-number
v-model.number="form.deptSort"
:min="0"
:max="999"
controls-position="right"
/>
</el-form-item>
<el-form-item label="顶级组织" prop="top">
<el-radio-group v-model="form.top" @change="topChange">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="enabled">
<el-radio-group v-model="form.enabled" disabled>
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">停用</el-radio>
</el-radio-group>
<!-- <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio> -->
</el-form-item>
<el-form-item v-if="!form.top" label="上级组织" prop="pid">
<treeselect
v-model="form.pid"
:auto-load-root-options="false"
:load-options="loadDepts"
:options="depts"
placeholder="选择上级类目"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</layout-content>
</template>
<script>
import LayoutContent from '@/components/business/LayoutContent'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
import { getDeptTree, treeByDeptId, addDept, editDept } from '@/api/system/dept'
export default {
components: { LayoutContent, Treeselect },
data() {
return {
defaultForm: { deptId: null, top: true, enabled: true, pid: null },
maps: new Map(),
form: {},
rule: {
name: [
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
{ min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur' }
],
description: [
{ max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
]
},
depts: null,
formType: 'add'
}
},
created() {
if (this.$router.currentRoute.params && this.$router.currentRoute.params.deptId) {
const row = this.$router.currentRoute.params
this.edit(row)
} else {
this.create()
}
},
methods: {
create() {
this.formType = 'add'
this.form = Object.assign({}, this.defaultForm)
},
edit(row) {
this.formType = 'modify'
this.form = Object.assign({}, row)
this.initDeptTree()
},
initDeptTree() {
treeByDeptId(this.form.pid || 0).then(res => {
const results = res.data.map(node => {
if (node.hasChildren && !node.children) {
node.children = null
}
return node
})
this.depts = results
})
},
// 获取弹窗内部门数据
loadDepts({ action, parentNode, callback }) {
if (action === LOAD_ROOT_OPTIONS && !this.form.pid) {
const _self = this
treeByDeptId(0).then(res => {
const results = res.data.map(node => {
if (node.hasChildren && !node.children) {
node.children = null
}
return node
})
_self.depts = results
callback()
})
}
if (action === LOAD_CHILDREN_OPTIONS) {
const _self = this
getDeptTree(parentNode.id).then(res => {
parentNode.children = res.data.map(function(obj) {
return _self.normalizer(obj)
})
callback()
})
}
},
normalizer(node) {
if (node.hasChildren) {
node.children = null
}
return {
id: node.deptId,
label: node.name,
children: node.children
}
},
topChange(value) {
if (!value) {
this.form.pid = null
this.depts = null
}
},
reset() {
this.$refs.deptForm.resetFields()
},
save() {
this.$refs.deptForm.validate(valid => {
if (valid) {
const method = this.formType === 'add' ? addDept : editDept
method(this.form).then(res => {
this.$success(this.$t('commons.save_success'))
this.backToList()
})
} else {
return false
}
})
},
backToList() {
this.$router.push({ name: '组织管理' })
}
}
}
</script>

22
frontend/src/views/system/dept/index.vue
View File

@ -203,17 +203,23 @@ export default {
this.search()
},
methods: {
// create() {
// this.form = Object.assign({}, this.defaultForm)
// this.dialogOrgAddVisible = true
// this.formType = 'add'
// },
// edit(row) {
// this.dialogOrgAddVisible = true
// this.formType = 'modify'
// this.oldPid = row.pid
// this.form = Object.assign({}, row)
// this.treeByRow(row)
// },
create() {
this.form = Object.assign({}, this.defaultForm)
this.dialogOrgAddVisible = true
this.formType = 'add'
this.$router.push({ name: '组织表单' })
},
edit(row) {
this.dialogOrgAddVisible = true
this.formType = 'modify'
this.oldPid = row.pid
this.form = Object.assign({}, row)
this.treeByRow(row)
this.$router.push({ name: '组织表单', params: row })
},
treeByRow(row) {

187
frontend/src/views/system/menu/form.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<layout-content :header="formType=='add' ? $t('menu.create') : $t('menu.modify')" back-name="菜单管理">
<el-form ref="menuForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
<el-form-item label="菜单类型" prop="type">
<el-radio-group v-model="form.type" size="mini" :disabled="formType!=='add'">
<el-radio-button label="0">目录</el-radio-button>
<el-radio-button label="1">菜单</el-radio-button>
<el-radio-button label="2">按钮</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.type!== 2" label="菜单图标" prop="icon">
<el-popover
placement="bottom-start"
width="425"
trigger="click"
@show="$refs['iconSelect'].reset()"
>
<IconSelect ref="iconSelect" @selected="selected" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
</el-input>
</el-popover>
</el-form-item>
<el-form-item v-if="form.type !== 2" label="菜单标题" prop="title">
<el-input v-model="form.title" placeholder="菜单标题" />
</el-form-item>
<el-form-item v-if="form.type === 2" label="按钮名称" prop="title">
<el-input v-model="form.title" placeholder="按钮名称" />
</el-form-item>
<el-form-item v-if="form.type !== 0" label="权限标识" prop="permission">
<el-input v-model="form.permission" :disabled="form.iframe || formType!=='add'" placeholder="权限标识" />
</el-form-item>
<el-form-item v-if="form.type !== 2" label="路由地址" prop="path">
<el-input v-model="form.path" placeholder="路由地址" :disabled="formType!=='add'" />
</el-form-item>
<el-form-item label="菜单排序" prop="menuSort">
<el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" />
</el-form-item>
<el-form-item v-if="!form.iframe && form.type === 1" label="组件名称" prop="componentName">
<el-input v-model="form.componentName" :disabled="formType!=='add'" placeholder="匹配组件内Name字段" />
</el-form-item>
<el-form-item v-if="!form.iframe && form.type === 1" label="组件路径" prop="component">
<el-input v-model="form.component" :disabled="formType!=='add'" placeholder="组件路径" />
</el-form-item>
<el-form-item label="上级类目" prop="pid">
<treeselect
v-model="form.pid"
:disabled="formType!=='add'"
:options="menus"
:load-options="loadMenus"
placeholder="选择上级类目"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</layout-content>
</template>
<script>
import LayoutContent from '@/components/business/LayoutContent'
import Treeselect from '@riophae/vue-treeselect'
import IconSelect from '@/components/IconSelect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
import { addMenu, editMenu, getMenusTree, treeByMenuId } from '@/api/system/menu'
export default {
components: { LayoutContent, Treeselect, IconSelect },
data() {
return {
topMunu: { id: 0, label: '顶级目录', children: null },
defaultForm: { menuId: null, title: null, menuSort: 999, path: null, component: null, componentName: null, iframe: false, pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null },
form: {},
rule: {
name: [
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
{ min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur' }
],
description: [
{ max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
]
},
menus: null,
maps: new Map(),
formType: 'add'
}
},
created() {
if (this.$router.currentRoute.params && this.$router.currentRoute.params.menuId) {
const row = this.$router.currentRoute.params
this.edit(row)
} else {
this.create()
}
this.initData()
},
methods: {
create() {
this.formType = 'add'
this.form = Object.assign({}, this.defaultForm)
},
edit(row) {
this.formType = 'modify'
this.form = Object.assign({}, row)
this.initMenuTree()
},
initMenuTree() {
treeByMenuId(this.form.pid || 0).then(res => {
const results = res.data.map(node => {
if (node.hasChildren && !node.children) {
node.children = null
}
return node
})
this.menus = results
})
},
// 获取弹窗内部门数据
loadMenus({ action, parentNode, callback }) {
if (action === LOAD_ROOT_OPTIONS) {
const _self = this
!this.menus && getMenusTree('0').then(res => {
_self.menus = res.data.map(node => _self.normalizer(node))
callback()
})
}
if (action === LOAD_CHILDREN_OPTIONS) {
const _self = this
getMenusTree(parentNode.id).then(res => {
parentNode.children = res.data.map(function(obj) {
return _self.normalizer(obj)
})
callback()
})
}
},
initData() {
this.menus = []
this.menus.push(this.topMunu)
},
normalizer(node) {
if (node.hasChildren) {
node.children = null
}
return {
id: node.menuId,
label: node.title,
children: node.children
}
},
selected(name) {
this.form.icon = name
},
reset() {
this.$refs.menuForm.resetFields()
},
save() {
this.$refs.menuForm.validate(valid => {
if (valid) {
const method = this.formType === 'add' ? addMenu : editMenu
method(this.form).then(res => {
this.$success(this.$t('commons.save_success'))
this.backToList()
})
} else {
return false
}
})
},
backToList() {
this.$router.push({ name: '菜单管理' })
}
}
}
</script>

22
frontend/src/views/system/menu/index.vue
View File

@ -199,21 +199,27 @@ export default {
this.initTableData()
},
methods: {
// create() {
// this.form = Object.assign({}, this.defaultForm)
// this.dialogVisible = true
// this.formType = 'add'
// },
create() {
this.form = Object.assign({}, this.defaultForm)
this.dialogVisible = true
this.formType = 'add'
this.$router.push({ name: '菜单表单' })
},
search(condition) {
console.log(condition)
},
// edit(row) {
// this.dialogVisible = true
// this.formType = 'modify'
// this.oldPid = row.pid
// this.form = Object.assign({}, row)
// this.treeByRow(row)
// },
edit(row) {
this.dialogVisible = true
this.formType = 'modify'
this.oldPid = row.pid
this.form = Object.assign({}, row)
this.treeByRow(row)
this.$router.push({ name: '菜单表单', params: row })
},
treeByRow(row) {

80
frontend/src/views/system/role/form.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<layout-content :header="formType=='add' ? $t('role.add') : $t('role.modify')" back-name="角色管理">
<el-form ref="roleForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
<el-form-item label="角色名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="角色代码" prop="code">
<el-input v-model="form.code" :disabled="formType !== 'add'" />
</el-form-item>
<el-form-item label="描述信息" prop="description">
<el-input v-model="form.description" type="textarea" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save">保存</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</layout-content>
</template>
<script>
import LayoutContent from '@/components/business/LayoutContent'
import { addRole, editRole } from '@/api/system/user'
export default {
components: { LayoutContent },
data() {
return {
form: {},
rule: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
code: [{ required: true, message: '请输入代码', trigger: 'blur' }]
}
}
},
created() {
if (this.$router.currentRoute.params && this.$router.currentRoute.params.roleId) {
const row = this.$router.currentRoute.params
this.edit(row)
} else {
this.create()
}
},
methods: {
create() {
this.formType = 'add'
},
edit(row) {
this.formType = 'modify'
this.form = Object.assign({}, row)
},
reset() {
this.$refs.roleForm.resetFields()
},
save() {
this.$refs.roleForm.validate(valid => {
if (valid) {
const method = this.formType === 'add' ? addRole : editRole
method(this.form).then(res => {
this.$success(this.$t('commons.save_success'))
this.backToList()
})
} else {
return false
}
})
},
backToList() {
this.$router.push({ name: '角色管理' })
}
}
}
</script>

18
frontend/src/views/system/role/index.vue
View File

@ -152,10 +152,13 @@ export default {
handleClick(tab, event) {
console.log(tab, event)
},
// create() {
// this.form = {}
// this.formType = 'add'
// this.dialogVisible = true
// },
create() {
this.form = {}
this.formType = 'add'
this.dialogVisible = true
this.$router.push({ name: '角色表单' })
},
search(condition) {
const temp = formatCondition(condition)
@ -167,10 +170,13 @@ export default {
})
},
// edit(row) {
// this.formType = 'modify'
// this.dialogVisible = true
// this.form = Object.assign({}, row)
// },
edit(row) {
this.formType = 'modify'
this.dialogVisible = true
this.form = Object.assign({}, row)
this.$router.push({ name: '角色表单', params: row })
},
saveRole(roleForm) {

3
frontend/src/views/system/user/form.vue
View File

@ -31,7 +31,7 @@
v-model="form.deptId"
:options="depts"
:load-options="loadDepts"
:auto-load-root-options="false"
placeholder="选择部门"
/>
</el-form-item>
@ -182,6 +182,7 @@ export default {
const results = res.data.map(node => {
if (node.hasChildren && !node.children) {
node.children = null
// delete node.children
}
return node
})