关于Iplat4J平台原型绘制

1、查询按钮

一般来讲放在条件筛选框右下侧，需要在jsp页面添加div样式，

  <div id="ces" align="right"></div>

然后，在平台EDFA01页面设置按钮：DIV:CES

2、新增按钮

平台6.2按钮目前发现不能直接用insert来直接进行按钮命名，平台会自动去执行默认递增一行方法，而不是弹出录入页面；故我们采取CREATE或者其他名字进行按钮命名；

    <EF:EFRegion id="result" title="岗位劳保用品配置标准"><EF:EFGrid blockId="result1" autoDraw="override"readonly="true" checkMode="single,row">
</EF:EFGrid>
</EF:EFRegion>

然后在按钮设置页面对我们的按钮区域进行命名：

GRID:EF_GRID_RESULT1

GRID：代表GRID表格；
EF_GRID：代表控件，RESULT1代表jsp中EFGrid中的id，在jsp中可小写，在按钮区域标识中必须用大写；

3、“保存”、“取消”按钮

我们有时候需要在表格下方添加保存、取消按钮，也需要在jsp先定义div盒子， <div class="row" id="button" align="center"></div>，
然后在按钮设置页面进行设置；

注意：当我们重新定义了按钮的区域名字的时候，在js中我们也需要对其对应的方法添加相应的操作：

IPLATUI.EFGrid = {"result": {loadComplete: function (grid) {$("#QUERY").on("click", function (e) {var classification2 = $("#inqu_status-0-classification2").val();if (null == classification2 || classification2 == "") {} else {$("#inqu_status-0-classifyId").val("");}resultGrid.dataSource.page(1);});$("#CREATE").on("click", function () {var classification = $("#inqu_status-0-classifyId").val();AQFG0202Window.title("法律法规录入").center().open();});}}}

画原型规范

1、按钮顺序：新增>修改>删除；
2、录入页面统一为result-0-信息项；
3、备注信息项：type=“textarea”；
4、详情页/系统生成信息项需要设置成只读：

disabled="true"  readonly="true"

5、台账里面不需要体现附件，在详情里面体现

常用控件

1、时间控件（开始时间和结束时间单独分开）(当我们绘制录入页面原型时，需要绘制备注框横跨，所以需要加上raido比例，这时建议使用下面该控件，合并时间控件遇到radio比例会发生错位)

  <EF:EFDateSpan startName="result-0-activityStartTime" startCname="计划开展时间" startRatio="3:9" endRatio="3:9"endName="result-0-endTimeOfActivity"  endCname="计划完成时间"  format="yyyy-MM-dd" role="date"required="true" readonly="true"/>

2、单个日期

 <EF:EFDatePicker ename="inqu_status-0-start" cname="实际完成时间"format="yyyy/MM/dd" required="true"></EF:EFDatePicker>

普通下拉

<EF:EFRegion id="inqu_status" title="查询条件"><EF:EFSelect ename="inqu_status-0-firstDepartment" cname="部门"     optionLabel="请选择"/><EF:EFSelect ename="inqu_status-0-secondDepartment" cname="车间/中心" /><EF:EFSelect ename="inqu_status-0-thirdDepartment" cname="岗位"/><EF:EFInput ename="inqu_status-0-username" cname="工号"/><EF:EFInput ename="inqu_status-0-userviewname" cname="姓名"/><div id="ces" align="right"></div>
</EF:EFRegion>

级联下拉

<div class="row"><EF:EFCascadeSelect ename="inqu_status-0-firstDepartment" cname="部门" resultId="departmentResult"serviceName="CNMA99" methodName="queryFirstDEPT" textField="orgname" valueField="orgcode"><EF:EFOption label="请选择" value=""/></EF:EFCascadeSelect><EF:EFCascadeSelect ename="inqu_status-0-secondDepartment" cname="车间/中心" serviceName="CNMA991"methodName="querySecondDEPT1" resultId="sdepartmentResult1" cascadeFrom="inqu_status-0-firstDepartment"textField="orgname1" valueField="orgcode1"><EF:EFOption label="请选择" value=""/></EF:EFCascadeSelect><EF:EFCascadeSelect ename="inqu_status-0-thirdDepartment1" cname="岗位" serviceName="CNMA991"methodName="queryThirdDEPT1" resultId="tdepartmentResult1" cascadeFrom="inqu_status-0-secondDepartment"textField="orgname" valueField="orgcode"><EF:EFOption label="请选择" value=""/></EF:EFCascadeSelect>
</div>

