2020-2021暑期项目实训第五周——部门相关功能实现以及主要代码

实现了企业内部门的树形结构显示、更改名字、删除部门、分配部门
其中树形结构部门名称后按钮的显示使用插槽实现。

<a-tree
          :load-data="onLoadDepartment"
          :tree-data="treeData"
          showLine
          blockNode
        >
          <template slot="company" slot-scope="item">
            <span @mouseenter="showTree" @contextmenu.prevent="hide">
              {{ item.title }}
              <a-button-group v-show="treeShow" style="margin-left: 40%">
                <a-tooltip
                  placement="topLeft"
                  title="显示企业内无部门员工"
                  arrow-point-at-center
                >
                  <a-icon type="eye" @click="check(item.key)" />
                </a-tooltip>
              </a-button-group>
            </span>
          </template>
          <template slot="custom" slot-scope="item">
            <span @mouseenter="showTree" @contextmenu.prevent="hide">
              {{ item.title }}
              <a-button-group v-show="treeShow" style="margin-left: 50%">
                <a-tooltip
                  placement="topLeft"
                  title="更改部门名称"
                  arrow-point-at-center
                  v-if="role == 'founder'"
                >
                  <a-icon type="edit" @click="showEdit(item.key)" />
                </a-tooltip>

                <a-popconfirm
                  title="确定删除该部门吗？删除后部门员工将变为无部门状态！"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="deleteDepar(item.key)"
                  @cancel="cancel"
                  v-if="role == 'founder'"
                >
                  <a-tooltip
                    placement="topLeft"
                    title="删除部门"
                    arrow-point-at-center
                    v-if="role == 'founder'"
                  >
                    <a-icon type="delete" style="margin-left: 30%" />
                  </a-tooltip>
                </a-popconfirm>
                <a-tooltip
                  placement="topLeft"
                  title="显示部门成员"
                  arrow-point-at-center
                >
                  <a-icon
                    type="eye"
                    @click="check(item.key)"
                    style="margin-left: 30%"
                  />
                </a-tooltip>
              </a-button-group>
            </span>
          </template>
        </a-tree>

data(){
  return {
  	treeData: [
        {
          title: "",
          key: 0,
          scopedSlots: { title: "company" },
          children: [],
        },
      ],
  }
},
method(){
  // 树形控件加载部门名称
    onLoadDepartment() {
      return new Promise((resolve) => {
        departmentList(this.companyId).then((res) => {
          const listRes = res.data;
          if (listRes.code == 200) {
            if (listRes.data == null) {
              this.$message.error("该企业还没有部门！");
            } else {
              for (var i = 0; i < listRes.data.length; i++) {
                this.$set(this.treeData[0].children, i, {
                  title: listRes.data[i].name,
                  key: listRes.data[i].id,
                  isLeaf: true,
                  scopedSlots: { title: "custom" },
                });
              }
              this.treeData = [...this.treeData];
            }
          }
        });
        resolve();
      });
    },
    // 查看员工
    check(key) {
      var department = key;
      if (department == 0) {
        department = "";
      }
      findEmployee(department, this.companyId).then((res) => {
        const findRes = res.data;
        if (findRes.code == 200) {
          this.data = findRes.data;
        }
      });
    },
    // 鼠标移入事件
    showTree() {
      this.treeShow = true;
    },
    // 鼠标右击事件
    hide() {
      this.treeShow = false;
    },
    // 显示更改部门名称弹窗显示
    showEdit(key) {
      this.editId = key;
      this.editDepVisible = true;
    },
    // 更改部门名称
    editDepar() {
      this.editDepForm.validateFieldsAndScroll((err) => {
        if (!err) {
          const depName = this.editDepForm.getFieldValue("departmentEditName");
          editDepartment(this.editId, depName).then((res) => {
            const editRes = res.data;
            if (editRes.code == 200) {
              this.$message.success("更改部门名称成功！");
              this.editDepVisible = false;
              this.editDepForm.resetFields();
              const route = "/resourceManagement/person";
              this.$refreshPage(route);
            } else if (editRes.code == 803) {
              this.$message.error("部门已存在");
              this.editDepForm.resetFields();
            }
          });
        }
      });
    },
    // 删除部门
    deleteDepar(key) {
      deleteDerpartment(key).then((res) => {
        const deleteRes = res.data;
        if (deleteRes.code == 200) {
          this.$message.success("删除部门成功！");
          const route = "/resourceManagement/person";
          this.$refreshPage(route);
        }
      });
    },
    cancel() {},
}