mashangyoujiu/Application/Admin/View/RiderManage/order_dispatch.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单分配管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/css/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3>订单分配管理</h3>
                </div>
                <div class="layui-card-body">
                    <!-- 搜索区域 -->
                    <div class="layui-form layui-row layui-col-space10 layui-form-pane" style="margin-bottom: 20px;">
                        <div class="layui-col-md3">
                            <label class="layui-form-label">订单状态</label>
                            <div class="layui-input-block">
                                <select name="order_status" id="order_status">
                                    <option value="">全部状态</option>
                                    <option value="0">待分配</option>
                                    <option value="1">已分配</option>
                                    <option value="2">已接单</option>
                                    <option value="3">配送中</option>
                                    <option value="4">已完成</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <label class="layui-form-label">门店</label>
                            <div class="layui-input-block">
                                <select name="store_id" id="store_id">
                                    <option value="">全部门店</option>
                                    <volist name="stores" id="store">
                                        <option value="{$store.id}">{$store.store_name}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="order_no" id="order_no" placeholder="请输入订单号" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-input-block" style="margin-left: 0;">
                                <button class="layui-btn" onclick="searchOrders()">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button class="layui-btn layui-btn-primary" onclick="resetSearch()">重置</button>
                            </div>
                        </div>
                    </div>

                    <!-- 批量操作区域 -->
                    <div class="layui-row" style="margin-bottom: 15px;">
                        <div class="layui-col-md12">
                            <button class="layui-btn layui-btn-sm" onclick="batchAutoDispatch()">
                                <i class="layui-icon layui-icon-release"></i> 批量自动分配
                            </button>
                            <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="refreshOrders()">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                    </div>

                    <!-- 订单列表 -->
                    <table class="layui-hide" id="orderTable" lay-filter="orderTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 手动分配弹窗 -->
<div id="manualDispatchModal" style="display: none; padding: 20px;">
    <form class="layui-form" id="manualDispatchForm">
        <input type="hidden" name="order_id" id="modal_order_id">
        <div class="layui-form-item">
            <label class="layui-form-label">选择骑手</label>
            <div class="layui-input-block">
                <select name="rider_id" id="modal_rider_id" lay-verify="required">
                    <option value="">请选择骑手</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分配备注</label>
            <div class="layui-input-block">
                <textarea name="dispatch_note" placeholder="请输入分配备注（可选）" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitManualDispatch">确认分配</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
            </div>
        </div>
    </form>
</div>

<!-- 订单详情弹窗 -->
<div id="orderDetailModal" style="display: none; padding: 20px;">
    <div id="orderDetailContent"></div>
</div>

