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

{include file='common/_js_css'}

<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <ul class="nav nav-tabs page-tabs">
          <li class="active"> <a href="{:url('admin/customer/edit')}?id={$customer.id}">{:lang("Base")}</a> </li>
          <li> <a href="#">{:lang("Order Data")}</a> </li>
<!--          <li> <a href="lyear_pages_config_upload.html">上传</a> </li>-->
        </ul>
        <div class="tab-content">
          <div class="tab-pane active">
            <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 name="id" value="{$customer.id}" hidden>
                  <input type="text" name="name_zh" lay-verify="required" lay-reqtext="{:lang('Please fill in')}" value="{$customer.name_zh}" 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')}"  value="{$customer.name_en}" 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"  value="{$customer.mobile}" 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" {if $customer.sex == 1} selected {/if}>{:lang('Man')}</option>
                    <option value="2" {if $customer.sex == 2} selected {/if}>{:lang('Woman')}</option>
                    <option value="3" {if $customer.sex == 3} selected {/if}>{: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" value="{$customer.sun_calendar}" lay-verify="datetime" placeholder="yyyy-MM-dd" 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" value="{$customer.lunar_calendar}" lay-verify="datetime" placeholder="yyyy-MM-dd" 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" value="【{$customer.follow_user_id}】{$customer.follow_username}" 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>
              <input id="follow_user_id" name="follow_user_id" value="{$customer.follow_user_id}" hidden>

              <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" value="{$customer.linkman}" 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" value="{$customer.relation}" 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" value="{$customer.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" value="{$customer.email}" lay-verify="email" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">{:lang('Store')}</label>
                <div class="layui-input-block">
                  <select name="store_id" lay-filter="required" disabled>
                    {volist name="stores" id="item"}
                    <option value="{$item.id}" {if $customer.store_id == $item.id} selected {/if}> {$item.name} </option>
                    {/volist}
                  </select>
                </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('Update')}</button>
                </div>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>

  </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)
  }

  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);
      $("#follow_user_id").val(selectObj[0].value);
    })

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


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