tms-erp-web/src/views/mk/mk-public-shell.vue

<template>
  <div ref="page" class="mk-public-shell">
    <slot />
  </div>
</template>

<script>
import { postMkPublicProcessMessage } from '@/api/mk-process';

export default {
  name: 'MkPublicShell',
  props: {
    bizType: {
      type: String,
      required: true,
    },
    getForm: {
      type: Function,
      default: null,
    },
  },
  created() {
    this.handleIframeHeight = () => this.sendIframeHeight();
    this.handleProcessMessage = event => this.onProcessMessage(event);
    document.addEventListener('DOMContentLoaded', this.handleIframeHeight, false);
    window.addEventListener('message', this.handleProcessMessage);
  },
  mounted() {
    document.documentElement.classList.add('mk-iframe-page');
    document.body.classList.add('mk-iframe-page');
    const app = document.getElementById('app');
    if (app) app.classList.add('mk-iframe-page');
    this.handleIframeHeight();
    window.addEventListener('load', this.handleIframeHeight);
    this.mkHeightTimers = [300, 800, 1600].map(delay => setTimeout(this.handleIframeHeight, delay));
    if (typeof ResizeObserver === 'undefined') return;
    this.mkHeightObserver = new ResizeObserver(() => this.handleIframeHeight());
    this.$nextTick(() => {
      if (this.$refs.page) this.mkHeightObserver.observe(this.$refs.page);
      this.mkHeightObserver.observe(document.body);
    });
  },
  beforeUnmount() {
    document.removeEventListener('DOMContentLoaded', this.handleIframeHeight, false);
    window.removeEventListener('load', this.handleIframeHeight);
    window.removeEventListener('message', this.handleProcessMessage);
    (this.mkHeightTimers || []).forEach(timer => clearTimeout(timer));
    if (this.mkHeightObserver) {
      this.mkHeightObserver.disconnect();
      this.mkHeightObserver = null;
    }
    document.documentElement.classList.remove('mk-iframe-page');
    document.body.classList.remove('mk-iframe-page');
    const app = document.getElementById('app');
    if (app) app.classList.remove('mk-iframe-page');
  },
  methods: {
    sendIframeHeight() {
      this.$nextTick(() => {
        window.parent.postMessage({ height: document.body.clientHeight }, '*');
      });
    },
    onProcessMessage(event) {
      const data = event && event.data;
      if (!data || typeof data !== 'object') return;
      if (data.height && !data.status && !data.type) return;
      if (data.type === 'formValues' || data.type === 'afterSubmit') return;
      const formValues = data.formValues;
      if (data.status === 'submit') {
        this.submitData(formValues);
      } else if (data.status === 'save') {
        this.saveData(formValues);
      }
      if (data.type === 'getFormValues') {
        window.parent.postMessage({ type: 'formValues', formData: this.buildFormData() }, '*');
      }
    },
    submitData(lbpmFormValues) {
      const formData = this.buildFormData();
      this.postFormData('submit', lbpmFormValues, formData);
      if (!lbpmFormValues) return;
      const parameters = Object.assign({}, lbpmFormValues, {
        loginName: this.getLoginName(lbpmFormValues),
        formInstanceId: this.getFormId(),
        subject: formData.subject,
      });
      window.parent.postMessage({ type: 'afterSubmit', success: true, parameters }, '*');
    },
    saveData(lbpmFormValues) {
      this.postFormData('save', lbpmFormValues, this.buildFormData());
    },
    postFormData(status, formValues, formData) {
      postMkPublicProcessMessage(this.bizType, {
        status,
        formValues: formValues || {},
        formData,
      }).catch(error => {
        console.error('公开页提交流程数据失败：', error);
      });
    },
    buildFormData() {
      const form = this.readForm();
      return {
        ...form,
        subject: form.subject || '',
        formInstanceId: this.getFormId(),
      };
    },
    readForm() {
      const form = typeof this.getForm === 'function' ? this.getForm() : {};
      if (!form) return {};
      try {
        return JSON.parse(JSON.stringify(form));
      } catch (error) {
        return { ...form };
      }
    },
    getFormId() {
      return this.$route.query.id || this.readForm().id || '';
    },
    getLoginName(formValues = {}) {
      return (
        formValues.loginName ||
        this.$route.query.loginName ||
        this.$route.query.submitIdentity ||
        ''
      );
    },
  },
};
</script>

<style lang="scss">
html.mk-iframe-page,
html.mk-iframe-page body,
html.mk-iframe-page #app,
html.mk-iframe-page #app.mk-iframe-page {
  height: auto !important;
  min-height: 100%;
  overflow: visible;
}
</style>

<style lang="scss" scoped>
.mk-public-shell {
  min-height: 100%;
  padding: 12px 0 24px;
  box-sizing: border-box;
  background: #f0f2f5;

  :deep(.basic-container) {
    padding: 0 12px;
  }
}
</style>