云E办项目之部门管理

云E办—部门管理

---

一、展示所有部门

1. 后台接口及数据格式

接口地址：/employee/basic/department/
请求方式：GET
请求参数：无
返回数据格式：

 [
    {
      "id": 1,
      "name": "股东会",
      "parentId": -1,
      "depPath": ".1",
      "enabled": true,
      "isParent": true,
      "children": [   
      		···            
      ],
      "result": null
    }
  ]

2. 使用Element-ui中的Tree树形控件

<el-input
  placeholder="输入部门名称进行搜索"
  v-model="filterText">
</el-input>

<el-tree
  :data="departments"
  :props="defaultProps"
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      }
    },

    data() {
      return {
        filterText: '',
        departments:[]，
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    }
  };
</script>

3. 初始化部门信息

initDepartments(){
	this.getRequest('接口地址').then(response=>{
		if(response.code === 200){
			this.departments = response.data;
		}
	})
}

二、 添加部门

1. 后台接口及数据格式

接口地址：/employee/basic/department/
请求方式：POST
请求参数：

{
	"name": "",
	"parentId": 0
}

返回数据：

{
	"code": ,
	"data": {},
	"message": "",
	"success": true
}

2. 使用Dialog对话框实现

dialogVisible:true,//对话框是否展示，默认为true

点击添加时，对话框绑定展示上级部门的名称。
添加部门后，树形控件不折叠，手动加载添加的部门：

//将新加入的部门展示在树形控件上，不用刷新整个部门功能
      addDepToDeps(departments, department) {
        for (let i = 0; i < departments.length; i++) {
          let d = departments[i];
          if (d.id === departments.parentId) {
            if (d.children === null) d.children = [];
            d.children = d.children.concat(department);
            return;
          } else {
          //递归
            this.addDepToDeps(d.children, department);
          }
        }
      }

三、删除部门

1. 后台接口及数据格式

接口地址：/employee/basic/department/{id}
请求方式：DELETE
请求参数：

id

返回数据：

{
	"code": ,
	"data": {},
	"message": "",
	"success": true
}

2. 手动删除

删除当前部门时需要先判断是否为父部门，如果是，则弹出删除失败；如果不是，则发送请求进行删除。
手动刷新部门列表：

//手动刷新整个部门列表
      removeDepartmentFromDepartments(p, deps, id) {
        for (let i = 0; i < deps.length; i++) {
          let d = deps[i];
          if (d.id === id) {
          //删除整个部门对象
            deps.splice(i, 1);
            //判断当前是否为父部门，如果不是，设置isParent为false
            if (deps.length === 0) {
              p.isParent = false;
            }
            return;
          } else {
          //递归
            this.removeDepartmentFromDepartments(d, d.children, id);
          }
        }
      },

---

总结

• 使用Element-ui中的Tree树形控件与Dialog对话框
• 添加与删除部门时，保存其父部门的id，手动展示部门，遍历当前添加或删除的部门。
• 手动添加或删除时，虽然后台数据在请求时，isParent属性值已经发生改变，但是没有发送请求，不知道isParent为false，需要手动判断一下，即当当前部门没有子部门时，设置isParent=fasle。