Kamixitong/app/web/templates/product/edit.html

{% extends "base.html" %}

{% block title %}编辑产品 - 软件授权管理系统{% endblock %}

{% block page_title %}编辑产品{% endblock %}

{% block page_actions %}
<a href="{{ url_for('web.product_detail', product_id=product.product_id) }}" class="btn btn-outline-secondary">
    <i class="fas fa-arrow-left me-2"></i>
    返回详情
</a>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-body">
                <form id="product-form">
                    <input type="hidden" id="product_id" value="{{ product.product_id }}">
                    
                    <div class="mb-3">
                        <label for="product_name" class="form-label">产品名称 *</label>
                        <input type="text" class="form-control" id="product_name" name="product_name" value="{{ product.product_name }}" required>
                        <div class="form-text">产品的显示名称，建议使用简洁明了的名称</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">产品ID</label>
                        <input type="text" class="form-control" value="{{ product.product_id }}" disabled>
                        <div class="form-text">产品的唯一标识符，创建后不可修改</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">产品描述</label>
                        <textarea class="form-control" id="description" name="description" rows="3">{{ product.description or '' }}</textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image" class="form-label">产品图片</label>
                        <input type="file" class="form-control" id="image" name="image" accept="image/*">
                        {% if product.image_path %}
                        <div class="form-text mt-2">
                            <small>当前图片:</small><br>
                            <img src="{{ product.image_path }}" alt="产品图片" style="max-width: 200px; max-height: 150px;">
                        </div>
                        {% endif %}
                        <div class="form-text">支持 JPG、PNG、GIF 格式，建议尺寸 800x600</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">状态</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="status_enabled" value="1" {% if product.status == 1 %}checked{% endif %}>
                                <label class="form-check-label" for="status_enabled">启用</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="status_disabled" value="0" {% if product.status == 0 %}checked{% endif %}>
                                <label class="form-check-label" for="status_disabled">禁用</label>
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary" id="submit-btn">
                        <i class="fas fa-save me-2"></i>
                        <span id="submit-text">保存修改</span>
                    </button>
                    <a href="{{ url_for('web.product_detail', product_id=product.product_id) }}" class="btn btn-secondary">取消</a>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card shadow">
            <div class="card-header">
                <h6 class="mb-0">编辑说明</h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        <small>产品名称是必填项，建议使用简洁明了的名称</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        <small>产品ID创建后不可修改</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        <small>禁用产品后将无法生成新的卡密和版本</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initEventListeners();
});

// 初始化事件监听器
function initEventListeners() {
    // 表单提交
    document.getElementById('product-form').addEventListener('submit', function(e) {
        e.preventDefault();
        updateProduct();
    });
}

// 更新产品
function updateProduct() {
    const submitBtn = document.getElementById('submit-btn');
    const submitText = document.getElementById('submit-text');
    const productId = document.getElementById('product_id').value;
    
    // 获取表单数据
    const formData = new FormData();
    const productData = {
        product_name: document.getElementById('product_name').value.trim(),
        description: document.getElementById('description').value.trim(),
        status: parseInt(document.querySelector('input[name="status"]:checked').value)
    };
    
    // 添加产品数据到FormData
    formData.append('data', JSON.stringify(productData));
    
    // 添加图片文件到FormData（如果选择了新图片）
    const imageFile = document.getElementById('image').files[0];
    if (imageFile) {
        formData.append('image', imageFile);
    }
    
    // 基础验证
    if (!productData.product_name) {
        showNotification('请输入产品名称', 'warning');
        return;
    }
    
    // 显示加载状态
    submitBtn.disabled = true;
    submitText.textContent = '保存中...';
    
    // 发送请求
    apiRequest(`/api/v1/products/${productId}`, {
        method: 'PUT',
        body: formData
    })
    .then(response => {
        if (response.status === 401) {
            window.location.href = '/login';
            throw new Error('未授权访问');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showNotification('产品更新成功', 'success');
            // 延迟跳转到产品详情
            setTimeout(() => {
                window.location.href = `/products/${productId}`;
            }, 1500);
        } else {
            showNotification(data.message || '更新失败', 'error');
        }
    })
    .catch(error => {
        console.error('Failed to update product:', error);
        showNotification('网络错误，请稍后重试', 'error');
    })
    .finally(() => {
        // 恢复按钮状态
        submitBtn.disabled = false;
        submitText.textContent = '保存修改';
    });
}
</script>
{% endblock %}