删除部门

src/api/departments.js

@@ -1,7 +1,25 @@
 import request from '@/utils/request'
 
+// 获取部门信息
 export function getDepartments() {
   return request({
     url: '/company/department'
   })
 }
+
+// 删除部门
+export function delDepartments(id) {
+  return request({
+    url: `/company/department/${id}`,
+    method: 'delete'
+  })
+}
+
+// 新增部门
+export function addDepartments(data) {
+  return request({
+    url: '/company/department',
+    method: 'post',
+    data
+  })
+}

src/views/departments/componets/tree-tools.vue

@@ -9,15 +9,15 @@
         <el-col>{{ treeNode.manager }}</el-col>
         <el-col>
           <!-- 下拉菜单 element -->
-          <el-dropdown>
+          <el-dropdown @command="operateDeparts">
             <span>
               操作<i class="el-icon-arrow-down" />
             </span>
             <!-- 下拉菜单 -->
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>添加子部门</el-dropdown-item>
+              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
-              <el-dropdown-item v-if="!isRoot">编辑部门</el-dropdown-item>
+              <el-dropdown-item v-if="!isRoot" command="edit">编辑部门</el-dropdown-item>
-              <el-dropdown-item v-if="!isRoot">删除部门</el-dropdown-item>
+              <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </el-col>
@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import { delDepartments } from '@/api/departments'
 export default {
   props: {
     treeNode: {
@@ -37,6 +38,21 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  methods: {
+    async operateDeparts(type) {
+      switch (type) {
+        case 'add':
+          break
+        case 'edit':
+          break
+        case 'del':
+          await delDepartments(this.treeNode.id)
+          this.$emit('delDeparts')
+          this.$message.success('删除部门成功')
+          break
+      }
+    }
   }
 }
 </script>

src/views/departments/index.vue

@@ -8,7 +8,7 @@
         <!-- 2. 树型控件 -->
         <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
           <!-- 作用域插槽 -->
-          <tree-tools slot-scope="{data}" :tree-node="data" /><!-- 父传子-->
+          <tree-tools slot-scope="{data}" :tree-node="data" @delDeparts="getDeparts" /><!-- 父传子-->
         </el-tree>
       </el-card>
     </div>
@@ -31,17 +31,22 @@ export default {
       }
     }
   },
-  async created() {
+  created() {
+    this.getDeparts()
+  },
+  methods: {
+    // 获取/更新 部门信息
+    async getDeparts() {
       const res = await getDepartments()
-    console.log(res)
+      // console.log(res)
       this.departs = [...listToTreeData(res.depts, '')]
-    console.log(this.departs)
+      // console.log(this.departs)
       this.company = {
         name: 'xx股份有限公司' || res.companyName,
         manager: '负责人'
       }
     }
-
+  }
 }
 </script>