xh-erp.7in6.com/application/admin/view/procuremen/details_fragment.html

<style>
    body.is-dialog .procuremen-details-wrap {
        margin: 0;
        padding: 12px 14px 16px;
    }
    .procuremen-details-wrap .section-title {
        font-size: 14px;
        font-weight: 600;
        margin: 18px 0 10px;
        color: #333;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
    }
    .proc-steps-wrap {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 4px 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .proc-step-item {
        flex: 1 1 0;
        min-width: 100px;
        text-align: center;
        position: relative;
        padding: 0 4px;
    }
    .proc-step-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 14px;
        left: 50%;
        width: 100%;
        height: 2px;
        background: #e0e0e0;
        z-index: 0;
    }
    .proc-step-item.is-done:not(:last-child)::after {
        background: #1890ff;
    }
    .proc-step-circle {
        width: 28px;
        height: 28px;
        line-height: 28px;
        border-radius: 50%;
        margin: 0 auto 6px;
        font-size: 13px;
        font-weight: 600;
        position: relative;
        z-index: 1;
        background: #f5f5f5;
        color: #999;
        border: 2px solid #ddd;
    }
    .proc-step-item.is-done .proc-step-circle {
        background: #1890ff;
        border-color: #1890ff;
        color: #fff;
    }
    .proc-step-item.is-current .proc-step-circle {
        background: #1890ff;
        border-color: #1890ff;
        color: #fff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.25);
    }
    .proc-step-item.is-done .proc-step-circle .fa {
        line-height: 24px;
    }
    .proc-step-title {
        font-size: 12px;
        color: #333;
        line-height: 1.35;
        margin-bottom: 2px;
    }
    .proc-step-sub {
        font-size: 11px;
        color: #888;
        line-height: 1.3;
        min-height: 2.6em;
    }
    .proc-step-time {
        font-size: 11px;
        color: #aaa;
        margin-top: 4px;
        white-space: nowrap;
    }
    .procuremen-details-wrap .procuremen-order-info-block {
        border: 1px solid #ddd;
        margin-top: 18px;
        margin-bottom: 0;
    }
    .procuremen-details-wrap .procuremen-order-info-head {
        background: #f0f0f0;
        border-bottom: 1px solid #ddd;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 700;
        color: #222;
        margin: 0;
    }
    .procuremen-details-wrap .procuremen-order-grid {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 13px;
        margin: 0;
        background: #fff;
        border: none;
    }
    .procuremen-details-wrap .procuremen-order-grid td {
        border: 1px solid #ddd;
        padding: 10px 12px;
        vertical-align: middle;
    }
    .procuremen-details-wrap .procuremen-order-grid .og-label {
        width: 14%;
        background: #f5f5f5;
        color: #333;
        text-align: right;
        font-weight: normal;
    }
    .procuremen-details-wrap .procuremen-order-grid .og-value {
        width: 36%;
        background: #fff;
        color: #000;
        text-align: left;
        font-weight: 700;
        word-break: break-word;
    }
    .procuremen-details-wrap .procuremen-oper-log {
        list-style: none;
        margin: 0 0 8px;
        padding: 0;
        font-size: 13px;
        line-height: 1.65;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        background: #fafafa;
        max-height: 280px;
        overflow-y: auto;
    }
    .procuremen-details-wrap .procuremen-oper-log li {
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
        word-break: break-word;
    }
    .procuremen-details-wrap .procuremen-oper-log li:last-child {
        border-bottom: none;
    }
    .procuremen-details-wrap .procuremen-oper-log .op-user {
        font-weight: 700;
        color: #000;
    }
    .procuremen-details-wrap .procuremen-oper-log .op-time {
        color: #666;
        margin: 0 6px;
    }
    .procuremen-details-wrap .procuremen-oper-log .op-text {
        color: #333;
    }
    .procuremen-details-wrap .procuremen-oper-log-empty {
        font-size: 13px;
        color: #999;
        padding: 10px 12px;
        border: 1px dashed #ddd;
        border-radius: 4px;
        margin-bottom: 8px;
    }
    .procuremen-details-wrap .detail-mini {
        font-size: 12px;
    }
    .procuremen-details-wrap .detail-mini th,
    .procuremen-details-wrap .detail-mini td {
        padding: 6px 8px;
        vertical-align: middle;
    }
