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

register.js

//总开关letenable=true;//此参数用于判断是否开启按钮时，会多次进行组件渲染，导致发送多次Ajax请求，默认为-1不需要修复letcheckShowButtonFlag=-1;//点击按钮展开弹框constshowDialog=(requestId,workflowId,nodeId)=>{//获取子组件对象letinstance=ecodeSDK.getCom('${appId}','NewReqTopButtonComInstance');//调用子组件方法 传递参数instance&&instance.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;constbaseInfo=WfForm.getBaseInfo();if(!baseInfo){return};//流程请求iDconstworkflowId=baseInfo.workflowid;if(undefined==workflowId){return}//节点IDconstnodeId=baseInfo.nodeid;//流程骑请求idconstrequestId=baseInfo.requestid;//是否开启弹框 默认false,通过-1进行二次请求拦截if("-1"==checkShowButtonFlag){checkShowButtonFlag=checkShowButton(nodeId,workflowId);}//true显示 按钮 false不显示按钮if(checkShowButtonFlag){//引用组件const{Button}=antd;newProps.buttons.push(<span><Button className="ant-btn ant-btn-primary"onClick={()=>{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默认前置加载}constAddCom=ecodeSDK.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 workflowId=baseInfo.workflowid;// if(undefined==workflowId){// return// }// //节点ID// const nodeId=baseInfo.nodeid;// //流程骑请求id// const requestId=baseInfo.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){//默认不显示letcheckShowButtonFlag=false;//此处可进行Ajax 也可以使用callapis调用后端接口 判断是否显示按钮/* //ajax demo案例 $.ajax({ url: "xx/xxxx/xxx", type: "GET", async: false, data:{}, datatype: "text", success : (backdata) => { checkShowButtonFlag=true; } }, error: function(){} }); */checkShowButtonFlag=true;returncheckShowButtonFlag;}

index.js

const{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?requestid="+this.state.requestId+"&selectParams="+JSON.stringify(this.state.selectedSignInfos))this.setState({visible:false})}render(){//外部绑定this,否则组件内的函数 this无法绑定const_self=thisletbuttons=[<Button type="primary"onClick={this.clickSure}>确定</Button>,<Button type="ghost"onClick={()=>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}//这是左侧添加的额外内容bottomLeft=""style={{width:892,height:490}}onCancel={()=>this.setState({visible:false})}><WeaTable columns={columns}dataSource={this.state.dataSource}rowSelection={rowSelection}/></WeaDialog>)}}//发布模块ecodeSDK.setCom('${appId}','NewReqTopButtonCom',NewReqTopButtonCom);