高开表单开发

功能描述

使用微前端项目进行高开表单的开发和测试使用。

操作步骤

搭建微前端页面

从头搭建微前端页面并添加代理，具体详见配置微前端资源。

配置好的项目formDemo代码如下图所示，记录下端口地址。

开发vue表单页面

开发表单页面 /firstForm/index.vue，并设置模块导出。

在项目中添加目录lib，并添加vue混入文件vueFormCommonMethods.js，文件给表单加入了4个方法，依次为：

• 加载表单后处理loadFormData()
  • 主要作用是打开页面时加载表单数据。
  • beforeSaveFormData为非必写方法，注意返回值可以返回一个promise，也可以直接返回boolean值true。
• 保存前处理beforeSaveFormData()
  • 主要作用于用户点击保存按钮时，进入保存方法之前生效，多用于对表单的校验，用户可以按照需求设计表单校验规则。
  • beforeSaveFormData为非必写方法，注意返回值可以返回一个promise，也可以直接返回boolean值。
• 保存表单处理saveFormData()
  • 主要作用于用户点击保存按钮时触发保存方法。
  • saveFormData为必写方法，注意此方法如果有异步操作，返回一个promise，否则直接返回form数据
• 保存后处理afterSaveFormData()。
  • 主要作用于用户触发表单保存事件后，得到后台服务器返回值之后触发此方法，可用于自定义一些表单返回弹框、信息等。用户可根据自己的需求定制化前端返回内容。
  • afterSaveFormData为非必写方法，注意如果有异步操作，返回一个promise，否则直接返回form数据

以上方法均有两个参数processContext、bfpContext。其中processContext为流程相关信息，bfpContext为bfp框架相关信息。

可根据需求在表单页面添加对应的方法覆盖混入的默认方法。

// vueFormCommonMethods.js
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 加载表单后处理
    loadFormData(processContext, bfpContext) {
      return new Promise((resolve) => {
        this.form = bfpContext.formData;
        resolve(true);
      });
    },
    // 保存前处理
    beforeSaveFormData(processContext, bfpContext) {
      return new Promise((resolve) => {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
    },
    // 保存表单处理
    saveFormData(processContext, bfpContext) {
      return new Promise((resolve) => {
        resolve(this.form);
      });
    },
    // 保存后处理
    afterSaveFormData(processContext, bfpContext) {
      return new Promise((resolve) => {
        resolve();
      });
    },
  },
};

表单的测试和使用

调试页面需要以基座为入口，基座可以选择AFCenter前端发布介质，也可以通过AFCenter 源代码项目。

本例使用AFCenter 源代码项目，打开afcenter-ui源代码，添加代理/formDemo，端口号与创建的微前端项目端口号保持一致。

npm run dev 启动微前端项目formDemo和afcenter的其他前端项目。

进入ide界面，新建流程并在第一个人工活动上绑定表单url (/module/formDemo/page/firstForm)

url的参数说明：/module/{微前端模块名称}/page/{页面名称}

打开工作流程模块，进入流程发起菜单，查找到新建的流程点击，可以看到开发的表单已经渲染。