.

src/main/java/cn/drewslab/xvms/repo/DepartmentRepo.java

@@ -15,5 +15,5 @@ public interface DepartmentRepo extends JpaRepository<Department, Long>, JpaSpec
     @Transactional
     void softDelete(Long id);
 
-    List<Department> findByParent(Long parent);
+    List<Department> findByParentAndDelFalse(Long parent);
 }

src/main/java/cn/drewslab/xvms/service/DepartmentService.java

@@ -26,7 +26,7 @@ public class DepartmentService {
     }
 
     private List<Department> getDepartment(Long parent) {
-        List<Department> departments = departmentRepo.findByParent(parent);
+        List<Department> departments = departmentRepo.findByParentAndDelFalse(parent);
         departments.parallelStream().forEach(department -> {
             department.setChildren(getDepartment(department.getId()));
         });

src/main/vue/src/views/Staff.vue

@@ -1,17 +1,57 @@
 <template>
     <div class="edit-view">
         <el-container class="container">
-            <el-aside class="department-tree">
-                <el-button icon="el-icon-plus" size="mini" class="btn-add" @click="add">添加</el-button>
+            <el-aside class="department-tree-container">
+                <div class="opts">
+                    <el-button icon="el-icon-plus" class="opt-item btn-add" @click="add" v-if="selectedDepartment">
+                        添加
+                    </el-button>
+                </div>
                 <el-tree
+                    ref="tree"
+                    class="department-tree"
                     :data="departments"
                     :props="defaultProps"
                     @node-click="handleNodeClick"
                     :render-content="renderContent"
                     highlight-current
+                    node-key="id"
+                    :expand-on-click-node="false"
+                    :default-expanded-keys="departments.length ? [departments[0].id] : []"
                 ></el-tree>
             </el-aside>
+            <el-main class="table-container">
+                <div class="opts">
+                    <el-button class="opt-item btn-add" icon="el-icon-plus" @click="addStaff" v-if="selectedDepartment">
+                        添加
+                    </el-button>
+                    <el-input class="opt-item search">
+                        <el-button slot="append" icon="el-icon-search"></el-button>
+                    </el-input>
+                </div>
+                <el-table :data="staffs"></el-table>
+            </el-main>
         </el-container>
+        <el-drawer title="添加人员" :visible.sync="showDrawer" direction="rtl" size="600px">
+            <el-form
+                class="staff-form"
+                :model="staffForm"
+                :rules="staffRules"
+                label-position="right"
+                label-width="80px"
+            >
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="staffForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="性别" prop="sex">
+                    <el-radio v-model="staffForm.sex" label="男"></el-radio>
+                    <el-radio v-model="staffForm.sex" label="女"></el-radio>
+                </el-form-item>
+                <el-form-item label="手机" prop="phone">
+                    <el-input v-model="staffForm.phone"></el-input>
+                </el-form-item>
+            </el-form>
+        </el-drawer>
     </div>
 </template>
 <script>
@@ -22,35 +62,60 @@ export default {
             defaultProps: {
                 label: 'name'
             },
-            selected: null
+            selectedDepartment: null,
+            selectedDepartmentNode: null,
+            showDrawer: true,
+            staffs: [],
+            staffForm: {},
+            staffRules: {
+                name: [{ required: true, message: '请输入姓名' }],
+                phone: [
+                    {
+                        pattern: /^1[3-9]\d{9}$/,
+                        message: '请输入正确的手机号',
+                        trigger: 'blur'
+                    }
+                ]
+            }
         };
     },
