[代码完善](v2.5): v2.5 beta 菜单管理、部门管理，列表和弹窗数据懒加载

1、菜单管理表格，弹窗数据懒加载 2、部门管理表格，弹窗数据懒加载 3、角色管理，菜单分配数据懒加载 4、用户管理，左侧部门数据懒加载 2.5 Beta 详情：https://www.ydyno.com/archives/1225.html
2020-05-10 20:44:05 +08:00
parent 8393f74046
commit 38429e6f93
8 changed files with 378 additions and 67 deletions
--- a/src/api/system/dept.js
+++ b/src/api/system/dept.js
@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import qs from 'qs'

 export function getDepts(params) {
  return request({
@@ -8,6 +9,16 @@ export function getDepts(params) {
  })
 }

+export function getSuperior(ids) {
+  const params = {
+    ids: ids
+  }
+  return request({
+    url: 'api/dept/superior?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
 export function add(data) {
  return request({
    url: 'api/dept',
@@ -32,4 +43,4 @@ export function edit(data) {
  })
 }

-export default { add, edit, del, getDepts }
+export default { add, edit, del, getDepts, getSuperior }
--- a/src/api/system/job.js
+++ b/src/api/system/job.js
@@ -3,7 +3,8 @@ import request from '@/utils/request'
 export function getAllJob() {
  const params = {
    page: 0,
-    size: 9999
+    size: 9999,
+    enabled: true
  }
  return request({
    url: 'api/job',
--- a/src/api/system/menu.js
+++ b/src/api/system/menu.js
@@ -1,8 +1,23 @@
 import request from '@/utils/request'

-export function getMenusTree() {
+export function getMenusTree(pid) {
  return request({
-    url: 'api/menus/tree',
+    url: 'api/menus/lazy?pid=' + pid,
+    method: 'get'
+  })
+}
+
+export function getMenus(params) {
+  return request({
+    url: 'api/menus',
+    method: 'get',
+    params
+  })
+}
+
+export function getSuperior(id) {
+  return request({
+    url: 'api/menus/superior?id=' + id,
    method: 'get'
  })
 }
@@ -38,4 +53,4 @@ export function edit(data) {
  })
 }

-export default { add, edit, del, getMenusTree }
+export default { add, edit, del, getMenusTree, getSuperior, getMenus }
--- a/src/components/Crud/crud.js
+++ b/src/components/Crud/crud.js
@@ -132,6 +132,11 @@ function CRUD(options) {
        crud.loading = true
        // 请求数据
        initData(crud.url, crud.getQueryParams()).then(data => {
+          const table = crud.getTable()
+          if (table.lazy) { // 懒加载子节点数据，清掉已加载的数据
+            table.store.states.treeData = {}
+            table.store.states.lazyTreeNodeMap = {}
+          }
          crud.page.total = data.totalElements
          crud.data = data.content
          crud.resetDataStatus()
@@ -437,7 +442,7 @@ function CRUD(options) {
          crud.selectChange(selection, val)
        })
      } else {
-        crud.findVM('presenter').$refs['table'].clearSelection()
+        crud.getTable().clearSelection()
      }
    },
    /**
@@ -447,10 +452,10 @@ function CRUD(options) {
     */
    selectChange(selection, row) {
      // 如果selection中存在row代表是选中，否则是取消选中
-      if (selection.find(val => { return this.getDataId(val) === this.getDataId(row) })) {
+      if (selection.find(val => { return crud.getDataId(val) === crud.getDataId(row) })) {
        if (row.children) {
          row.children.forEach(val => {
-            crud.findVM('presenter').$refs['table'].toggleRowSelection(val, true)
+            crud.getTable().toggleRowSelection(val, true)
            selection.push(val)
            if (val.children) {
              crud.selectChange(selection, val)
@@ -469,7 +474,7 @@ function CRUD(options) {
    toggleRowSelection(selection, data) {
      if (data.children) {
        data.children.forEach(val => {
-          crud.findVM('presenter').$refs['table'].toggleRowSelection(val, false)
+          crud.getTable().toggleRowSelection(val, false)
          if (val.children) {
            crud.toggleRowSelection(selection, val)
          }
@@ -492,8 +497,11 @@ function CRUD(options) {
    getDataId(data) {
      return data[this.idField]
    },
+    getTable() {
+      return this.findVM('presenter').$refs.table
+    },
    attchTable() {
-      const table = this.findVM('presenter').$refs.table
+      const table = this.getTable()
      const columns = []
      table.columns.forEach((e, index) => {
        if (!e.property || e.type !== 'default') {
@@ -509,6 +517,25 @@ function CRUD(options) {
      })
      this.updateProp('tableColumns', columns)
      this.updateProp('table', table)
+
+      const that = this
+      table.$on('expand-change', (row, expanded) => {
+        if (!expanded) {
+          return
+        }
+        const lazyTreeNodeMap = table.store.states.lazyTreeNodeMap
+        const children = lazyTreeNodeMap[row.id]
+        row.children = children
+        children.forEach(ele => {
+          const id = crud.getDataId(ele)
+          if (that.dataStatus[id] === undefined) {
+            that.dataStatus[id] = {
+              delete: 0,
+              edit: 0
+            }
+          }
+        })
+      })
    }
  }
  const crud = Object.assign({}, data)
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -25,15 +25,36 @@
    </div>
    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="名称" prop="name">
+      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" style="width: 370px;" />
        </el-form-item>
-        <el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
+        <el-form-item label="部门排序" prop="deptSort">
+          <el-input-number
+            v-model.number="form.deptSort"
+            :min="0"
+            :max="999"
+            controls-position="right"
+            style="width: 370px;"
+          />
+        </el-form-item>
+        <el-form-item label="顶级部门">
+          <el-radio-group v-model="form.isTop" style="width: 140px">
+            <el-radio label="0">是</el-radio>
+            <el-radio label="1">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="状态" prop="enabled">
          <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.pid !== 0" style="margin-bottom: 0;" label="上级部门" prop="pid">
-          <treeselect v-model="form.pid" :options="depts" style="width: 370px;" placeholder="选择上级类目" />
+        <el-form-item v-if="form.isTop === '1'" style="margin-bottom: 0;" label="上级部门" prop="pid">
+          <treeselect
+            v-model="form.pid"
+            :load-options="loadDepts"
+            :options="depts"
+            style="width: 370px;"
+            placeholder="选择上级类目"
+          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
@@ -42,9 +63,21 @@
      </div>
    </el-dialog>
    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all :data="crud.data" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      lazy
+      :load="getDeptDatas"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :data="crud.data"
+      row-key="id"
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @selection-change="crud.selectionChangeHandler"
+    >
      <el-table-column :selectable="checkboxT" type="selection" width="55" />
      <el-table-column label="名称" prop="name" />
+      <el-table-column label="排序" prop="deptSort" />
      <el-table-column label="状态" align="center" prop="enabled">
        <template slot-scope="scope">
          <el-switch
@@ -79,12 +112,13 @@
 import crudDept from '@/api/system/dept'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'

-const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' }
+const defaultForm = { id: null, name: null, isTop: '1', pid: null, deptSort: 999, enabled: 'true' }
 export default {
  name: 'Dept',
  components: { Treeselect, crudOperation, rrOperation, udOperation },
@@ -100,6 +134,9 @@ export default {
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        deptSort: [
+          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      },
      permission: {
@@ -114,17 +151,67 @@ export default {
    }
  },
  methods: {
+    getDeptDatas(tree, treeNode, resolve) {
+      const params = { pid: tree.id }
+      setTimeout(() => {
+        crudDept.getDepts(params).then(res => {
+          resolve(res.content)
+        })
+      }, 100)
+    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
+      if (form.pid !== null) {
+        form.isTop = '1'
+      } else if (form.id !== null) {
+        form.isTop = '0'
+      }
      form.enabled = `${form.enabled}`
-      // 获取所有部门
-      crudDept.getDepts({ enabled: true }).then(res => {
-        this.depts = res.content
+      if (form.id != null) {
+        this.getSupDepts(form.id)
+      } else {
+        this.getDepts()
+      }
+    },
+    getSupDepts(id) {
+      crudDept.getSuperior(id).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren && !obj.children) {
+            obj.children = null
+          }
+          return obj
+        })
      })
    },
+    getDepts() {
+      crudDept.getDepts({ enabled: true }).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    // 获取弹窗内部门数据
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+          parentNode.children = res.content.map(function(obj) {
+            if (obj.hasChildren) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 100)
+        })
+      }
+    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU]() {
-      if (!this.form.pid && this.form.id !== 1) {
+      if (this.form.pid !== null && this.form.pid === this.form.id) {
        this.$message({
          message: '上级部门不能为空',
          type: 'warning'
@@ -157,5 +244,14 @@ export default {
 }
 </script>

-<style scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .vue-treeselect__control, /deep/ .vue-treeselect__placeholder, /deep/ .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .el-input-number .el-input__inner {
+    text-align: left;
+  }
 </style>
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -62,7 +62,7 @@
            <el-radio-button label="true">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
-        <el-form-item v-show="form.type.toString() !== '2'" label="菜单标题" prop="name">
+        <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
          <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
        </el-form-item>
        <el-form-item v-show="form.type.toString() === '2'" label="按钮名称" prop="name">
@@ -71,8 +71,8 @@
        <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 178px;" />
        </el-form-item>
-        <el-form-item v-if="form.type.toString() !== '2'" label="链接地址" prop="path">
-          <el-input v-model="form.path" placeholder="链接地址" style="width: 178px;" />
+        <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
        </el-form-item>
        <el-form-item label="菜单排序" prop="menuSort">
          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
@@ -84,7 +84,13 @@
          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
        </el-form-item>
        <el-form-item label="上级类目" prop="pid">
-          <treeselect v-model="form.pid" :options="menus" style="width: 450px;" placeholder="选择上级类目" />
+          <treeselect
+            v-model="form.pid"
+            :options="menus"
+            :load-options="loadMenus"
+            style="width: 450px;"
+            placeholder="选择上级类目"
+          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
@@ -93,7 +99,18 @@
      </div>
    </el-dialog>
    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      lazy
+      :load="getMenus"
+      :data="crud.data"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      row-key="id"
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @selection-change="crud.selectionChangeHandler"
+    >
      <el-table-column type="selection" width="55" />
      <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="125px" prop="title" />
      <el-table-column prop="icon" label="图标" align="center" width="60px">
@@ -106,7 +123,6 @@
          {{ scope.row.menuSort }}
        </template>
      </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" prop="path" label="路由地址" />
      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
      <el-table-column prop="iframe" label="外链" width="75px">
@@ -150,6 +166,7 @@ import crudMenu from '@/api/system/menu'
 import IconSelect from '@/components/IconSelect'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
@@ -185,13 +202,50 @@ export default {
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
-      crudMenu.getMenusTree().then(res => {
-        this.menus = []
-        const menu = { id: 0, label: '顶级类目', children: [] }
-        menu.children = res
-        this.menus.push(menu)
+      this.menus = []
+      if (form.id != null) {
+        if (form.pid === null) {
+          form.pid = 0
+        }
+        this.getSupDepts(form.id)
+      } else {
+        this.menus.push({ id: 0, label: '顶级类目', children: null })
+      }
+    },
+    getMenus(tree, treeNode, resolve) {
+      const params = { pid: tree.id }
+      setTimeout(() => {
+        crudMenu.getMenus(params).then(res => {
+          resolve(res.content)
+        })
+      }, 100)
+    },
+    getSupDepts(id) {
+      crudMenu.getSuperior(id).then(res => {
+        const children = res.content.map(function(obj) {
+          if (!obj.leaf && !obj.children) {
+            obj.children = null
+          }
+          return obj
+        })
+        this.menus = [{ id: 0, label: '顶级类目', children: children }]
      })
    },
+    loadMenus({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        crudMenu.getMenusTree(parentNode.id).then(res => {
+          parentNode.children = res.map(function(obj) {
+            if (!obj.leaf) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 100)
+        })
+      }
+    },
    // 选中图标
    selected(name) {
      this.form.icon = name
@@ -204,4 +258,8 @@ export default {
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
+  /deep/ .vue-treeselect__control, /deep/ .vue-treeselect__placeholder, /deep/ .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
 </style>
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -40,7 +40,14 @@
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
-          <treeselect v-model="form.depts" :options="depts" multiple style="width: 380px" placeholder="请选择" />
+          <treeselect
+            v-model="form.depts"
+            :load-options="loadDepts"
+            :options="depts"
+            multiple
+            style="width: 380px"
+            placeholder="请选择"
+          />
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
@@ -103,8 +110,10 @@
          </div>
          <el-tree
            ref="menu"
+            lazy
            :data="menus"
            :default-checked-keys="menuIds"
+            :load="getMenuDatas"
            :props="defaultProps"
            check-strictly
            accordion
@@ -119,7 +128,7 @@

 <script>
 import crudRoles from '@/api/system/role'
-import { getDepts } from '@/api/system/dept'
+import { getDepts, getSuperior } from '@/api/system/dept'
 import { getMenusTree } from '@/api/system/menu'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
@@ -128,6 +137,7 @@ import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'

 const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 }
 export default {
@@ -139,7 +149,7 @@ export default {
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
-      defaultProps: { children: 'children', label: 'label' },
+      defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
      dateScopes: ['全部', '本级', '自定义'], level: 3,
      currentId: 0, menuLoading: false, showButton: false,
      menus: [], menuIds: [], depts: [],
@@ -159,19 +169,29 @@ export default {
    }
  },
  created() {
-    this.getMenus()
    crudRoles.getLevel().then(data => {
      this.level = data.level
    })
  },
  methods: {
+    getMenuDatas(node, resolve) {
+      setTimeout(() => {
+        getMenusTree(node.data.id ? node.data.id : 0).then(res => {
+          resolve(res)
+        })
+      }, 100)
+    },
    [CRUD.HOOK.afterRefresh]() {
      this.$refs.menu.setCheckedKeys([])
    },
    // 编辑前
    [CRUD.HOOK.beforeToEdit](crud, form) {
      if (form.dataScope === '自定义') {
-        this.getDepts()
+        if (form.id == null) {
+          this.getDepts()
+        } else {
+          this.getSupDepts(form.depts)
+        }
      }
      const depts = []
      form.depts.forEach(function(dept, index) {
@@ -212,12 +232,6 @@ export default {
      })
      crud.form.depts = depts
    },
-    // 获取所有菜单
-    getMenus() {
-      getMenusTree().then(res => {
-        this.menus = res
-      })
-    },
    // 触发单选
    handleCurrentChange(val) {
      if (val) {
@@ -273,9 +287,44 @@ export default {
    // 获取部门数据
    getDepts() {
      getDepts({ enabled: true }).then(res => {
-        this.depts = res.content
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
      })
    },
+    getSupDepts(depts) {
+      const ids = []
+      depts.forEach(dept => {
+        ids.push(dept.id)
+      })
+      getSuperior(ids).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren && !obj.children) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    // 获取弹窗内部门数据
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+          parentNode.children = res.content.map(function(obj) {
+            if (obj.hasChildren) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 200)
+        })
+      }
+    },
    // 如果数据权限为自定义则获取部门数据
    changeScope() {
      if (this.form.dataScope === '自定义') {
@@ -300,4 +349,11 @@ export default {
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
+  /deep/ .vue-treeselect__multi-value{
+    margin-bottom: 0;
+  }
+  /deep/ .vue-treeselect__multi-value-item{
+    border: 0;
+    padding: 0;
+  }
 </style>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -2,7 +2,7 @@
  <div class="app-container">
    <el-row :gutter="20">
      <!--侧边部门数据-->
-      <el-col :xs="9" :sm="6" :md="4" :lg="4" :xl="4">
+      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
        <div class="head-container">
          <el-input
            v-model="deptName"
@@ -16,14 +16,15 @@
        </div>
        <el-tree
          :data="deptDatas"
+          :load="getDeptDatas"
          :props="defaultProps"
          :expand-on-click-node="false"
-          default-expand-all
+          lazy
          @node-click="handleNodeClick"
        />
      </el-col>
      <!--用户数据-->
-      <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
+      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
@@ -87,6 +88,7 @@
              <treeselect
                v-model="form.dept.id"
                :options="depts"
+                :load-options="loadDepts"
                style="width: 178px"
                placeholder="选择部门"
              />
@@ -171,7 +173,7 @@
              />
            </template>
          </el-table-column>
-          <el-table-column :show-overflow-tooltip="true" prop="createTime" width="140" label="创建日期">
+          <el-table-column :show-overflow-tooltip="true" prop="createTime" width="135" label="创建日期">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
@@ -179,7 +181,7 @@
          <el-table-column
            v-permission="['admin','user:edit','user:del']"
            label="操作"
-            width="125"
+            width="115"
            align="center"
            fixed="right"
          >
@@ -202,7 +204,7 @@
 <script>
 import crudUser from '@/api/system/user'
 import { isvalidPhone } from '@/utils/validate'
-import { getDepts } from '@/api/system/dept'
+import { getDepts, getSuperior } from '@/api/system/dept'
 import { getAll, getLevel } from '@/api/system/role'
 import { getAllJob } from '@/api/system/job'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
@@ -213,7 +215,7 @@ import pagination from '@crud/Pagination'
 import Treeselect from '@riophae/vue-treeselect'
 import { mapGetters } from 'vuex'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 let userRoles = []
 let userJobs = []
 const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: { id: null }, phone: null }
@@ -240,7 +242,7 @@ export default {
    return {
      height: document.documentElement.clientHeight - 180 + 'px;',
      deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
-      defaultProps: { children: 'children', label: 'name' },
+      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
      permission: {
        add: ['admin', 'user:add'],
        edit: ['admin', 'user:edit'],
@@ -275,10 +277,7 @@ export default {
    ])
  },
  created() {
-    this.$nextTick(() => {
-      this.getDeptDatas()
-      this.crud.msg.add = '新增成功，默认密码：123456'
-    })
+    this.crud.msg.add = '新增成功，默认密码：123456'
  },
  mounted: function() {
    const that = this
@@ -329,8 +328,12 @@ export default {
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
-      this.getDepts()
      this.getRoles()
+      if (form.id == null) {
+        this.getDepts()
+      } else {
+        this.getSupDepts(form.dept.id)
+      }
      this.getRoleLevel()
      this.getJobs()
      form.enabled = form.enabled.toString()
@@ -383,19 +386,59 @@ export default {
      return true
    },
    // 获取左侧部门数据
-    getDeptDatas() {
+    getDeptDatas(node, resolve) {
      const sort = 'id,desc'
      const params = { sort: sort }
-      if (this.deptName) { params['name'] = this.deptName }
-      getDepts(params).then(res => {
-        this.deptDatas = res.content
+      if (typeof node !== 'object') {
+        params['name'] = node
+      } else if (node.level !== 0) {
+        params['pid'] = node.data.id
+      }
+      setTimeout(() => {
+        getDepts(params).then(res => {
+          if (resolve) {
+            resolve(res.content)
+          } else {
+            this.deptDatas = res.content
+          }
+        })
+      }, 100)
+    },
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    getSupDepts(deptId) {
+      getSuperior(deptId).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren && !obj.children) {
+            obj.children = null
+          }
+          return obj
+        })
      })
    },
    // 获取弹窗内部门数据
-    getDepts() {
-      getDepts({ enabled: true }).then(res => {
-        this.depts = res.content
-      })
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+          parentNode.children = res.content.map(function(obj) {
+            if (obj.hasChildren) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 200)
+        })
+      }
    },
    // 切换部门
    handleNodeClick(data) {
@@ -447,5 +490,9 @@ export default {
 }
 </script>

-<style scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .vue-treeselect__control, /deep/ .vue-treeselect__placeholder, /deep/ .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
 </style>