# EpButtons 按钮组

按钮组组件，支持权限控制、确认弹窗等功能。

## 基本用法

```vue
<template>
  <EpButtons :list="buttons" />
</template>

<script setup>
const buttons = [
  {
    name: '新增',
    prop: 'add',
    onClick: () => {
      // 新增逻辑
    },
  },
  {
    name: '删除',
    prop: 'delete',
    onClick: () => {
      // 删除逻辑
    },
  },
]
</script>
```

## 在 Form 中使用

```tsx
const formItemList = ref<FormProps['formItemList']>([
  {
    col: 24,
    type: 'EpButtons',
    props: {
      list: [
        {
          name: '提交审批',
          type: 'primary',
          onClick: () => {
            // 提交审批逻辑
          },
        },
        {
          name: '取消审批',
          onClick: () => {
            // 取消审批逻辑
          },
        },
        {
          name: '作废',
          onClick: () => {
            // 作废逻辑
          },
        },
      ],
    },
  },
])
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| list | 按钮列表 | `ButtonProps[]` | `[]` |
| size | 按钮尺寸 | `'large' \| 'default' \| 'small'` | `'small'` |
| type | 默认按钮类型 | `string` | `'default'` |
| disabled | 是否禁用（支持函数） | `boolean \| () => boolean` | `false` |

## ButtonProps 配置

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| name | 按钮文本 | `string` | - |
| prop | 唯一标识 | `string` | - |
| type | 按钮类型 | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | - |
| plain | 朴素按钮 | `boolean` | `false` |
| disabled | 是否禁用 | `boolean \| () => boolean` | `false` |
| show | 是否显示（支持函数） | `boolean \| () => boolean` | `true` |
| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` | `false` |
| permission | 权限标识 | `string` | - |
| confirm | 是否需要确认 | `boolean` | `false` |
| confirmText | 确认提示文本 | `string` | `'确定要${name}吗？'` |
| confirmBefore | 点击前前置校验 | `() => Promise<void>` | - |
| onClick | 点击回调 | `(e: MouseEvent \| TableScope) => void` | - |

## 带确认弹窗

```tsx
const buttons = [
  {
    name: '删除',
    prop: 'delete',
    confirm: true,
    onClick: () => {
      // 删除逻辑
    },
  },
]
```

## 点击前前置校验

使用 `confirmBefore` 可以在点击后、确认弹窗弹出前执行异步校验逻辑，Promise reject 则阻止后续操作（不弹确认框、不执行 `onClick`）。

```tsx
const buttons = [
  {
    name: '提交',
    prop: 'submit',
    confirmBefore: async () => {
      const valid = await validateForm()
      if (!valid) {
        return Promise.reject()
      }
    },
    confirm: true,
    onClick: () => {
      // 提交逻辑
    },
  },
]
```

> **⚠️ 注意：需要确认弹窗时，必须使用 `confirm: true` 属性，禁止手动编写 `ElMessageBox.confirm`**
>
> **正确做法**：
> ```tsx
> { name: '取消审批', confirm: true, onClick: () => { ElMessage.success('成功') } }
> ```
>
> **错误做法**：
> ```tsx
> { name: '取消审批', onClick: () => { ElMessageBox.confirm(...).then(...) } }
> ```

## 权限控制

```tsx
const buttons = [
  {
    name: '编辑',
    prop: 'edit',
    permission: 'order:edit', // 需要 order:edit 权限才显示
    onClick: () => {},
  },
]
```

## 动态禁用

```tsx
const buttons = [
  {
    name: '提交',
    prop: 'submit',
    disabled: () => formData.status !== 'draft',
    onClick: () => {},
  },
]
```

## 动态显示

```tsx
const buttons = [
  {
    name: '审核',
    prop: 'audit',
    show: () => formData.status === 'pending',
    onClick: () => {},
  },
]
```