</style>

<div class="panel panel-default panel-intro procuremen-details-wrap{if !empty($pdf_export)} procuremen-pdf-inner{/if}" style="border:0;box-shadow:none;">
    {notempty name="pdf_export"}
    <div class="page-head">
        {notempty name="ccydh"}
        <table class="proc-pdf-order-no" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0;padding:0;">
            <tr>
                <td style="font-size:15px;font-weight:700;color:#000;padding:0 8px 0 0;vertical-align:baseline;white-space:nowrap;">订单号</td>
                <td style="font-size:15px;font-weight:700;color:#000;vertical-align:baseline;word-break:break-all;">{$ccydh|htmlentities}</td>
            </tr>
        </table>
        {/notempty}
    </div>
    {/notempty}

    <div class="section-title"{if !empty($pdf_export)} style="margin:16px 0 10px;font-size:14px;font-weight:600;color:#333;padding-bottom:6px;border-bottom:1px solid #eee;"{/if}>状态进度</div>
    {notempty name="pdf_export"}
    <div class="proc-pdf-steps-outer" style="overflow:hidden;margin:0;padding:0;">
    <table class="proc-steps-table-pdf" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;table-layout:fixed;width:100%;margin:0 0 18px;">
        <tr>
            {volist name="steps" id="st"}
            <td style="vertical-align:top;text-align:center;padding:4px 1px 0;border:0 !important;width:20%;">
                <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;height:152px;margin:0 auto;">
                    <tr>
                        <td style="vertical-align:top;padding:0;border:0 !important;">
                            <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 auto 4px;">
                                <tr style="height:28px;">
                                    <td style="width:50%;padding:0;border:0 !important;vertical-align:middle;height:28px;">
                                        {if $st.pdf_left_bg}
                                        <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"><tr><td style="padding:0;border:0 !important;height:0;line-height:0;font-size:0;border-top:2px solid {$st.pdf_left_bg};">&#160;</td></tr></table>
                                        {/if}
                                    </td>
                                    <td style="width:28px;padding:0;border:0 !important;vertical-align:middle;text-align:center;height:28px;">
                                        {if $st.done}
                                        <span style="display:inline-block;width:28px;height:28px;line-height:26px;text-align:center;border-radius:14px;border:2px solid #1890ff;background-color:#1890ff;color:#ffffff;font-size:11px;font-weight:bold;">&#10003;</span>
                                        {elseif $st.current /}
                                        <span style="display:inline-block;width:28px;height:28px;line-height:26px;text-align:center;border-radius:14px;border:2px solid #1890ff;background-color:#1890ff;color:#ffffff;font-size:11px;font-weight:bold;">{$i}</span>
                                        {else /}
                                        <span style="display:inline-block;width:28px;height:28px;line-height:26px;text-align:center;border-radius:14px;border:2px solid #dddddd;background-color:#f5f5f5;color:#999999;font-size:11px;font-weight:bold;">{$i}</span>
                                        {/if}
                                    </td>
                                    <td style="width:50%;padding:0;border:0 !important;vertical-align:middle;height:28px;">
                                        {if $st.pdf_right_bg}
                                        <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"><tr><td style="padding:0;border:0 !important;height:0;line-height:0;font-size:0;border-top:2px solid {$st.pdf_right_bg};">&#160;</td></tr></table>
                                        {/if}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top;padding:2px 2px 0;border:0 !important;font-size:12px;color:#333;line-height:1.35;font-weight:600;text-align:center;">{$st.title|htmlentities}</td>
                    </tr>
                    <tr>
                        <td style="vertical-align:top;padding:2px 2px 0;height:44px;border:0 !important;font-size:11px;color:#888;line-height:1.3;text-align:center;overflow:hidden;">{$st.subtitle|default=''|htmlentities}</td>
                    </tr>
                    <tr>
                        <td style="vertical-align:bottom;padding:2px 2px 0;border:0 !important;font-size:11px;color:#aaa;text-align:center;white-space:nowrap;">{$st.time|default=''|htmlentities}</td>
                    </tr>
                </table>
            </td>
            {/volist}
        </tr>
    </table>
    </div>
    {else /}
    <div class="proc-steps-wrap">
        {volist name="steps" id="st"}
        <div class="proc-step-item{if $st.done} is-done{/if}{if $st.current} is-current{/if}">
            <div class="proc-step-circle">
                {if $st.done}
                <i class="fa fa-check"></i>
                {else /}
                <span>{$i}</span>
                {/if}
            </div>
            <div class="proc-step-title">{$st.title|htmlentities}</div>
            <div class="proc-step-sub">{$st.subtitle|default=''|htmlentities}</div>
            <div class="proc-step-time">{$st.time|default=''|htmlentities}</div>
        </div>
        {/volist}
    </div>
    {/notempty}

    <div class="section-title">操作记录</div>
    {notempty name="operLogs"}
    <ul class="procuremen-oper-log">
        {volist name="operLogs" id="lg"}
        <li>
            <span class="op-user">{$lg.admin_name|default=''|htmlentities}</span>
            <span class="op-time">{$lg.createtime_text|default=''|htmlentities}</span>
            <span class="op-text">{$lg.content|default=''|htmlentities}</span>
        </li>
        {/volist}
    </ul>
    {else /}
    <p class="procuremen-oper-log-empty text-muted">暂无操作记录</p>
    {/notempty}

    <div class="procuremen-order-info-block">
    <div class="procuremen-order-info-head">订单信息</div>
    <table class="procuremen-order-grid table">
        <tbody>
            {notempty name="orderSummaryGrid"}
            {volist name="orderSummaryGrid" id="gr"}
            <tr>
                <td class="og-label">{$gr.l1|htmlentities}</td>
                <td class="og-value">{$gr.v1|htmlentities}</td>
                <td class="og-label">{if $gr.l2 != ''}{$gr.l2|htmlentities}{/if}</td>
                <td class="og-value">{if $gr.l2 != ''}{$gr.v2|htmlentities}{/if}</td>
            </tr>
            {/volist}
            {else /}
            <tr>
                <td colspan="4" class="text-muted" style="text-align:center;padding:14px;">暂无数据</td>
            </tr>
            {/notempty}
        </tbody>
    </table>
    </div>

    <div class="section-title">供应商</div>
    <div class="table-responsive">
        <table class="table table-bordered table-condensed detail-mini">
            <thead>
            <tr>
                <th>公司名称</th>
                <th>加工金额</th>
                <th>交货日期</th>
                <th>采购确认</th>
                <th>操作时间</th>
            </tr>
            </thead>
            <tbody>
            {notempty name="detailRows"}
            {volist name="detailRows" id="dr"}
            <tr>
                <td>{$dr.company_name|default=''|htmlentities}</td>
                <td>{$dr.amount|default=''|htmlentities}</td>
                <td>{$dr.delivery_ymd|default=''|htmlentities}</td>
                <td class="text-center">
                    {if $dr.status == 1}
                    <span class="label label-success">已选</span>
                    {else /}
                    <span class="text-muted"> </span>
                    {/if}
                </td>
                <td>{$dr.createtime_text|default=''|htmlentities}</td>
            </tr>
            {/volist}
            {else /}
            <tr>
                <td colspan="6" class="text-center text-muted">暂无下发明细</td>
            </tr>
            {/notempty}
            </tbody>
        </table>
    </div>
</div>