机构管理列表制作讲解
效果展示
1.什么是机构
一个公司,下面有多个部门,每个部门下面可能还有下级部门,这些部门组合起来,就形成一个机构;
2.机构的设计
通常一个公司,有很多部门,存在上下级的关系,所以设计机构管理表时,设计为上下级关系的表;
字段 | 类型 | 备注 |
---|---|---|
id | int | 主键 |
pid | int | 上级部门id |
parent_name | varchar(128) | 上级部门名称 |
name | varchar(128) | 部门名称 |
dept_code | varchar(36) | 部门编码 |
dept_phone | varchar(20) | 部门电话 |
dept_address | varchar(255) | 部门地址 |
like_id | varchar(255) | 所有上级部门id和自己id的集合,逗号分隔如 1,3,5 |
order_num | int | 序号 |
manager | varchar(36) | 部门经理 |
3.代码实操
3.1实现组件:这里采用树形表格展示机构的上下级关系 选择 组件
3.2在api目录下新建department.js文件,并写如下代码
import http from '@/utils/request'
//获取机构列表数据
export async function deptListApi(parm){
return await http.get("/api/department/list",parm)
}
3.3在system/department/department.vue中添加如下代码
<template>
<el-main>
<el-form
:model="deptModel"
ref="searchForm"
label-width="80px"
:inline="true"
size="small"
>
<el-form-item label="部门名称">
<el-input v-model="deptModel.searchName"></el-input>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search">查询</el-button>
<el-button icon="el-icon-close">重置</el-button>
<el-button type="primary" icon="el-icon-plus">新增</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
border
stripe
style="width: 100%; margin-bottom: 20px"
row-key="id"
default-expand-all
:tree-props="{ children: 'children' }"
>
<el-table-column prop="name" label="部门名称"></el-table-column>
<el-table-column prop="deptCode" label="部门编码"></el-table-column>
<el-table-column prop="deptPhone" label="部门电话"></el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
icon="el-icon-edit-outline"
type="primary"
size="small"
@click="editHandler(scope.row)"
>编辑</el-button
>
<el-button
icon="el-icon-close"
type="danger"
size="small"
@click="deleteHandler(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-main>
</template>
<script>
import { deptListApi } from "@/api/department";
export default {
data() {
return {
//新增或编辑部门数据域
deptModel: {
deptName: "",
},
//查询数据域
searchModel: {
searchName: "",
},
//表格数据域
tableData: [],
};
},
created() {
//获取部门数据
this.getDeptList();
},
methods: {
//删除部门
deleteHandler(row) {
console.log(row);
},
//编辑部门
editHandler(row) {
console.log(row);
},
//查询部门列表
async getDeptList() {
let res = await deptListApi(this.searchModel);
if (res && res.code == 200) {
this.tableData = res.data;
}
},
},
};
</script>
<style lang="scss" scoped>
</style>