xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

shit layui

https://www.layui.com/doc/modules/form.html#onselect

https://www.layui.com/doc/element/form.html#select

select & re-render bug

form.render("select");

let jsonObj = {};

const editProject = () => {
    let reset = document.querySelector(`button[type="reset"]`);
    layui.use("form", function() {
        let form = layui.form,
            layer = layui.layer;
        // init select
        form.render("select");
        form.on('submit(formDemo)', function(data) {
            let {
                user_name,
                role,
                password,
                email,
            } = data.field;
            let query_obj = {
                user_name,
                role,
                password
            };
            // filter
            if (email) {
                query_obj.email = email;
            }
            let url = `${fetchIP}/http/sign/updateuser?${encodeURIComponent(JSON.stringify(query_obj))}`;
            getDatas(url).then(json => {
                // loading
                let loadingIndex = layer.load(1, {
                    time: 1*1000,
                });
                let resetButton = document.querySelector(`button[type="reset"]`);
                setTimeout(() => {
                    layer.close(loadingIndex);
                    if (json.success) {
                        layer.close(modalIndex);
                        swal({
                            title: "修改服务成功!",
                            text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
                            icon: "success",
                            // button: "关闭",
                            buttons: false,
                            timer: 3000,
                        });
                        resetButton.click();
                        loadList();
                    } else {
                        swal({
                            title: "修改服务失败!",
                            text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
                            icon: "error",
                            // button: "关闭",
                            buttons: false,
                            timer: 3000,
                        });
                    }
                }, 1000);
                // reset
                reset.click();
            }).catch(err  => console.log(`error`, err));
            return false;
        });
        let {
            user_name,
            role,
            // password,
            email,
            // role_desc,
        } = jsonObj;
        let input_name = document.querySelector(`input[name="user_name"]`),
            input_role = document.querySelector(`select[name="role"]`),
            input_email = document.querySelector(`input[name="email"]`);
        input_name.value = `${user_name}`;
        input_name.setAttribute(`disabled`, `disabled`);
        // input_name.setAttribute(`readonly`, `readonly`);
        input_email.value = `${email}`;
        input_role.value = `${role}`;
        // update select
        form.render("select");
    });
};

---

shit layui & px

https://www.layui.com/doc/modules/layer.html#area

area: ["800px", "400px"],

const showAddFormModal = (addProject, title = "增加用户") => {
    // DOM
    layui.use("layer", function() {
        let layer = layui.layer;
        // 修改
        // <option value="Admin">管理员</option>
        modalIndex = layer.open({
            title: `<h3>${title}</h3>`,
            content: `
                <section data-box="form-box">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="用户名">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="user_name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="角色类型">角色类型</label>
                            <div class="layui-input-block">
                                <select name="role" lay-verify="required" lay-filter="project-type" lay-search>
                                    <option value="Developer">开发</option>
                                    <option value="Operator">配管</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="密码">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="邮箱">邮箱</label>
                            <div class="layui-input-block">
                                <input type="email" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </section>
            `,
            area: ["800px", "400px"],
            btn: [],
            type: 1,
            success: function(layero, index){
                addProject();
            },
        });
    });
};

---

async & delay bug

    // async & delay bug
    setTimeout(() => {
        input_role.value = `${role}`;
        // update select
        console.log(`render select 3`);
        form.render("select");
    }, 100);

const editProject = () => {
    let reset = document.querySelector(`button[type="reset"]`);
    layui.use("form", function() {
        let form = layui.form,
            layer = layui.layer;
        // init select
        console.log(`render select 1`);
        form.render("select");
        fetchJSON(`${FetchIP}/http/sign/roles`).then(json => {
            let select = document.querySelector(`[lay-filter="project-type"]`);
            let html = ``;
            if (json.success) {
                const obj = json.data;
                let keys = Object.keys(obj);
                let newObj = {};
                keys.forEach(
                    (key, i) => {
                        if (key !== "Admin") {
                            let value = obj[key].name;
                            newObj[key] = value;
                            html += `<option value="${key}">${value}</option>`;
                            // html += `<option value="Complex">综合</option>`;
                        } else {
                            // no need Admin
                        }
                    }
                );
                // console.log(`new options =`, JSON.stringify(newObj, null, 4));
                select.innerHTML = "";
                select.insertAdjacentHTML(`beforeend`, html);
                console.log(`render select 2`);
                form.render("select");
            } else {
                html += `
                    <option value="Developer">开发</option>
                    <option value="Operator">配管</option>
                    <option value="Complex">综合</option>
                `;
                select.innerHTML = "";
                select.insertAdjacentHTML(`beforeend`, html);
                console.log(`render select 4`);
                form.render("select");
            }
        }).catch(err  => console.log(`error`, err));
        form.on('submit(formDemo)', function(data) {
            let {
                user_name,
                role,
                password,
                email,
            } = data.field;
            let query_obj = {
                user_name,
                role,
                password
            };
            // filter
            if (email) {
                query_obj.email = email;
            }
            let url = `${fetchIP}/http/sign/updateuser?${encodeURIComponent(JSON.stringify(query_obj))}`;
            getDatas(url).then(json => {
                // loading
                let loadingIndex = layer.load(1, {
                    time: 1*1000,
                });
                let resetButton = document.querySelector(`button[type="reset"]`);
                setTimeout(() => {
                    layer.close(loadingIndex);
                    if (json.success) {
                        layer.close(modalIndex);
                        swal({
                            title: "修改服务成功!",
                            text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
                            icon: "success",
                            // button: "关闭",
                            buttons: false,
                            timer: 3000,
                        });
                        resetButton.click();
                        loadList();
                    } else {
                        swal({
                            title: "修改服务失败!",
                            text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
                            icon: "error",
                            // button: "关闭",
                            buttons: false,
                            timer: 3000,
                        });
                    }
                }, 1000);
                // reset
                reset.click();
            }).catch(err  => console.log(`error`, err));
            return false;
        });
        let {
            user_name,
            role,
            // password,
            email,
            // role_desc,
        } = jsonObj;
        console.log(`user infos =`, JSON.stringify(jsonObj, null, 4));
        let input_name = document.querySelector(`input[name="user_name"]`),
            input_role = document.querySelector(`select[name="role"]`),
            input_email = document.querySelector(`input[name="email"]`);
        input_name.value = `${user_name}`;
        input_name.setAttribute(`disabled`, `disabled`);
        // input_name.setAttribute(`readonly`, `readonly`);
        if (email) {
            input_email.value = `${email}`;
        }
        // async & delay bug
        setTimeout(() => {
            input_role.value = `${role}`;
            // update select
            console.log(`render select 3`);
            form.render("select");
        }, 100);
    });
};

---