From 1285ba494ddc6e8a31819758f4f66c539f0092e3 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 29 Apr 2021 12:46:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E6=94=B9=E4=B8=BA=E9=9A=90=E8=97=8F=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/sys/SysMenuController.java     |   7 +
 .../controller/sys/response/MenuTreeNode.java |  26 +++
 .../io/dataease/service/sys/MenuService.java  |  31 +++
 frontend/src/api/system/menu.js               |   9 +-
 .../business/complex-table/index.vue          |   4 +
 frontend/src/views/system/dept/form.vue       | 173 ++++++++++++++++
 frontend/src/views/system/dept/index.vue      |  22 ++-
 frontend/src/views/system/menu/form.vue       | 187 ++++++++++++++++++
 frontend/src/views/system/menu/index.vue      |  22 ++-
 frontend/src/views/system/role/form.vue       |  80 ++++++++
 frontend/src/views/system/role/index.vue      |  18 +-
 frontend/src/views/system/user/form.vue       |   3 +-
 12 files changed, 558 insertions(+), 24 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/controller/sys/response/MenuTreeNode.java
 create mode 100644 frontend/src/views/system/dept/form.vue
 create mode 100644 frontend/src/views/system/menu/form.vue
 create mode 100644 frontend/src/views/system/role/form.vue

diff --git a/backend/src/main/java/io/dataease/controller/sys/SysMenuController.java b/backend/src/main/java/io/dataease/controller/sys/SysMenuController.java
index 19e7026fdf..517c83a130 100644
--- a/backend/src/main/java/io/dataease/controller/sys/SysMenuController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/SysMenuController.java
@@ -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);
+    }
+
+
 
 
 }
diff --git a/backend/src/main/java/io/dataease/controller/sys/response/MenuTreeNode.java b/backend/src/main/java/io/dataease/controller/sys/response/MenuTreeNode.java
new file mode 100644
index 0000000000..56d708a369
--- /dev/null
+++ b/backend/src/main/java/io/dataease/controller/sys/response/MenuTreeNode.java
@@ -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;
+    }
+}
diff --git a/backend/src/main/java/io/dataease/service/sys/MenuService.java b/backend/src/main/java/io/dataease/service/sys/MenuService.java
index 8eb3fe2b1d..725fa7b390 100644
--- a/backend/src/main/java/io/dataease/service/sys/MenuService.java
+++ b/backend/src/main/java/io/dataease/service/sys/MenuService.java
@@ -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);
diff --git a/frontend/src/api/system/menu.js b/frontend/src/api/system/menu.js
index a093687647..2aef84616e 100644
--- a/frontend/src/api/system/menu.js
+++ b/frontend/src/api/system/menu.js
@@ -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 }
diff --git a/frontend/src/components/business/complex-table/index.vue b/frontend/src/components/business/complex-table/index.vue
index 9c625a4edb..684a9430dc 100644
--- a/frontend/src/components/business/complex-table/index.vue
+++ b/frontend/src/components/business/complex-table/index.vue
@@ -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() {
diff --git a/frontend/src/views/system/dept/form.vue b/frontend/src/views/system/dept/form.vue
new file mode 100644
index 0000000000..9d767d63ca
--- /dev/null
+++ b/frontend/src/views/system/dept/form.vue
@@ -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>
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index 19a3c8b8ce..a2c25378a8 100644
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@@ -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) {
diff --git a/frontend/src/views/system/menu/form.vue b/frontend/src/views/system/menu/form.vue
new file mode 100644
index 0000000000..d84b7529be
--- /dev/null
+++ b/frontend/src/views/system/menu/form.vue
@@ -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>
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index 1fb23fc3b1..b17ef69f7e 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -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) {
diff --git a/frontend/src/views/system/role/form.vue b/frontend/src/views/system/role/form.vue
new file mode 100644
index 0000000000..6ecc4551fb
--- /dev/null
+++ b/frontend/src/views/system/role/form.vue
@@ -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>
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index a80a4a55a5..93e2c40ca7 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -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) {
diff --git a/frontend/src/views/system/user/form.vue b/frontend/src/views/system/user/form.vue
index 520684236f..39c7fd9696 100644
--- a/frontend/src/views/system/user/form.vue
+++ b/frontend/src/views/system/user/form.vue
@@ -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
         })