```[import](../include.md)

```

此处是在所有业务单上生效的扩展点，如果需要针对某一个业务单定制，请参考

[流程表单](#sdwebflow)

此样例中涉及的 prop、事件、slot 的具体文档，也请参考上面一行的链接

```html static
<template>
  <!--
    v-bind、v-on 部分是把不需要处理的 prop、事件 直接原封不动的转发给 sd-webflow，供业务单使用
    @actionBtnClick 表示这个事件需要处理一下，不能原样转发。详情见下方代码
    :header-buttons 部分的效果是：在业务单顶部按钮的基础上，统一增加 save 和 close 两个按钮
  -->
  <sd-webflow-delegate
    v-bind="restAttrs"
    v-on="restListeners"
    :header-buttons="[...($attrs.headerButtons || []), 'save', 'we-doc$close']"
    @actionBtnClick="actionBtnClick"
  >
    <!--
      这一段表示不需要特殊处理的 slot，直接转发
    -->
    <template v-for="(_, slot) of restSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
    <!--
      这一段的效果是：在业务单定制的 tab 页的基础上，统一增加一个环节信息 tab
    -->
    <template v-slot:extra-tabs="scope">
      <a-tab-pane key="stepInfo" tab="环节信息">
        <a-card> 当前处理人：{{ scope.FlowData.processActiveLogInfo[0].operator }} </a-card>
      </a-tab-pane>
      <slot name="extra-tabs" v-bind="scope" />
    </template>
  </sd-webflow-delegate>
</template>

<script>
  import webflowTemplateMixin from '@/_extension-points/webflow/webflow-template-mixin'
  import components from './_import-components/ext-webflow-template-import'

  export default {
    name: 'ExtWebflowTemplate',
    components,
    mixins: [webflowTemplateMixin],
    computed: {
      restSlots() {
        // 把需要特殊处理的 slot 排除在外
        const { 'extra-tabs': tabs, ...rest } = this.$scopedSlots
        return rest
      },
      restListeners() {
        // 把需要特殊处理的事件排除在外
        const { actionBtnClick, ...rest } = this.$listeners
        return rest
      },
      restAttrs() {
        // 把需要特殊处理的 prop 排除在外
        const { actionBtnClick, ...rest } = this.$attrs
        return rest
      },
    },
    methods: {
      actionBtnClick(evt, { button, FlowData }) {
        // 此样例的效果是：log 每次按钮点击，然后继续走原有的逻辑

        // 这里可以做一些业务处理
        console.log(button)
        // 可以继续把事件抛给每个业务表单去处理
        this.$emit('actionBtnClick', evt, { button, FlowData })
      },
    },
  }
</script>

<style module lang="scss">
  @use '@/common/design' as *;
</style>
```
