【泛微 weaver E9 前端梳理】

文章目录

泛微 weaver E9 前端梳理

一、建模相关

1. 建模拓展按钮显示弹框方法

显示弹框可通过 ecCom.WeaTools.createDialog 方法来创建

文档地址

ecCom.WeaTools.createDialog({title:"车辆使用申请",url:"/spa/cube/index.jsp#/main/cube/card?type=1&modeId=3&formId=-33",icon:"icon-coms-workflow",iconBgcolor:"#0079DE",style:{width:"600px",height:600},destroyBodyOnClose:true,// 当点击关闭后是否卸载 body 内容 默认为false，关闭后会重新执行，设为true解决重复执行页面jscallback:(datas)=>{// 数据通信
      console.log("弹窗回传值", datas);},onCancel:()=>{// 关闭通信
      console.log("关闭通信");},},undefined,(dialog)=>{// 由于组件异步化可能导致第一次没有加载到组件，所以需要在回调中调用
    dialog.show();});

2. 建模查询列表方法

使用ModeList变量
例如：
1、列表刷新方法 ModeList.reloadTableAll()2、列表获取搜索条件方法 ModeList.getHighSearchDatas()3、所有数据导出为excel ModeList.getAllExcelOut()

3. 建模查询自定义按钮

// 链接目标方式: 手动输入// javascript方法名: 例如 javascript:onUrl();// javascript方法参数: 例如 id,dqzt,cph// javascript方法体functiononUrl(id, params){
  params = params.split("+");
  console.log("sss", id, params);
  antd.Modal.confirm({title:`修改车牌号${params[2]}当前状态`,content:`请确认是否修改为${params[1]=="1"?"可用":"不可用"}`,onOk(){
      console.log("确定");
      ModeList.reloadTable();},onCancel(){},});}

二、流程相关

E9 流程表单前端接口 API

1. 获取右上角操作按钮组方法

// 获取右上角操作按钮组方法
mobx.toJS(wfform.getGlobalStore().rightMenu.rightMenus);

三、ecode 开发

ecode 开发文档地址

E9PC 端组件库地址

1. config 变量设置和引用

• 变量设置

需写在config文件夹下面的config.js

// 变量设置const configs ={customid:163,};

ecodeSDK.setCom("${appId}","configs", configs);

• 变量引用

// 变量引用const configs = ecodeSDK.getCom("${appId}","configs");// 例如通过 configs.customid 即可拿到定义好的值

2. 复写组件

场景例如：特定流程顶部添加按钮

// WeaReqTop组件复写const workflowid =676;//指定流程

ecodeSDK.overwritePropsFnQueueMapSet("WeaReqTop",{//组件名fn:(newProps)=>{//newProps代表组件参数const{ hash }= window.location;// 根据特定参数去执行if(!~hash.indexOf("/main/workflow/req"))return newProps;if(window.wfform && wfform.getBaseInfo().workflowid == workflowid){const{ Button }= antd;

      newProps.buttons.push(<Button type="primary" onClick={()=>{}}>
          按钮
        </Button>);}return newProps;},order:1,//排序字段，如果存在同一个页面复写了同一个组件，控制顺序时使用desc:"WeaReqTop组件复写",});

3. 复写接口

场景例如：复写接口 流程表单 添加删除人员操作后 刷新页面

// 复写接口  流程表单  添加删除人员操作后  刷新页面
ecodeSDK.rewriteApiDataQueueSet({fn:functionfn(url, params, data){if(
      url.indexOf("/main/workflow/req")==-1&&
      url.indexOf("/api/workflow/freeFlow/saveFreeNodeInfo")==-1)return data;const{ hash }= window.location;let urlParams =parseParam(hash);if(urlParams.isRemarkRecording !=1)return data;

    console.log("urlParams.isRemarkRecording==>",
      urlParams.isRemarkRecording,
      url,
      params
    );

    window.onbeforeunload=function(e){returnnull;// onbeforeunload 钩子中如果返回null的话，就不会弹出对话框（"系统可能不会保存您所做的更改"）。};setTimeout(()=>{
      window.location.reload();});return data;},});functionparseParam(url){const paramsStr =/.+\?(.+)$/.exec(url)?/.+\?(.+)$/.exec(url)[1]:"";// 将 ? 后面的字符串取出来const paramsArr = paramsStr.split("&");// 将字符串以 & 分割后存到数组中let paramsObj ={};// 将 params 存到对象中
  paramsArr.forEach((param)=>{if(/=/.test(param)){// 处理有 value 的参数let[key, val]= param.split("=");// 分割 key 和 value
      val =decodeURIComponent(val);// 解码
      val =/^\d+$/.test(val)?parseFloat(val): val;// 判断是否转为数字if(paramsObj.hasOwnProperty(key)){// 如果对象有 key，则添加一个值
        paramsObj[key]=[].concat(paramsObj[key], val);}else{// 如果对象没有这个 key，创建 key 并设置值
        paramsObj[key]= val;}}else{// 处理没有 value 的参数
      paramsObj[param]=true;}});return paramsObj;}

