projectmanager/app/download/view/index/edit.html

<form class="layui-form page-content p-4">
    <h3 class="h3-title">软件信息</h3>
    <input type="hidden" value="{$detail.id}" id="id">
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray-2">软件名称<font>*</font>
            </td>
            <td>
                <input type="text" id="name" name="name" lay-verify="required" lay-reqText="请输入软件名称"
                    placeholder="请输入软件名称" class="layui-input" value="{$detail.name}" />
            </td>
            <td class="layui-td-gray-2">软件分类
            </td>
            <td>
                <select name="cid" id="cid" lay-verify="" lay-reqText="请选择软件分类" class="layui-select" lay-search=""
                    lay-filter="cid">
                    <!-- 分类选项会通过 JavaScript 动态加载 -->
                </select>
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">软件版本
            </td>
            <td>
                <input type="text" name="version" lay-reqText="请输入软件版本" placeholder="请输入软件版本" class="layui-input"
                    value="{$detail.version}" />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">上传文件</td>
            <td>
                <button type="button" class="layui-btn demo-class-accept" id="Uploadfiles">
                    <i class="layui-icon layui-icon-upload"></i>
                    上传文件
                </button>
            </td>
            <td class="layui-td-gray-2">文件路径</td>
            <td>
                <input type="text" name="path" placeholder="文件路径" class="layui-input" value="{$detail.path}" readonly />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">文件类型
            </td>
            <td>
                <input type="text" name="type" class="layui-input" value="{$detail.type}" readonly />
            </td>
            <td class="layui-td-gray-2">文件大小</td>
            <td>
                <input type="text" name="size" class="layui-input" value="{$detail.size}" readonly />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">下载链接
            </td>
            <td>
                <input type="text" name="download_url" lay-reqText="请输入下载链接" placeholder="请输入下载链接" class="layui-input"
                    value="{$detail.download_url}" />
            </td>
            <td class="layui-td-gray-2">分享码</td>
            <td>
                <input type="text" name="download_code" lay-reqText="请输入分享码" placeholder="请输入分享码" class="layui-input"
                    value="{$detail.download_code}" />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">软件描述
            </td>
            <td colspan="4">
                <!-- 修复 textarea 的值绑定 -->
                <textarea name="description" placeholder="请输入软件描述"
                    class="layui-textarea">{$detail.description}</textarea>
            </td>
        </tr>
    </table>

    <div class="pt-1">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
            立即提交
        </button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<script>
    layui.use(["form", "layer", "upload"], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        var selectedFile = null; // 用于存储选择的文件

        // 上传文件逻辑
        upload.render({
            elem: '#Uploadfiles', // 上传按钮
            url: '/api/index/upload_files', // 上传接口
            accept: 'file', // 接收任意文件类型
            exts: 'exe|zip|rar|7z', // 限制文件类型
            auto: true, // 自动上传
            done: function (res) {
                if (res.code === 200) {
                    // 上传成功后，将返回的文件路径设置到输入框中
                    document.querySelector('input[name="path"]').value = res.filepath;
                    layer.msg('文件上传成功');
                } else {
                    layer.msg('文件上传失败：' + res.msg);
                }
            },
            error: function () {
                layer.msg('上传接口异常');
            }
        });

        form.render();


        // 获取当前时间并格式化
        var updateTime = new Date().toISOString();
        var idValue = document.getElementById('id').value;
        console.log(idValue);

        // 软件分类加载
        fetch("/download/index/catelist")
            .then((response) => response.json())
            .then((result) => {
                var select = document.getElementById('cid');
                select.innerHTML = '<option value="">请选择软件类别</option>';

                if (result.code === 0 && Array.isArray(result.data)) {
                    results = result.data;
                    results.forEach((item) => {
                        var option = document.createElement("option");
                        option.value = item.id;
                        option.innerText = item.name;
                        if (item.id == "{$detail.cid}") {
                            option.selected = true;
                        }
                        select.appendChild(option);
                    });
                } else {
                    console.error("意外的响应格式:", result);
                }

                form.render("select");
            })
            .catch((error) => {
                console.error("Error:", error);
            });

        // 监听提交事件
        form.on("submit(webform)", function (data) {
            // 发送请求并处理响应
            fetch("/download/index/edit?id=" + idValue, {
                method: "POST",
                body: JSON.stringify({
                    id: document.getElementById('id').value,
                    name: document.getElementById('name').value,
                    cid: document.querySelector('select[name="cid"]').value,
                    version: document.querySelector('input[name="version"]').value,
                    path: document.querySelector('input[name="path"]').value,
                    download_url: document.querySelector('input[name="download_url"]').value,
                    download_code: document.querySelector('input[name="download_code"]').value,
                    description: document.querySelector('textarea[name="description"]').value,
                    update_time: updateTime,
                }),

                headers: {
                    "Content-Type": "application/json",
                },
            })
                .then((response) => response.json())
                .then((result) => {
                    layer.msg(result.msg);
                    if (result.code === 2) {
                        setTimeout(function () {
                            // document.querySelector("form").reset();
                            // location.reload(); // 刷新页面
                        }, 1000);
                    }
                });

            return false;
        });
    });
</script>