webTest/src/views/treeAndTable/tree_and_table.vue

<template>
  <el-container style="height:900px;border: 5px solid #eee">
    <el-aside width="25%">
      <tree style="height:300px" @nodeClick="getTreeDeptId"></tree>
    </el-aside>
    <el-container>
      <el-main>
        <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">
            <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, postJob } from "@/api/treeAndTable.js";

export default {
  name: "tree_table",
  components: {
    tree,
  },
  data() {
    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;
    },
    dataFormSubmitHandle: function () {
      if (this.dialog.type == 2) {
        postJob({
          dept_id: this.dept_id,
          name: this.dialog.name,
        }).then((res) => {
          this.dialog.visible = false;
          if (res.data.msg == "success") {
            this.$message({
              message: "新增岗位成功",
              type: "success",
            });
            this.tabClick({ name: "job" });
          }
        });
      }
    },
  },
};
</script>