4. 复写组件

场景例如：特定流程顶部添加按钮

// WeaReqTop组件复写const workflowid =676;//指定流程

ecodeSDK.overwritePropsFnQueueMapSet("WeaReqTop",{//组件名fn:(newProps)=>{//newProps代表组件参数const{ hash }= window.location;// 根据特定参数去执行if(!~hash.indexOf("/main/workflow/req"))return newProps;if(window.wfform && wfform.getBaseInfo().workflowid == workflowid){const{ Button }= antd;

      newProps.buttons.push(<Button type="primary" onClick={()=>{}}>
          按钮
        </Button>);}return newProps;},order:1,//排序字段，如果存在同一个页面复写了同一个组件，控制顺序时使用desc:"流程添加按钮",});

5. 编写 ecode 组件

• 新建 register.js 注册绑定页面（js 文件需要前置加载）

const routes =[{name:"TestK1",desc:"测试",},{name:"TestK2",desc:"测试",},];//注册和绑定新页面前端实现接口
routes.forEach((route)=>{
  ecodeSDK.rewriteRouteQueue.push({fn:(params)=>{const{ Com, Route, nextState }= params;const cpParams ={path:"main/cs/app",//路由地址appId:"${appId}",name: route.name,//具体页面应用idnode:"app",//渲染的路由节点，这里渲染的是app这个节点
        Route,
        nextState,};if(ecodeSDK.checkPath(cpParams)){const acParams ={appId: cpParams.appId,name: cpParams.name,//模块名称props: params,//参数isPage:true,//是否是路由页面noCss:true,//是否禁止单独加载css，通常为了减少css数量，css默认前置加载};//异步加载模块${appId}下的子模块Page1return ecodeSDK.getAsyncCom(acParams);}returnnull;},order:1,desc: route.desc,});});/*
版本要求：kb1906以上
配置路由地址：
/spa/custom/static/index.html#/main/cs/app/123456789_TestK1
浏览器访问地址：
/wui/index.html#/main/cs/app/123456789_TestK1
*/

• 创建 index.js 编写组件

// TestK1const{ Row, Col, Button, Modal, message }= antd;const{ WeaTop, WeaTab }= ecCom;classTestK1extendsReact.Component{constructor(props){super(props);this.state ={title:"测试",};}componentDidMount(){}render(){const{ title }=this.state;return(<div><p>{title}</p><Button
          onClick={()=>{
            console.log("测试按钮点击");}}>
          按钮
        </Button></div>);}}//要配合register.js来注册到对应业务场景
ecodeSDK.setCom("${appId}","TestK1", TestK1);

6. 将 ecode 组件绑定到元素上

如上，只需改register.js 注册绑定成元素

//注册和绑定门户元素前端实现接口const ebaseid ="Custom_1627443315510";//元素id

ecodeSDK.rewritePortalCusEleQueue.push({fn:(params)=>{const{ props, options }= params;if(options.ebaseid === ebaseid){const acParams ={appId:"${appId}",name:"MyCarousel",//模块名称
        params,//参数isPage:false,//是否是路由页面noCss:true,//是否禁止单独加载css，通常为了减少css数量，css默认前置加载};//异步加载模块${appId}下的子模块CusElereturn ecodeSDK.getAsyncCom(acParams);}returnnull;},order:1,desc:"描述",});

四、js 加载 eocde 组件(流程、建模可用)

// js加载eocde组件(流程、建模可用)var params ={domId:"tishi",//渲染位置的domId，也就是表单上创建的id:"ecf759258a9f4159b2d9e4abc43a933d",//appId，也就是根目录的UUID，发布ID6e2d915798de4db59de2ad36a2e50c24name:"MyWeaHelpfulTip",//调用的组件名字，setCom时定义的cb:function(){//渲染完成回调
    console.log("success!");},noCss:true,//是否禁止单独加载css，通常为了减少css数量，css默认前置加载props:{},//表单的参数传入组件的方法};
ecodeSDK.render(params);

五、隐藏头部方法

隐藏主题顶部和左侧的方法：
在地址中添加参数来隐藏顶部和左侧。
1、隐藏顶部参数：hideHeader=true2、隐藏左侧参数：hideAside=true
例如：
1、主题下正常访问流程待办时的地址：/wui/index.html#/main/workflow/listDoing
2、隐藏顶部时添加对应参数的地址：/wui/index.html?hideHeader=true#/main/workflow/listDoing
3、隐藏顶部和左侧添加对应参数的地址：/wui/index.html?hideHeader=true&hideAside=true#/main/workflow/listDoing

隐藏建模顶部的方法：
在地址中添加参数来隐藏顶部。
1、隐藏顶部参数：hidetop=1

六、关闭页面方法

//关闭弹出窗口打开
window.close();//关闭滑动窗口打开
window.parent.ModeForm.closePageBySlide();