vue-element-admin手把手搭建后台系统07

机构管理列表制作讲解

效果展示

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>