src/api/treeAndTable.js

@@ -90,3 +90,46 @@ export function postUser(data) {
         data
     })
 }
+
+/**
+ * 获取指定部门的所有人员(附带该人员的所有岗位)
+ * {
+    {
+        "id": 14,
+        "user_id": 3,
+        "user_name": "zangsan",
+        "jobs": [
+            {
+                "job_id": 4,
+                "job_name": "测试岗位"
+            }
+        ]
+    },
+    {
+        "id": 15,
+        "user_id": 2,
+        "user_name": "linjj",
+        "jobs": [
+            {
+                "job_id": 6,
+                "job_name": "测试岗位1"
+            }
+        ]
+    }
+ * }
+ */
+export function getUsers(params) {
+    return request({
+        url: url.User,
+        method: 'get',
+        params
+    })
+}
+
+// 删除用户接口
+export function deleteUser(id) {
+    return request({
+        url: url.User + id + '/',
+        method: 'delete',
+    })
+}

src/views/treeAndTable/tree_and_table.vue

@@ -10,13 +10,15 @@
             <div>
               <el-button type="primary" @click="postUser">新增</el-button>
               <el-table :data="tableDataPeople" style="width: 100%">
-                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
-                <el-table-column prop="job" label="岗位" width="180">
-                  <el-tag v-for="(name,index) in job" :key="index">{{name}}</el-tag>
+                <el-table-column prop="user_name" label="姓名" width="180"></el-table-column>
+                <el-table-column prop="jobs" label="岗位" width="180">
+                  <template slot-scope="scope">
+                    <el-tag v-for="(val,index) in scope.row.jobs" :key="index">{{val.job_name}}</el-tag>
+                  </template>
                 </el-table-column>
                 <el-table-column label="操作">
                   <template slot-scope="scope" width="200px0">
-                    <el-button @click="deleteJob(scope.row.id)" type="danger">删除</el-button>
+                    <el-button @click="deleteUser(scope.row.id)" type="danger">删除</el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -65,7 +67,14 @@
 
 <script>
 import tree from "@/views/treeAndTable/components/tree";
-import { getJob, postJob, deleteJob, postUser } from "@/api/treeAndTable.js";
+import {
+  getJob,
+  postJob,
+  deleteJob,
+  postUser,
+  getUsers,
+  deleteUser,
+} from "@/api/treeAndTable.js";
 
 export default {
   name: "tree_table",
@@ -116,14 +125,36 @@ export default {
         }
       });
     },
+    // 人员标签页的删除按钮
+    deleteUser: function (id) {
+      deleteUser(id).then((res) => {
+        console.log(res);
+        if (res.status == 204) {
+          this.$message({
+            message: "删除岗位成功",
+            type: "warning",
+          });
+          this.tabClick({ name: "people" });
+        }
+      });
+    },
     // tabs点击的时候获取当前标签页下的所有信息
     tabClick: function (tabNode) {
       if (tabNode.name == "job") {
         getJob({
           dept_id: this.dept_id,
         }).then((res) => {
+          console.log("tableData");
+          console.log(res.data);
           this.tableData = res.data;
         });
+      } else if (tabNode.name == "people") {
+        getUsers({
+          dept_id: this.dept_id,
+        }).then((res) => {
+          console.log(res.data);
+          this.tableDataPeople = res.data;
+        });
       }
     },
     // 弹窗的取消按钮
@@ -158,7 +189,7 @@ export default {
             message: "新增人员成功",
             type: "success",
           });
-          this.tabClick({ name: "user" });
+          this.tabClick({ name: "people" });
         });
       }
     },