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">
            <div>
              <el-button type="primary" @click="postUser">新增</el-button>
              <el-table :data="tableDataPeople" style="width: 100%">
                <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="deleteUser(scope.row.id)" type="danger">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </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-item
          label="岗位多选器"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
          prop="job"
          v-show="this.dialog.type==1"
        >
          <el-select v-model="selectValue" multiple placeholder="请选择">
            <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </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,
  deleteJob,
  postUser,
  getUsers,
  deleteUser,
} from "@/api/treeAndTable.js";

export default {
  name: "tree_table",
  components: {
    tree,
  },
  data() {
    return {
      dept_id: 0,
      tableData: [],
      tableDataPeople: [],
      dialog: {
        type: 0, // 1是人员，2是岗位
        title: "",
        name: "",
        visible: false,
      },
      selectValue: [],
    };
  },
  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;
    },
    postUser: function () {
      this.dialog.visible = true;
      this.dialog.title = "新增人员";
      this.dialog.type = 1;
    },
    // 岗位标签页的删除按钮
    // eslint-disable-next-line no-unused-vars
    deleteJob: function (id) {
      deleteJob(id).then((res) => {
        console.log(res);
        if (res.status == 204) {
          this.$message({
            message: "删除岗位成功",
            type: "warning",
          });
          this.tabClick({ name: "job" });
        }
      });
    },
    // 人员标签页的删除按钮
    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;
        });
      }
    },
    // 弹窗的取消按钮
    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" });
          }
        });
      } else if (this.dialog.type == 1) {
        postUser({
          dept_job_id: this.selectValue,
          name: this.dialog.name,
        }).then((res) => {
          this.dialog.visible = false;
          console.log(res);
          this.$message({
            message: "新增人员成功",
            type: "success",
          });
          this.tabClick({ name: "people" });
        });
      }
    },
  },
};
</script>