cursoradminapiformjifengqiang/app/manager/view/version/form.html

{extend name="../../admin/view/main"}

{block name="content"}
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">版本号</label>
            <div class="layui-input-block">
                <input name="version_no" value='{$vo.version_no|default=""}' required placeholder="请输入版本号(x.x.x)" class="layui-input">
                <tip>版本号格式为: 主版本号.次版本号.修订号，如: 1.0.0</tip>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">版本名称</label>
            <div class="layui-input-block">
                <input name="version_name" value='{$vo.version_name|default=""}' required placeholder="请输入版本名称" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">更新包</label>
            <div class="layui-input-block">
                <input type="hidden" name="download_url" value="{$vo.download_url|default=''}" class="layui-input">
                
                <div class="layui-upload-drag" id="uploadBtn">
                    <i class="layui-icon layui-icon-upload"></i>
                    <div class="upload-title">点击上传或拖拽文件到此处</div>
                    <div class="upload-tips">支持的文件类型: zip, exe, dmg, pkg, deb, rpm</div>
                </div>
                <div class="upload-info" style="margin-top: 10px;display:none;">
                    <div class="layui-progress layui-progress-big" lay-filter="uploadProgress" lay-showpercent="true">
                        <div class="layui-progress-bar" lay-percent="0%"></div>
                    </div>
                    <div class="file-info" style="margin-top: 10px;"></div>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">平台</label>
            <div class="layui-input-block">
                <select name="platform" lay-verify="required">
                    <option value="all" {if isset($vo.platform) and $vo.platform eq 'all'}selected{/if}>全平台</option>
                    <option value="windows" {if isset($vo.platform) and $vo.platform eq 'windows'}selected{/if}>Windows</option>
                    <option value="mac" {if isset($vo.platform) and $vo.platform eq 'mac'}selected{/if}>Mac</option>
                    <option value="linux" {if isset($vo.platform) and $vo.platform eq 'linux'}selected{/if}>Linux</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">强制更新</label>
            <div class="layui-input-block">
                <input type="radio" name="is_force" value="1" title="是" {if isset($vo.is_force) and $vo.is_force eq 1}checked{/if}>
                <input type="radio" name="is_force" value="0" title="否" {if empty($vo.is_force) or $vo.is_force eq 0}checked{/if}>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">最低要求</label>
            <div class="layui-input-block">
                <input name="min_version" value='{$vo.min_version|default=""}' placeholder="请输入最低要求版本号" class="layui-input">
                <tip>如果设置了最低要求版本，低于此版本的用户需要先更新到此版本</tip>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">版本描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入版本描述" class="layui-textarea">{$vo.description|default=""}</textarea>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">更新日志</label>
            <div class="layui-input-block">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div id="logItems">
                            {notempty name="logs"}
                            {foreach $logs as $log}
                            <div class="log-item layui-form-item">
                                <div class="layui-inline" style="width:120px">
                                    <select name="logs[type][]" lay-verify="required">
                                        <option value="feature" {if $log.type eq 'feature'}selected{/if}>新功能</option>
                                        <option value="fix" {if $log.type eq 'fix'}selected{/if}>修复</option>
                                        <option value="optimize" {if $log.type eq 'optimize'}selected{/if}>优化</option>
                                    </select>
                                </div>
                                <div class="layui-inline" style="width:calc(100% - 180px)">
                                    <input type="text" name="logs[content][]" value="{$log.content}" required placeholder="请输入更新内容" class="layui-input">
                                </div>
                                <div class="layui-inline" style="width:50px">
                                    <a class="layui-btn layui-btn-danger layui-btn-sm" onclick="removeLogItem(this)">删除</a>
                                </div>
                            </div>
                            {/foreach}
                            {/notempty}
                        </div>
                        <div class="text-center padding-bottom-15">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="addLogItem()">添加更新内容</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="hr-line-dashed"></div>
    
    <div class="layui-form-item text-center">
        {notempty name='id'}<input type='hidden' value='{$id}' name='id'>{/notempty}
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-close>取消</button>
    </div>
</form>

{block name="script"}
<script>
// 添加更新日志项
function addLogItem() {
    var html = `
    <div class="log-item layui-form-item">
        <div class="layui-inline" style="width:120px">
            <select name="logs[type][]" lay-verify="required">
                <option value="feature">新功能</option>
                <option value="fix">修复</option>
                <option value="optimize">优化</option>
            </select>
        </div>
        <div class="layui-inline" style="width:calc(100% - 180px)">
            <input type="text" name="logs[content][]" required placeholder="请输入更新内容" class="layui-input">
        </div>
        <div class="layui-inline" style="width:50px">
            <a class="layui-btn layui-btn-danger layui-btn-sm" onclick="removeLogItem(this)">删除</a>
        </div>
    </div>`;
    $('#logItems').append(html);
    layui.form.render();
}

// 删除更新日志项
function removeLogItem(obj) {
    $(obj).closest('.log-item').remove();
}

// 上传更新包
layui.use(['upload', 'form', 'element'], function(){
    var upload = layui.upload;
    var form = layui.form;
    var element = layui.element;
    
    upload.render({
        elem: '#uploadBtn',
        url: '{:url("upload")}',
        accept: 'file',
        exts: 'zip|exe|dmg|pkg|deb|rpm',
        drag: true,
        before: function(){
            console.log('开始上传...');
            $('.upload-info').show();
            element.progress('uploadProgress', '0%');
            $('.file-info').html('');
        },
        progress: function(n){
            var percent = n + '%';
            console.log('上传进度:', percent);
            element.progress('uploadProgress', percent);
        },
        done: function(res){
            console.log('上传响应:', res);
            if(res.code == 0){
                // 更新表单值
                $('input[name=download_url]').val(res.data.url);
                
                // 更新顶部输入框的值
                $('input[name="version_no"]').val(res.data.version_no);
                $('input[name="version_name"]').val(res.data.version_name);
                
                // 显示文件信息
                var html = '<div class="layui-badge layui-bg-green">上传成功</div> ';
                html += '<div class="layui-inline">版本号: ' + res.data.version_no + '</div> ';
                html += '<div class="layui-inline">版本名称: ' + res.data.version_name + '</div>';
                $('.file-info').html(html);
                
                // 重新渲染表单
                form.render();
            } else {
                console.error('上传失败:', res.msg);
                $('.file-info').html('<div class="layui-badge layui-bg-red">'+res.msg+'</div>');
            }
        },
        error: function(index, upload){
            console.error('上传错误:', index, upload);
            $('.file-info').html('<div class="layui-badge layui-bg-red">上传失败</div>');
        }
    });
});
</script>

<style>
.upload-title { font-size: 16px; margin-bottom: 5px; }
.upload-tips { color: #999; font-size: 12px; }
.layui-upload-drag { padding: 30px; }
.layui-upload-drag .layui-icon { font-size: 50px; color: #009688; }
.file-info .layui-inline { margin-right: 10px; }
</style>
{/block}
{/block}