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

<style>
    /* 工具栏贴右时避免被裁切；主内容区约束宽度，表格在内部横向滚动 */
    #content:has(#procuremen-layout),
    #content .col-xs-12:has(#procuremen-layout),
    div.content:has(#procuremen-layout) {
        overflow-x: hidden !important;
    }
    div.content:has(#procuremen-layout) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #procuremen-layout > .panel-body {
        padding-top: 16px !important;
        padding-bottom: 0 !important;
    }
    #procuremen-layout.panel-intro > .panel-heading {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #procuremen-layout.panel-intro > .panel-heading .panel-lead {
        margin-bottom: 0;
    }
    #procuremen-layout .tab-content,
    #procuremen-layout .tab-pane {
        padding: 0;
        margin: 0;
    }
    .procuremen-layout { margin: 0 -10px; }
    /* 左右列等高：与右侧整块（工具条+Tab+表格+分页）对齐；桌面下取消 float 用 flex */
    #procuremen-layout .procuremen-layout.row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    @media (min-width: 768px) {
        #procuremen-layout .procuremen-layout.row {
            min-height: calc(100vh - 132px);
        }
        #procuremen-layout .procuremen-layout > .procuremen-sidebar,
        #procuremen-layout .procuremen-layout > .procuremen-main {
            float: none !important;
            display: flex;
            flex-direction: column;
        }
        #procuremen-layout .procuremen-layout > .procuremen-sidebar {
            flex: 0 0 92px;
            max-width: 92px;
            width: 92px !important;
        }
    }
    #procuremen-layout .procuremen-main {
        overflow-x: hidden !important;
        overflow-y: visible;
        padding-right: 8px !important;
        flex: 1 1 0%;
        min-width: 0;
    }
    .procuremen-sidebar {
        flex: 0 0 auto;
        align-self: stretch;
        min-height: 0;
        overflow-y: auto;
        border-right: 1px solid #f0f0f0;
        background: #fafafa;
    }
    /* 左侧年月栏：桌面固定约 92px，略宽于纯数字月份便于显示「2026年」 */
    .procuremen-sidebar .year-title {
        font-weight: 600;
        padding: 8px 6px 4px;
        margin: 4px 0 2px;
        background: transparent;
        border-radius: 0;
        font-size: 12px;
        color: #8c8c8c;
    }
    .procuremen-sidebar .procuremen-ym-item {
        display: block;
        padding: 7px 6px;
        margin: 2px 4px;
        color: #595959;
        border-radius: 6px;
        text-decoration: none;
        border: none;
        font-size: 13px;
        text-align: center;
    }
    .procuremen-sidebar .procuremen-ym-item:hover {
        background: #f0f0f0;
        color: #1f1f1f;
    }
    .procuremen-sidebar .procuremen-ym-item.active {
        background: #e6f4ff;
        color: #1677ff;
        font-weight: 500;
    }
    #procuremen-layout .procuremen-main .widget-body {
        overflow-x: hidden;
        overflow-y: hidden;
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    #procuremen-layout .procuremen-toolbar-host,
    #procuremen-layout .procuremen-wff-tabs {
        flex-shrink: 0;
    }
    #procuremen-layout .procuremen-main .fixed-table-pagination {
        background: #fff;
        border-top: 1px solid #e7e7e7;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
    }
    /* 主表 loading 遮罩盖不住右侧固定列克隆体，刷新时短暂露出旧「操作」按钮，加载中先隐藏 */
    #procuremen-layout .fixed-columns-right.procuremen-hide-fixed-right-loading {
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* JS 把 .fixed-table-toolbar 挪到此处：上一行按钮，下一行 tabs */
    .procuremen-toolbar-host {
        padding: 10px 12px 8px 0;
        margin-bottom: 0;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
        position: relative;
        z-index: 3;
    }
    .procuremen-toolbar-host .fixed-table-toolbar {
        border: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
        min-height: 36px;
    }
    .procuremen-toolbar-host .fixed-table-toolbar > .pull-left,
    .procuremen-toolbar-host .fixed-table-toolbar > .bars.pull-left,
    .procuremen-toolbar-host .fixed-table-toolbar > .bs-bars.pull-left {
        float: none !important;
        margin: 0 !important;
        flex: 0 0 auto;
    }
    .procuremen-toolbar-host .fixed-table-toolbar > .pull-right,
    .procuremen-toolbar-host .fixed-table-toolbar > .columns.pull-right,
    .procuremen-toolbar-host .fixed-table-toolbar > .columns.columns-right {
        float: none !important;
        margin-left: auto !important;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .procuremen-toolbar-host .fixed-table-toolbar .search {
        float: none !important;
        margin: 0 !important;
    }
    .procuremen-toolbar-host .fixed-table-toolbar .search .form-control {
        min-width: 140px;
        max-width: 220px;
    }
    .procuremen-toolbar-host .fixed-table-toolbar .procuremen-toolbar-search-wrap {
        margin-left: auto !important;
        float: none !important;
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: min-content;
    }
    .procuremen-toolbar-host .fixed-table-toolbar .procuremen-toolbar-search-wrap .btn-group,
    .procuremen-toolbar-host .fixed-table-toolbar .procuremen-toolbar-search-wrap button[name="search"] {
        flex-shrink: 0;
    }
    .procuremen-toolbar-host .fixed-table-toolbar .procuremen-toolbar-search-wrap > .search {
        order: 0 !important;
    }
    .procuremen-toolbar-host .fixed-table-toolbar .procuremen-toolbar-search-wrap > *:not(.search) {
        order: 2;
    }
    .procuremen-toolbar-host .fixed-table-toolbar .procuremen-toolbar-search-wrap > button[name="search"] {
        order: 4 !important;
    }
    #procuremen-layout .procuremen-main .procuremen-table-area {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #procuremen-layout .procuremen-table-area > .bootstrap-table {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        width: 100%;
    }
    #procuremen-layout .bootstrap-table .fixed-table-container {
        width: 100% !important;
    }
    .procuremen-table-area .toolbar.procuremen-toolbar-empty {
        display: none !important;
    }
    .procuremen-wff-tabs {
        margin-bottom: 0;
        margin-top: 0;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }
    .procuremen-wff-tabs > li > a {
        padding: 10px 16px;
        color: #8c8c8c;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        margin-right: 0;
    }
    .procuremen-wff-tabs > li.active > a,
    .procuremen-wff-tabs > li.active > a:hover,
    .procuremen-wff-tabs > li.active > a:focus {
        color: #1677ff !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid #1677ff !important;
    }
    #procuremen-layout .bootstrap-table .table > thead > tr > th,
    #procuremen-layout .bootstrap-table .table > tbody > tr > td {
        padding: 3px 6px;
        line-height: 1.28;
        vertical-align: middle;
    }
    /* 复选框列：表头 .th-inner 与表体 td 内边距一致，避免全选与行勾选框错位 */
    #procuremen-layout .bootstrap-table th.bs-checkbox,
    #procuremen-layout .bootstrap-table td.bs-checkbox {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        padding: 3px 4px !important;
        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box;
    }
    #procuremen-layout .bootstrap-table th.bs-checkbox .th-inner {
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1;
        min-height: 0;
    }
    #procuremen-layout .bootstrap-table th.bs-checkbox input[type="checkbox"],
    #procuremen-layout .bootstrap-table td.bs-checkbox input[type="checkbox"] {
        margin: 0 auto !important;
        vertical-align: middle !important;
        float: none;
        position: static;
        top: auto;
        width: 16px;
        height: 16px;
        cursor: pointer;
        display: block;
    }
    #procuremen-layout .bootstrap-table tbody td.bs-checkbox {
        min-height: 28px;
        cursor: pointer;
    }
    /* 表头与表体同步横向滚动，避免右侧列（如提交日期）被裁切 */
    #procuremen-layout .bootstrap-table .fixed-table-body {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    #procuremen-layout .bootstrap-table .fixed-table-body > table.table {
        margin-right: 14px;
    }
    #procuremen-layout .bootstrap-table .fixed-table-header {
        overflow: hidden;
    }
    /* 日期列加宽并禁止省略，避免滚到最右仍被竖向滚动条挡住 */
    #procuremen-layout .bootstrap-table thead th[data-field="dStamp"],
    #procuremen-layout .bootstrap-table thead th[data-field="dputrecord"],
    #procuremen-layout .bootstrap-table tbody td[data-field="dStamp"],
    #procuremen-layout .bootstrap-table tbody td[data-field="dputrecord"] {
        min-width: 176px !important;
        width: 176px !important;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
    #procuremen-layout .nice-validator .bootstrap-table td.bs-checkbox input[type="checkbox"],
    #procuremen-layout .nice-validator .bootstrap-table th.bs-checkbox input[type="checkbox"] {
        vertical-align: middle !important;
    }
    #procuremen-layout .bootstrap-table .table > tbody > tr > td .btn-xs {
        padding: 2px 6px;
        font-size: 12px;
    }
    /*
     * 右固定列与主表 .fixed-table-body 为同级兄弟，主表全宽时最后一列会叠在固定层「下面」。
     * 全局 backend.css 里 .fixed-columns-right 仅 z-index:2，易被主表内层盖住，表现为要点多次才打开弹窗。
     * 抬高固定列整体叠层，并把主表滚动区压在 z-index:0，保证命中的是固定层上的按钮。
     */
    #procuremen-layout .bootstrap-table .fixed-table-container > .fixed-table-body {
        position: relative;
        z-index: 0;
    }
    #procuremen-layout .bootstrap-table .fixed-columns-right {
        box-shadow: none !important;
        border-left: 1px solid #e3e6ea;
        background-color: #fff;
        z-index: 18 !important;
    }
    #procuremen-layout .bootstrap-table .fixed-columns-right .fixed-table-header table thead th,
    #procuremen-layout .bootstrap-table .fixed-columns-right .fixed-table-body table tbody td {
        border-left-color: transparent;
    }
    /* 操作列按钮在固定层内置于可点区域之上，减少与主表透明重叠导致的「多点一次」 */
    /* 固定列操作按钮：抬高层级 + 明确可点，减轻与主表空白区域叠层的「点了没反应」 */
    #procuremen-layout .bootstrap-table .fixed-columns-right .fixed-table-body {
        pointer-events: auto;
    }
    #procuremen-layout .bootstrap-table .fixed-columns-right a.procuremen-op-open {
        position: relative;
        z-index: 6;
        pointer-events: auto;
        display: inline-block;
        vertical-align: middle;
    }
    #procuremen-layout .procuremen-op-btns .btn + .btn {
        margin-left: 6px;
    }
    /* 可排序列表头：排序图标紧跟文字后面（th-inner 仅包裹文字宽度） */
    #procuremen-layout .bootstrap-table thead th.sortable,
    #procuremen-layout .bootstrap-table thead th .th-inner.sortable {
        background-image: none !important;
        background-position: unset !important;
        padding-right: 6px !important;
    }
    #procuremen-layout .bootstrap-table thead th.sortable .th-inner,
    #procuremen-layout .bootstrap-table thead th .th-inner.sortable {
        display: inline-block !important;
        width: auto !important;
        max-width: calc(100% - 2px);
        padding-right: 0 !important;
        box-sizing: border-box;
        vertical-align: middle;
        white-space: nowrap;
    }
    #procuremen-layout .bootstrap-table thead th.sortable .th-inner:after,
    #procuremen-layout .bootstrap-table thead th .th-inner.sortable:after {
        content: '\f0dc';
        font-family: FontAwesome;
        font-size: 11px;
        line-height: 1;
        color: #bbb;
        margin-left: 4px;
        vertical-align: middle;
    }
    #procuremen-layout .bootstrap-table thead th.sortable.asc .th-inner:after,
    #procuremen-layout .bootstrap-table thead th.sortable.desc .th-inner:after,
    #procuremen-layout .bootstrap-table thead th .th-inner.sortable.asc:after,
    #procuremen-layout .bootstrap-table thead th .th-inner.sortable.desc:after {
        color: #337ab7;
    }
    /* 采购确认弹层（完结/删除等） */
    body .layui-layer-procuremen-finish {
        display: flex !important;
        flex-direction: column !important;
        height: 400px !important;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    }
    body .layui-layer-procuremen-finish .layui-layer-title {
        background: #fff !important;
        color: #1f1f1f !important;
        border-bottom: 1px solid #f0f0f0;
        height: 48px;
        line-height: 48px;
        font-size: 15px;
        font-weight: 600;
        flex-shrink: 0;
        padding: 0 20px;
    }
    body .layui-layer-procuremen-finish .layui-layer-setwin {
        top: 2px;
        right: 12px;
    }
    body .layui-layer-procuremen-finish .layui-layer-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 16px 20px !important;
        overflow: hidden !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        text-align: left;
        line-height: 1.6;
        font-size: 13px;
        color: #434343;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-intro {
        margin: 0 0 12px;
        flex-shrink: 0;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #f0f0f0;
        border-radius: 6px;
        background: #fafafa;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-table {
        margin: 0;
        font-size: 12px;
        border: none;
        background: #fff;
        width: 100%;
        table-layout: fixed;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-table th:nth-child(1),
    body .layui-layer-procuremen-finish .procuremen-confirm-table td:nth-child(1) {
        width: 150px;
        white-space: nowrap;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-table th:nth-child(2),
    body .layui-layer-procuremen-finish .procuremen-confirm-table td:nth-child(2) {
        width: 140px;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-table th:nth-child(3),
    body .layui-layer-procuremen-finish .procuremen-confirm-table td:nth-child(3) {
        width: auto;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-table thead th {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 1;
        border-bottom: 1px solid #f0f0f0;
        color: #595959;
        font-weight: 500;
    }
    body .layui-layer-procuremen-finish .procuremen-confirm-table tbody td {
        border-color: #f5f5f5;
        color: #434343;
    }
    body .layui-layer-procuremen-finish .layui-layer-btn {
        flex-shrink: 0 !important;
        text-align: right !important;
        padding: 12px 20px !important;
        background: #fff !important;
        border-top: 1px solid #f0f0f0;
        margin-top: auto;
    }
    body .layui-layer-procuremen-finish .layui-layer-btn a {
        height: 32px;
        line-height: 32px;
        margin: 0 0 0 8px;
        padding: 0 16px;
        font-size: 13px;
        border-radius: 4px;
    }
    body .layui-layer-procuremen-finish .layui-layer-btn1 {
        background: #fff !important;
        border: 1px solid #d9d9d9 !important;
        color: #333 !important;
    }
    body .layui-layer-procuremen-finish .layui-layer-btn1:hover {
        border-color: #1677ff !important;
        color: #1677ff !important;
    }
    body .layui-layer-procuremen-finish .layui-layer-btn0 {
        background-color: #27C24C !important;
        border-color: #23ad44 !important;
        color: #fff !important;
    }
    body .layui-layer-procuremen-finish .layui-layer-btn0:hover {
        background-color: #1e983e !important;
        border-color: #1a8737 !important;
        color: #fff !important;
    }
    #procuremen-layout .procuremen-po-field.procuremen-po-dirty {
        border-color: #f0ad4e;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(240, 173, 78, 0.45);
    }
    .procuremen-po-popover {
        position: fixed;
        z-index: 100050;
        padding: 6px 8px;
        background: #fff;
        border: 1px solid #d2d6de;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .procuremen-po-popover-inner {
        white-space: nowrap;
    }
    .procuremen-po-popover-inner .btn + .btn {
        margin-left: 6px;
    }
    #procuremen-layout .procuremen-supplier-lines-cell {
        position: relative;
    }
    #procuremen-layout .procuremen-supplier-lines-cell .procuremen-supplier-caret {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        line-height: 1;
        background: #eee;
        color: #ddd;
        padding: 0 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    #procuremen-layout .procuremen-supplier-lines-cell .procuremen-supplier-caret:hover {
        color: #999;
    }
