crm/app/empcrm/view/community/customer_detail.html

<!-- 客户状态页面     更改客户状态接口  empcrm/addVisitlog -->
{extend name="public/layout"}
{block name="body"}
<link rel="stylesheet" href="__LAYUI__/layui/css/layui.css" media="all">
<link rel="stylesheet" " href=" /static/css/common.css">
<script src="/static/js/jquery.min.js"></script>
<style>
  body{
    font-size: 12px;
    padding-bottom: 60px;
    background-color: #F3F3F3;
  }
  div,span{
    box-sizing: unset;
  }
  .topbox{
    display: block;
    width: 900px;
    margin: 10px auto 10px;
    border-bottom: 1px solid #F0F0F0;
    background: #FCFCFC;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    text-indent: 5px;
    font-family: Arial;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: unset;
  }
  .rightit{
    font-size: 12px;
    font-weight: normal;
    margin-right: 15px;
    color: #000;
  }
  .rightit button{
    cursor: pointer;
    color: #000;
    background: url(__STATIC__/img/btn_bg.gif) repeat-x;
    border: 1px solid #C0C0C0;
    padding: 0 12px;
    *padding: 0 6px;
    height: 28px;
    position: relative;
    top: 3px;
  }
  .table1{
    width:900px;
    table-layout: fixed;
    border: 1px solid #DFDFDF;
    border-collapse: separate !important;
    background-color: #FFF;
    border-right: 0;
    border-bottom: 2px solid #DFDFDF;
    font-size:13px; 
    margin:10px auto;
  }
  th {
    background-color: #F2F3F7;
    border-right: 1px solid #DFDFDF;
    border-bottom: 1px solid #DFDFDF;
    line-height: 25px;
    padding: 5px;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
    color: #333;
  }
  td {
    border-right: 1px solid #DFDFDF;
    border-bottom: 1px solid #EAEAEC;
    padding: 7px;
    line-height: 25px;
    font-size: 13px;
    position: relative;
  }
  .everycrmbox{
    display: block;
    width: 900px;
    background: #FCFCFC;
    margin: 25px auto 0;
  }
  .crmtit{
    border: 1px solid #F0F0F0;
    background: #FCFCFC;
    width: 100%;
    line-height: 35px;
    font-weight: bold;
    font-size: 14px;
    text-indent: 5px;
    padding: 6px 0;
    margin-top: 25px;
    letter-spacing: 1px;
  }
  .foldbtn{
    display: block;
    font-weight: 500;
    cursor: pointer;
  }
  .foldbtn:hover{
    text-decoration: underline
  }
  .meetbox{
    border: 1px solid #DFDFDF;
    background-color: #FFF;
    border-bottom: 2px solid #DFDFDF;
  }
  .leftext{
    display: block;
    border-right: 1px solid #DFDFDF;
    border-bottom: 1px solid #EAEAEC;
    padding: 7px;
    line-height: 25px;
    background-color: #f0f8ff;
    font-size: 14px;
    text-align: center;
    position: relative;
    width: 80px;
    height: 32px;
  }
  .omeetbox{
    display: block;
    border-right: 1px solid #DFDFDF;
    border-bottom: 1px solid #EAEAEC;
    padding: 7px;
    line-height: 25px;
    font-size: 13px;
    position: relative;
    width: 788px;
  }
  .txtbox {
    border: 1px solid #ccc;
    background: #fff url(__STATIC__/img/icon071402.png) no-repeat;
    padding: 1px 2px;
    height: 28px;
    line-height: 24px;
    vertical-align: middle;
    text-indent: 3px;
  }
  .submitbtn{
    display: block;
    margin-left: 20px;
    cursor: pointer;
    color: #000;
    background: url(__STATIC__/img/btn_bg.gif) repeat-x;
    border: 1px solid #C0C0C0;
    padding: 0 12px;
    *padding: 0 6px;
    height: 28px;
    vertical-align: middle;
  }
  .maintable {
    table-layout: fixed;
    _width: 100%;
    width: 100%;
    border: 1px solid #DFDFDF;
    border-collapse: separate !important;
    background-color: #FFF;
    border-right: 0;
    border-bottom: 2px solid #DFDFDF;
  }
  .maintable th{ 
    background-color:#F2F3F7; 
    border-right:1px solid #DFDFDF; 
    border-bottom:1px solid #DFDFDF; 
    line-height:25px; padding:5px; 
    text-align:center; 
    font-family:Arial; 
    font-size:12px; 
    letter-spacing:1px; 
    color:#333
  }
  .maintable td {
    border-right: 1px solid #DFDFDF;
    border-bottom: 1px solid #EAEAEC;
    padding: 7px;
    line-height: 25px;
    font-size: 13px;
    box-sizing: content-box;
    position: relative;
  }
  .red2 {
    padding-left: 5px;
    padding-right: 5px;
    color: #FF0000;
  }
