# EpHeader 顶部操作栏

详情页顶部操作栏组件，支持返回、按钮组、附件等功能。

## 基本用法

```vue
<template>
  <EpHeader
    :buttons="headerButtons"
  />
</template>

<script setup lang="tsx">
import type { HeaderProps } from 'el-plus'

// 只放非内置的自定义按钮
const headerButtons: HeaderProps['buttons'] = [
  { name: '提交审批', onClick: () => {} },
  { name: '取消审批', onClick: () => {} },
  { name: '作废',  onClick: () => {} },
]
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| buttons | 自定义按钮列表 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
| defaultButtons | 默认内置按钮 | `('edit' \| 'save' \| 'cancel' \| 'refresh' \| 'auditLog')[]` | `['edit', 'save', 'cancel', 'refresh', 'auditLog']` |
| mode | 页面模式 | `'add' \| 'edit' \| 'browse'` | - |
| allowBack | 是否允许返回 | `boolean` | `true` |
| name | 权限前缀 | `string` | - |
| workflowId | 工作流ID，有值则显示审批日志按钮 | `string` | - |
| isShowAttachmentButton | 显示附件按钮 | `boolean` | `false` |
| fileList | 附件列表 | `Record<string, any>[]` | `[]` |
| attachmentProps | 附件组件属性 | [`AttachmentProps`](./attachment.md#props) | `{}` |

## 注意事项

### defaultButtons 默认值

`defaultButtons` 默认为内置按钮，无需显式设置。只有需要自定义内置按钮时，才需设置。

```json
// ❌ 错误：无需设置默认值属性，因为默认值就是内置按钮
{ "type": "EpHeader", "props": { "defaultButtons": ["edit", "save", "cancel", "refresh", "auditLog"] } }
// ✅ 正确：使用内置按钮
{ "type": "EpHeader" }
// ✅ 正确：自定义内置按钮中的按钮， 只显示编辑和保存按钮
{ "type": "EpHeader", "props": { "defaultButtons": ["edit", "save"] } }
```

## 默认按钮说明

| 按钮 | 说明 |
|------|------|
| edit | 编辑按钮 |
| save | 保存按钮 |
| cancel | 取消按钮 |
| refresh | 刷新按钮 |
| auditLog | 审批日志按钮，只有workflowId有值时才显示 |

## 带附件按钮

```vue
<template>
  <EpHeader
    :buttons="headerButtons"
    is-show-attachment-button
    :file-list="formData.fileList"
    :attachment-props="attachmentProps"
  />
</template>

<script setup lang="tsx">
import type { HeaderProps } from 'el-plus'
// 自定义附件组件属性
const attachmentProps: HeaderProps['attachmentProps'] = {
  formatColumns: [
    {
      prop: 'type',
      props: {
        options: [
          { label: '图片', value: 0 },
          { label: '附件', value: 2 },
        ],
      },
    },
  ],
}
</script>
```

## 在 Form 中使用

EpHeader 也可以作为表单项放入 EpForm 中，作为表单的一部分：

```tsx
const formItemList = ref<FormProps['formItemList']>([
  {
    col: 24,
    type: 'EpHeader',
    props: {
      buttons: [
        { name: '提交审批', type: 'primary', onClick: () => {} },
        { name: '取消审批', onClick: () => {} },
        { name: '作废', onClick: () => {} },
      ],
      isShowAttachmentButton: true,
      fileList: formData.fileList,
    },
  },
  // 其他表单项...
])
```