diantou/src_custom/mobile-per-track/_extension-points/webflow/ext-webflow-template.vue

<template>
  <!--
    v-bind、v-on 部分是把不需要处理的 prop、事件 直接原封不动的转发给 sd-webflow，供业务单使用
    @actionBtnClick 表示这个事件需要处理一下，不能原样转发。详情见下方代码
    :header-buttons 部分的效果是：在业务单顶部按钮的基础上，统一增加 save 和 close 两个按钮
  -->
  <sd-webflow-delegate
    ref="webflow"
    v-bind="restAttrs"
    v-on="restListeners"
    @firstMeaningfulPaint="firstMeaningfulPaint"
  >
    <!--
      这一段表示不需要特殊处理的 slot，直接转发
    -->
    <template v-for="(_, slot) of restSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </sd-webflow-delegate>
</template>

<script>
import webflowTemplateMixin from '@/_extension-points/webflow/webflow-template-mixin'
import loginService from '@/login/login-service'
import components from './_import-components/ext-webflow-template-import'
export default {
  name: 'ExtWebflowTemplate',
  components,
  mixins: [webflowTemplateMixin],
  computed: {
    restSlots() {
      // 把需要特殊处理的 slot 排除在外
      const { ...rest } = this.$scopedSlots
      return rest
    },
    restListeners() {
      // 把需要特殊处理的事件排除在外
      const { firstMeaningfulPaint, ...rest } = this.$listeners
      return rest
    },
    restAttrs() {
      // 把需要特殊处理的 prop 排除在外
      const { actionBtnClick, ...rest } = this.$attrs
      return rest
    },
  },
  mounted() {},
  methods: {
    firstMeaningfulPaint(evt, { FlowData }) {
      if (navigator.sendBeacon) {
        navigator.sendBeacon(
          'api/framework/v1/operate-monitor/open-task-log?access_token=' +
            loginService.getTokens().access_token,
          new Blob(
            [
              JSON.stringify({
                instId: FlowData.instId,
                title: FlowData.processFormData.processFormPropertyValues.find(
                  (field) => field.dataType === 'title'
                ).value,
                totalCostTime: new Date().valueOf() - parseInt(window.performance.timeOrigin),
                timeOrigin: parseInt(window.performance.timeOrigin),
                url: window.location.href,
              }),
            ],
            {
              type: 'application/json',
            }
          )
        )
      }
    },
  },
}
</script>

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