备注

<div class="row"><EF:EFInput ename="remarks" cname="备注" maxLength="500" type="textarea" colWidth="12"ratio="1:11"> </EF:EFInput></div>

<div class="row"><EF:EFInput ename="result-0-remarks" cname="备注"  colWidth="12" type="textarea" ratio="2:10" maxLength="500"></EF:EFInput><EF:EFInput ename="result-0-target" cname="目标"  colWidth="12" type="textarea" ratio="2:10" maxLength="500"></EF:EFInput>
</div>

输入框拉长

   <div class="row"><EF:EFInput ename="result-0-year" cname="作业名称" colWidth="12" required="true" ratio="1:11"/></div>

附件

<EF:EFRegion id="upload" title="文本附件"><EF:EFUpload ename="textAttachment" docTag="lawAndSecurity" path="lawAndSecurity"/><EF:EFInput ename="attachNameAndIds" cname="附件名称和id" type="hidden"></EF:EFInput><div id="fjId" class="row" style="margin:10px 10px 0px 10px"></div>
</EF:EFRegion>

树级下拉

<EF:EFTreeInput ename="inqu_status-0-organizationDepartment" cname="组织单位"serviceName="CNMA99"  methodName="querydepartmenttree"valueField="id" textField="name" onlyLeaf="true"  hasChildren="leaf" readonly="true" ></EF:EFTreeInput>

常用开始时间和结束时间合并控件

<EF:EFDateSpan startName="result-0--implementStartTime" format="yyyy-MM-dd" ratio="2:10"readonly="true"endName="result-0--implementEndTime" bindWidth="4" bindName="计划检查日期"extStyle="true" extChar="-"/>

下拉框（提前写死）

<EF:EFSelect ename="inqu_status-0-level" cname="检查级别"template="#=valueField#-#=textField#" filter="contains" defaultValue="p1"><EF:EFOption label="公司级" value="p1"/><EF:EFOption label="部门/中心级" value="p2"/><EF:EFOption label="车间/区域" value="p3"/><EF:EFOption label="班组/车站级" value="p4"/></EF:EFSelect>

备注大横跨，需要其他控件也进行比例调整radio=“3:9”；

 <EF:EFInput ename="result-0-textName" cname="文件名称" maxLength="32" required="true"  ratio="3:9"    ></EF:EFInput><EF:EFInput ename="result-0-classification" cname="版本号"   ratio="3:9" readonly="true"></EF:EFInput><EF:EFSelect ename="result-0-classification1" required="true" cname="专业" optionLabel="请选择" ratio="3:9"></EF:EFSelect><EF:EFInput ename="result-0-remarks" cname="备注" maxLength="500" type="textarea" colWidth="12"ratio="1:11"> </EF:EFInput>

控件选择人员

<EF:EFPopupInput ename="detail-0-peiJiaoRen" cname="处理对象姓名" colWidth="6"required="true" readonly="true"containerId="ef_popup_checkperson"popupTitle="处理对象姓名" popupHeight="460" popupWidth="920"></EF:EFPopupInput>

  <div id="ef_popup_AQSW0203" style=" display: none"><iframe frameborder="0" class="k-content-frame" title="" src="${ctx}/web/AQSW0203"></iframe></div>

结果集左右分栏（ class=“col-md-5”/ class=“col-md-7”）

  <EF:EFRegion id="result2" title="管控措施" class="col-md-5"><EF:EFGrid blockId="result2" readonly="true" autoDraw="no" pageable="false" checkMode="single,row"><EF:EFColumn ename="type" cname="分类"/><EF:EFColumn ename="method" cname="具体措施"/><EF:EFColumn ename="manual" cname="排查手册"/></EF:EFGrid><div id="button" align="center"></div></EF:EFRegion><EF:EFRegion id="result3" title="管控单位" class="col-md-7"><EF:EFGrid blockId="result3" readonly="true" autoDraw="no" pageable="false" checkMode="single,row"><EF:EFColumn ename="manual" cname="管控层级"/><EF:EFColumn ename="type" cname="责任岗位"/><EF:EFColumn ename="method" cname="责任人"/></EF:EFGrid>

