# EpAttachment 附件管理

附件上传和管理组件，支持对话框和内嵌两种模式。

## 基本用法

```vue
<template>
  <EpAttachment v-model="fileList" />
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([])
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| v-model | 附件列表 | `array` | `[]` |
| mode | 页面模式 | `'add' \| 'edit' \| 'view'` | - |
| openType | 展示模式 | `'dialog' \| 'normal'` | `'dialog'` |
| isType | 是否需要类型 | `boolean` | `true` |
| isNote | 是否需要备注 | `boolean` | `false` |
| isShowOpenDialogButton | 显示打开弹窗按钮 | `boolean` | `false` |
| formatColumns | 格式化列配置 | [`TableColumn[]`](./table.md#tablecolumn-配置) | `[]` |
| beforeAdd | 添加前校验 | `(fileItem) => boolean` | - |
| permission | 权限标识 | `string` | - |

## 在 Form 中使用

```tsx
const formItemList = [
  {
    col: 24,
    type: 'EpAttachment',
    props: {
      modelValue: formData.fileList,
      openType: 'normal',
      formatColumns: [
        {
          prop: 'type',
          props: {
            options: [
              { label: '图片', value: 0 },
              { label: '普通附件', value: 2 },
            ],
          },
        },
      ],
    },
  },
]
```

## 配合 EpHeader 使用

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

<script setup>
const attachmentProps = {
  formatColumns: [
    {
      prop: 'type',
      props: {
        options: [
          { label: '图片', value: 0 },
          { label: '附件', value: 2 },
        ],
      },
    },
  ],
}
</script>
```

## 内嵌模式

```tsx
{
  type: 'EpAttachment',
  props: {
    openType: 'normal', // 内嵌模式，直接显示附件表格
    modelValue: formData.fileList,
  },
}
```

## 对话框模式

```tsx
{
  type: 'EpAttachment',
  props: {
    openType: 'dialog', // 对话框模式，点击按钮打开
    isShowOpenDialogButton: true,
    modelValue: formData.fileList,
  },
}
```