</style>

<div class="panel panel-default panel-intro" id="procuremen-layout"
     data-default-ym="{$defaultYm|htmlentities}"
     data-procuremen-redis-api="{$procuremenRedisApi|htmlentities}"
     data-procuremen-stage="{$procuremenStage|default='pick'|htmlentities}"
     data-can-dispatch="{$procuremenBtnDispatch|default=0}"
     data-can-pick-delete="{$procuremenBtnPickDelete|default=0}"
     data-can-complete="{$procuremenBtnComplete|default=0}"
     data-can-audit-abandon="{$procuremenBtnAuditAbandon|default=0}">
    {:build_heading()}

    <div class="panel-body">
        <div class="row procuremen-layout">
            <div class="col-xs-12 col-sm-2 col-md-1 procuremen-sidebar">
                {foreach name="sidebarYearMonths" item="block"}
                <div class="procuremen-year-block">
                    <div class="year-title">{$block.year}年</div>
                    {foreach name="block.months" item="item"}
                    <a href="javascript:;" class="procuremen-ym-item{if $item.ym == $defaultYm} active{/if}" data-ym="{$item.ym|htmlentities}">{$item.label|htmlentities}</a>
                    {/foreach}
                </div>
                {/foreach}
            </div>
            <div class="col-xs-12 col-sm-10 col-md-11 procuremen-main">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="procuremen-toolbar-host" class="procuremen-toolbar-host clearfix"></div>
                            <div class="procuremen-table-area">
                                <div id="toolbar" class="toolbar">
                                    <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" >刷新 <i class="fa fa-refresh"></i> </a>
                                    {if isset($procuremenBtnAuditAbandon) && $procuremenBtnAuditAbandon}
                                    <a href="javascript:;" class="btn btn-danger" id="btn-procuremen-audit-abandon" title="勾选一条或多条订单退回协助初选重新下发（历史记录保留）" style="display:none;"><i class="fa fa-repeat"></i> 重新下发</a>
                                    {/if}
                                    {if isset($procuremenBtnDispatch) && $procuremenBtnDispatch}
                                    <a href="javascript:;" class="btn btn-info" id="btn-procuremen-pick-review" title="勾选一条或多条工序进行下发（多条须同一订单号）" style="display:none;"><i class="fa fa-paper-plane"></i> 下发</a>
                                    {/if}
                                    {if isset($procuremenBtnComplete) && $procuremenBtnComplete}
                                    <a href="javascript:;" class="btn btn-success" id="btn-procuremen-batch-finish" title="勾选一条或多条工序标记为已完结" style="display:none;"><i class="fa fa-flag-checkered"></i> 完结</a>
                                    {/if}
                                    {if isset($procuremenBtnPickDelete) && $procuremenBtnPickDelete}
                                    <a href="javascript:;" class="btn btn-danger" id="btn-procuremen-pick-delete" title="勾选一条或多条工序从初选列表移除" style="display:none;"><i class="fa fa-trash"></i> 删除</a>
                                    {/if}
                                </div>
                                <table id="table"
                                       class="table table-striped table-bordered table-hover">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>