train_vue/src/views/dynamicTable/dynamicTable.vue

<template>
  <div>
    <el-container>
      <el-aside width="300px">
        <tree @check-node="(res)=>{checkNode = res}" />
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs v-model="active" type="border-card">
            <div v-if="!active || checkNode.length==0" class="tips">空空哒哟~</div>
            <!-- 部门tabs -->
            <template v-for="node in checkNode">
              <el-tab-pane
                v-if="node.id!=-1"
                :key="node.id"
                :label="node.name"
                :name="node.id.toString()"
                v-loading="loading.childrenActive"
              >
                <!-- 岗位tabs -->
                <el-tabs
                  v-model="childrenActive"
                  editable
                  @edit="handleTabsEdit"
                  @tab-click="childrenTabClick"
                >
                  <div v-if="!childrenActive || childrenNode.length==0" class="tips">空空哒哟~</div>
                  <el-tab-pane
                    v-for="children in childrenNode"
                    :key="children.id"
                    :label="children.name"
                    :name="children.id.toString()"
                  >
                    <div class="userTableHandle">
                      <el-button type="primary" size="small" @click="visible.dialog=true">添加</el-button>
                    </div>
                    <!-- 用户table -->
                    <el-table
                      :data="userTableData"
                      style="width: 100%"
                      v-loading="loading.userTableData"
                      border
                    >
                      <el-table-column prop="id" label="ID" width="180"></el-table-column>
                      <el-table-column prop="username" label="姓名" width="180"></el-table-column>
                      <el-table-column prop="email" label="邮箱"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>
            </template>
          </el-tabs>
          <!-- 用户管理 -->
          <el-dialog title="用户管理" :visible.sync="visible.dialog" width="650px">
            <transfer
              :jobName="jobs.activeTabName"
              :users="userTableData"
              :visible="visible.dialog"
            />
          </el-dialog>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { addJob, getJob, delJob } from "@/Api/jobs";
import { getUsers } from "@/Api/user";
export default {
  name: "home",
  components: {
    tree: () => import("./components/tree"),
    transfer: () => import("./components/transfer")
  },
  data() {
    return {
      checkNode: [],
      active: "",
      childrenNode: [],
      childrenActive: "",
      jobs: {
        activeTabName: ""
      },
      dept: {
        //部门信息
        id: "",
        name: ""
      },
      loading: {
        active: false,
        childrenActive: false,
        userTableData: false
      },
      visible: {
        dialog: false
      },
      userTableData: [{ id: 1, username: "张三", email: "111@qq.com" }]
    };
  },
  watch: {
    //勾选的node 部门node
    checkNode(val, oldval) {
      // console.log(val);
      this.active =
        val.length > 0
          ? val[0].id == -1
            ? val.length > 1
              ? val[1].id.toString()
              : ""
            : val[0].id.toString()
          : "";
    },
    //初始化岗位默认选中
    childrenNode(val) {
      this.jobs.activeTabName = val.length == 0 ? "" : val[0].name;
      this.childrenActive = val.length == 0 ? "" : val[0].id.toString();
    },
    //选中的部门改变
    active(val) {
      //   console.log(val);
      if (this.checkNode.length > 0 && val != "") {
        this.initJobTab(val);
      }
    },
    //选中的岗位改变
    childrenActive(val) {
      this.initUserDetail(val);
    },
    "visible.dialog"(val) {
      if (val) {
        console.log();
      }
    }
  },
  methods: {
    //操作tab
    handleTabsEdit(targetName, action) {
      // console.log(targetName, action);
      if (action === "add") {
        // 插入tab
        this.$prompt("请输入岗位名字", "增加岗位", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(({ value }) => {
            let data = {
              name: value,
              dept_id: this.active
            };
            this.loading.childrenActive = true;
            addJob(data).then(res => {
              console.log(res);
              this.$message({
                type: "success",
                message: `增加 ${value} 部门成功`,
                duration: 1000
              });
              this.loading.childrenActive = false;
              this.initJobTab(this.active);
            });
            console.log(value);
          })
          .catch(e => {
            console.log("取消增加岗位", e);
          });
      } else if (action === "remove") {
        this.$confirm("此操作将永久删除该岗位, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(value => {
            // console.log(targetName);
            let data = {
              id: targetName
            };
            this.loading.childrenActive = true;
            delJob(data).then(res => {
              console.log("删除成功", res);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.loading.childrenActive = false;
              this.initJobTab(this.active);
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    //初始化岗位tab
    initJobTab(dept_id) {
      let params = {
        dept_id
      };
      this.loading.childrenActive = true;
      getJob(params)
        .then(res => {
          console.log("查询岗位", res);
          this.childrenNode = res.data.result.map(v => {
            return {
              id: v.job,
              name: v.job__name
            };
          });
          this.$message({
            type: "success",
            message: res.data.message,
            duration: 1000
          });
          this.loading.childrenActive = false;
        })
        .catch(e => {
          this.$message({
            type: "error",
            message: "查询失败",
            duration: 1000
          });
          this.loading.childrenActive = false;
        });
    },
    //初始化用户详情，岗位空则查询全部
    async initUserDetail(job_id = undefined) {
      let params = job_id ? { job_id } : {};
      await getUsers(params).then(res => {
        this.userTableData = res.data.result;
        this.$message({
          type: "success",
          message: res.data.message,
          duration: 1000
        });
      });
      this.loading.userTableData = false;
    },
    //点击岗位tab
    childrenTabClick(tab) {
      this.jobs.activeTabName = tab.label;
    }
  },
  directives: {
    /**
     * todo:权限控制 v-permission
     */
    permission: {
      bind(el, binding) {
        console.log("绑定", el, binding);
      },
      inserted(el, binding) {
        console.log("插入父节点", el, binding);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-container {
  height: 70vh;
  .tips {
    color: #ccc;
    text-align: center;
  }
  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    // background-color: #d3dce6;
    // color: #333;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    .userTableHandle {
      .el-button {
        float: right;
        margin-bottom: 5px;
      }
    }
  }
}
</style>