TestLogs/LTEMvcApp/Views/Home/NetworkConfig.cshtml

@{
    ViewData["Title"] = "网络配置管理";
    var ip = Context.Request.Query["ip"].ToString();
    var port = Context.Request.Query["port"].ToString();
}

<style>
    .network-config-table th {
        background: #f5faff;
        color: #1976d2;
        font-weight: bold;
        text-align: center;
    }
    .network-config-table td {
        vertical-align: middle;
        text-align: center;
    }
    .network-config-table .btn {
        margin: 0 2px;
    }
    .alert-service-check {
        background: #fffbe6;
        color: #856404;
        border: 1px solid #ffeeba;
        margin-top: 10px;
        font-size: 1.05em;
    }
</style>

<div class="container mt-4">
    <h2>
        <i class="fas fa-network-wired text-primary"></i>
        网络配置管理
        <span class="text-info" style="font-size:1.1em;">@ip:@port</span>
    </h2>

    <!-- 添加网络配置表单 -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <i class="fas fa-plus-circle"></i> 添加网络配置
        </div>
        <div class="card-body">
            <form id="addConfigForm" class="mb-0">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Key</label>
                        <input type="text" class="form-control" name="configKey" required />
                    </div>
                    <div class="form-group col-md-6">
                        <label>RagConfig</label>
                        <input type="text" class="form-control" name="ragConfig" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>APN</label>
                        <input type="text" class="form-control" name="apn" />
                    </div>
                    <div class="form-group col-md-6">
                        <label>Band(逗号分隔)</label>
                        <input type="text" class="form-control" name="band" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label>Comment</label>
                        <input type="text" class="form-control" name="comment" />
                    </div>
                </div>
                <div class="form-group">
                    <label>Core/IMS 配置</label>
                    <table class="table table-sm table-bordered" id="coreOrImsTable">
                        <thead>
                            <tr>
                                <th style="width:60px;">Index</th>
                                <th style="width:100px;">PLMN</th>
                                <th>CoreNetworkConfig</th>
                                <th>IMSConfig</th>
                                <th style="width:50px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="addCoreOrImsRow()">
                        <i class="fas fa-plus"></i> 添加一行
                    </button>
                </div>
                <button type="button" class="btn btn-primary" onclick="submitAddConfig()">
                    <i class="fas fa-check"></i> 添加
                </button>
            </form>
        </div>
    </div>

    <div id="configTableContainer">
        <!-- 配置表格将由JS动态填充 -->
    </div>
</div>

@section Scripts {
<script>
const ip = '@ip';
const port = '@port';

$(function() {
    loadNetworkConfigs();
    addCoreOrImsRow();
});

function loadNetworkConfigs() {
    if (!ip || !port) {
        $('#configTableContainer').html('<div class="alert alert-info">未指定Agent</div>');
        return;
    }
    $.ajax({
        url: '/api/ipgroup/network-config',
        type: 'GET',
        data: { ip, port },
        success: function(res) {
            if (res.isSuccess && res.data) {
                renderConfigTable(res.data);
            } else {
                $('#configTableContainer').html('<div class="alert alert-warning">加载失败</div>');
            }
        },
        error: function() {
            $('#configTableContainer').html('<div class="alert alert-danger">加载失败</div>');
        }
    });
}

function renderConfigTable(data) {
    let html = `<table class="table table-bordered network-config-table"><thead><tr>
        <th>Key</th><th>APN</th><th>Band</th><th>Comment</th><th>操作</th>
    </tr></thead><tbody>`;
    if (data.length === 0) {
        html += '<tr><td colspan="5" class="text-center text-muted">暂无数据</td></tr>';
        html += `<tr><td colspan="5" class="alert-service-check">
            <i class="fas fa-exclamation-circle"></i> 服务是否正常？请检查Agent服务和网络配置接口是否可用。
        </td></tr>`;
    } else {
        data.forEach(item => {
            html += `<tr>
                <td>${item.configKey}</td>
                <td>${item.apn || ''}</td>
                <td>${item.band ? item.band.join(',') : ''}</td>
                <td>${item.comment || ''}</td>
                <td>
                    <button class="btn btn-danger btn-sm" onclick="deleteConfig('${item.configKey}')" title="删除">
                        <i class='fas fa-trash'></i>
                    </button>
                </td>
            </tr>`;
        });
    }
    html += '</tbody></table>';
    $('#configTableContainer').html(html);
}

function addCoreOrImsRow(data) {
    let row = `<tr>
        <td><input type="number" class="form-control form-control-sm" name="coreIndex" value="${data?.index ?? ''}" /></td>
        <td><input type="text" class="form-control form-control-sm" name="corePlmn" value="${data?.plmn ?? ''}" /></td>
        <td><input type="text" class="form-control form-control-sm" name="coreNetworkConfig" value="${data?.coreNetworkConfig ?? ''}" /></td>
        <td><input type="text" class="form-control form-control-sm" name="imsConfig" value="${data?.imsConfig ?? ''}" /></td>
        <td>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeCoreOrImsRow(this)">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>`;
    $('#coreOrImsTable tbody').append(row);
}

function removeCoreOrImsRow(btn) {
    $(btn).closest('tr').remove();
    // 至少保留一行
    if ($('#coreOrImsTable tbody tr').length === 0) {
        addCoreOrImsRow();
    }
}

function getCoreOrImsConfigs() {
    let arr = [];
    $('#coreOrImsTable tbody tr').each(function() {
        arr.push({
            index: parseInt($(this).find('[name="coreIndex"]').val()) || 0,
            plmn: $(this).find('[name="corePlmn"]').val(),
            coreNetworkConfig: $(this).find('[name="coreNetworkConfig"]').val(),
            imsConfig: $(this).find('[name="imsConfig"]').val()
        });
    });
    return arr;
}

function submitAddConfig() {
    const form = $('#addConfigForm');
    const data = {
        configKey: form.find('[name="configKey"]').val(),
        ragConfig: form.find('[name="ragConfig"]').val(),
        apn: form.find('[name="apn"]').val(),
        band: form.find('[name="band"]').val().split(',').map(x => x.trim()).filter(x => x),
        comment: form.find('[name="comment"]').val(),
        coreOrImsConfigs: getCoreOrImsConfigs()
    };
    $.ajax({
        url: `/api/ipgroup/network-config?ip=${ip}&port=${port}`,
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(res) {
            form[0].reset();
            $('#coreOrImsTable tbody').empty();
            addCoreOrImsRow();
            loadNetworkConfigs();
        },
        error: function() {
            alert('添加失败');
        }
    });
}

function deleteConfig(configKey) {
    if (!confirm('确定要删除该配置吗？')) return;
    $.ajax({
        url: `/api/ipgroup/network-config/${encodeURIComponent(configKey)}?ip=${ip}&port=${port}`,
        type: 'DELETE',
        success: function() {
            loadNetworkConfigs();
        },
        error: function() {
            alert('删除失败');
        }
    });
}
</script>
}