service中写死数据填充jsp表格

 @Overridepublic EiInfo initLoad(EiInfo inInfo) {return query(inInfo);}
//jsp记录集中的数据是在查询方法中获取到的，故我们在这里写死数据；@Overridepublic EiInfo query(EiInfo inInfo) {//新建一个EiInfo对象EiInfo outInfo = new EiInfo();//往outInfo中添加block块EiBlock outBlock = outInfo.addBlock("result2");EiBlock outBlock2 =  outInfo.addBlock("result");outBlock2.setCell(0,"","");outInfo.addBlock("result3");outBlock.setCell(0, "type", "分类1");outBlock.setCell(0, "method", "具体措施1");
//        outBlock.setCell(0, "manual", "手册1");return outInfo;}

注意

这里当我们在service对jsp页面进行设计或者初始化之后，页面某些模块可能会显示不了，所以我们需要使用EiBlock对模块重新进行初始化；

addRow()方法不用指明新增数据的行号rowNo，会自动在所有原数据后新增一行。
setCell()方法三个参数分别是行号、列名、列值。当行号和列名与之前重复，会覆盖掉原先的值。
addRows()方法直接将List中数据传入对应数据块，两个参数分别是对应的数据块Id和行数据List。
setRows()方法会将List中数据传入数据块并覆盖掉原数据。

在列中添加按钮

按照需求我们需要在第三个结果集result3列中添加一个按钮，故我们需要在对应的js中添加相应的columns；

  IPLATUI.EFGrid = {"result2":{columns: [{field: "manual",//button的高度不要超过24px，不然会造成Grid的高度溢出template: "<button class='custom i-btn-lg'  id='btn'>手册</button>",width: 100}],loadComplete: function (grid) {$("#CREATE1").on("click",function () {console.log("新增1")});
//这里btn为上面我们为按钮设置的id$("#btn").on("click",function () {console.log("点击了手册")AQFX0804Window.center().open();});$("#REMOVE1").on("click",function () {console.log("删除1")});$("#UPDATE1").on("click",function () {console.log("更新")});}},}

结果集呈现“上中下结构”

<EF:EFRegion id="result" title="风险分级管控清单信息"><EF:EFGrid blockId="result" readonly="true" autoDraw="no" pageable="false" checkMode="single,row"><EF:EFColumn ename="type" cname="线路"  width="100"/><%--这里我们对业务板块进行一个细分，需要记住业务板块的名字，然后在js中进行设计--%><EF:EFColumn ename="conThemes" cname="业务板块" width="180"/><EF:EFColumn ename="conTime" cname="岗位"/><EF:EFColumn ename="conPlace" cname="风险点"/><EF:EFColumn ename="jidu" cname="风险描述"/><EF:EFColumn ename="station" cname="影响情况"/><EF:EFColumn ename="area" cname="故障修复时间"/><EF:EFColumn ename="level" cname="风险等级"/><EF:EFColumn ename="dept" cname="责任单位/部门"/><EF:EFColumn ename="factor" cname="产生因素"/><EF:EFColumn ename="thing" cname="典型事件"/><EF:EFColumn ename="remark" cname="备注"/></EF:EFGrid>
</EF:EFRegion>

相应js

//这个result也应该和region中名称对应上"result": {columns: [{field: "conThemes", // 需要设置一个field名称，与jsp中名称对应上columns: [{field: "big",title: "大类",width: 90},{field: "small",title: "小类",width: 90}]}],
}

EFInput和EFColumn控制隐藏

  <EF:EFInput ename="result-0-iid" cname="主键" type="hidden"></EF:EFInput><EF:EFColumn ename="iid" cname="序列号" hidden="true"/><EF:EFButton ename="Button1" cname="增加"  hidden="true"/>

input标签使用type来控制隐藏而column使用hidden控制隐藏

时间控件只选择年份

jsp

   <EF:EFDatePicker ename="inqu_status-0-year" cname="年度" format="yyyy" readonly="true"/>

 IPLATUI.EFDatePicker = {"inqu_status-0-year": {start: "decade",depth: "decade",value: getYear(),max: new Date(getYear())// 设置最大日期}};
function getYear() {var date = new Date;var year = date.getFullYear().toString();return year;
}function getFullYear() {var now = new Date();var year = now.getFullYear();       //年var month = now.getMonth() + 1;     //月var day = now.getDate();            //日var date = year+"-"+month+"-"+day;return date;
}