Calculation/app/view/contract/detail.ejs

<% include ./sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main  d-flex">
            <% include ./sub_mini_menu.ejs %>
            <div class="d-inline-block">
                <div class="dropdown">
                    <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-list-ol"></i> 显示层级
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" name="showLevel" tag="1" href="javascript: void(0);">第一层</a>
                        <a class="dropdown-item" name="showLevel" tag="2" href="javascript: void(0);">第二层</a>
                        <a class="dropdown-item" name="showLevel" tag="3" href="javascript: void(0);">第三层</a>
                        <a class="dropdown-item" name="showLevel" tag="4" href="javascript: void(0);">第四层</a>
                        <a class="dropdown-item" name="showLevel" tag="5" href="javascript: void(0);">第五层</a>
                        <a class="dropdown-item" name="showLevel" tag="last" href="javascript: void(0);">最底层</a>
                        <!--                        <a class="dropdown-item" name="showLevel" tag="leafXmj" href="javascript: void(0);">只显示项目节</a>-->
                    </div>
                </div>
            </div>
            <% if (ctx.session.sessionUser.is_admin || audit_permission.permission_edit) { %>
                <div class="d-inline-block">
                    <a href="javascript: void(0);" name="base-opr" type="add" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="新增"><i class="fa fa-plus" aria-hidden="true"></i></a>
                    <a href="javascript: void(0);" name="base-opr" type="add-child" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="新增子节点"><i class="fa fa-sign-in" aria-hidden="true"></i></a>
                    <a href="javascript: void(0);" name="base-opr" type="delete" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="删除"><i class="fa fa-remove" aria-hidden="true"></i></a>
                    <a href="javascript: void(0);" name="base-opr" type="up-level" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="升级"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
                    <a href="javascript: void(0);" name="base-opr" type="down-level" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="降级"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
                    <a href="javascript: void(0);" name="base-opr" type="down-move" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="下移"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
                    <a href="javascript: void(0);" name="base-opr" type="up-move" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="上移"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
                    <!--                    <a href="javascript: void(0);" name="cpc" type="copy" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="复制"><i class="fa fa-files-o" aria-hidden="true"></i></a>-->
                    <!--                    <a href="javascript: void(0);" name="cpc" type="cut" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="剪切"><i class="fa fa-scissors" aria-hidden="true"></i></a>-->
                    <!--                    <a href="javascript: void(0);" name="cpc" type="paste" class="btn btn-sm btn-light text-primary" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="粘贴"><i class="fa fa-clipboard" aria-hidden="true"></i></a>-->
                </div>
            <% } %>
            <div class="ml-auto">
                <a href="javascript:void(0);" id="contract-total-btn" class="btn btn-sm btn-primary mr-2">合计</a>
                <% if (ctx.session.sessionUser.is_admin) { %>
                    <a href="#col-set" data-toggle="modal" data-target="#col-set" class="btn btn-sm btn-primary mr-2">列设置</a>
                    <a href="javascript:void(0);" data-stid="<%- ctx.contract_tender ? ctx.contractOptions.tid : '' %>" class="btn btn-sm btn-primary get-audits mr-2">成员管理</a>
                    <a href="#empower" data-toggle="modal" data-target="#empower" class="btn btn-sm btn-primary mr-2">节点授权</a>
                <% } %>
                <!--                <a href="#cons-relat" data-toggle="modal" data-target="#cons-relat" class="btn btn-primary btn-sm pull-right">关联合同</a>-->
                <% if (ctx.session.sessionUser.is_admin || audit_permission.permission_add) { %>
                    <a href="#cons-add" data-toggle="modal" data-target="#cons-add" class="btn btn-primary btn-sm pull-right mr-2" id="add-cons-btn" style="display: none">新增合同</a>
                <% } %>
            </div>
        </div>
    </div>
    <div class="content-wrap pr-46">
        <div class="c-header p-0">
        </div>
        <div class="row w-100 sub-content">
            <div class="col-12 c-body">
                <!--上部分-->
                <div class="sjs-height-1 row w-100 sub-content">
                    <!--左栏-->
                    <div class="c-body" id="left-view" style="width: 100%">
                        <div class="sjs-height-1" style="overflow: hidden" id="contract-spread"></div>
                    </div>
                    <div class="c-body" id="right-view" style="display: none; width: 30%">
                        <div class="resize-x" id="right-spr" r-Type="width" div1="#left-view" div2="#right-view" title="调整大小" a-type="percent"><!--调整左右高度条--></div>
                        <div class="tab-content">
                            <div id="contract-search" class="tab-pane tab-select-show">
                            </div>
                            <div id="std-xmj" class="tab-pane">
                            </div>
                        </div>
                    </div>
                </div>
                <!--下部分-->
                <div class="bcontent-wrap mt-1">
                    <div id="contract-resize" class="resize-y" id="top-spr" r-Type="height" div1=".sjs-height-1" div2=".bcontent-wrap" title="调整大小"><!--调整上下高度条--></div>
                    <div class="bc-bar mb-1">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#htdetail" role="tab">合同详情</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" href="#htpay" role="tab">合同<% if (ctx.contract_type === contractConst.type.expenses) { %>支付<% } else if (ctx.contract_type === contractConst.type.income) { %>回款<% } %></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" href="#htfile" role="tab">合同文件</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " data-toggle="tab" href="#htsupplement" role="tab">补充合同</a>
                            </li>
                            <li class="ml-auto">
                                <!-- 结算合同所有tab可见 ,结算后见解锁合同，2者互斥-->
                                <a href="#cons-unlock" data-toggle="modal" data-target="#cons-unlock" style="display: none;" class="btn btn-success btn-sm pull-right mr-2">解锁合同</a>
                                <a href="#cons-close" data-toggle="modal" data-target="#cons-close" style="display: none;" class="btn btn-danger btn-sm pull-right mr-2">结算合同</a>
                                <!-- 合同文件的按钮 -->
                                <a href="#cons-upfile" data-toggle="modal" data-target="#cons-upfile" style="display: none;" class="btn btn-primary btn-sm pull-right mr-2">上传文件</a>
                                <!-- 合同支付的按钮 -->
                                <!--                                <a href="#cons-addpay2" data-toggle="modal" data-target="#cons-addpay2" class="btn btn-primary btn-sm pull-right mr-2">添加回款2</a>-->
                                <a href="javascript:void(0);" id="add_contract_pay_btn" style="display: none;" class="btn btn-primary btn-sm pull-right mr-2">添加<% if (ctx.contract_type === contractConst.type.expenses) { %>支付<% } else if (ctx.contract_type === contractConst.type.income) { %>回款<% } %></a>
                                <% if (ctx.contract_type === contractConst.type.expenses) { %><a href="javascript:void(0);" id="add_tender_contract_pay_btn" style="display: none;" class="btn btn-primary btn-sm pull-right mr-2">添加标段支付记录</a><% } %>
                                <!-- 合同详情的按钮，点击编辑出现确定和取消按钮 -->
                                <a href="javascript:void(0);" id="cancel_contract_btn" style="display: none" class="btn btn-secondary btn-sm pull-right mr-2">取消</a>
                                <a href="javascript:void(0);" id="save_contract_btn" style="display: none" class="btn btn-primary btn-sm pull-right mr-2">确定</a>
                                <a href="javascript:void(0);" id="edit_contract_btn" style="display: none" class="btn btn-primary btn-sm pull-right mr-2">编辑合同</a>
                                <a href="javascript:void(0);" id="ai_edit_contract_btn" style="display: none" class="btn btn-sm ai-btn pull-right mr-2"><i class="fa fa-magic"></i> AI识别编辑合同</a>
                                <a href="javascript:void(0);" id="add_contract_supplement_btn" style="display: none;" class="btn btn-primary btn-sm pull-right mr-2">新增补充合同</a>
                                <% if (shenpi_status) { %>
                                    <span class="pull-right mr-2" id="shenpi_btn">
                                    <a href="#sub-sp" data-toggle="modal" data-target="#sub-sp" class="btn btn-primary btn-sm">待上报</a>
                                </span>
                                <% } %>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane active" id="htdetail">
                            <div class="sp-wrap col-12" style="overflow: auto;">
                                <table class="table table-sm table-bordered mb-1" id="htdetail-table" style="display: none;">
                                    <tr>
                                        <th class="text-center align-middle" width="10%">合同编号</th>
                                        <td width="20%" class="change-input-td" id="htdetail_c_code"></td>
                                        <th class="text-center align-middle" width="10%">合同名称</th>
                                        <td width="30%" class="change-input-td" id="htdetail_name"></td>
                                        <th class="text-center align-middle" width="10%">税率（%）</th>
                                        <td width="20%" class="change-input-td" id="htdetail_tax"></td>
                                    </tr>
                                    <tr>
                                        <th class="text-center align-middle">原合同金额</th>
                                        <td class="change-input-td" id="htdetail_price"></td>
                                        <th class="text-center align-middle">补充合同金额</th>
                                        <td class="" id="htdetail_supplement_price"></td>
                                        <th class="text-center align-middle">合同金额</th>
                                        <td class="" id="htdetail_total_price"></td>
                                    </tr>
                                    <tr>
                                        <th class="text-center align-middle"><% if (ctx.contract_type === contractConst.type.income) { %>累计回款(P)<% } else if (ctx.contract_type === contractConst.type.expenses) { %>累计付款(P)<% } %></th>
                                        <td id="htdetail_pay_price"></td>
                                        <th class="text-center align-middle">累计扣款(K)</th>
                                        <td id="htdetail_debit_price"></td>
                                        <th class="text-center align-middle"><% if (ctx.contract_type === contractConst.type.income) { %>累计应回(S=P-K)<% } else if (ctx.contract_type === contractConst.type.expenses) { %>累计应付(S=P-K)<% } %></th>
                                        <td id="htdetail_yf_price"></td>
                                    </tr>
                                    <tr>
                                        <th class="text-center align-middle"><% if (ctx.contract_type === contractConst.type.income) { %>累计实回(A)<% } else if (ctx.contract_type === contractConst.type.expenses) { %>累计实付(A)<% } %></th>
                                        <td id="htdetail_sf_price"></td>
                                        <th class="text-center align-middle"><% if (ctx.contract_type === contractConst.type.income) { %>待回款(S-A)<% } else if (ctx.contract_type === contractConst.type.expenses) { %>待支付(S-A)<% } %></th>
                                        <td id="htdetail_df_price"></td>
                                        <th class="text-center align-middle">创建时间</th>
                                        <td id="htdetail_create_time"></td>
                                    </tr>
                                    <tr>
                                        <th class="text-center align-middle">甲方</th>
                                        <td class="change-input-td" id="htdetail_party_a"></td>
                                        <th class="text-center align-middle">签约人</th>
                                        <td class="change-input-td" id="htdetail_party_a_user"></td>
                                        <th class="text-center align-middle">签订日期</th>
                                        <td class="change-input-td" id="htdetail_sign_date"></td>
                                    </tr>
                                    <tr>
                                        <th class="text-center align-middle">乙方</th>
                                        <td class="change-input-td" id="htdetail_party_b"></td>
                                        <th class="text-center align-middle">签约人</th>
                                        <td class="change-input-td" id="htdetail_party_b_user"></td>
                                        <th class="text-center align-middle">签约地点</th>
                                        <td class="change-input-td" id="htdetail_address"></td>
                                    </tr>
                                    <% if (ctx.contract_type === contractConst.type.expenses) { %>
                                        <tr class="contract-expenses">
                                            <th class="text-center align-middle">收款单位</th>
                                            <td class="change-input-td" id="htdetail_entity"></td>
                                            <th class="text-center align-middle">收款开户行</th>
                                            <td class="change-input-td" id="htdetail_bank"></td>
                                            <th class="text-center align-middle">收款账号</th>
                                            <td class="change-input-td" id="htdetail_bank_account"></td>
                                        </tr>
                                    <% } %>
                                    <tr>
                                        <th class="text-center align-middle">结算书编号</th>
                                        <td id="htdetail_settle_code"></td>
                                        <th class="text-center align-middle">备注</th>
                                        <td class="change-input-td" colspan="5" id="htdetail_remark"></td>
                                    </tr>
                                </table>
                                <% let tableHavePayCondition = false; %>
                                <% if (attributeSet.length > 0) { %>
                                    <div class="mb-1">附加属性</div>
                                    <%
                                        // 按顺序分组：遇到 long_text 就切断，形成 segments
                                        // segments 结构：[{ type: 'inline', items: [...] }, { type: 'long', item: {...} }, ...]
                                        const segments = [];
                                        let buffer = [];

                                        for (const attr of attributeSet) {
                                            if (attr.field === 'pay_condition') tableHavePayCondition = true;
                                            if (attr.type === 'long_text') {
                                                if (buffer.length) {
                                                    segments.push({ type: 'inline', items: [...buffer] });
                                                    buffer = [];
                                                }
                                                segments.push({ type: 'long', item: attr });
                                            } else {
                                                buffer.push(attr);
                                            }
                                        }
                                        if (buffer.length) segments.push({ type: 'inline', items: [...buffer] });

                                        // 每行3列对应的 td 宽度
                                        const tdWidths = ['20%', '30%', '20%'];
                                    %>
                                    <table class="table table-sm table-bordered" id="htdetail-attr" style="display: none;">
                                        <% for (const seg of segments) { %>
                                            <% if (seg.type === 'long') { %>
                                                <tr>
                                                    <th class="text-center align-middle" width="10%"><%- seg.item.alias || seg.item.name %></th>
                                                    <td class="change-input-td" colspan="5"
                                                        data-type="<%- seg.item.field %>"
                                                        id="htdetail_<%- seg.item.field %>"></td>
                                                </tr>
                                            <% } else { %>
                                                <% for (let i = 0; i < seg.items.length; i += 3) { %>
                                                    <% const row = seg.items.slice(i, i + 3) %>
                                                    <tr>
                                                        <% for (let k = 0; k < row.length; k++) { %>
                                                            <th class="text-center align-middle" width="10%"><%- row[k].alias || row[k].name %></th>
                                                            <td width="<%= tdWidths[k] %>" class="change-input-td"
                                                                data-type="<%- row[k].field %>"
                                                                id="htdetail_<%- row[k].field %>"></td>
                                                        <% } %>
                                                        <% if (row.length < 3) { %>
                                                            <% const remainColspan = (3 - row.length) * 2 %>
                                                            <td colspan="<%= remainColspan %>"></td>
                                                        <% } %>
                                                    </tr>
                                                <% } %>
                                            <% } %>
                                        <% } %>
                                    </table>
                                <% } %>
                                <% if (!tableHavePayCondition) { %>
                                    <textarea style="display: none" id="hidden_pay_condition"></textarea>
                                <% } %>
                            </div>
                        </div>
                        <div class="tab-pane" id="htpay">
                            <div class="sp-wrap" style="overflow: auto">
                                <table class="table table-sm table-bordered" id="htpay-table" style="display: none;">
                                    <thead>
                                    <tr class="text-center" id="pay-header">
                                        <% if (ctx.contract_type === contractConst.type.income) { %>
                                            <th width="3%">序号</th><th width="8%" sort="pay_time">回款日期</th><th width="5%">用途</th><th width="7%">回款金额</th><th width="7%">扣款金额</th><th width="7%">应回金额</th><th width="7%">实回金额</th><th width="5%">回款方式</th><th width="7%">开票金额</th><th width="7%" sort="kp_time">开票时间</th><th width="5%">创建人</th><th width="9%" sort="create_time">创建时间</th><th width="8%">备注</th><th width="4%">附件</th>
                                            <% if (pay_shenpi_status) { %>
                                                <th width="12%">审批进度</th>
                                            <% } %>
                                            <th width="14%" id="contract-pay-operation">操作</th>
                                        <% } else if (ctx.contract_type === contractConst.type.expenses) { %>
                                            <th width="3%">序号</th><th width="8%" sort="pay_time">支付日期</th><th width="5%">用途</th><th width="7%">付款金额</th><th width="7%">扣款金额</th><th width="7%">应付金额</th><th width="7%">实付金额</th><th width="5%">支付方式</th><th width="7%">开票金额</th><th width="7%" sort="kp_time">开票时间</th><th width="5%">创建人</th><th width="9%" sort="create_time">创建时间</th><th width="8%">备注</th><th width="4%">附件</th>
                                            <% if (pay_shenpi_status) { %>
                                                <th width="12%">审批进度</th>
                                            <% } %>
                                            <th width="14%" id="contract-pay-operation">操作</th>
                                        <% } %>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="htfile">
                            <div class="sp-wrap" style="overflow: auto">
                                <table class="table table-sm table-bordered" id="htfile-table" style="display: none;">
                                    <thead>
                                    <tr class="text-center">
                                        <th width="5%">序号</th><th>名称</th><th width="5%">上传人</th><th width="15%">上传时间</th><th width="15%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="htsupplement">
                            <div class="sp-wrap" style="overflow: auto">
                                <table class="table table-sm table-bordered" id="htsupplement-table" style="display: none;">
                                    <thead>
                                    <tr class="text-center" id="supplement-header">
                                        <th width="3%">序号</th><th width="5%" sort="code">编号</th><th width="8%">名称</th><th width="7%">金额</th><th width="8%">甲方</th><th width="8%">乙方</th><th width="5%">签订时间</th><th width="5%">签订地点</th><th width="5%">创建人</th><th width="9%" sort="create_time">创建时间</th><th width="10%">补充原因及内容</th><th width="4%">附件</th>
                                        <% if (shenpi_status) { %>
                                            <th width="15%">审批进度</th>
                                        <% } %>
                                        <th width="10%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="side-menu">
                <!--右侧菜单-->
                <ul class="nav flex-column right-nav">
                    <li class="nav-item">
                        <a class="nav-link" content="#contract-search" href="javascript: void(0);">查找定位</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" content="#std-xmj" href="javascript: void(0);">项目节</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    const user_id = <%- ctx.session.sessionUser.accountId %>;
    const is_admin = <%- ctx.session.sessionUser.is_admin %>;
    const permission_edit = <%- (ctx.session.sessionUser.is_admin || audit_permission.permission_edit) %>;
    const permission_add = <%- (ctx.session.sessionUser.is_admin || audit_permission.permission_add) %>;
    const permission_att = <%- (ctx.session.sessionUser.is_admin || audit_permission.permission_att) %>;
    const permission_edit_contract = <%- (ctx.session.sessionUser.is_admin || audit_permission.permission_edit_contract) %>;
    const permission_add_pay = <%- (ctx.session.sessionUser.is_admin || audit_permission.permission_add_pay) %>;
    const contract_type = <%- contract_type %>;
    const whiteList = JSON.parse(unescape('<%- escape(JSON.stringify(whiteList)) %>'));
    const contractConst = JSON.parse(unescape('<%- escape(JSON.stringify(contractConst)) %>'));
    let contractTreeAudits = JSON.parse(unescape('<%- escape(JSON.stringify(contractTreeAudits)) %>'));
    const colSet = JSON.parse(unescape('<%- escape(JSON.stringify(colSet)) %>'));
    const contractColumnOptions = JSON.parse(unescape('<%- escape(JSON.stringify(contractColumnOptions)) %>'));
    const auditConst = JSON.parse(unescape('<%- escape(JSON.stringify(auditConst)) %>'));
    const shenpi_status = JSON.parse(unescape('<%- escape(JSON.stringify(shenpi_status)) %>'));
    const pay_shenpi_status = JSON.parse(unescape('<%- escape(JSON.stringify(pay_shenpi_status)) %>'));
    const shenpi = JSON.parse(unescape('<%- escape(JSON.stringify(shenpi)) %>'));
    const shenpiConst = JSON.parse(unescape('<%- escape(JSON.stringify(shenpiConst)) %>'));
    const auditType = JSON.parse(unescape('<%- escape(JSON.stringify(auditType)) %>'));
    const accountGroup3 = JSON.parse(unescape('<%- escape(JSON.stringify(accountGroup)) %>'));
    const accountList3 = JSON.parse(unescape('<%- escape(JSON.stringify(accountList)) %>'));
    const attributeSet = JSON.parse(unescape('<%- escape(JSON.stringify(attributeSet)) %>'));
    const thisUrl = JSON.parse(unescape('<%- escape(JSON.stringify(thisUrl)) %>'));
    const stdChapters = JSON.parse(unescape('<%- escape(JSON.stringify(stdChapters)) %>'));
    let types = JSON.parse(unescape('<%- escape(JSON.stringify(types)) %>'));
    types.push('');
    let contractPays = [];
    let contractSupplements = [];
</script>
<style>
  #contract-pay-operation,.contract-pay-operation-cell {
  white-space: nowrap;
}
</style>