erp_yzx/app/admin/view/customer/add.html

{include file='common/_js_css'}

<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--页面主要内容-->
        <main>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="layui-form" action="">

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("name_zh")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name_zh" lay-verify="required"
                                                   lay-reqtext="{:lang('Please fill in')}" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("name_en")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name_en" lay-verify="required"
                                                   lay-reqtext="{:lang('Please fill in')}" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("mobile")}</label>
                                        <div class="layui-input-block">
                                            <input type="tel" name="mobile" lay-verify="required|phone"
                                                   autocomplete="off" class="layui-input demo-phone layui-form-danger">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang('sex')}</label>
                                        <div class="layui-input-block">
                                            <select name="sex" lay-filter="required">
                                                <option value="1">{:lang('Man')}</option>
                                                <option value="2">{:lang('Woman')}</option>
                                                <option value="3">{:lang('Unknown')}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label">{:lang("sun_calendar")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="sun_calendar" id="sun_calendar"
                                                   lay-verify="required" placeholder="yyyy-MM-dd H:i:s"
                                                   autocomplete="off" class="layui-input" lay-key="1">
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <label class="layui-form-label">{:lang("lunar_calendar")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="lunar_calendar" id="lunar_calendar"
                                                   lay-verify="required" placeholder="yyyy-MM-dd H:i:s"
                                                   autocomplete="off" class="layui-input" lay-key="1">
                                        </div>
                                    </div>

                                    <div class="layui-form-item unfold_ajax">
                                        <label class="layui-form-label">{:lang('Counselor')}</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="ajax_search_id" name="follow_user_id"
                                                   class="layui-input"
                                                   placeholder="{:lang('Please enter employee nickname or ID and press Enter to search')}"
                                                   style="position:absolute;z-index:2;width:88%;" value=""
                                                   autocomplete="off">
                                            <select id="ajax_search" name="follow_user_id" lay-verify="required"
                                                    lay-filter="ajax_search">
                                                <option value="">{:lang('Please enter employee nickname or ID and press
                                                    Enter to search')}
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("linkman")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="linkman" lay-verify="required"
                                                   lay-reqtext="{:lang('Please fill in')}" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("relation")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="relation" lay-verify="required"
                                                   lay-reqtext="{:lang('Please fill in')}" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("address")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="address" lay-verify="required"
                                                   lay-reqtext="{:lang('Please fill in')}" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">{:lang("email")}</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="email" lay-verify="email" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn" lay-submit=""
                                                    lay-filter="caviar_submit_btn">{:lang('Submit')}
                                            </button>
                                            <button type="reset" class="layui-btn layui-btn-primary">{:lang("Reset")}
                                            </button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script>

    // 用于缓存下拉获取的数据
    let dropData

    // 请求返回数据
    function getData(str) {
        return new Promise(resolve => {
            request("{:url('admin/admin/findAdmins')}", {"text": str}).then((data) => {
                if (data.code === 200) {
                    resolve(data.data.map(v => {
                        return {
                            value: v.id,
                            text: `【${v.id}】 ${v.nickname}`
                        }
                    }))
                }
            })
        })
    }

    $("#ajax_search_id").on("keyup", async function (e) {
        if (e.which == '13') {
            dropData = await getData($(this).val())
            innitSelect("#ajax_search", dropData)
            let form = layui.form;
            form.render()
            $(".unfold_ajax .layui-form-select").addClass("layui-form-selected")
        }
    })

    // 渲染下拉框的数据
    function innitSelect(name, data) {
        let html = ''
        if (data && data instanceof Array) {
            data.forEach(item => {
                html += "<option value=" + item.value + ">" + item.text + "</option>"
            })
        }
        $(name).html(html)
    }

    var index = parent.layer.getFrameIndex(window.name);

    layui.use(['laydate', 'form'], () => {
        const laydate = layui.laydate;
        const form = layui.form;

        form.on("select(ajax_search)", function (data) {
            let value = data.value
            let selectObj = dropData.filter(item => {
                return item.value == value
            })
            $("#ajax_search_id").val(selectObj[0].text);
        })

        form.on('submit(caviar_submit_btn)', (data) => {
            const response = request('/admin/customer/add', data.field)
            response.then((res) => {
                res.code === 200 ? layer.msg("{:lang('Succeed')}", {icon: 1, time: 500}, () => {
                    location.reload();
                }) : layer.msg(res.message, {icon: 5})
            })
            return false;
        });


        laydate.render({
            elem: '#sun_calendar',
            type: 'datetime'
        });
        laydate.render({
            elem: '#lunar_calendar',
            type: 'datetime'
        });
    });
</script>