Department management of cloud e-office projects

cloud E do — Department of management

---

One 、 Show all departments

1. Background interface and data format

Address of the interface ：/employee/basic/department/
Request mode ：GET
Request parameters ： nothing
Return data format ：

 [
    {
      "id": 1,
      "name": " Shareholders' meeting ",
      "parentId": -1,
      "depPath": ".1",
      "enabled": true,
      "isParent": true,
      "children": [   
      		···            
      ],
      "result": null
    }
  ]

2. Use Element-ui Medium Tree Tree control

<el-input
  placeholder=" Enter the Department name to search "
  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. Initialize department information

initDepartments(){
	this.getRequest(' Address of the interface ').then(response=>{
		if(response.code === 200){
			this.departments = response.data;
		}
	})
}

Two 、 Add Department

1. Background interface and data format

Address of the interface ：/employee/basic/department/
Request mode ：POST
Request parameters ：

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

Return the data ：

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

2. Use Dialog Dialog implementation

dialogVisible:true,// Whether the dialog box is displayed , The default is true

When you click Add , The dialog box binding shows the name of the superior department .
After adding a department , The tree control does not collapse , Manually load the added Department ：

// Display the newly added Department on the tree control , There is no need to refresh the functions of the whole department 
      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 {
          // recursive 
            this.addDepToDeps(d.children, department);
          }
        }
      }

3、 ... and 、 Delete Department

1. Background interface and data format

Address of the interface ：/employee/basic/department/{id}
Request mode ：DELETE
Request parameters ：

id

Return the data ：

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

2. Delete manually

When deleting the current department, you need to first determine whether it is the parent department , If it is , Pop up and delete failed ; If not , Then send a request to delete .
Manually refresh the Department list ：

// Manually refresh the entire Department list 
      removeDepartmentFromDepartments(p, deps, id) {
        for (let i = 0; i < deps.length; i++) {
          let d = deps[i];
          if (d.id === id) {
          // Delete the entire department object 
            deps.splice(i, 1);
            // Judge whether it is the parent department , If not , Set up isParent by false
            if (deps.length === 0) {
              p.isParent = false;
            }
            return;
          } else {
          // recursive 
            this.removeDepartmentFromDepartments(d, d.children, id);
          }
        }
      },

---

summary

• Use Element-ui Medium Tree Tree control and Dialog Dialog box
• When adding and deleting departments , Save its parent department id, Manual display department , Traverse the currently added or deleted departments .
• When adding or deleting manually , Although the background data is requested ,isParent The attribute value has changed , But no request was sent , I do not know! isParent by false, It needs to be judged manually , That is, when the current department has no sub departments , Set up isParent=fasle.