<script type="text/html" id="orderStatusTpl">
    {{# if(d.order_status == 0){ }}
        <span class="layui-badge layui-bg-gray">待分配</span>
    {{# } else if(d.order_status == 1){ }}
        <span class="layui-badge layui-bg-blue">已分配</span>
    {{# } else if(d.order_status == 2){ }}
        <span class="layui-badge layui-bg-green">已接单</span>
    {{# } else if(d.order_status == 3){ }}
        <span class="layui-badge layui-bg-orange">配送中</span>
    {{# } else if(d.order_status == 4){ }}
        <span class="layui-badge">已完成</span>
    {{# } }}
</script>

<script type="text/html" id="operationTpl">
    {{# if(d.order_status == 0){ }}
        <button class="layui-btn layui-btn-xs" onclick="autoDispatch({{d.id}})">自动分配</button>
        <button class="layui-btn layui-btn-normal layui-btn-xs" onclick="manualDispatch({{d.id}})">手动分配</button>
    {{# } else if(d.order_status == 1){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" onclick="reassignOrder({{d.id}})">重新分配</button>
    {{# } }}
    <button class="layui-btn layui-btn-primary layui-btn-xs" onclick="viewOrderDetail({{d.id}})">查看详情</button>
</script>

<script src="__PUBLIC__/layui/layui.js"></script>
<script>
layui.use(['table', 'form', 'layer', 'element'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var element = layui.element;

    // 初始化表格
    table.render({
        elem: '#orderTable',
        url: '{:U("RiderManage/getOrderList")}',
        page: true,
        limit: 20,
        limits: [10, 20, 50, 100],
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'ID', width: 80, sort: true},
            {field: 'order_no', title: '订单号', width: 180},
            {field: 'store_name', title: '门店', width: 120},
            {field: 'customer_name', title: '客户', width: 100},
            {field: 'customer_phone', title: '联系电话', width: 120},
            {field: 'delivery_address', title: '配送地址', width: 200},
            {field: 'order_amount', title: '订单金额', width: 100},
            {field: 'rider_name', title: '分配骑手', width: 100},
            {field: 'order_status', title: '状态', width: 100, templet: '#orderStatusTpl'},
            {field: 'create_time', title: '下单时间', width: 160},
            {field: 'dispatch_time', title: '分配时间', width: 160},
            {title: '操作', width: 200, toolbar: '#operationTpl', fixed: 'right'}
        ]],
        done: function(res, curr, count){
            // 表格渲染完成后的回调
        }
    });

    // 监听表格复选框选择
    table.on('checkbox(orderTable)', function(obj){
        // 处理复选框选择事件
    });

    // 监听手动分配表单提交
    form.on('submit(submitManualDispatch)', function(data){
        var loadIndex = layer.load(2);
        $.post('{:U("RiderManage/manualDispatch")}', data.field, function(res){
            layer.close(loadIndex);
            if(res.status == 1){
                layer.msg('分配成功', {icon: 1});
                layer.closeAll();
                table.reload('orderTable');
            } else {
                layer.msg(res.msg || '分配失败', {icon: 2});
            }
        }, 'json');
        return false;
    });
});

// 搜索订单
function searchOrders(){
    layui.table.reload('orderTable', {
        where: {
            order_status: $('#order_status').val(),
            store_id: $('#store_id').val(),
            order_no: $('#order_no').val()
        },
        page: {curr: 1}
    });
}

// 重置搜索
function resetSearch(){
    $('#order_status').val('');
    $('#store_id').val('');
    $('#order_no').val('');
    layui.form.render('select');
    searchOrders();
}

// 刷新订单列表
function refreshOrders(){
    layui.table.reload('orderTable');
}

// 自动分配单个订单
function autoDispatch(orderId){
    layui.layer.confirm('确定要自动分配该订单吗？', {icon: 3, title: '提示'}, function(index){
        var loadIndex = layui.layer.load(2);
        $.post('{:U("RiderManage/autoDispatch")}', {order_id: orderId}, function(res){
            layui.layer.close(loadIndex);
            if(res.status == 1){
                layui.layer.msg('分配成功', {icon: 1});
                layui.table.reload('orderTable');
            } else {
                layui.layer.msg(res.msg || '分配失败', {icon: 2});
            }
            layui.layer.close(index);
        }, 'json');
    });
}

// 手动分配订单
function manualDispatch(orderId){
    // 获取可用骑手列表
    $.get('{:U("RiderManage/getAvailableRiders")}', {order_id: orderId}, function(res){
        if(res.status == 1){
            var riderOptions = '<option value="">请选择骑手</option>';
            $.each(res.data, function(i, rider){
                riderOptions += '<option value="' + rider.id + '">' + rider.name + ' (' + rider.phone + ')</option>';
            });
            $('#modal_rider_id').html(riderOptions);
            $('#modal_order_id').val(orderId);
            layui.form.render('select');
            
            layui.layer.open({
                type: 1,
                title: '手动分配订单',
                content: $('#manualDispatchModal'),
                area: ['500px', '400px'],
                btn: false,
                shadeClose: false
            });
        } else {
            layui.layer.msg(res.msg || '获取骑手列表失败', {icon: 2});
        }
    }, 'json');
}

// 重新分配订单
function reassignOrder(orderId){
    layui.layer.confirm('确定要重新分配该订单吗？', {icon: 3, title: '提示'}, function(index){
        var loadIndex = layui.layer.load(2);
        $.post('{:U("RiderManage/reassignOrder")}', {order_id: orderId}, function(res){
            layui.layer.close(loadIndex);
            if(res.status == 1){
                layui.layer.msg('重新分配成功', {icon: 1});
                layui.table.reload('orderTable');
            } else {
                layui.layer.msg(res.msg || '重新分配失败', {icon: 2});
            }
            layui.layer.close(index);
        }, 'json');
    });
}

// 批量自动分配
function batchAutoDispatch(){
    var checkStatus = layui.table.checkStatus('orderTable');
    var data = checkStatus.data;
    
    if(data.length === 0){
        layui.layer.msg('请选择要分配的订单', {icon: 2});
        return;
    }
    
    var orderIds = [];
    $.each(data, function(i, item){
        if(item.order_status == 0){
            orderIds.push(item.id);
        }
    });
    
    if(orderIds.length === 0){
        layui.layer.msg('所选订单中没有待分配的订单', {icon: 2});
        return;
    }
    
    layui.layer.confirm('确定要批量分配选中的 ' + orderIds.length + ' 个订单吗？', {icon: 3, title: '提示'}, function(index){
        var loadIndex = layui.layer.load(2);
        $.post('{:U("RiderManage/batchAutoDispatch")}', {order_ids: orderIds.join(',')}, function(res){
            layui.layer.close(loadIndex);
            if(res.status == 1){
                layui.layer.msg('批量分配完成：成功' + res.data.success + '个，失败' + res.data.failed + '个', {icon: 1});
                layui.table.reload('orderTable');
            } else {
                layui.layer.msg(res.msg || '批量分配失败', {icon: 2});
            }
            layui.layer.close(index);
        }, 'json');
    });
}

// 查看订单详情
function viewOrderDetail(orderId){
    var loadIndex = layui.layer.load(2);
    $.get('{:U("RiderManage/getOrderDetail")}', {order_id: orderId}, function(res){
        layui.layer.close(loadIndex);
        if(res.status == 1){
            $('#orderDetailContent').html(res.data.html);
            layui.layer.open({
                type: 1,
                title: '订单详情',
                content: $('#orderDetailModal'),
                area: ['800px', '600px'],
                btn: false,
                shadeClose: true
            });
        } else {
            layui.layer.msg(res.msg || '获取订单详情失败', {icon: 2});
        }
    }, 'json');
}
</script>
</body>
</html>