erp_yzx/app/admin/view/product/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">

                  <div class="layui-form-item">
                    <label class="layui-form-label">{:lang("Bar code")}</label>
                    <div class="layui-input-block">
                      <input type="text" name="bar_code" 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")}</label>
                    <div class="layui-input-block">
                      <input type="text" name="name" 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("Image")}</label>
                    <div class="layui-input-block">
                      <button type="button" class="layui-btn" id="upload_img">
                        <i class="layui-icon">&#xe67c;</i>{:lang("Upload")}
                      </button>
                      <input class="image_input" name="image" lay-verify="required" lay-reqtext="{:lang('Please upload pictures.')}" autocomplete="off" class="layui-input" hidden>
                      <img class="img_view" style="height: 200px;width: 250px" hidden>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">{:lang("Is Serve")}</label>
                    <div class="layui-input-block">
                      <input type="radio" name="is_serve" value="0" title="{:lang('Product')}" checked="">
                      <div class="layui-unselect layui-form-radio layui-form-radioed">
                        <i class="layui-anim layui-icon"></i>
                      </div>
                      <input type="radio" name="is_serve" value="1" title={:lang('Serve')}>
                      <div class="layui-unselect layui-form-radio">
                        <i class="layui-anim layui-icon"></i>
                      </div>
                      </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">{:lang('Category')}</label>
                    <div class="layui-input-block">
                      <select name="category_id" lay-filter="required">
                        {volist name="all_category" id="item"}
                        <option value="{$item.id}" >{$item.name}</option>
                        {volist name='$item.children' id='tree_vo'}
                        <option value="{$tree_vo.id}">&nbsp;&nbsp;| --&nbsp;{$tree_vo.name}</option>
                        {volist name='$tree_vo.children' id='tree_one_vo'}
                        <option value="{$tree_one_vo.id}">&nbsp;&nbsp;| --&nbsp;&nbsp;| --&nbsp;{$tree_one_vo.name}</option>
                        {/volist}
                        {/volist}
                        {/volist}
                      </select>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">{:lang("Purchase price")}</label>
                    <div class="layui-input-block">
                      <input type="number" name="purchase_price" 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("Selling price")}</label>
                    <div class="layui-input-block">
                      <input type="number" name="selling_price" 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="submit" 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>

  //当你在iframe页面关闭自身时
  // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  // parent.layer.close(index); //再执行关闭
  layui.use(['laydate','form','upload'], () => {
    const laydate = layui.laydate;
    const form = layui.form;

    const upload = layui.upload;

    //执行实例
    upload.render({
      elem: '#upload_img' //绑定元素
      ,url: '/admin/product/upload'
      ,done: function(res){
        console.log(res);
        if(res.code === 200) {
          $(".image_input").attr("value", res.data);
          $(".img_view").attr('src', res.data)
          $('.img_view').css('display','block');
        } else {
          layer.message(res.message, {icon: 5});
        }
        return false;
      }
      ,error: function(){
        //请求异常回调
      }
    });

    form.on('submit(caviar_submit_btn)', (data) =>{
      const response = request('/admin/product/add',data.field)
      response.then((res) => {
        console.log(res);
          res.code === 200 ? layer.msg("{:lang('Succeed')}", {icon: 1,time:500},() => {
            parent.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>