# 详情页面

详情页面用于展示和编辑单条数据，组件自由组合。

## 页面结构

详情页无固定结构，根据业务需求自由组合以下组件：
> 查看所有可用组件：[组件文档索引](../overview.md)

## 完整示例

```vue
<template>    
  <EpForm
    ref="epForm"
    :formItemList="formItemList"
    v-model="formData"
    labelPosition="left"
  ></EpForm>
</template>

<script setup lang="tsx">
import type { FormProps, HeaderProps } from 'el-plus'
import { useNavigation } from 'el-plus'
import { reactive, ref, computed, useTemplateRef } from 'vue'
import { useRoute } from 'vue-router'

defineOptions({
  name: 'DemoDetail'
})

const route = useRoute()
const epForm = useTemplateRef('epForm')
const { isEdit } = useNavigation()
const id = route.query.id


const formData = reactive({
  detailList: [] as Record<string, any>[],  // 明细表格
  fileList: [] as Record<string, any>[],    // 附件列表
})

// 表单配置 - 组件自由组合，参考各组件文档
const formItemList = ref<FormProps['formItemList']>([
  // 组件类似下面这样自由组合
  { col: 24, type: 'EpHeader', props: { buttons: [
    { name: '提交审批', type: 'primary', onClick: () => {} }
  ] } },
  { col: 24, type: 'EpTitle', props: { title: '基本信息' } },
])

// 保存
const handleSave = async () => {
  const valid = await epForm.value?.validate()
  if (valid) {
    // TODO: 调用保存接口
  }
}

// 加载数据
if (isEdit.value && id) {
  // TODO: 调用接口获取详情
}
</script>
```