全局功能自定义说明

 背景：

项目在交付到用户实际使用中，如果用户不了解业务会有许多功能是很难通过字面意思来理解功能的实际作用，或者某个功能具体的流程该是怎样的。

所以如何使用这都需要用到功能说明。我们在处理这些说明的时候常规的做法是在用户进入功能或是某个流程环节的时候给用户进行弹窗进行说明 (其中包括功能说明或者具体文件资料)。

传统的通知说明需要在单独在具体的功能中进行代码开发，和维护对应资料后方可实现其通知说明功能，但此种方式相对维护成本较大且客户地自定义代价过高，所以考虑做成可配置，用户可选择某个功能进行通知那些内容都有用户决定。

功能设计：

前端采用vue + Antd，后台Java

考虑通过富文本插件(支持文件上传)使用户进行通知内容维护。

具体通知到某个功能可以通过路由匹配来判断，用户通过选择指定功能找到对应功能路由，将路由和通知信息保存。

初版：

最初考虑路由匹配是写在路由守卫中进行匹配判断，但是实际验证本地可以，部署服务器后会导致前端部署出错。

功能路由匹配JS文件（仅参考功能逻辑，此种实现不合适）：

// featureGuard.js  功能守卫  用于环节通知判断当前路径是否需要通知


async function checkFeaturePath(to, router) {
  const featurePath = to.path;
  //不匹配登陆页地址
  if (featurePath.includes("/login")) {
    return;
  }
  //调用后台接口判断该功能地址是否存在环节通知
  const res = await reqService(
    "service.RteNoticeService",
    "queryRteNotice",
    {
      query_info: {
        notice_form_url: featurePath,
      },
    }
  );

  if (res && res.resultset.length > 0) {
    // 打开弹窗的逻辑
    openGlobalModal(router,res.resultset[0]); // 调用 openGlobalModal 打开弹窗
  }
}

//打开环节弹窗
function openGlobalModal(router,data) {
  // 创建 featureGuardPop 组件实例，并传递相关数据
  const instance = new Vue({
    router,
    render: (h) =>
      h(featureGuardPop, {
        props: {
          visible: true, // 传递需要的数据给 visible 属性
          rteNoticeTitle: data.rte_notice_title, // 通知标题
          rteNoticeContent: data.rte_notice_content, // 通知内容
          tempType: data.temp_type, // 模板类型
          tempEnclosureUuid: data.temp_enclosure_uuid, // 模板附件标识
        },
      }),
  });

  // 创建一个新的 DOM 节点
  const componentInstance = instance.$mount();
  document.body.appendChild(componentInstance.$el);
}



export default function featureGuard(router) {
  router.beforeEach(async (to, from, next) => {
    await checkFeaturePath(to, router);
    next();
  });
}

在路由守卫引入该文件即可。

// 引入并使用 环节通知方法 featureGuard
featureGuard(router);

 调整后：

之后考虑应该在页面框架加载后，在tab页中进行逻辑触发，每打开一个功能也就相当于打开了一个tab页签，只需要关注这个tab页签打开后的触发事件引入我们的逻辑即可。

​​​​​​​

依然需要两个方法，稍微改造下方便我们直接在页面使用：

   //   ==================  这是环节通知的相关方法 ==================

      checkFeaturePath(path) {
        if (path.includes("/login") ) {
          return;
        }
        //判断该功能地址是否存在环节通知（reqService 是自己封装的请求，正常替使用axios就行）
        reqService(
          "service.RteNoticeService",
          "queryRteNotice",
          {
            query_info: {
              notice_form_url: path,
            },
          }
        ).then(res => {
          if (res && res.resultset.length > 0) {
            // 打开弹窗的逻辑
            this.openGlobalModal(res.resultset[0]); // 调用 openGlobalModal 打开弹窗
          }
        })
      },

      openGlobalModal(data) {
        //featureGuardPop 是自己封装的一个vue弹窗组件，由于本框架私有封装太多这里不再展示
        // 创建 featureGuardPop 组件实例，并传递相关数据
        const instance = new Vue({
          router: this.$router,
          render: (h) =>
            h(featureGuardPop, {
              props: {
                visible: true, // 传递需要的数据给 visible 属性
                rteNoticeTitle: data.rte_notice_title, // 通知标题
                rteNoticeContent: data.rte_notice_content, // 通知内容
                tempType: data.temp_type, // 模板类型
                tempEnclosureUuid: data.temp_enclosure_uuid, // 模板附件标识
              },
            }),
        });

        // 创建一个新的 DOM 节点
        const componentInstance = instance.$mount();
        document.body.appendChild(componentInstance.$el);
      },

在框架tab页面中找到对应的触发事件方法，引入我们的逻辑即可。

后台：

后台需要新建数据表，关键字段应包含，通知名称、通知标题、通知编码、通知功能地址等着里不过多阐述。

--环节通知表 
rte_notice
主键标识		rte_notice_uuid
通知名称		rte_notice_name
通知标题		rte_notice_titile
通知名称		rte_notice_name
通知编码		rte_notice_code
模板类型		temp_type
模板附件标识	temp_enclosure_uuid
通知内容		rte_notice_content
流程编码		rte_notice_pd
环节编码		rte_notice_node
通知类型		rte_notice_type
环节表单地址  notice_form_url

最后：

实际功能我通知说明区分类型，结合实际业务逻辑同时维护了，流程中的某个节点通知，思路大致相同，就不过多讲解，有了葫芦瓢还远吗。

功能展示: