Tutorial ·

Install

提示：syman/burgeon-r3依赖以下三方资源包，在使用前请确保项目已经安装了相关依赖。

Package	Semantic Version	Package	Semantic Version
vue	^2.6.8	vue-router	^3.1.2
vuex	^3.1.0	ark-ui	^1.0.24
axios	^0.18.0

$ npm install @syman/burgeon-r3 --save

Usage Example

// index.js

import R3 from '@syman/burgeon-r3';

// 企业Logo、Banner配置信息
import enterpriseLogo from './src/assets/image/logo.png';
import enterpriseBanner from './src/assets/image/banner.png';
import Login from './src/component/Login';
import WelcomePage from './src/component/WelcomePage'

R3.launchApplication({
  image: { enterpriseLogo,  enterpriseBanner },
  globalComponent: { Login, WelcomePage },
  externalModules: {
    TheKeyNameOfMyPage: {
      component: {
        template: '<h1>Here is my customized component.</h1>'
      }
    }
    ...
  }
});

Methods

Name	Type	Description
R3.launchApplication	Function	启动应用程序
R3.urlSearchParams	Function	对URLSearchParams的简单封装，通常配合Axios使用，用于提交参数。
R3.getModuleName	Function	用于获取当前路由界面对应的唯一模块标识
R3.menuClick	Function	用于触发末级导航点击，跳转路由。通常用于项目自定义导航区域对末级导航点击行为的处理。

R3.launchApplication

R3.launchApplication(ProjectConfig:Object)

Param	Type	Description	IsRequired	Default Value
image	Object	外链Image	Y
globalComponent	Object	外链globalComponent	Y
externalModules	Object	自定义界面配置项
externalModals	Object	自定义弹窗配置项
projectRoutes	Object Array	项目自定义路由
quietRoutes	String Array	外链quietRoutes
Version	String	后台API版本		1.3
enableGateWay	Boolean	是否启用网关		false
ignoreGateWayPattern	RegExp	外链ignoreGateWayPattern
extentionForTable	Object Array	“表”的扩展属性配置项
extentionForColumn	Object Array	“字段”的扩展属性配置项
enableModuleKA	Boolean	是否开启KeepAlive		true
enableTabLists	Boolean	是否显示TabLists页签		true
enableHistoryAndFavorite	Boolean	是否显示“历史”、“收藏”功能		true
touristRoute	String	未登录状态下的“游客”路由		/login
isItemTableNewValidation	Boolean	是否允许子表新增有必填项时，输入值才触发子表必填项校验，不输入值则只校验主表		false
enableInitializationRequest	Boolean	是否启用初始化请求		true
customizeWaterMark	Object	是否启用自定义水印		{}
mock	Boolean	是否启用mock模式		false
requestPenddingExpire	Number	防爆力请求时间，默认为1秒		1000*1
encodeControl	Boolean	控制oss地址是否需要转码		false
enableRestrictSave	Boolean	单对象界面是否限制未修改数据下的保存		true
logoutTips	Boolean	失去会话时的登出提示控制		false
encryptedPassword	Boolean	是否对login接口password加密(只控制框架原生登录界面)		false
ossRealtimeSave	Boolean	是否开启oss上传后一次性保存,默认没上传一次保存一次		false
blockFullOperation	Boolean	禁止不选数据时的批量修改操作		false
dateStorageTime	Number	查询条件存储时间，默认1天,建议不要设置太大影响性能		1
enableKAQueryDataForUser	Boolean	是否开启存储全表查询条件		false
enableOpenNewTab	Boolean	单对象根据明细ID不同可支持开启多个Tab		false
filterUrlForNetwork	Object	过滤不需要用框架报错提示信息的接口请求		{}
filterUrlForNetworkScript	Function	执行filterUrlForNetwork逻辑脚本
notificationOfMain	Boolean	控制主表字段修改是否派发事件,当为true时，主表字段修改后会派发事件notificationOfMain		false
listDefaultColumn	Number	控制列表界面搜索区域一行展示几列查询字段		4
defaultrange	Number	配置外健查询下拉每页展示多少条数据		10

R3.urlSearchParams

R3.getModuleName

使用方法：
       import R3 from 'burgeon-r3';或者当你使用cdn的方式引用R3框架时，const R3=window.R3.default
       R3.getModuleName()

R3.menuClick

 使用方法：
          import R3 from 'burgeon-r3';或者当你使用cdn的方式引用R3框架时，const R3=window.default
          R3.menuClick(data,cb);
 参数：
          data 同菜单配置信息保持一致（可参照/p/cs/getSubSystems接口返回的数据）
          cb   回调函数

Properties

Name	Type	Description
R3.network	Object	对axios的封装，提供get、post方法（用法同axios相同）以及axios原对象
R3.components	Object	框架里封装的一些组件 1.WaterMark 水印组件
R3.store	Object	全局唯一数据状态树
R3.config	Object	框架默认配置内容

R3.network


使用方法： 
            import R3 from 'burgeon-r3';或者当你使用cdn的方式引用R3框架时，const R3=window.default
            network.post('接口名称', 参数)
            network.get('接口名称', 参数)

R3.components

ContentDisplayArea,
PopDialog,
ComAttachFilter,
DownComponent,
WaterMark,
SearchForm,
FilterTree,
SelectTree,
DocFile,
ImportDialog

Usage Example：

<template>
  <div>
            <DownComponent :searchFoldnum="3" :rowAll="screenConditionData.length" :setHeight="34">
            </DownComponent>
  </div>
</template>

<script>
  import R3 from 'burgeon-r3';

  const {  components } = R3;

  export default {
    components: {
      DownComponent: components.DownComponent
    },
  };
</script>

R3.store

🔗详细请看R3.store

R3.config

customizeWaterMark

Usage Example：

customizeWaterMark: {
    financialAudit: { text: '财务审核中', color: '#e80000' },
    financialMaintain: { text: ' 财务维护中', color: '#e80000' },
    tobeConfirmed: { text: '待确认', color: '#e80000' },
    refuseto: { text: '拒回', color: '#e80000' },
    ProcessCompletion: { text: '流程完成', color: '#e80000' },
    cancel: { text: '已取消', color: '#e80000' },
    top: '10px',
    left: '10px',
    width: '50px'
  },

获取每张表对应的信息

Usage Example：

 

 注：需要在每一个需要使用以下属性的子组件内注入inject: [moduleComponentName, instanceRouteQuery, instanceRoute]
 框架向列表界面，单对象界面，定制界面这三种类型界面注入了依赖，供子组件使用
 moduleComponentName：每张表对应的模块名称
 instanceRouteQuery：每张表对应的路由参数,包括主表表名/主表ID/主表记录ID
 instanceRoute：每张表对应的path
 
 inject方法可参考https://cn.vuejs.org/v2/api/?#provide-inject

单对象界面和列表界面提交/动作定义静默类型接口请求时，需要处理的逻辑

 静默方法名称：exeActionForR3(此方法为静默接口发出后的回调)
             /exeActionSuccessForR3(此方法为静默接口完成后，成功提示框点击确定时的回调)
 window.addEventListener('exeActionForR3', (data) => {
          store.commit('global/tabCloseAppoint',
              { tableName: data.detail.tableName//(主表表名),
               routeFullPath: data.detail.routePath//（路由path）
              });
  });
 data.detail包含以下参数：
       data.detail: {
         name: 方法名,
         type: 界面类型,
         url: 接口名称,
         res：接口信息，
         moduleName：模块名称,
         routeQuery：路由参数信息（包括主表表名/主表ID/主表记录ID）,
         tableName:主表表名,
         routePath：路由path
       }

 提交方法名称：batchSubmitForR3

   window.addEventListener('batchSubmitForR3', (data) => {
     store.commit('global/tabCloseAppoint', 
         { tableName: data.detail.tableName//(主表表名),
          routeFullPath: data.detail.routePath//（路由path)
         });
   }); 
   data.detail包含以下参数：   
       data.detail: {
         name: 方法名,
         type: 界面类型,
         url: 接口名称,
         res：接口信息，
         moduleName：模块名称,
         routeQuery：路由参数信息（包括主表表名/主表ID/主表记录ID）,
         tableName:主表表名,
         routePath：路由path
       }

路由跳转 tabOpen

 方法名称：tabOpen
 调用方式：
    import R3 from 'burgeon-r3';

     R3.store.commit('global/tabOpen', 
         {     
             //type:'类型',  
             //tableName:'主表表名',
             //tableId:'主表ID',
             //id:'明细ID'//跳转到列表界面可不传此参数
             // back:返回标志, 
             // type:跳转类型,
             // tableName:主表表名,
             // tableId:主表ID,
             // id:明细ID,
             // label:显示名称, 
             // customizedModuleName:自定义界面组件名称
             // customizedModuleId:自定义界面ID，
             // linkName:外链界面名称，
             // linkId:外链界面ID,
             // label：中文tab名称，
             // url:固定格式url（按照框架路由规则拼接好的）,
             // isSetQuery:可设置目标界面为标准列表界面的表单默认值（只支持设置标准列表界面）
             // queryData：设置目标界面表单默认值数据（isSetQuery必须设置为true）
                  queryData数据格式说明：   queryData = {
                                   tableId: '992',//目标表ID
                                   values: [//设置默认值的字段
                                     {
                                       display: 'OBJ_FK',//设置的字段类型
                                       colid: '99525',设置的字段colid
                                       defaultValue: '元数据',设置的字段默认值
                                       refobjid: '666666'//如果设置的字段的display为OBJ_FK（外键类型），则必须设置refobjid，refobjid会作为查询参数
                                     }, {
                                       display: 'OBJ_FK',
                                       colid: '99484',
                                       defaultValue: '表',
                                       refobjid: '888888'
                                     }
                                   ]
                                 };
         });
   参数说明：
          注：跳转的表存在在菜单中
           type = 'H'; //单对象左右结构
           type = 'V'; // 单对象上下结构
           type = 'S'//列表界面

           R3.store.commit('global/tabOpen', {
             标准列表界面:
                   type:'S',
                   tableName,
                   tableId
             单对象上下结构： 
                   type: 'tableDetailVertical'||'V',
                   tableName,
                   tableId,
                   id:明细ID,

              左右结构单对象界面:
                   type:'tableDetailHorizontal'||'H',
                   tableName,
                   tableId,
                   id:明细ID,

              自定义界面:
                     type : 'tableDetailAction'||'C',
                     label,
                     customizedModuleName,
                     customizedModuleId
              外链界面:
                 type: 'tableDetailUrl' ||'URL',
                 linkName,
                 linkId
             根据框架路由规则拼接好的URl进行以上几种类型的界面跳转
                 type:'S'/'V'/'H'/'C'/……,
                 url
                
           })
         如果你有自定义界面跳转某一个单对象界面，单对象界面的返回按钮需要回到来源自定义界面时，可使用以下方法：
          R3.store.commit('global/tabOpen', {
              单对象上下结构： 
                   type: 'tableDetailVertical'||'V',
                   tableName,
                   tableId,
                   id:明细ID,
                   dynamicRoutingForCustomizePage: true

              左右结构单对象界面:
                   type:'tableDetailHorizontal'||'H',
                   tableName,
                   tableId,
                   id:明细ID,
                   dynamicRoutingForCustomizePage: true

        或者你可以直接拿到你要跳转的单对象的url,如：'/SYSTEM/TABLE_DETAIL/H/AD_TABLE/992/24407'，你也可以直接传入以下参数：
             url: '/SYSTEM/TABLE_DETAIL/H/AD_TABLE/992/24407'/或者 '/SYSTEM/TABLE_DETAIL/V/AD_TABLE/992/24407',
             type: 'H'或者'v',//H:单对象左右结构，V:单对象上下结构
             dynamicRoutingForCustomizePage: true
          })

单对象界面左右结构第一个Tab支持配置自定义界面

 配置要求：需将需要作为第一个tab内显示的自定义界面数据配置为第一个，其余和正常配置左右结构表保持一致；

 注意：
         1.自定义界面占据主表位置后，主表支持的按钮功能，此单据如需要，需要自定义界面支持；
           Example:复制/新增/返回按钮等；
         2.新增时，自定义界面可根据路由判断当前表是新增状态；

关闭当前tab

tabCloseAppoint
 调用方式：
    import R3 from 'burgeon-r3';


     const { fullPath } = this.$route;//获取当前路由fullPath
     const { keepAliveModuleName, tableName } = this.$store.state.global.activeTab;//获取当前缓存模块名称，自定义标识

     R3.store.commit('global/tabCloseAppoint',
       {
          routeFullPath: fullPath,//当前路由fullPath
          stopRouterPush: true, //是否阻止默认跳转到前一个tab
          keepAliveModuleName,//当前模块名称
          tableName,//当前自定义表标识
          event:function,//type:function;调用方法前执行的回调
       }
     )

自定义弹出框相关说明

 1.确定按钮：  this.$emit('closeActionDialog', true); // 关闭弹框，参数传入true时，会根据元数据配置执行逻辑；
 2.取消按钮：  this.$emit('closeActionDialog', false); // 关闭弹框，参数为false时，则直接关闭弹框；

closeActionDialog方法参数说明（形参）	第一个参数	第二个参数	第三个参数
type	Boolean	Array	String
Description	true:根据元数据配置执行逻辑;false :直接关闭弹框	对应报错的明细的信息	当前标准列表界面对应的模块名称

Example:
          const failInfo = [
              {
                message: '报错信息', // 报错信息
                objid: 11// 对应明细ID
              }
            ];
            const moduleComponentName = `S.${this.$route.params.tableName}.${ this.$route.params.tableId}`;// 当前模块名称
            this.$emit('closeActionDialog', true, failInfo, moduleComponentName); // 关闭弹框

页面展示效果

  prop:{
      idArray: {// 可获取明细表勾选的明细ID
        type: [Array, Object],
        default: () => {}
      },
      objTabActionDialogConfig: {// 当前自定义按钮元数据配置信息
        type: [Object],
        default: () => {}
      },
      popwinMessage: {// 获取标准列表界面表格配置popwin类型字段配置的refobjid
        type: Object,
        default: () => {}
      },
       selectRowData: {// 获取ID用于多选,获取勾选的明细对应的row内的数据
        type: [Array, Object],
        default: () => {}
      },
  }

框架内置自定义界面支持配置requestUrl

R3.launchApplication({
 custommizedRequestURL: {  
   '原来的url':'重置的url'
 }, // 配置内置自定义界面requestURL

})

自定义界面调用框架收藏与取消收藏功能

import R3 from 'burgeon-r3';
      const {store } = R3;
 store.commit('global/updateFavoriteData',收藏接口返回的数据/取消收藏返回的数据);

配置树结构列表界面相关说明

注：使用此功能，需要你对树结构列表界面的功能先进行了解，这样才能明白配置内的参数所代表的含义；

1.元数据配置，菜单配置类型为 type: "tree" ，其余配置同标准列表界面保持一致
  可通过查看当前路由是否包含?isTreeTable=true来确认当前表是否配置的是树结构列表界面
2.树结构列表界面，使用了ztree插件开发，需项目使用方在html文件内自行引入相关js与css文件


 <link href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.24/js/jquery.ztree.core.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.40/js/jquery.ztree.excheck.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.40/js/jquery.ztree.exhide.min.js"></script>


 注：zTree是一个依靠jQuery实现的多功能“树插件”，使用ztree必须引入jquery插件
    需要单文件引入是因为zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
    [http://www.treejs.cn/v3/faq.php#_202](ztree官方文档对于jquery引用版本说明)


3.R3框架项目配置
  第一步你需要做以下几件事情：
     简单来说： 找到你的入口文件，找到你调用launchApplication方法的地方，在方法里加入externalTreeDatas参数
    
      需要在入口文件挂载R3框架项目配置的方法内加入externalTreeDatas参数
      import R3 from 'burgeon-r3';
      import externalTreeDatasConfig from '/treeData.config.js';//


       R3.launchApplication({
             externalTreeDatas: externalTreeDatasConfig
             ...
       });

       说明：框架会把launchApplication的参数挂载到windows对象上
           ，externalTreeDatas参数对应的是一个对象，
           对象的每个key对应的是配置了树结构列表界面的表名，value对应的是一个函数，
           比如：tableName: () => {return async()=>{
                await network.post('/user-center/p/cs/chrorgload').then((res) => {
                      return 树结构数据等
                });
           }}，由于需要在函数内请求获取树数据的接口，接口需要同步处理，最后return树结构数据，
           



   第二步你需要做以下几件事情：   
      externalTreeDatasConfig.js
            Example:
                  先定义一个function,如下
                     const function = () => async () => {
                       //注：请参照以下同步请求的写法
                       let treeData = {
                         data,// 树结构数据
                         name: 'ID',// 定义查询列表时的接口参数
                         placeholder: ''// 可设置模糊检索框内的placeholder，如不设置框架会自行取中文表名
                       };
                       //注：框架在读取配置文件时，接收的是一个promise；请求接口时，需要进行同步处理
                             network:可查看文档，
                       await network.post('api').then((res) => {
                             if (res.data.code === 0) {
                               treeData.data = res.data.data;
                             }
                       });
                       return treeData;//必须有返回值
                     };

           //导出你定义的对象，当你的项目配置了多个树结构列表界面时，根据表名配置即可
           export default {
             表名:function,
             ...
           };

###标准列表界面明细表格配置说明

配置链接型字段：customerurl
customerurl.objdistype可配置4种类型
popwin：自定义弹窗
     必须配置字段：
                 objdistype: "popwin"  类型
                 refobjid: "ID,ECODE"  将会解析ID,ECODE所对应的值，传入弹出框作为props参数，
                 reftabdesc: "测试"     弹出框title
                 tableurl: "clonePopUp"  弹出框引入的组件名

tabpanle：单对象左右结构  object：单对象上下结构
     必须配置字段：
                objdistype: "object"       类型
                refobjid: "ID"             用作单对象明细ID的字段，将会解析此字段用作明细ID
                reftabdesc: "采购编辑"      目标单对象tab名称
                reftableid: "23792"        目标单对象主表ID
                reftablename: "DL_B_PUR"   目标单对象主表表名



customized：自定义界面
     必须配置字段：
                objdistype: "customized" 类型
                refobjid: "ID,ENAME"     将会解析ID,ECODE所对应的值，存入sessionStorage,
                          
                reftabdesc: "测试"
                reftableid: 2097
                reftablename: ""
                tableurl: "CUSTOMIZED/functionPermission"
link：外链界面
                objdistype: "link"       类型
                linkname: "hello"        外链界面name:用于拼接路由
                refobjid: "ID"           用作外链ID的字段，将会解析此字段用作外链ID:用于拼接路由
                reftabdesc: "测试外链"    外链界面tab名
                tableurl: "http://123:8001/page/targetDetail.html"   外链界面地址

  跳转后的路由格式：http://0.0.0.0:8193/LINK/HELLO/2

配制界面跳转到定制界面以及外链界面提供的参数customizeMessage

可通过查看sessionStorage的数据
customizeMessage:{
  自定义界面标识/外链界面标识: {
          type: {
               data
              <!-- ENAME: "希曼小店02", ID: "2" -->
          }
  }
}

Id:定制界面标识或者外链界面标识,可通过路由获取 
    Example:  http://123:8193/CUSTOMIZED/FUNCTIONPERMISSION/2097
    如以上路由标识则为FUNCTIONPERMISSION

type：
  列表界面
    standardCustomerurlCustomized:标准列表界面明细表格配置的链接型字段：customerurl跳转定制界面 data:配置的refobjid
    standardCustomerurlLink:标准列表界面明细表格配置的链接型字段:customerurl跳转外链界面  data:当前明细全部信息
    standardCustomizeButton：标准列表界面navbar类型自定义按钮：跳转定制界面 data:当前按钮的元数据配置信息
    standardCustomizeButtonLink:：标准列表界面navbar类型自定义按钮:跳转外链界面 data:当前按钮的元数据配置信息
    standardTableurlCustomized:标准列表界面网页链接类型：tableurl跳转   data:当前明细全部信息
  单对象界面
    singleCustomizeButtonLink:单对象界面navbar类型自定义按钮：跳转外链界面  data:当前按钮的元数据配置信息
    singleCustomizeButton:单对象界面navbar类型自定义按钮：跳转定制界面  data:当前按钮的元数据配置信息
    singleCustomerurlCustomized:单对象界面明细表格配置的链接型字段：customerurl跳转定制界面 data:配置的refobjid
    singleCustomerurlLink:单对象界面明细表格配置的链接型字段:customerurl跳转外链界面  data:当前明细全部信息

components

框架会抛出一些组件供外部使用

调用方式 Usage Example：

<template>
  <div>
            <DownComponent :searchFoldnum="3" :rowAll="screenConditionData.length" :setHeight="34">
            </DownComponent>
  </div>
</template>

<script>
  import R3 from 'burgeon-r3';

  const {  components } = R3;

  export default {
    components: {
      DownComponent: components.DownComponent
    },
  };
</script>

R3.components

WaterMark:水印组件

 <WaterMark
    :text="waterMarkText"
    :color="waterMarkColor"
  />
  参数说明：
    props: {
                color: {//水印颜色
                  type: String,
                  default: 'red'
                },
                text: {//水印文字
                  type: String,
                  default: '文字'
                }
              }

Docfile:文件上传组件

  <Docfile
    :item-webconf="_items.props.webconf"
    :web-conf-single="webConfSingle"
    :dataitem="_items.props.itemdata"
    @filechange="filechange"
  />   
  参数说明：
    props: {
      draggingTag: {// 拖拽group属性标示，如果当前界面多次使用了当前组件，需保持标示唯一性
        type: String,
        default: () => {
          if (this && this.dataitem && this.dataitem.colname) {
            return this.dataitem.colname;
          }
          return toString(new Date().getTime());
        }
      },
      accept: { // 文件上传格式控制
        type: String,
        default: '*'
      }
},

框架派发的事件

单对象界面

        window.addEventListener('objTabAction',执行方法);//自定义类型按钮触发时派发的事件
            参数： detail: {
              data: obj//自定义按钮元数据配置信息
            }
        window.addEventListener('exeActionSuccessForR3',执行方法);//动作定义静默执行成功后，点击弹出执行成功提示框的确定按钮派发的事件
            参数：  detail: {
                    name: 'exeAction',
                    url,
                    res,
                    moduleName: this[MODULE_COMPONENT_NAME],
                    routeQuery: this[INSTANCE_ROUTE_QUERY],
                    tableName: this[INSTANCE_ROUTE_QUERY].tableName,
                    routePath: this[INSTANCE_ROUTE]
                  }
        window.addEventListener('customizeClick',执行方法);//删除，保存，刷新按钮触发时派发的事件，根据不同type类型区分
            参数：
           1. 删除按钮触发时派发的事件
             detail: {
               type: 'delete'删除按钮触发时派发的事件
            }

           2. 保存成功后按钮触发时派发的事件(保存接口成功)
             detail: {
                type: 'save', // 类型为保存成功
                mainTableParame: this.currentParameter, // 保存接口主表参数
                itemTableParame: this.itemCurrentParameter, // 保存接口子表参数
                res, // 接口返回res
              }
          3.保存按钮触发时派发的事件(主表未修改值，不会调保存接口)
             detail: {
                  type: 'save',
              }

       注⚠️：2和3只有返回的参数不同
          
        window.addEventListener('objTabActionSlientForItemTable',执行方法);//保存失败时派发的事件
            参数： 
            detail: {
              type: 'reject',
            }

        window.addEventListener('tabRefreshClick',执行方法);//刷新按钮触发时派发的事件
            参数：无参数



        window.addEventListener('tabClick',执行方法);//表内tab切换派发的事件
            参数： 
             detail: {
                data,//当前tab信息
                index//当前tab索引
              }

        window.addEventListener('tabClick',执行方法);//主表加载成功后派发的事件
            参数： 
             detail: {
                detail: {
                  data: resData//当前表元数据配置信息
                }
              }


        window.addEventListener('tabClick',执行方法);//左右结构提交成功后派发的事件
            参数： 
            detail: {
              name: 'exeAction',
              url,
              res,
              type: 'horizontalTable/verticalTable',//当前表的结构horizontalTable为左右结构，verticalTable为上下结构
              moduleName,
              routeQuery,
              tableName: routeQuery.tableName,
              routePath
            }

          window.addEventListener('exeActionForR3',执行方法);//动作定义静默执行成功后派发的事件
            参数： 
             detail: {
              name: 'exeAction',
              type: 'horizontalTable/verticalTable',//当前表的结构horizontalTable为左右结构，verticalTable为上下结构
              url,
              res,
              moduleName,
              routeQuery,
              tableName: routeQuery.tableName,
              routePath
            }

标准列表界面


       
          window.addEventListener('exeActionSuccessForR3',执行方法);//动作定义静默执行成功后，点击弹出执行成功提示框的确定按钮派发的事件
            参数：  
                  detail: {
                    name: 'exeAction',
                    url,
                    res,
                    moduleName: this[MODULE_COMPONENT_NAME],
                    routeQuery: this[INSTANCE_ROUTE_QUERY],
                    tableName: this[INSTANCE_ROUTE_QUERY].tableName,
                    routePath: this[INSTANCE_ROUTE]
                  }

         window.addEventListener('tabClick',执行方法);//提交成功后派发的事件
            参数： 
            detail: {
                name: 'exeAction',
                type: 'standardTable',
                url: url || '/p/cs/batchSubmit',
                res,
                moduleName,
                routeQuery,
                tableName: routeQuery.tableName,
                routePath
              }
            });

          window.addEventListener('exeActionForR3',执行方法);//动作定义静默执行成功后派发的事件
            参数： 
              detail: {
                name: 'exeAction',
                type: 'standardTable',
                url: actionName || '/p/cs/exeAction',
                res,
                moduleName,
                routeQuery,
                tableName: routeQuery.tableName,
                routePath
              }

上下结构单对象界面配置自定义tab需要校验主表必填字段

可调用 window.updataVerifyRequiredInformation()方法;
返回值说明：
   true:校验通过

enableOpenNewTab配置说明

项目内调用过框架提供的tabCloseAppoint方法，因此功能，参数上需做调整；


Example:   如果你是像以下方式调用的方法，需要根据不同类型的表进行处理
        $store.commit('global/tabCloseAppoint', {
          tableName: data.detail.tableName, //(主表表名),
          routeFullPath: data.detail.routePath //（路由path）
        });

     标准列表界面：
       const { tableName, tableId,itemId } = this.$route.params;//获取路由参数

        $store.commit('global/tabCloseAppoint', {
          tableName: this.buttons.tableName, // (主表表名),
          routeFullPath: this.$router.currentRoute.path, // （路由path）
          routePrefix: this.$route.meta.routePrefix,//(路由前缀)
        });

     单对象界面：
        const { tableName, tableId,itemId } = this.$route.params;//获取路由参数

        $store.commit('global/tabCloseAppoint', {
          tableName: this.tableName, // (主表表名),
          routeFullPath: this.$router.currentRoute.path, // （路由path）
          routePrefix: this.$route.meta.routePrefix,//(路由前缀)
          itemId: this.itemId,//(明细ID)
          keepAliveModuleName: this[MODULE_COMPONENT_NAME]//（当前模块名称）
        });

     定制界面：
        const { customizedModuleName, customizedModuleId } = this.$route.params;//获取定制界面ID，Name
        const keepAliveModuleName = `C.${customizedModuleName}.${customizedModuleId}`;//拼接当前定制界面模块名称

        this.$store.commit('global/tabCloseAppoint', {
          tableName: customizedModuleId, // (主表表名),
          routeFullPath: this.$router.currentRoute.fullPath, // （路由path）
          routePrefix: this.$route.meta.routePrefix,//(路由前缀)
          keepAliveModuleName,//(定制界面当前模块名称）
          itemId: customizedModuleId//(定制界面ID)
        });

filterUrlForNetwork配置说明

说明：在R3框架启动项内配置了 filterUrlForNetwork参数，则该对象内维护的表（key为表名）内对应的请求地址（value为接口名）不会执行框架对code为-1，-2的封装逻辑，将不会弹出报错提示框；

⚠️：你需要在框架启动项（launchApplication）内配置filterUrlForNetwork， filterUrlForNetworkScript两个参数


import filterUrlForNetworkScript from 'filterUrlForNetworkScript.js'

filterUrlForNetwork: {// 过滤不需要用框架报错提示信息的接口请求
  configPage: {// 配置界面
     AD_COLUMN : ['/p/cs/QueryList', '/p/cs/getTableQuery'],//配置界面表名（例如：AD_COLUMN）:对应的表内的接口（Array）
  },
  customizePage: ['FUNCTIONPERMISSION'], // 自定义界面(Array),数组内包含的为不需要框架报错提示框的自定义界面(FUNCTIONPERMISSION：自定义界面标识),此配置针对的为自定义界面内的所有接口
},
filterUrlForNetworkScript: filterUrlForNetworkScript //导入的filterUrlForNetworkScript脚本文件


filterUrlForNetworkScript.js文件说明:
  此文件内逻辑用于筛选出filterUrlForNetwork配置的配置界面的接口与自定义界面
  可通过在ArkShare上进行下载，下载后在项目内引入使用，配置到filterUrlForNetworkScript参数；

🔗filterUrlForNetworkScript.js下载地址

改变当前Tab显示的labelName

脚本类型按钮元数据配置

可通过调用R3框架global模块内的全局方法调用方式:(.vue页面) const { customizedModuleName, customizedModuleId } = this.$route.params;//获取定制界面ID，Name const keepAliveModuleName = C.${customizedModuleName}.${customizedModuleId};//拼接当前定制界面模块名称 const data = { label: '当前Tab显示名称', keepAliveModuleName:keepAliveModuleName,//当前界面模块名称 }; this.$store.commit('global/changeCurrentTabName',data)

导航菜单缩进配置说明

⚠️：你需要在框架启动项（launchApplication）内配置navMenuConfig参数

  // 模板
  R3.launchApplication({
    navMenuConfig: {
      '当前主表表名': {
        indent: '需要几个缩进'
      },
    }
  });

  // 举个栗子
  R3.launchApplication({
    navMenuConfig: {
      OC_B_ORDER_LOG2: {
        indent: 6 // 加6个缩进
      },
      OC_B_JITX_MODIFY_WAREHOUSE_LOG: {
        indent: 2
      }
    }
  });

字段说明: 上面例子中`OC_B_ORDER_LOG2`对应导航要跳转的主表表名，`indent`字段对应导航菜单名称前需要加的缩进数量

自定义表单项使用方式

使用场景

子表新增区域的表单的表单项组件不能满足业务场景时。用户可以使用自己自定义的表单项组件

使用方式

在R3配置项中，添加formItemConfig属性

R3.launchApplication({
  formItemConfig: {
    matrix: {
      component: matrixWrap,
    }
  },
})

其中matrix(该名称仅作为示例)为元数据配置的组件名称，它是一个对象类型，在component属性里填写你本地的组件名。

🌰举个栗子

比如接口返回一个表单项的配置对象如下

colname: "PS_C_SKU_ECODE"
cusurl: "matrix"
display: "text"
name: "商品编码"
tablename: "SC_B_TRANSFER_ITEM"
type: "STRING"

框架会判断配置对象中如果cusurl属性存在，就认为这是一个自定义的表单项，按照自定义组件的方式渲染。然后把matrix拿来最为R3框架formItemConfig的属性(matrix属性名称是用户自定义的)，作为一个映射关系。

所以formItemConfig配置项中

matrix: {
  component: matrixWrap,
}

含义就是指当接口给的元数据是matrix(该名称仅作为示例)，框架会使用你本地的matrixWrap(该名称仅作为示例)组件，将matrix和matrixWrap做一个映射关系。

组件传值获取

用户本地写的matrixWrap(该名称仅作为示例)组件，可以通过props接受到一个options对象，里面可以获取到表单所能提供的所有参数和接口的元数据

Install

Usage Example

Methods

R3.launchApplication

R3.urlSearchParams

R3.getModuleName

R3.menuClick

Properties

R3.network

R3.components

Usage Example：

R3.store

R3.config

customizeWaterMark

Usage Example：

获取每张表对应的信息

Usage Example：

单对象界面和列表界面提交/动作定义静默类型接口请求时，需要处理的逻辑

路由跳转 tabOpen

单对象界面左右结构第一个Tab支持配置自定义界面

关闭当前tab

自定义弹出框相关说明

框架内置自定义界面支持配置requestUrl

自定义界面调用框架收藏与取消收藏功能

配置树结构列表界面相关说明

配制界面跳转到定制界面以及外链界面提供的参数customizeMessage

components

调用方式 Usage Example：

R3.components

框架派发的事件

单对象界面

标准列表界面

上下结构单对象界面配置自定义tab需要校验主表必填字段

enableOpenNewTab配置说明

filterUrlForNetwork配置说明

说明：在R3框架启动项内配置了 filterUrlForNetwork参数，则该对象内维护的表（key为表名）内对应的请求地址（value为接口名）不会执行框架对code为-1，-2的封装逻辑，将不会弹出报错提示框；

⚠️：你需要在框架启动项（launchApplication）内配置filterUrlForNetwork， filterUrlForNetworkScript两个参数

改变当前Tab显示的labelName

导航菜单缩进配置说明

⚠️：你需要在框架启动项（launchApplication）内配置navMenuConfig参数

字段说明: 上面例子中OC_B_ORDER_LOG2对应导航要跳转的主表表名，indent字段对应导航菜单名称前需要加的缩进数量

自定义表单项使用方式

使用场景

使用方式

🌰举个栗子

组件传值获取

字段说明: 上面例子中`OC_B_ORDER_LOG2`对应导航要跳转的主表表名，`indent`字段对应导航菜单名称前需要加的缩进数量