获取部门的所有岗位

src/api/treeAndTable.js

@@ -4,6 +4,7 @@ let base = '/treeAndTable/'
 
 let url = {
     'Dept': base + 'dept/',
+    'Job': base + 'job/'
 }
 
 // 获取dept数据
@@ -46,4 +47,12 @@ export function postDeptData(data) {
         method: 'post',
         data
     })
+}
+
+export function getJob(parent) {
+    return request({
+        url: url.Job,
+        method: 'get',
+        params: parent
+    })
 }

src/views/treeAndTable/components/tree.vue

@@ -8,6 +8,8 @@
       :props="props"
       :expand-on-click-node="false"
       ref="treeRef"
+      @node-expand="handleNodeClick"
+      @node-click="handleNodeClick"
     >
       <span slot-scope="{ node, data }">
         <span>{{ data.name }}</span>
@@ -147,6 +149,9 @@ export default {
         this.dialog.visible = false;
       }
     },
+    handleNodeClick: function (data, node, that) {
+      this.$emit("nodeClick", { data, node, that });
+    },
   },
 };
 </script>

src/views/treeAndTable/tree_and_table.vue

@@ -1,21 +1,45 @@
 <template>
   <el-container style="height:900px;border: 5px solid #eee">
     <el-aside width="25%">
-      <tree style="height:300px"></tree>
+      <tree style="height:300px" @nodeClick="getTreeDeptId"></tree>
     </el-aside>
     <el-container>
       <el-main>
-        <el-tabs value="people" type="border-card">
+        <el-tabs value="people" type="border-card" @tab-click="tabClick">
           <el-tab-pane label="人员" name="people"></el-tab-pane>
-          <el-tab-pane label="岗位" name="job"></el-tab-pane>
+          <el-tab-pane label="岗位" name="job">
+            <div>
+              <el-button type="primary" @click="postJob">新增</el-button>
+              <el-table :data="tableData" style="width: 100%">
+                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+                <el-table-column label="操作">
+                  <template slot-scope="scope" width="200px0">
+                    <el-button @click="deleteJob(scope.row.id)" type="danger">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
         </el-tabs>
       </el-main>
     </el-container>
+    <el-dialog :title="dialog.title" :visible="dialog.visible" @close="handleCancel">
+      <el-form :model="dialog" label-width="120px" ref="form">
+        <el-form-item label="名字" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" prop="name">
+          <el-input v-model="dialog.name" />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmitHandle">保存</el-button>
+      </template>
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
 import tree from "@/views/treeAndTable/components/tree";
+import { getJob } from "@/api/treeAndTable.js";
 
 export default {
   name: "tree_table",
@@ -23,8 +47,47 @@ export default {
     tree,
   },
   data() {
-    return {};
+    return {
+      dept_id: 0,
+      tableData: [],
+      dialog: {
+        type: 0, // 1是人员，2是岗位
+        title: "",
+        name: "",
+        visible: false,
+      },
+    };
+  },
+  methods: {
+    // eslint-disable-next-line no-unused-vars
+    getTreeDeptId: function (data, node, that) {
+      console.log(data);
+      this.dept_id = data.data.id;
+    },
+    postJob: function () {
+      this.dialog.visible = true;
+      this.dialog.title = "新增";
+      this.dialog.type = 2;
+    },
+    // 岗位标签页的删除按钮
+    // eslint-disable-next-line no-unused-vars
+    deleteJob: function (id) {},
+    // tabs点击的时候获取当前标签页下的所有信息
+    tabClick: function (tabNode) {
+      if (tabNode.name == "job") {
+        getJob({
+          dept_id: this.dept_id,
+        }).then((res) => {
+          this.tableData = res.data;
+        });
+      }
+    },
+    // 弹窗的取消按钮
+    handleCancel: function () {
+      this.dialog.type = 0;
+      this.dialog.name = "";
+      this.dialog.visible = false;
+    },
   },
-  methods: {},
 };
 </script>