erupt框架自定义按钮的实现案例

在 Erupt 框架中，可以通过 `@Button` 注解来实现自定义按钮的功能。下面是一个简单的示例，以实现一个“清空数据”按钮为例：

1. 首先，在你要自定义按钮的实体类中，添加一个`@Button`注解，并且指定按钮的名称和图标：

@Entity
@Table(name = "t_user")
@Erupt(name = "用户管理")
public class User {

    // 省略其他字段

    @Button("清空数据")
    @Icon(value = "fa fa-trash", color = Icon.Color.RED)
    public void clearData() {
        // 清空数据的具体实现逻辑
    }
}

2. 在 `EruptConfig` 中，需要添加一个 `EruptButtonModel` 来对按钮进行配置：

@Configuration
public class EruptConfig {

    @Bean
    public EruptButtonModel clearDataButton() {
        return EruptButtonModel.builder()
                .setTitle("清空数据")
                .setFetchMethod("/erupt-api/user/clearData")
                .setType(EruptButtonModel.Type.TIPS)
                .setMessage("你确认要清空所有数据吗？此操作不可恢复！")
                .setIcon(new FontAwesomeIcon("fa fa-trash", Icon.Color.RED))
                .build();
    }
}

注意，这里的 `fetchMethod` 属性是指定了按钮点击后将会触发的请求的路径。在这个路径中，需要定义一个处理请求的控制器方法。

3. 在控制器中，添加一个处理按钮请求的方法：

@RestController
@RequestMapping("/erupt-api/user")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/clearData")
    public void clearData() {
        userService.clearData();
    }
}

这里的 `UserService` 是你自己定义的服务类，用于处理具体的业务逻辑。

4. 最后，在你的页面中，使用 `erupt-buttons` 标签来渲染按钮：

<erupt-buttons :buttons="buttons"></erupt-buttons>

在对应的 Vue 实例中，需要定义一个 `buttons` 对象，来指定要显示的按钮。在这个对象中，可以引用前面在 `EruptConfig` 中定义的 `EruptButtonModel`：

data() {
    return {
        buttons: [
            clearDataButton
        ]
    }
}

至此，一个简单的自定义按钮就实现了。当用户点击按钮时，将会弹出提示框，询问用户是否确认进行清空数据操作。如果用户确认操作，将会触发后台的 `clearData` 方法进行清空数据的操作。