<?xml version="1.0" encoding="UTF-8"?> <!-- $Author: $Date: 2018/8/2 $Revision: 1.0 项目/合同微件 --> <a:screen xmlns:a="http://www.leaf-framework.org/application"> <a:init-procedure/> <a:view template="default" package="leaf.ui.std"> <style> html,body{ width:552px; height:360px; margin: 0; padding: 0; color:#000; } .widget_cont_prj{ box-sizing:border-box; width:552px; height:360px; background-color:#fff; position:relative; border:1px solid #F0F0F3; padding:0 24px 0 16px; user-select:none; cursor:default; } .widget_cont_prj .widget_label{ position:absolute; width:40px; height:4px; top:0; left:16px; background-color:#5A7FFF; } .widget_cont_prj .row1{ position:relative; height:20px; line-height:20px; margin:16px 0 0 0; font-family: PingFangSC-Medium; font-size: 14px; color: rgba(75,80,90,0.85); letter-spacing: 0; } .widget_cont_prj .row2{ display:inline-block; position:relative; height:26px; margin:10px 0 8px 0; font-family: PingFangSC-Regular; font-size: 12px; color: #5A7FFF; letter-spacing: 0; } .widget_cont_prj .row2 span{ display:inline-block; width:64px; height:24px; line-height:24px; font-family: PingFangSC-Regular; font-size: 12px; letter-spacing: 0; text-align: center; cursor:pointer; } .widget_cont_prj .row2 input{ display:none; } .widget_cont_prj .row2 #myPrj{ border-radius: 4px 0 0 4px; border: 1px solid #5A7FFF; color: #5A7FFF; } .widget_cont_prj .row2 #myCont{ border-radius:0 4px 4px 0; position:relative; left:-1px; border: 1px solid rgba(75,80,90,0.15); color: rgba(75,80,90,0.75); } .widget_cont_prj .row2 input:checked~#myPrj{ border-color:rgba(75,80,90,0.15); color:rgba(75,80,90,0.75); } .widget_cont_prj .row2 input:checked~#myCont{ border: 1px solid #5A7FFF; color: #5A7FFF; } .widget_cont_prj .hls-pagging-grid{ width:100%; height:278px; -webkit-box-shadow:none; box-shadow:none; } .widget_cont_prj .hls-pagging-grid .grid-title{ display:none; } .widget_cont_prj .hls-pagging-grid .grid-body{ padding:0; } .widget_cont_prj .hls-pagging-grid .hls-table>tr:first-child{ display:none; } .widget_cont_prj .hls-pagging-grid .hls-table tbody tr:first-child{ height:48px; border-top:1px solid #F0F0F3; } .widget_cont_prj .hls-pagging-grid .hls-table tr{ height:48px; font-family: PingFangSC-Medium; font-size: 12px; color: rgba(93,97,103,0.85); letter-spacing: 0; border-bottom:1px solid #F0F0F3; } .widget_cont_prj .hls-pagging-grid .hls-table tr:hover{ background: rgba(90,127,255,0.08); } .widget_cont_prj .hls-pagging-grid .hls-table-active{ background: rgba(90,127,255,0.08); } .widget_cont_prj .hls-pagging-grid .grid-foot{ height: 36px; margin-top:0; line-height:36px; } .widget_cont_prj .hls-pagging-grid .grid-body table tr td:nth-child(2) div{ max-height:48px; max-width:130px; white-space:nowrap; color: rgba(93,97,103,0.85); font-family: PingFangSC-Medium; overflow:hidden; text-overflow : ellipsis; } .widget_cont_prj .hls-pagging-grid .grid-body table tr td:nth-child(3) div{ max-height:48px; max-width:130px; white-space:nowrap; color: rgba(75,80,90,0.75); font-family: PingFangSC-Regular; overflow:hidden; text-overflow : ellipsis; } .widget_cont_prj .hls-pagging-grid .hls-table tbody tr td:nth-child(4){ min-width:50px; text-align:center; } .widget_cont_prj .hls-pagging-grid .hls-table tbody tr td:nth-child(5){ min-width:120px; text-align:RIGHT; } .widget_cont_prj .hls-pagging-grid .hls-table .firstLetter{ display:inline-block; width:30px; height:30px; line-height:32px; background: #D8D8D8; border-radius: 3.73px; font-family: PingFangSC-Regular; font-size: 11.93px; color: #FFFFFF; letter-spacing: 0; text-align: center; } .widget_cont_prj .hls-pagging-grid .hls-table .statusBox{ display:inline-block; height:26px; line-height:26px; padding:0 10px; background: rgba(90,127,255,0.15); border-radius: 3.73px; font-family: PingFangSC-Regular; font-size: 11.93px; color: #4866CC; letter-spacing: 0; text-align: center; } .widget_cont_prj #my_cont_grid-wraper{ display:none; } </style> <script><![CDATA[ function myContLoader(ds){ var records=ds.data; var my_prj_ds=$("my_prj_ds"); var my_cont_ds=ds; jQuery("#cont_prj_type").on('change',function(e){ //checked==true 对应 我的合同 //checked==false 对应 我的项目 if(e.target.checked==true){ jQuery("#my_cont_grid-wraper").show(); jQuery("#my_prj_grid-wraper").hide(); }else{ jQuery("#my_cont_grid-wraper").hide(); jQuery("#my_prj_grid-wraper").show(); } }); } function first_letter_renderer(record,index){ var firstLetter=''; if(record.data["bp_name"]){ firstLetter=record.data["bp_name"].charAt(0); } return '<span class="firstLetter">'+firstLetter+'</span>' } function status_renderer(record,index){ var status=''; if(record.data["status"]){ status=record.data["status"]; } return '<span class="statusBox">'+ status +'</span>' } function bp_name_renderer(record,index){ return '<div title="'+record.data["bp_name"]+'" style="cursor:pointer;">'+ record.data["bp_name"] +'</div>' } function name_renderer(record,index){ return '<div title="'+record.data["name"]+'" style="cursor:pointer;">'+ record.data["name"] +'</div>' } ]]></script> <a:dataSets> <a:dataSet id="my_cont_ds" autoQuery="true" pageSize="5" model="cont.CON1003.my_cont" > <a:fields> <a:field name="bp_name"/> <a:field name="name"/> <a:field name="legal_person"/> <a:field name="status"/> </a:fields> <a:events> <a:event name="load" handler="myContLoader"/> </a:events> </a:dataSet> <a:dataSet id="my_prj_ds" autoQuery="true" pageSize="5" model="prj.PRJ1101.my_prj" > <a:fields> <a:field name="bp_name"/> <a:field name="name"/> <a:field name="legal_person"/> <a:field name="status"/> </a:fields> </a:dataSet> </a:dataSets> <div class="widget_cont_prj"> <span class="widget_label"> </span> <div class="row1">项目/合同</div> <label class="row2" for="cont_prj_type"> <!--用:check伪类做toggle tab的状态类转换,checked表示cont_prj_type=myCont--> <input type="checkbox" id="cont_prj_type"/> <span id="myPrj">我的项目</span> <span id="myCont">我的合同</span> </label> <a:hapGrid id="my_cont_grid" bindTarget="my_cont_ds"> <a:columns> <a:column template="first_letter_renderer"/> <a:column template="bp_name_renderer"/> <a:column template="name_renderer"/> <a:column name="legal_person"/> <a:column template="status_renderer"/> </a:columns> </a:hapGrid> <a:hapGrid id="my_prj_grid" bindTarget="my_prj_ds" canWheel="true"> <a:columns> <a:column template="first_letter_renderer"/> <a:column template="bp_name_renderer"/> <a:column template="name_renderer"/> <a:column name="legal_person" /> <a:column template="status_renderer"/> </a:columns> </a:hapGrid> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>