mashangyoujiu/Application/Retail/View/RiderOrder/assign.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>分配骑手</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui-v2.4.3/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css?v=2.13.2">
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js?v=2.13.2"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
    <style>
        body { margin: 0; padding: 20px; background: #f5f7fa; }
        .rider-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .rider-name {
            font-weight: 500;
            color: #303133;
        }
        .rider-phone {
            color: #909399;
            font-size: 12px;
        }
        .search-tip {
            color: #909399;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
    <script>
        function closeMe() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
        function getQueryParam(name) {
            var results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
            return results ? decodeURIComponent(results[1]) : null;
        }
    </script>
</head>
<body>
<div id="AssignRiderApp" v-cloak>
    <div class="form-section">
        <el-form :model="form" label-width="70px">
            <el-form-item label="可选骑手">
                <el-select 
                    v-model="form.riderId" 
                    placeholder="请输入骑手姓名或手机号搜索" 
                    style="width: 100%"
                    filterable
                    remote
                    :remote-method="searchRiders"
                    :loading="searchLoading"
                    clearable
                    @clear="handleClear"
                >
                    <el-option 
                        v-for="r in filteredRiders" 
                        :key="r.id" 
                        :label="`${r.name} (${r.phone})`"
                        :value="r.id"
                    >
                        <span style="float: left">{{ r.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ r.phone }}</span>
                    </el-option>
                    <div v-if="filteredRiders.length === 0 && searchKeyword" style="text-align: center; padding: 10px; color: #999;">
                        未找到匹配的骑手
                    </div>
                </el-select>
                <div class="search-tip">请输入至少2个字符进行搜索，支持按姓名或手机号查找</div>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
            <div style="text-align: center; margin-top: 20px;">
                <el-button @click="closeLayer">取 消</el-button>
                <el-button type="primary" @click="submitAssign" :loading="assigning">确 定</el-button>
            </div>
        </el-form>
    </div>
</div>

<script>
new Vue({
    el: '#AssignRiderApp',
    data() {
        return {
            assigning: false,
            searchLoading: false,
            orderId: null,
            form: { riderId: '', remark: '' },
            riders: [],
            filteredRiders: [],
            searchKeyword: '',
            searchTimer: null
        }
    },
    mounted() {
        const id = getQueryParam('id');
        if (id) {
            this.orderId = id;
            this.loadAvailableRiders(id);
        }
    },
    methods: {
        async loadAvailableRiders(orderId) {
            try {
                // 初始加载时不显示任何骑手，需要用户搜索
                this.riders = [];
                this.filteredRiders = [];
            } catch (e) {
                console.error('初始化异常:', e);
            }
        },

        // 搜索骑手
        searchRiders(keyword) {
            this.searchKeyword = keyword;
            if (this.searchTimer) {
                clearTimeout(this.searchTimer);
            }
            
            if (!keyword || keyword.trim().length < 2) {
                this.filteredRiders = [];
                return;
            }
            
            // 防抖处理，避免频繁请求
            this.searchTimer = setTimeout(() => {
                this.performSearch(keyword.trim());
            }, 300);
        },

        // 执行搜索
        async performSearch(keyword) {
            this.searchLoading = true;
            try {
                const res = await $.ajax({
                    url: '/Retail/Rider/searchRiders',
                    type: 'POST',
                    data: { 
                        keyword: keyword,
                        page: 1, 
                        size: 20  // 限制搜索结果数量
                    },
                    dataType: 'json'
                });
                
                if (res.code === 1) {
                    this.filteredRiders = (res.data && res.data.list) ? res.data.list.map(item => ({
                        id: item.id || item.rider_id,
                        name: item.rider_name || item.name || ('骑手' + (item.id || '')),
                        phone: item.rider_phone || item.phone || '',
                        status: item.work_status || item.status || 'offline'
                    })) : [];
                } else {
                    this.filteredRiders = [];
                    if (keyword.length >= 2) {
                        this.$message.warning(res.msg || '搜索失败');
                    }
                }
            } catch (e) {
                console.error('搜索骑手异常:', e);
                this.filteredRiders = [];
                this.$message.error('搜索失败，请重试');
            } finally {
                this.searchLoading = false;
            }
        },

        // 清空搜索
        handleClear() {
            this.searchKeyword = '';
            this.filteredRiders = [];
            this.form.riderId = '';
        },
        async submitAssign() {
            if (!this.form.riderId) {
                this.$message.warning('请选择骑手');
                return;
            }
            this.assigning = true;
            try {
                const res = await $.ajax({
                    url: '/Retail/RiderOrder/assignRider',
                    type: 'POST',
                    data: { orderId: this.orderId, riderId: this.form.riderId, remark: this.form.remark },
                    dataType: 'json'
                });
                if (res.code === 1) {
                    this.$message.success('分配成功');
                    // 通知父页刷新
                    if (parent && parent.location) {
                        try { parent.vm && parent.vm.loadOrders && parent.vm.loadOrders(); } catch (e) {}
                    }
                    closeMe();
                } else {
                    this.$message.error(res.msg || '分配失败');
                }
            } catch (e) {
                console.error('分配失败异常:', e);
                this.$message.error('网络错误，请重试');
            } finally {
                this.assigning = false;
            }
        },
        closeLayer() { closeMe(); }
    }
});
</script>
</body>
</html>