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>