WIDGET-LEAF-CON-PRJ.lview

<?xml version="1.0" encoding="UTF-8"?>

<!--
    $Date: 2018/9/7
    prj 项目信息/投放金额
    WIDGET-LEAF-CON-PRJ-INFO
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <!--单独微件测试用-->
        <!--<meta name="_csrf" content="${/session/@_csrf.token}"/>-->
        <!--<meta name="_csrf_header" content="X-CSRF-TOKEN" />-->
        <!--<script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>-->
        <style>
            html,body{
            width:1184px;
            height:553px;
            margin: 0;
            padding: 0;
            }
            .widget_leaf_con_prj_info{
            box-sizing:border-box;
            width:1184px;
            height:553px;
            background-color:#fff;
            position:relative;
            user-select:none;
            cursor:default;
            }
            .widget_leaf_con_prj_info .title{
            display:inline-block;
            position:relative;
            height:22px;
            margin:46px 0 0 50px;
            font-family: NotoSansHans-DemiLight;
            letter-spacing: 1px;
            cursor:pointer;
            }
            .widget_leaf_con_prj_info .title .tab_btn{
            display:inline-block;
            height:14px;
            font-size: 14px;
            line-height:14px;
            }
            .widget_leaf_con_prj_info .title input{
            display:none;
            }
            .widget_leaf_con_prj_info .title #widget_leaf_my_prj{
            color: #333333;
            padding-right:15px;
            border-right:2px solid #e7e7e7;
            }
            .widget_leaf_con_prj_info .title #widget_leaf_my_con{
            color:#ccc;
            padding-left:15px;
            }
            .widget_leaf_con_prj_info .title .widget_border{
            position:absolute;
            left:0;
            bottom:0;
            width:30px;
            height:4px;
            background-color: #657efe;
            transition:0.2s ease;
            }
            .widget_leaf_con_prj_info .title input:checked~#widget_leaf_my_prj {
            color:#ccc;
            }
            .widget_leaf_con_prj_info .title input:checked~#widget_leaf_my_con{
            color: #333333;
            }
            .widget_leaf_con_prj_info .title input:checked~.widget_border {
            left:88px;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid{
            width:100%;
            height:420px;
            -webkit-box-shadow:none;
            box-shadow:none;
            padding:30px 40px 0 50px;
            box-sizing:border-box;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .grid-title{
            display:none;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .grid-body{
            padding:0;
            }
            /*表头*/
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table>tr{
            height:35px;
            border-bottom:7px solid rgba(101,126,254,0.07);
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #333;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tr td{
            text-align:left;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tr{
            padding-left:30px;
                font-family: NotoSansHans-Medium;
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 1px;
                color: #333333;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tbody tr{
            height:60px;
            font-size: 12px;
            color: rgba(93,97,103,0.85);
                font-family: NotoSansHans-Thin;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 1px;
                color: #333333;
            border-bottom:1px solid rgba(153,153,153,0.1);
                background: #fff;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tr td:nth-child(1){
            text-align:left;
            padding-left:30px;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tbody tr:hover{
            background: rgba(238,238,238,0.21);
                font-family: NotoSansHans-Medium;
                font-size: 14px;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tbody tr td:nth-child(1) div p{
            white-space:nowrap;
            max-width:200px;
            overflow:hidden;
            text-overflow : ellipsis;
            color: rgba(75,80,90,0.85);
            text-align:left;
                font-family: NotoSansHans-Thin;
                font-size: 12px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 1px;
                color: #333333;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tbody tr td:nth-child(1) div p:last-child{
                color: #999999;
                margin-top: 4px;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tbody tr td:nth-child(2) div p{
            text-align:left;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tbody tr td:nth-child(2) div p:last-child{
                color: #999999;
                margin-top: 4px;
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table tbody tr td:nth-child(6) div{
            min-width:120px;
            }
            .widget_leaf_con_prj_info .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_leaf_con_prj_info .hls-pagging-grid .hls-table .icon{
            height:16px;
            cursor:pointer
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .hls-table-active{
            /*background:rgba(238,238,238,0.21);*/
            }
            .widget_leaf_con_prj_info .hls-pagging-grid .grid-foot{
            height: 31px;
            margin-top:0;
            line-height:31px;
            }
            .widget_leaf_con_prj_info #widget_leaf_con_info_grid-wraper{
            display:none;
            }
        </style>
        <script><![CDATA[
        function leaf_con_info_loader(ds){

            jQuery(".widget_leaf_con_prj_info #widget_leaf_con_prj_info_tab").on('change',function(e){
                //checked==true 对应 合同信息
                //checked==false 对应 项目信息
                if(e.target.checked==true){
                    jQuery("#widget_leaf_con_info_grid-wraper").show();
                    jQuery("#widget_leaf_prj_info_grid-wraper").hide();
                }else{
                    jQuery("#widget_leaf_con_info_grid-wraper").hide();
                    jQuery("#widget_leaf_prj_info_grid-wraper").show();
                }
            });
        }
        function prj_number_name_renderer(record,index){
            var project_number=record.data["project_number"]||'';
            var name=record.data["name"]||'';
            return '<p>'+ project_number +'</p>' + '<p title="' + name + '">'+ name +'</p>'
        }
        function cont_number_name_renderer(record,index){
            var contract_number=record.data["contract_number"]||'';
            var name=record.data["name"]||'';
            return '<p>'+ contract_number +'</p>' + '<p title="' + name + '">'+ name +'</p>'
        }
        function amount_currency_renderer(record,index){
            var amount = $L.formatMoney(record.data["amount"]||0);
            var currency = record.data["currency"]||'币种不详';
            return '<p>'+ amount +'</p>' + '<p>'+ currency +'</p>'
        }
        function status_renderer(record,index){
            var status=record.data["status"]||'';
            return '<span class="statusBox">'+ status +'</span>'
        }
        function flow_chart_renderer(record,index){
            return '<img src="${/request/@context_path}/leafresource/images/widget/flow-chart.png" class="icon"/>'
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="widget_leaf_con_info_ds" autoQuery="true" pageSize="4" model="cont.CON1003.my_cont" >
                <a:fields>
                    <a:field name="bp_name"/>
                    <a:field name="name"/>
                    <a:field name="contract_number"/>
                    <a:field name="amount"/>
                    <a:field name="first_date"/>
                    <a:field name="organization"/>
                    <a:field name="employee_name"/>
                    <a:field name="legal_person"/>
                    <a:field name="currency"/>
                    <a:field name="status"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="leaf_con_info_loader"/>
                </a:events>
            </a:dataSet>
            <a:dataSet id="widget_leaf_prj_info_ds" autoQuery="true" pageSize="4" model="prj.PRJ1101.my_prj" >
                <a:fields>
                    <a:field name="bp_name"/>
                    <a:field name="name"/>
                    <a:field name="project_number"/>
                    <a:field name="amount"/>
                    <a:field name="first_date"/>
                    <a:field name="organization"/>
                    <a:field name="employee_name"/>
                    <a:field name="legal_person"/>
                    <a:field name="currency"/>
                    <a:field name="status"/>
                </a:fields>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_leaf_con_prj_info">
            <label class="title" for="widget_leaf_con_prj_info_tab">
                <!--用:check伪类做toggle tab的状态类转换，checked对应合同信息-->
                <input type="checkbox" id="widget_leaf_con_prj_info_tab"/>
                <span id="widget_leaf_my_prj" class="tab_btn">项目信息</span>
                <span id="widget_leaf_my_con" class="tab_btn">合同信息</span>
                <span class="widget_border"> </span>
            </label>
            <a:hapGrid id="widget_leaf_prj_info_grid" bindTarget="widget_leaf_prj_info_ds" canWheel="true">
                <a:columns>
                    <a:column template="prj_number_name_renderer" prompt="项目编号/项目名称"/>
                    <a:column template="amount_currency_renderer" prompt="项目金额/币种"/>
                    <a:column name="first_date" prompt="入库时间"/>
                    <a:column name="employee_name" prompt="主办人"/>
                    <a:column name="organization" prompt="部门"/>
                    <a:column template="status_renderer" prompt="项目状态"/>
                    <a:column template="flow_chart_renderer" prompt="流程图"/>
                </a:columns>
            </a:hapGrid>
            <a:hapGrid id="widget_leaf_con_info_grid" bindTarget="widget_leaf_con_info_ds" canWheel="true">
                <a:columns>
                    <a:column template="cont_number_name_renderer" prompt="合同编号/合同名称"/>
                    <a:column template="amount_currency_renderer" prompt="合同金额/币种"/>
                    <a:column name="first_date" prompt="入库时间"/>
                    <a:column name="employee_name" prompt="主办人"/>
                    <a:column name="organization" prompt="部门"/>
                    <a:column template="status_renderer" prompt="合同状态"/>
                    <a:column template="flow_chart_renderer" prompt="流程图"/>
                </a:columns>
            </a:hapGrid>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>