</style>
<body>
  <div class="clearfix topbox">
    <div class="left" style="color: #FF0000;">更多操作：</div>
    <div class="right rightit">
      <div class="left">点击这里返回编辑列表：</div>
      <button class="left goback" type="button">返回列表</button>
    </div>
  </div>
  <table class="table1">
    <tbody>
      <tr>
        <th>客户信息</th>
        <th>必填信息</th>
      </tr>
      <tr>
        <td>
          客户姓名：<span class="red">{$data.name}</span>&nbsp;&nbsp;手机号码：<span class="red">{$data.phone}</span><br/>
          小区名称：<span class="red">{$data.community_name}</span>&nbsp;&nbsp;面积：<span class="red">{$data.square}</span>
        </td>
        <td>
          来源账户：<span class="red">{$data.source.source|default="无"}</span>&nbsp;&nbsp;设计师：<span class="red">{$data.designer.name|default="无"}</span><br />
          报名时间：<span class="red">{$data.sign_time}</span>&nbsp;&nbsp;录入时间：<span class="red">{$data.addtime}</span>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="everycrmbox">
    <div class="clearfix crmtit">
      <div class="left">指派人员:</div>
      <div class="right foldbtn assignbtn" style="padding-right: 10px;">指派人员折叠</div>
    </div>
    <div class=" clearfix assignbox" {if $data.assigned_personnel} style="display: none;" {/if}>
      <div class="leftext left">指派人员</div>
      <div class="omeetbox left">
        <!-- <div class="left" style="margin-left: 12px;">指派人员:</div> -->
        <div class="left" id="range_person" style="width:66%;"></div>
        <button class="left submitbtn adddesigner" type="button">确认并提交</button>
      </div>
    </div>
  </div>
  <div class="everycrmbox">
    <div class="clearfix crmtit">
      <div class="left">当和客户首次见面时操作：</div>
      <div class="right foldbtn seebtn" style="padding-right: 10px;">到访见面折叠</div>
    </div>
    <div class=" clearfix meetbox" {if $data.daochang} style="display: none;" {/if}>
      <div class="leftext left">首次见面</div>
      <div class="omeetbox left">
        <div class="left">见面日期：</div><input class="left txtbox" style="width: 108px;" type="text" id="seetime" readonly />
        <!-- <div class="left" style="margin-left: 12px;">设计师：</div>
        <select class="left txtbox" id="designer" style="height: 24px;width: 108px;">
          <option value="">------------</option>
          {volist name="designers.arr" id="vo"}
          <option value="{$vo.id}" {if $data.designer_id eq $vo.id} selected  {/if}>{$vo.name}</option>
          {/volist}
        </select> -->
        <button class="left submitbtn addsub1" type="button">确认并提交</button>
      </div>
    </div>
  </div>
  <div class="everycrmbox">
    <div class="clearfix crmtit">
      <div class="left">当客户缴纳定金金额合同时操作：</div>
      <div class="right foldbtn depositbtn" style="padding-right: 10px;">定金协议折叠</div>
    </div>
    <table class="maintable depositbox" {if $data.deposit} style="display: none;" {/if}>
      <tbody>
        <tr>
          <td width="80" rowspan="2" style="background-color:#009900; color:#FFF; font-size:14px; text-align:center">定金管理</td>
          <td>
            客户姓名:<input name="name" type="text" class="txtbox" id="cname" value="{$data.name}" size="13" maxlength="8"
              title="交定金的客户姓名">&nbsp;
              定金额度:<input name="money" type="text" class="txtbox" id="money"
              onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" value="{$data.deposit.money|default=0}" size="10" maxlength="8" autocomplete="off">元&nbsp;
              定金日期:<input name="confirm_date" type="text" class="txtbox" id="confirm_date" size="10" readonly="readonly"
              value="{$data.deposit.confirm_date|default=''}">&nbsp;
            <!-- 设计师:
            
            <select name="designer_id" id="designer_id" style="height:26px;">
              <option value="">------------</option>
              {volist name="designers.arr" id="vo"}
              <option value="{$vo.id}" {if $data.designer_id eq $vo.id} selected  {/if}>{$vo.name}</option>
              {/volist}
            </select> -->
          </td>
        </tr>
        <tr>
          <td>
            首次洽谈:<input name="uptimemeet" type="text" class="txtbox" id="uptimemeet" size="13" readonly="readonly"  disabled="disabled">&nbsp;
            交房时间:<input name="house_delivery_time" type="text" class="txtbox" id="house_delivery_time"   size="10" readonly="readonly" value="{$data.house_delivery_time|default=''}">
            <button class="submitbtn addsublog1" type="button" style="display: inline-block;">确认并提交</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="everycrmbox">
    <div class="clearfix crmtit">
      <div class="left">当客户交定合同同时操作：</div>
      <div class="right foldbtn signbtn" style="padding-right: 10px;">合同协议折叠</div>
    </div>
    <table class="maintable signbox" {if $data.sign} style="display: none;" {/if}>
      <tbody>
        <tr>
          <td width="80" rowspan="4" style="background-color:#FF6600; color:#FFF; font-size:14px; text-align:center">合同管理</td>
          <td>
            <span title="套餐整装或基础合同额">基本合同金额</span>：<input name="qiandan" type="text" class="txtbox" id="qiandan"
              onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" value="{$data.sign.money|default=0}" size="12" maxlength="8" autocomplete="off">元&nbsp;
            <!-- <span title="软装、电器、定制等合同额">其他项目金额</span>：<input name="zhucai" type="text" class="txtbox" id="zhucai"
              onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" value="0" size="12" maxlength="10" autocomplete="off">元&nbsp; -->
              合同日期：<input name="qduptime" type="text" class="txtbox" id="qduptime" size="15" readonly="readonly" value="{$data.sign.confirm_date|default=''}" >
          </td>
        </tr>
        <tr>
          <td>装修套餐：
            {volist name="product" id="vo" key="k"}
            <input name="package_id" type="radio" value="{$vo.id}" checked="checked" id="prid{$k}" title="全案设计"><label for="prid{$k}"
              title="{$vo.name}">{$vo.name}</label>&nbsp;
              {/volist}
          </td>
        </tr>
        <tr>
          <td>装修风格：
            {volist name="decostyle_list" id="vo" key="k"}
            <input name="decostyle" type="radio" value="{$vo.id}" checked="checked" id="fgid{$k}" title="{$vo.name}"><label for="fgid{$k}"
              title="{$vo.name}">{$vo.name}</label>&nbsp;
              {/volist}
          </td>
        </tr>
        <tr>
          <td align="center">
            {if $data.sign eq ''}
            <button class="submitbtn addsignbtn" type="button"  style="display: inline-block;">确认并提交</button>
            {/if}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="everycrmbox">
    <div class="clearfix crmtit">
      <div class="left">客户销单时操作：</div>
    </div>
    <table class="maintable">
      <tbody>
        <tr>
          <td width="80" rowspan="4" style="background-color:#f6f6f6; font-size:14px; text-align:center">注销管理</td>
          <td>销单原因：<select name="hid" id="hid" style="height:26px;">
              <option value="">------------</option>
              <option value="定同行装修公司">定同行装修公司</option>
              <option value="装修价格太高">装修价格太高</option>
              <option value="找熟人装修">找熟人装修</option>
              <option value="只做清工">只做清工</option>
              <option value="房子卖了">房子卖了</option>
              <option value="回访不及时">回访不及时</option>
              <option value="其他">自定义</option>
            </select><span title="必填信息" class="red2">*</span>&nbsp;&nbsp;销单日期：<input name="hduptime" type="text" class="txtbox"
              id="hduptime" size="15" readonly="readonly"><span title="必填信息" class="red2">*</span>&nbsp;&nbsp;录入人：<input name="hduserid" type="hidden"
              id="hduserid" value="1669"><input name="id" type="hidden" id="id" value="{$data.id}">{$empname}</td>
        </tr>
        <tr>
          <td>
            销单备注：<textarea name="hdcontent" cols="60" rows="3" id="hdcontent"></textarea>
          </td>
        </tr>
        <tr>
          <td align="center">
            <button class="submitbtn setunvailbtn" type="button" style="display: inline-block;">确认并提交</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script src="__LAYUI__/layui/layui.js"></script>
