Merge branch 'main' of github.com:dataease/dataease into main

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);
+    }
+
+
 
 
 }

backend/src/main/java/io/dataease/controller/sys/response/MenuTreeNode.java

+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;
+    }
+}

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -81,7 +81,15 @@ public class DataSetTableService {
                 saveTableField(datasetTable);
             }
         } else {
-            datasetTableMapper.updateByPrimaryKeySelective(datasetTable);
+            int update = datasetTableMapper.updateByPrimaryKeySelective(datasetTable);
+            // sql 更新
+            if (update == 1) {
+                if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "sql")) {
+                    // 删除所有字段，重新抽象
+                    dataSetTableFieldsService.deleteByTableId(datasetTable.getId());
+                    saveTableField(datasetTable);
+                }
+            }
         }
         return datasetTable;
     }
@@ -262,7 +270,7 @@ public class DataSetTableService {
         DatasourceRequest datasourceRequest = new DatasourceRequest();
         datasourceRequest.setDatasource(ds);
         String sql = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class).getSql();
-        datasourceRequest.setQuery(sql);
+        datasourceRequest.setQuery("SELECT * FROM (" + sql + ") AS tmp LIMIT 0,1000");
         Map<String, List> result = datasourceProvider.fetchResultAndField(datasourceRequest);
         List<String[]> data = result.get("dataList");
         List<TableFiled> fields = result.get("fieldList");

backend/src/main/java/io/dataease/service/sys/MenuService.java

 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);

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 }

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() {

frontend/src/views/chart/chart/chart.js

@@ -88,9 +88,9 @@ export const BASE_BAR = {
   title: {
     text: ''
   },
-  grid: {
-    containLabel: true
-  },
+  // grid: {
+  //   containLabel: true
+  // },
   tooltip: {},
   legend: {
     show: true,
@@ -117,9 +117,9 @@ export const HORIZONTAL_BAR = {
   title: {
     text: ''
   },
-  grid: {
-    containLabel: true
-  },
+  // grid: {
+  //   containLabel: true
+  // },
   tooltip: {},
   legend: {
     show: true,
@@ -147,9 +147,9 @@ export const BASE_LINE = {
   title: {
     text: ''
   },
-  grid: {
-    containLabel: true
-  },
+  // grid: {
+  //   containLabel: true
+  // },
   tooltip: {},
   legend: {
     show: true,
@@ -178,9 +178,9 @@ export const BASE_PIE = {
   title: {
     text: ''
   },
-  grid: {
-    containLabel: true
-  },
+  // grid: {
+  //   containLabel: true
+  // },
   tooltip: {},
   legend: {
     show: true,
@@ -211,9 +211,9 @@ export const BASE_FUNNEL = {
   title: {
     text: ''
   },
-  grid: {
-    containLabel: true
-  },
+  // grid: {
+  //   containLabel: true
+  // },
   tooltip: {
     trigger: 'item'
   },
@@ -267,9 +267,9 @@ export const BASE_RADAR = {
   title: {
     text: ''
   },
-  grid: {
-    containLabel: true
-  },
+  // grid: {
+  //   containLabel: true
+  // },
   tooltip: {},
   legend: {
     show: true,

frontend/src/views/dataset/add/AddExcel.vue

@@ -19,10 +19,10 @@
         <el-row>
           <el-col style="width: 500px;">
             <el-form :inline="true" size="mini" class="row-style">
-              <el-form-item>
+              <el-form-item class="form-item">
                 <el-input v-model="name" :placeholder="$t('commons.name')" />
               </el-form-item>
-              <el-form-item>
+              <el-form-item class="form-item">
                 <el-upload
                   :action="baseUrl+'dataset/table/excel/upload'"
                   :multiple="false"
@@ -41,7 +41,7 @@
         </el-row>
       </el-row>
 
-      <el-row>
+      <el-row style="margin-top: 10px;">
         <el-card class="box-card dataPreview" shadow="never">
           <div slot="header" class="clearfix">
             <span>{{ $t('dataset.data_preview') }}</span>
@@ -100,27 +100,13 @@ export default {
     }
   },
   watch: {
-    // dataSource(val) {
-    //   if (val) {
-    //     post('/datasource/getTables', { id: val }).then(response => {
-    //       this.tables = response.data
-    //       this.tableData = JSON.parse(JSON.stringify(this.tables))
-    //     })
-    //   }
-    // },
-    // searchTable(val) {
-    //   if (val && val !== '') {
-    //     this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.includes(val) })))
-    //   } else {
-    //     this.tableData = JSON.parse(JSON.stringify(this.tables))
-    //   }
-    // }
   },
   mounted() {
     // this.initDataSource()
-  },
-  activated() {
-    // this.initDataSource()
+    window.onresize = () => {
+      this.calHeight()
+    }
+    this.calHeight()
   },
   methods: {
     // initDataSource() {
@@ -128,6 +114,13 @@ export default {
     //     this.options = response.data
     //   })
     // },
+    calHeight() {
+      const that = this
+      setTimeout(function() {
+        const currentHeight = document.documentElement.clientHeight
+        that.height = currentHeight - 56 - 30 - 26 - 25 - 35 - 10 - 37 - 20 - 10
+      }, 10)
+    },
     uploadSuccess(response, file, fileList) {
       // console.log(response)
       // console.log(file)

frontend/src/views/dataset/add/AddSQL.vue

@@ -76,6 +76,11 @@
               />
             </ux-grid>
           </div>
+          <span class="table-count">
+            {{ $t('dataset.preview_show') }}
+            <span class="span-number">1000</span>
+            {{ $t('dataset.preview_item') }}
+          </span>
         </el-card>
       </el-row>
     </el-row>
@@ -155,11 +160,9 @@ export default {
   },
   mounted() {
     window.onresize = () => {
-      return (() => {
-        this.height = window.innerHeight / 2
-      })()
+      this.calHeight()
     }
-    this.height = window.innerHeight / 2
+    this.calHeight()
     this.initDataSource()
     this.$refs.myCm.codemirror.on('keypress', () => {
       this.$refs.myCm.codemirror.showHint()
@@ -168,6 +171,13 @@ export default {
     this.initTableInfo()
   },
   methods: {
+    calHeight() {
+      const that = this
+      setTimeout(function() {
+        const currentHeight = document.documentElement.clientHeight
+        that.height = currentHeight - 56 - 30 - 26 - 25 - 43 - 160 - 10 - 37 - 20 - 10 - 16
+      }, 10)
+    },
     initDataSource() {
       listDatasource().then(response => {
         this.options = response.data
@@ -303,4 +313,10 @@ export default {
   span{
     font-size: 14px;
   }
+  .span-number{
+    color: #f18126;
+  }
+  .table-count{
+    color: #606266;
+  }
 </style>

frontend/src/views/dataset/data/TabDataPreview.vue

@@ -160,7 +160,7 @@ export default {
     float: right;
   }
   span{
-    font-size: 14px;
+    font-size: 12px;
   }
   .span-number{
     color: #f18126;

frontend/src/views/system/dept/form.vue

+<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>

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) {

frontend/src/views/system/menu/form.vue

+<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>

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) {

frontend/src/views/system/role/form.vue

+<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>

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) {

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
         })