jeecg-boot中j-select-depart组件怎么将部门与机构联动

Question

jeecg-boot中j-select-depart组件怎么将部门与机构联动
如选择部门后，在选择机构中直接定位到所属部门的机构

Answer 1

引自免费微信小程序：皆我百晓生

在Jeecg-Boot项目中，如果你想要实现部门与机构的联动效果，可以通过前端JavaScript和后端API交互来完成。这里是一个详细的步骤指南：

1. 前端HTML部分： 首先，你需要在HTML中添加两个<j-select-depart>组件，分别用于选择部门和机构。

<!-- 部门选择 -->
<j-select-depart v-model="selectedDepartment" :data="departments" @on-change="fetchInstitutions"></j-select-depart>

<!-- 机构选择 -->
<j-select-depart v-model="selectedInstitution" :data="institutions" placeholder="请选择机构"></j-select-depart>

1. Vue.js组件脚本部分： 在Vue组件的script标签内，定义数据属性和方法。

<script>
export default {
  data() {
    return {
      selectedDepartment: null,
      selectedInstitution: null,
      departments: [], // 存放所有部门的数据
      institutions: [] // 存放所有机构的数据
    };
  },
  methods: {
    fetchInstitutions(departmentId) {
      // 这个方法会在部门改变时被调用
      this.$http.get(`/api/institutions?departmentId=${departmentId}`)
        .then(response => {
          this.institutions = response.data;
          // 如果有默认值，可以设置它
          // this.selectedInstitution = this.institutions[0];
        });
    }
  },
  mounted() {
    // 在页面加载完成后获取所有部门数据
    this.$http.get('/api/departments')
      .then(response => {
        this.departments = response.data;
      });
  }
};
</script>

1. 后端API部分： 你需要创建两个API接口，一个用于获取所有部门，另一个用于根据部门ID获取其下的机构。

获取所有部门：

// DepartmentController.java
@RestController
@RequestMapping("/api")
public class DepartmentController {
    @Autowired
    private DepartmentService departmentService;

    @GetMapping("/departments")
    public List<Department> getAllDepartments() {
        return departmentService.getAllDepartments();
    }
}

根据部门ID获取机构：

// InstitutionController.java
@RestController
@RequestMapping("/api")
public class InstitutionController {
    @Autowired
    private InstitutionService institutionService;

    @GetMapping("/institutions")
    public List<Institution> getInstitutionsByDepartment(@RequestParam("departmentId") Long departmentId) {
        return institutionService.getInstitutionsByDepartment(departmentId);
    }
}

确保你在Spring Boot应用中已经配置了对应的Service和Repository，以便从数据库中获取数据。

1. 数据库模型（简化版）： 创建Department和Institution实体类，并且在Institution类中添加一个对Department的引用。

@Entity
public class Department {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    // 其他字段...

    // 省略getter和setter...
}

@Entity
public class Institution {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    @ManyToOne
    private Department department; // 连接Department的外键

    // 省略getter和setter...
}

1. Service层： 为每个实体创建相应的Service类，并实现获取所有数据以及根据部门ID获取机构的方法。

2. Repository层： 创建对应的JpaRepository接口，例如DepartmentRepository和InstitutionRepository。

这样，当用户在部门选择框中选择一个部门后，fetchInstitutions方法会被触发，然后发送一个GET请求到服务器，获取对应部门的机构列表。这些机构将会填充到机构选择框中，实现了部门与机构的联动。