```vue
<template>
  <div>
    <a-button @click="showFirst">
      查看第一条
    </a-button>
    <sd-detail-modal
      ref="detail"
      :record-id="beanId"
      page-id="base/businesstype/oaBaseBusinessType"
      :modal-props="{ width: 1000 }"
      @saved="saved"
    >
      <sd-form-item name="businessTypeName" />
      <sd-form-item name="status"> </sd-form-item>
    </sd-detail-modal>
  </div>
</template>

<script>
import axios from '@/common/services/axios-instance'
import { Modal } from 'ant-design-vue'

export default {
  data() {
    return {
      beanId: null,
    }
  },
  methods: {
    saved(data) {
      Modal.confirm({
        title: data.pageTitle,
        content: '已保存',
      })
    },
    showFirst() {
      this.$refs.detail.show()
    },
  },
  created() {
    // 为了演示，这里取出第一条文档
    axios({
      url: 'api/framework/v1/page/businessList',
      method: 'post',
      data: { columns: '', maxResults: 1, startPosition: 0, formId: 'oaBaseBusinessType' },
    }).then((res) => {
      this.beanId = res.data.data[0].id
    })
  },
}
</script>
```
