erp_yzx/app/admin/view/stock/edit.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">
                                    <input type="number" name="id" value="{$relation.id}" hidden>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang('Store')}</label>
                                        <div class="layui-input-block">
                                            <select disabled name="store_id" lay-filter="required">
                                                {volist name="stores" id="item"}
                                                <option value="{$item.id}" {if $relation.store_id == $item.id} selected {/if} >{$item.name}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang('Product')}</label>
                                        <div class="layui-input-block unfold_product">
                                            <input disabled type="text" name="product_id" id="product_id" class="layui-input"
                                                   placeholder="{:lang('Enter the product name or number and press Enter to select the product')}" style="position:absolute;z-index:2;width:88%;" value="{$relation.product_name}" autocomplete="off">
                                            <select id="product_select" placeholder="1" name="product_id" lay-verify="required" lay-filter="product_select" >
                                                <option value="{$relation.product_id}" selected>【{$relation.product_id}】 {$relation.product_name}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("Stock")}</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="now_stock" value="{$relation.now_stock}" lay-verify="required" lay-reqtext="{:lang('Please fill in')}" autocomplete="off" class="layui-input">
                                        </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){
        console.log(str);
        return new Promise(resolve=>{
            request("{:url('admin/product/findProducts')}", {"text": str}).then((data) => {
                console.log(data)
                if (data.code === 200) {
                    resolve(data.data.map(v => {
                        return {
                            value: v.id,
                            text: `【${v.bar_code}】 ${v.name}`
                        }
                    }))
                }
            })
        })
    }

    $("#product_id").on("keyup", async function(e){
        // 点击enter实现搜索功能
        if(e.which=='13'){
            // console.log("点击了enter",$(this).val())
            // 模拟请求获取下拉菜单所需的参数
            dropData=await getData($(this).val())
            console.log("下拉菜单的数据：",dropData)
            // 将获取回来的数据渲染给下拉菜单
            innitSelect("#product_select", dropData)
            let form = layui.form;
            form.render()
            // 将下拉框展开
            $(".unfold_product .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)
    }


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

        // 监听下拉框改变事件,修改输入框中的内容
        form.on("select(product_select)",function(data){
            let value=data.value
            let selectObj=dropData.filter(item=>{
                return item.value == value
            })
            $("#product_id").val(selectObj[0].text);
            console.log($("#product_id").val(selectObj[0].text))
        })

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