数据表格与批量操作

<!-- 1. DOM 骨架规划 -->
<div class="page-archetype-list">
    <!-- 顶部过滤区 -->
    <div class="filter-section" id="myFilterSection">
        <form id="searchForm" class="form-row align-items-end">
            <div class="form-group col-md-3">
                <label>关键字检索</label>
                <input type="text" class="form-control" name="keyword" placeholder="订单号/供应商" />
            </div>
            <div class="form-group col-md-3">
                <label>订单状态</label>
                <select class="form-control" name="status" id="statusSelect">
                    <option value="">全部</option>
                    <option value="1">待处理</option>
                    <option value="2">已完成</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <button type="button" class="btn btn-primary" id="btnSearch">
                    <i class="fal fa-search mr-1"></i>查询
                </button>
                <button type="button" class="btn btn-secondary ml-2" id="btnReset">
                    重置
                </button>
            </div>
        </form>
    </div>

    <!-- 标准对称操作条区块 -->
    <div class="operetion-section">
        <!-- 左侧: 业务创建按钮 -->
        <div class="left-buttons">
            <button type="button" class="btn btn-success" id="btnAddOrder">
                <i class="fal fa-plus mr-1"></i>录入新订单
            </button>
        </div>
        <!-- 右侧: AcmeGridOperations 批量操作专属挂载点 -->
        <div class="right-buttons" id="dataOperationsContainer">
            <!-- 按钮结构由 JS 动态生成渲染，请勿在此堆积 HTML -->
        </div>
    </div>

    <!-- 自适应高度数据表格区 -->
    <div class="data-section">
        <div id="MyOrdersGrid" class="ag-theme-alpine" style="width: 100%;"></div>
    </div>
</div>

<script>
$(function () {
    // 2. 初始化核心表格
    var orderGrid = acmeAgGrid.init({
        div: '#MyOrdersGrid',
        url: '/api/star-pomelo/orders/page-list',
        primaryKey: 'id',
        isSelect: true,
        rowSelection: 'multiple',
        pageSize: 20,
        columnDefs: [
            { 
                headerName: '订单编号', 
                field: 'orderNo', 
                width: 150, 
                filter: 'agTextColumnFilter',
                cellRenderer: function(p) {
                    return '<a href="javascript:void(0)" class="grid-link" onclick="openDetail(\'' + p.data.id + '\')">' + p.value + '</a>';
                }
            },
            { 
                headerName: '销售额', 
                field: 'totalAmount', 
                width: 120, 
                filter: 'agNumberColumnFilter',
                valueFormatter: function(p) { 
                    return p.value ? '￥' + Number(p.value).toLocaleString() : '￥0'; 
                } 
            },
            { 
                headerName: '订单状态', 
                field: 'statusText', 
                width: 100,
                cellRenderer: function(p) {
                    var color = p.data.status === 2 ? '#10b981' : '#f59e0b';
                    return '<span class="ds-status-tag" style="background:' + color + '15; color:' + color + ';">' + p.value + '</span>';
                }
            }
        ]
    });

    // 启用表格高度视口自适应(核心红线)
    acmeAgGrid.enableResizeListener('#MyOrdersGrid');

    // 3. 关联批量操作动作
    AcmeGridOperations.init({
        containerId: 'dataOperationsContainer',
        grid: orderGrid,
        delete: {
            api: '/api/star-pomelo/orders/delete-batch',
            permission: 'order_delete_batch',
            onSuccess: function() {
                Msg.Success('操作提示', '选中订单批量删除成功');
            }
        },
        exportList: [
            {
                label: '导出当前页订单',
                api: '/api/star-pomelo/orders/export-current',
                fileName: '当前订单表',
                permission: 'order_export_simple'
            },
            {
                label: '导出大宗历史明细 (异步任务)',
                api: '/api/star-pomelo/orders/export-all-async',
                permission: 'order_export_async' // 注意：AcmeGridOperations 自身仅识别接口返回的 taskNo 并触发提示/回调；真正的飞行动画和 TaskCenter 挂接是由全局 Ajax 成功拦截器静默劫持处理
            }
        ],
        importList: [{
            label: '导入销售单据',
            api: '/api/star-pomelo/orders/import-excel',
            template: 'https://oss-scm.ihzxy.com/templates/order_import_template.xlsx',
            permission: 'order_import',
            onSuccess: function() {
                Msg.Success('导入完毕', '数据已更新并静默刷新表格');
            }
        }]
    });

    // 4. 查询与重置
    $('#btnSearch').click(function () {
        var params = $('#searchForm').serializeObject();
        orderGrid.search(params);
    });

    $('#btnReset').click(function () {
        $('#searchForm')[0].reset();
        orderGrid.search({});
    });
});

function openDetail(id) {
    CommonDrawer.open('/star-pomelo/orders/detail?id=' + id, '订单详情', 'lg');
}
</script>