-    created() {
+    mounted() {
         this.$http.get('/department/tree').then(res => {
             this.departments = res;
+            if (this.departments[0]) {
+                this.$nextTick(() => {
+                    this.$refs.tree.setCurrentKey(this.departments[0].id);
+                    this.selectedDepartment = this.departments[0];
+                });
+            }
         });
     },
     methods: {
         handleNodeClick(data, node, e) {
-            console.log(data, node, e);
-            this.selected = data;
+            this.selectedDepartment = data;
+            this.selectedDepartmentNode = node;
         },
         renderContent(h, { node, data, store }) {
             return (
-                <span class={{ 'custom-tree-node': true, active: this.selected && data.id === this.selected.id }}>
+                <span
+                    class={{
+                        'custom-tree-node': true,
+                        active: this.selectedDepartment && data.id === this.selectedDepartment.id
+                    }}
+                >
                     <span>{node.label}</span>
-                    <span>
+                    <span class="opts">
                         <el-button
                             type="text"
                             size="medium"
                             icon="el-icon-edit-outline"
-                            on-click={() => this.editDepartment(data)}
+                            on-click={() => this.editDepartment(node, data)}
                         ></el-button>
                         <el-button
                             type="text"
                             size="medium"
                             icon="el-icon-close"
-                            on-click={() => this.remove(node, data)}
+                            on-click={() => this.removeDepartment(node, data)}
                         ></el-button>
                     </span>
                 </span>
@@ -75,7 +140,7 @@ export default {
                                 '/department/save',
                                 {
                                     name: instance.inputValue,
-                                    parent: this.selected ? this.selected.id : 1
+                                    parent: this.selectedDepartment ? this.selectedDepartment.id : 1
                                 },
                                 { body: 'json' }
                             )
@@ -85,8 +150,14 @@ export default {
                                 instance.showCancelButton = true;
                                 instance.showClose = true;
                                 instance.confirmButtonLoading = false;
+
+                                if (!this.selectedDepartment.children) {
+                                    this.$set(this.selectedDepartment, 'children', []);
+                                }
+                                this.selectedDepartment.children.push(res);
                             })
                             .catch(e => {
+                                console.log(e);
                                 done();
                                 this.$message.error(e.error || '添加失败');
                                 instance.showCancelButton = true;
@@ -100,7 +171,99 @@ export default {
             })
                 .then(({ value }) => {})
                 .catch(() => {});
-        }
+        },
+        removeDepartment(node, data) {
+            console.log(data);
+            this.$confirm(`确认删除${data.name}?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                beforeClose: (action, instance, done) => {
+                    if (action === 'confirm') {
+                        instance.showCancelButton = false;
+                        instance.showClose = false;
+                        instance.confirmButtonLoading = true;
+
+                        this.$http
+                            .post(`/department/del/${data.id}`)
+                            .then(res => {
+                                done();
+                                this.$message.success('删除成功');
+                                instance.showCancelButton = true;
+                                instance.showClose = true;
+                                instance.confirmButtonLoading = false;
+
+                                const parent = node.parent;
+                                const children = parent.data.children || parent.data;
+                                const index = children.findIndex(d => d.id === data.id);
+                                children.splice(index, 1);
+                            })
+                            .catch(e => {
+                                done();
+                                this.$message.error(e.error || '删除失败');
+                                instance.showCancelButton = true;
+                                instance.showClose = true;
+                                instance.confirmButtonLoading = false;
+                            });
+                    } else {
+                        done();
+                    }
+                }
+            })
+                .then(() => {})
+                .catch(e => {});
+        },
+        editDepartment(node, data) {
+            console.log(node, data);
+            this.$prompt('请输入组织名称', '编辑组织', {
+                closeOnClickModal: false,
+                closeOnPressEscape: false,
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                inputPattern: /.+/,
+                inputErrorMessage: '请输入组织名称',
+                inputValue: data.name,
+                beforeClose: (action, instance, done) => {
+                    if (action === 'confirm') {
+                        instance.showCancelButton = false;
+                        instance.showClose = false;
+                        instance.confirmButtonLoading = true;
+
+                        this.$http
+                            .post(
+                                '/department/save',
+                                {
+                                    ...data,
+                                    name: instance.inputValue
+                                },
+                                { body: 'json' }
+                            )
+                            .then(res => {
+                                done();
+                                this.$message.success('修改成功');
+                                instance.showCancelButton = true;
+                                instance.showClose = true;
+                                instance.confirmButtonLoading = false;
+
+                                data.name = instance.inputValue;
+                            })
+                            .catch(e => {
+                                console.log(e);
+                                done();
+                                this.$message.error(e.error || '修改失败');
+                                instance.showCancelButton = true;
+                                instance.showClose = true;
+                                instance.confirmButtonLoading = false;
+                            });
+                    } else {
+                        done();
+                    }
+                }
+            })
+                .then(({ value }) => {})
+                .catch(() => {});
+        },
+        addStaff() {}
     }
 };
 </script>
@@ -110,11 +273,20 @@ export default {
     padding: 20px;
     .container {
         background: white;
-        .department-tree {
+        .opts {
             padding: 10px;
+            .opt-item {
+                margin-right: 15px;
+                &.search {
+                    width: 200px;
+                    margin-right: 0;
+                    float: right;
+                }
+            }
+        }
+        .department-tree-container {
             border-right: 1px solid #dcdfe6;
-            .btn-add {
-                margin: 0 0 10px 20px;
+            .department-tree {
             }
         }
     }
@@ -126,8 +298,22 @@ export default {
     justify-content: space-between;
     font-size: 14px;
     padding-right: 8px;
+    .opts {
+        display: none;
+    }
 }
 /deep/ .el-tree-node__content {
     height: 36px;
 }
+/deep/ .el-tree-node.is-current > .el-tree-node__content {
+    .opts {
+        display: inline-block;
+    }
+}
+.table-container {
+    padding: 0;
+}
+.staff-form {
+    margin-right: 20px;
+}
 </style>