泛微E9-流程点击按钮弹窗勾选内容

register.js//总开关letenabletrue;//此参数用于判断是否开启按钮时会多次进行组件渲染导致发送多次Ajax请求默认为-1不需要修复letcheckShowButtonFlag-1;//点击按钮展开弹框constshowDialog(requestId,workflowId,nodeId){//获取子组件对象letinstanceecodeSDK.getCom(${appId},NewReqTopButtonComInstance);//调用子组件方法 传递参数instanceinstance.triggerModal(true,requestId,workflowId,nodeId);}//拦截流程表单WeaReqTopecodeSDK.overwritePropsFnQueueMapSet(WeaReqTop,{fn:(newProps,name){if(!enable)return;//不加这行代码获取不到baseInfo中的值if(!window.comsMobx)return;const{hash}window.location;//判断是否为流程表单页面if(!hash.startsWith(#/main/workflow/req))return;constbaseInfoWfForm.getBaseInfo();if(!baseInfo){return};//流程请求iDconstworkflowIdbaseInfo.workflowid;if(undefinedworkflowId){return}//节点IDconstnodeIdbaseInfo.nodeid;//流程骑请求idconstrequestIdbaseInfo.requestid;//是否开启弹框 默认false,通过-1进行二次请求拦截if(-1checkShowButtonFlag){checkShowButtonFlagcheckShowButton(nodeId,workflowId);}//true显示 按钮 false不显示按钮if(checkShowButtonFlag){//引用组件const{Button}antd;newProps.buttons.push(spanButton classNameant-btn ant-btn-primaryonClick{(){showDialog(requestId,workflowId,nodeId);}}批量下载/Button/span);//右上角菜单下拉之后显示的按钮 此处有bug,即按钮正常功能正常但是下拉时无图标// newProps.dropMenuDatas.push({// key: BTN_NEWBUTTON,// icon: null,// content: 自定义按钮,// onClick: (){// showDialog(requestId);// },// disabled:false// });constacParams{appId:${appId},//appId会自动识别name:NewReqTopButtonCom,//模块名称isPage:true,//是否是路由页面noCss:true//是否禁止单独加载css通常为了减少css数量css默认前置加载}constAddComecodeSDK.getAsyncCom(acParams);newProps.children.push(AddCom/);// console.log(WeaReqTop newProps:,newProps);}returnnewProps;},order:2,desc:流程表单新增自定义按钮并且触发弹框});//鼠标右键添加按钮 此处有bug,即按钮正常功能正常但是右键时无图标// ecodeSDK.overwritePropsFnQueueMapSet(WeaRightMenu,{// fn:(newProps,name){// if(!enable) return ;// //不加这行代码获取不到baseInfo中的值// if (!window.comsMobx) return;// const {hash} window.location;// //判断是否为流程表单页面// if(!hash.startsWith(#/main/workflow/req)) return;// const baseInfo WfForm.getBaseInfo();// if(!baseInfo){// return// };// //流程请求iD// const workflowIdbaseInfo.workflowid;// if(undefinedworkflowId){// return// }// //节点ID// const nodeIdbaseInfo.nodeid;// //流程骑请求id// const requestIdbaseInfo.requestid;// //checkShowButtonFlag true显示 按钮 false不显示按钮// if(checkShowButtonFlag){// newProps.datas.push({// key: BTN_NEWBUTTON,// icon: null,// content: 自定义按钮,// onClick: (){// showDialog(requestId);// },// disabled:false// });// return newProps;// }// },// order:3,// desc:增加一个叫测试的按钮// });//根据nodeID和workflowId判断是否显示按钮functioncheckShowButton(nodeId,workflowId){//默认不显示letcheckShowButtonFlagfalse;//此处可进行Ajax 也可以使用callapis调用后端接口 判断是否显示按钮/* //ajax demo案例 $.ajax({ url: xx/xxxx/xxx, type: GET, async: false, data:{}, datatype: text, success : (backdata) { checkShowButtonFlagtrue; } }, error: function(){} }); */checkShowButtonFlagtrue;returncheckShowButtonFlag;}index.jsconst{Button,message}antd;const{WeaDialog,WeaTable}ecCom;classNewReqTopButtonComextendsReact.Component{constructor(props){//初始化固定语法super(props);this.state{title:请选择您要下载的附件,visible:false,//已选择数据信息信息selectedSignInfos:,requestId:-1,workflowId:-1,nodeId:-1,//列表数据信息dataSource:[]};}componentDidMount(){ecodeSDK.setCom(${appId},NewReqTopButtonComInstance,this);}componentWillUnmount(){ecodeSDK.setCom(${appId},NewReqTopButtonComInstance,null);}//子组件方法 提供给父组件调用 方法参数可扩展triggerModal(propVisible,propRequestId,propWorkflowId,propNodeId){this.setState({visible:propVisible,requestId:propRequestId,workflowId:propWorkflowId,nodeId:propNodeId,});//调用获取数据方法this.getDataSourceInfo(propRequestId,propWorkflowId,propNodeId)}//获取弹框数据信息getDataSourceInfo(requestId,workflowId,nodeId){ecCom.WeaTools.callApi(/api/zwhDoc/getDocumentInfo,POST,{requestid:requestId,workflowid:workflowId,nodeid:nodeId}).then((data){console.log(data --- ,data)this.setState({dataSource:data})})}// 确认clickSure(){if(!this.state.selectedSignInfos){this.setState({visible:false})return}window.open(/selectDocumentDownloadServlet?requestidthis.state.requestIdselectParamsJSON.stringify(this.state.selectedSignInfos))this.setState({visible:false})}render(){//外部绑定this,否则组件内的函数 this无法绑定const_selfthisletbuttons[Button typeprimaryonClick{this.clickSure}确定/Button,Button typeghostonClick{()this.setState({visible:false})}取消/Button,]//通过 rowSelection 对象表明需要行选择constrowSelection{onChange(selectedRowKeys,selectedRows){//选择完成后为已选择数据信息字段赋值_self.setState({selectedSignInfos:selectedRows})}}constcolumns[{title:文件名称,dataIndex:name,key:name,width:20%,sorter:false,className:column_name},{title:文件类型,dataIndex:type,key:type,width:40%,sorter:false,className:column_type},{title:文件ID,dataIndex:imagefileid,key:imagefileid,width:40%,className:column_imagefileid}]const{title,visible}this.state;//由于复写的位置放的是按钮如果使用div可能会影响布局所以建议使用spanreturn(WeaDialog title{title}visible{visible}buttons{buttons}//这是左侧添加的额外内容bottomLeftstyle{{width:892,height:490}}onCancel{()this.setState({visible:false})}WeaTable columns{columns}dataSource{this.state.dataSource}rowSelection{rowSelection}//WeaDialog)}}//发布模块ecodeSDK.setCom(${appId},NewReqTopButtonCom,NewReqTopButtonCom);