<script src="__STATIC__/layui/layui/lay/modules/xm-select.js" type="text/javascript" charset="utf-8"></script>

{/block}{block name="js"}
<script type="text/javascript">
  var assigned_personnel = '{$data.assigned_personnel}';
  var data = {assigned_personnel:assigned_personnel};
  //var isselect = assigned_personnel=='' ? false : true;
  var isselect = false;
  layui.config({
    base: '__LAYUI__/',
    urlbase: '/sys'
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['table','laydate'], function () {
    var table = layui.table,
      laydate = layui.laydate,
      $ = layui.$;

    var time="{$data.daochang.addtime|default=''}";
    if(time){
      laydate.render({
        elem: '#seetime', //指定元素
        min: -10,
        max: 0,
        value: time.split(' ')[0]
        ,trigger:'click'
      });
      $('#uptimemeet').val(time.split(' ')[0]);
    }else{
      laydate.render({
        elem: '#seetime', //指定元素
        min: -15, //7天前
        max: 0, //7天后
        trigger:'click'
      });
    }
    laydate.render({
      elem: '#confirm_date', //指定元素
      min: -28,
      max: 0,
      trigger:'click'
    });
    laydate.render({
      elem: '#qduptime', //指定元素
      max: 0,
      trigger:'click'
    }); 
    laydate.render({
      elem: '#hduptime', //指定元素
      min: -120,
      max: 0,
      trigger:'click'
    }); 
    
    laydate.render({
      elem: '#house_delivery_time', //指定元素
      trigger:'click'
    });
    $('.assignbtn').click(function() {
      let str= $('.assignbox').css('display');
      if(str!='block'){
        $('.assignbox').css('display','block')
      }else{
        $('.assignbox').css('display', 'none')
      }
    })

    $('.seebtn').click(function() {
      let str= $('.meetbox').css('display');
      if(str!='block'){
        $('.meetbox').css('display','block')
      }else{
        $('.meetbox').css('display', 'none')
      }
    })
    $('.depositbtn').click(function () {
      let str = $('.depositbox').css('display');
      if (str != 'none') {
        $('.depositbox').css('display', 'none')
      } else {
        $('.depositbox').css('display', 'table')
      }
    })
    $('.signbtn').click(function () {
      let str = $('.signbox').css('display');
      if (str != 'none') {
        $('.signbox').css('display', 'none')
      } else {
        $('.signbox').css('display', 'table')
      }
    })
    $('.adddesigner').click(function() {
      var did = $('#range_person').attr('title');
      if (did == '') { alert("嗨，请选择指派人员！"); return false; }
      let hobj = GetRequest();
      $.ajax({
        url: '{:url("community/reserveDesigner")}'
        , data: {
          id: hobj.id,// （客户id）
          designerId:did
        }
        , type: 'post'
        , success: function (res) {
          if (res.code == 0) {
             alert(res.msg);
             $('.assignbox').css('display', 'none')
          }else if(res.code == 403){
				$(".exitbtn").trigger("click");
			} else {
            alert(res.msg)
          }
        }
      });
    })
    $('.addsub1').click(function() {
      if ($('#seetime').val() == "") { alert("提示：请选择首次见面的日期！"); return false; }
      //if ($("#designer").val() == '') { alert("嗨，请选择对应的设计师！"); return false; }
      // 单击之后提交按钮不可选,防止重复提交
			var DISABLED = 'layui-btn-disabled';
			var target = '.addsub1';
			$(target).addClass(DISABLED);
			$(target).attr('disabled', 'disabled');
      let hobj = GetRequest();
      $.ajax({
        url: '{:url("community/addVisitlog")}'
        , data: {
          customer_id: hobj.id,// （客户id）
          state:'确认到店',//
          confirm_date: $('#seetime').val(),//
          //designer_id: $("#designer").val(),//
        }
        , type: 'post'
        , success: function (res) {
          if (res.code == 0) {
             alert('恭喜：首次见面沟通添加成功！');
             $('#uptimemeet').val($('#seetime').val());
             $('.meetbox').css('display', 'none')
          }else if(res.code == 403){
						$(".exitbtn").trigger("click");
					} else {
            alert(res.msg);
            $(target).removeClass(DISABLED);
						$(target).removeAttr('disabled');
          }
        }
      });
    })
    $('.addsublog1').click(function () {
      // console.log($('#cname').val());
      // return false;
      if($('#cname').val()=="") { alert("提示：客户姓名没有填写！"); $('#cname').focus(); return false; }
      if ($('#money').val() == "") { alert("亲，客户交了多少定金啊！"); $('#money').focus(); return false; }
      if ($('#confirm_date').val() == "") { alert("嗨，定金的时间忘记填写了！"); return false; }
      //if ($("#designer_id").val() == '') { alert("嗨，请选择设计师！"); return false; }
      if($('#uptimemeet').val()==''){ alert("嗨，请选择首次洽谈时间！"); return false; }
      if ($("#house_delivery_time").val() == '') { alert("嗨，交房时间没有填写了！"); return false; }
       // 单击之后提交按钮不可选,防止重复提交
			var DISABLED = 'layui-btn-disabled';
			var target = '.addsublog1';
			$(target).addClass(DISABLED);
			$(target).attr('disabled', 'disabled');
      let hobj = GetRequest();
      $.ajax({
        url: '{:url("community/addVisitlog")}'
        , data: {
          name: $('#cname').val(),
          customer_id: hobj.id,// （客户id）
          state: '交定',//
          money:$('#money').val(),
          confirm_date: $('#confirm_date').val(),//
          //designer_id: $("#designer_id").val(),//
          house_delivery_time:$('#house_delivery_time').val()
        }
        , type: 'post'
        , success: function (res) {
          if (res.code == 0) {
            alert('恭喜：预定金合同添加成功！');
            $('.depositbox').css('display', 'none')
          }else if(res.code == 403){
						$(".exitbtn").trigger("click");
					}else{
            alert(res.msg);
            $(target).removeClass(DISABLED);
						$(target).removeAttr('disabled');
          }
        }
      });
    })
    $('.addsignbtn').click(function(){
      
      if ($('#qiandan').val() == "") { alert("提示：合同的金额没有填写！"); $('#qiandan').focus(); return false; }
      if ($('#qduptime').val() == "") { alert("嗨，合同的时间忘记填写了！"); return false; }
      //if ($("#zhucai").val() == '') { alert("提示：主材的金额没有填写！"); $("#zhucai").focus();return false; }
      // 单击之后提交按钮不可选,防止重复提交
			var DISABLED = 'layui-btn-disabled';
			var target = '.addsignbtn';
			$(target).addClass(DISABLED);
			$(target).attr('disabled', 'disabled');
      let hobj = GetRequest();
      $.ajax({
        url: '{:url("community/addVisitlog")}'
        , data: {
          customer_id: hobj.id,// （客户id）
          state: '签单',//
          money: $('#qiandan').val(),
          confirm_date: $('#qduptime').val(),//
          //other_money:$("#zhucai").val(),
          deco_style: $('input:radio[name="decostyle"]:checked').val(), 
          package_id: $('input:radio[name="package_id"]:checked').val()
        }
        , type: 'post'
        , success: function (res) {
          if (res.code == 0) {
            alert('恭喜，合同操作完成，该数据将自动跳转到，合同管理组');
            $('.depositbox').css('display', 'none');
            $('.goback').click();
          }else if(res.code == 403){
						$(".exitbtn").trigger("click");
					} else {
            alert(res.msg);
            $(target).removeClass(DISABLED);
						$(target).removeAttr('disabled');
          }
        }
      });
    })
    $('.setunvailbtn').click(function () {
      //if ($('#hid').val() == "") { alert("提示：销单的理由请选择！"); $('#hid').focus(); return false; }
      //if ($('#hduptime').val() == "") { alert("提示：注销时间请填写？"); $('#hduptime').focus(); return false; }
       // 单击之后提交按钮不可选,防止重复提交
			var DISABLED = 'layui-btn-disabled';
			var target = '.setunvailbtn';
			$(target).addClass(DISABLED);
			$(target).attr('disabled', 'disabled');
      let hobj = GetRequest();
      let str= $('#hid').val() +($('#hdcontent').val()? (','+ $('#hdcontent').val()):'');
      str.slice(3);
      $.ajax({
        url: '{:url("community/addVisitlog")}'
        , data: {
          customer_id: hobj.id,// （客户id）
          state: '无效',//
          remark: str,
          confirm_date: $('#hduptime').val(),
        }
        , type: 'post'
        , success: function (res) {
          if (res.code == 0) {
            alert('销单输入完成，该定单将自动跳转到，销单管理组！');
            let iframe= parent.layui.$('iframe');
            for(let i=0;i< iframe.length;i++){
              let str = iframe[i].src;
              let appoint = "/empcrm/community/list.html";
              var start = str.length - appoint.length;  //相差长度=字符串长度-特定字符长度
              var char = str.substr(start, appoint.length);//将相差长度作为开始下标，特定字符长度为截取长度
              if (char == appoint) {
                parent.layui.$('iframe')[i].contentDocument.defaultView.reload()
              }
            }
          }else if(res.code == 403){
						$(".exitbtn").trigger("click");
					} else {
            alert(res.msg);
            $(target).removeClass(DISABLED);
						$(target).removeAttr('disabled');
          }
        }
      });
    })
  })
  $('.goback').click(function () {
    let hobj = GetRequest();
    window.parent.msgotonewlist(hobj.id,hobj.type ? hobj.type : '');
  })
  function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
      }
    }
    return theRequest;
  }
  //考试范围选择人员
  var approve_ids = xmSelect.render({
      el: "#range_person",
			autoRow: true,
			filterable: true,
      tips: '指派人员',
      disabled: isselect,
      layVerify:'required',
      toolbar: {
            	//工具条,全选,清空,反选,自定义
                show: true,
                list: [ 
                    'ALL', 
                    'CLEAR', 
                    'REVERSE'
                ]
      },
      tree: {
			  show: true,
			  showFolderIcon: true,
			  showLine: true,
			  indent: 20,
			  expandedKeys: [ -3 ],
      },
      height: "200px",
      data: [], 
      on: function(data){
        // console.log(data)
        var arr = data.arr;
        let valarr=[];
        for(let j in arr){
          valarr.push(arr[j].value);
        }
        $('#range_person').attr('title',valarr.join(','))
      }
    });
        $(function(){
        	selectperson(data.assigned_personnel);
        });
        function selectperson(ids){
	        setTimeout(function(){
	            //data是ajax异步获取的
	            $.ajax({
	            	type:"get",
	            	url:"{:url('get_person')}",
	            	data:{type:1,id:ids},
	            	dataType: 'json',
	            	success:function(data) {
	            		// var data = JSON.parse(data);
	            		// var res = JSON.parse(data);
	            		//通过ajax 获取json数据,异步更新多选下拉框的值
						if(data.code == 403){
							$(".exitbtn").trigger("click");
						}
	            		approve_ids.update({data:data})
	            	}
	            });
	        },100);
		}
</script>
{/block}