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

{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 {
    padding-bottom: 40px;
  }

  .searchtitlebox {
    display: block;
    padding: 15px 10px;
    border: 1px solid #F0F0F0;
    background: #FCFCFC;
    margin-top: 5px;
    margin-bottom: 10px;
    position: relative;
    min-width: 800px;
  }

  .searchbox {
    display: block;
    margin-top: 8px;
    text-align: center;
  }

  .searchbox input {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    padding-left: 3px;
    vertical-align: middle;
    border: 2px solid #4479ba;
  }

  body {
    font-size: 12px;
    font-family: "宋体";
  }

  .searchbox .searchbtn {
    display: inline-block;
    float: right;
    border: none;
    width: 98px;
    height: 30px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: url(__STATIC__/img/icon-sub.png) no-repeat;
    cursor: pointer;
    vertical-align: middle;
  }

  .selectbox {
    float: left;
  }

  .leftselect {
    float: left;
    height: 26px;
    line-height: 26px;
  }

  .selectbox select {
    float: left;
    height: 26px;
  }

  .searchtext {
    border: 1px solid #ccc;
    background: #fff url(__STATIC__/img/icon071402.png) no-repeat;
    padding: 1px 2px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    text-indent: 3px;
    margin-left: 4px;
  }

  .searchbtn1 {
    margin-left: 4px;
    cursor: pointer;
    color: #000;
    background: url(__STATIC__/img/btn_bg.gif) repeat-x;
    border: 1px solid #C0C0C0;
    padding: 0 12px;
    *padding: 0 6px;
    height: 26px;
  }

  .layui-table td,
  .layui-table th {
    font-size: 12px;
  }

  .layui-table th {
    font-weight: bold;
  }

  .dingjingorder {
    height: 25px;
    width: 40px;
    background-color: #65c001;
    color: #FFF;
    text-align: center;
    line-height: 25px;
    z-index: 100;
    display: block;
    position: absolute;
    top: 1px;
    right: 3px;
    border-radius: 11px;
    font-size: 12px;
  }

  .addvx {
    position: absolute;
    top: -5px;
    right: 1px;
    height: 14px;
    line-height: 14px;
    font-size: 16px;
    color: #666;
    font-family: "宋体";
  }

  .statebox {
    width: 40px;
    text-align: center;
    z-index: 100;
    display: block;
    position: absolute;
    font-size: 12px;
    top: -5px;
    right: 0px;
    border-radius: 0px;
    background: #4285f4;
    color: #efefef;
    height: 20px;
    line-height: 20px;
  }

  .layui-table-cell {
    overflow: initial;
  }

  #customer_detail {
    display: block;
    width: 435px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .rightbox {
    display: block;
    width: calc(100% - 435px);
    margin-left: 435px;
  }

  .unstatusbox {
    display: block;
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 37px;
    background-color: #FF6600;
    text-align: center;
    color: #FFF;
  }

  .statusbox {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #666;
    text-align: right;
    z-index: 100;
    display: block;
    font-size: 12px;
  }

  .layui-table-view .layui-form-checkbox {
    width: 16px;
    height: 16px;
    line-height: 16px;
    padding-right: 0;
  }

  .layui-table-view .layui-form-checkbox i {
    height: 16px;
    width: 16px;
    font-size: 14px;
  }

  .novisitlog {
    background-color: #9139db !important;
    color: #FFF;
  }

  .novisitlog a {
    color: #FFF;
  }

  .crmsearchlist {
    max-height: 760px;
    cursor: pointer;
    height:auto !important;
  }

  .tablebox .layui-form.layui-border-box.layui-table-view {
    max-height: 760px !important;
    height:auto !important;
  }

  .layui-table-body {
    max-height: 670px !important;
    height:auto !important;
  }

  .layui-table-view .layui-table td {
    cursor: pointer;
	overflow: hidden;
  }
  .layui-table-tips-c:before{right: 1px !important;top: -3px !important;}
  .searchbox .layui-form-select{float:left;width:130px;}
  .searchbox input{border:1px solid #e6e6e6 !important;}
  .layui-table {
    width: 100% !important;
  }
  ::-webkit-scrollbar {
	  width: auto;
	  height: auto;
	}
	
	::-webkit-scrollbar-thumb {
	  border-radius: 10px;
	  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
	  background: #DFDFDF;
	}
	
	::-webkit-scrollbar-track {
	  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
	  border-radius: 10px;
	  background: #f5f5f5;
	}
	.dingjingorder_title{display: inline-block;width: 73%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
  .layui-table-cell {
    position: relative;
  }
  .rightPosition {
    position: absolute;
    right: 5px;
    top: 8px;
  }
  .warnningStyle {
		background-color: #ffe9b3;
		color: #000 !important;
	}

	.dangerStyle {
		background-color: #fdafab;
		color: #000 !important;
	}

	.layui-table-hovers {
		background-color: transparent !important;
		color: #333333 !important;
	}

  .tipsMessage {
		display: inline-block;
    margin-left: 15px;
	}
	.colorBlock1 {
		display: inline-block;
		background-color: #ffe9b3;
		width: 10px;
		height: 10px;
	}
	.colorBlock2 {
		display: inline-block;
		background-color: #fdafab;
		width: 10px;
		height: 10px;
		margin-left: 8px;
	}
</style>

<body class="clearfix">
  <iframe id="customer_detail" style="display: none;" src=""></iframe>
  <div class="crmbox">
	<form class="layui-form">
    <div class="searchtitlebox">
      <div style="margin-bottom:8px;">您当前的操作 · <b>所有定金客户</b>
        <div class="tipsMessage layui-hide">
					<div class="colorBlock1"></div>
					<span>3至7天未跟进</span>
					<div class="colorBlock2"></div>
					<span>7天及7天以上未跟进</span>
				</div>
      </div>
      <div class="searchbox clearfix">
        <div class="selectbox">
          <div class="leftselect">检索：</div>
          <select name="source_id" lay-search>
            <option value="">==客户来源==</option>
            {volist name="soudata" id="vo"}
            <option value="{$vo.id}">{$vo.name}</option>
            {/volist}
          </select>
          <select name="customer_type" lay-search>
            <option value="">==客户种类==</option>
            {volist name="customer_type" id="vo"}
            <option value="{$vo.id}">{$vo.name}</option>
            {/volist}
          </select>
          <select name="designer_id" lay-search>
            <option value="">==设计师==</option>
            {volist name="designers.arr" id="vo"}
            <option value="{$vo.id}">{$vo.name}</option>
            {/volist}
          </select>
          <select name="employee_id" lay-search>
            <option value="">==客服专员==</option>
            {volist name="employee_list" id="vo"}
            <option value="{$vo.id}">{$vo.name}</option>
            {/volist}
          </select>
          <select name="level">
            <option value="">==客户等级==</option>
            {volist name="level" id="vo"}
            <option value="{$vo.name}">{$vo.name}</option>
            {/volist}
          </select>
          <select name="times">
            <option value="">==时间筛选==</option>
            <option value="1">报名时间正序</option>
            <option value="2">报名时间倒序</option>
          </select>
          <input style="width: 160px;" type="text" class="left searchtext" style="border-color: #ccc;" name="visitime" id="visitime" placeholder="选择时间"
            readonly />
          <input class="left searchtext" type="text" name="keyname" autocomplete="off" placeholder="输入关键字....." title="客户名、小区名其中任意一部分" />
          <button class="left searchbtn1" type="button" lay-submit lay-filter="search">搜索</button>
        </div>
        <button class="searchbtn" type="button">添加新客户</button>
      </div>
    </div>
    <div class="crmsearchlist">
      <table lay-filter="crmsearchlist" id="crmsearchlist"></table>
    </div>
	</form>
  </div>

</body>
<script src="__LAYUI__/layui/layui.js"></script>

{/block}{block name="js"}
<script type="text/html" id="crmname">
  <span class="dingjingorder_title">{{d.name?d.name:'未知'}}</span>
  {{# if(d.jiaoding_time){ }}
  {{# if(d.xinjushang == 1){ }}
    <span class="dingjingorder">定金</span>
    {{# }else{ }}
    <span class="dingjingorder">定金</span>
    {{# } }}
  {{# }else{ }}
  {{# } }}
</script>
<script type="text/html" id="empname">
  {{# if(d.employee){ }}
    <span class="dingjingorder_title">{{d.employee.name}}</span>
    {{# if(d.add_wechat_time){ }}
      <img src="__STATIC__/img/wxchatad.png" width="14px" class="rightPosition" alt="">
    {{# }else{ }}
    {{# } }}
  {{# }else{ }}
    <span style="color: #cccccc;">无</span>
    {{# if(d.add_wechat_time){ }}
    <img src="__STATIC__/img/wxchatad.png" width="14px" class="rightPosition" alt="">
    {{# }else{ }}
    {{# } }}
  {{# } }}
</script>
<script type="text/html" id="square">
  {{# if(d.square>200){ }}
    <span style="font-weight: bold;color: #ff6600;">{{d.square}}</span>
  {{# }else if(d.square){ }}
  <span >{{d.square}}</span>
  {{# }else{ }}
  {{# } }}
</script>
<script type="text/html" id="labeltpl">
      {{# if(d.label){ }}
        <span>{{d.label}}</span>
      {{# }else{ }}
        <span style="color: #cccccc;">无</span>
      {{# } }}
</script>
<script type="text/html" id="source">
  {{# if(d.source){ }}
    <span>{{d.source.source}}</span>
  {{# }else{ }}
    <span style="color: #cccccc;">无</span>
  {{# } }}
</script>
<script type="text/html" id="designer_name">
  {{# if(d.designer){ }}
    <span>{{d.designer.name}}</span>
  {{# }else{ }}
    <span style="color: #cccccc;">无</span>
  {{# } }}
</script>
<script type="text/html" id="editbox">
  {{# if(d.state=="待确认"){ }}
    <a style="display:inline-block;" lay-event="edit" href="javascript:void(0);">编辑</a>
  {{# }else { }}
    <a style="display:inline-block;" lay-event="editstate" href="javascript:void(0);">状态</a><span style="padding:0 4px;">/</span><a lay-event="edit" style="display:inline-block;" href="javascript:void(0);">编辑</a>
  {{# } }}
</script>
<script type="text/html" id="community">
  {{d.community_name?d.community_name:''}}
  {{# if(d.into_owner_group){ }}
    <!-- <span class="dingjingorder jieshaokehu">求介绍</span> -->
    <img src="__STATIC__/img/jinqun.png" width="15px" class="rightPosition" alt="">
  {{# }else{ }}
  {{# } }}
</script>
<script type="text/javascript">
  var reload = null, resizefun = null;
  layui.config({
    base: '__LAYUI__/',
    urlbase: '/sys'
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['table', 'laydate'], function () {
    var table = layui.table, laydate = layui.laydate,
      $ = layui.$;
      form = layui.form;
      var controlColor = "{$need_follow_tips}";
      if (controlColor == 1) {
        $(".tipsMessage").removeClass('layui-hide');
      }
      laydate.render({
        elem: '#visitime',
        max:0
        ,trigger:'click'
		,range: true
      });
      var field = {};
        form.on('submit(search)', function (data) {
            var source_id = $('[name=source_id]').val();
            var designer_id = $('[name=designer_id]').val();
            var employee_id = $('[name=employee_id]').val();
            var level = $('[name=level]').val();
            var keyname = $('[name=keyname]').val();
            var date = $('#visitime').val();
            var times = $('[name=times]').val();
            var customer_type = $('[name=customer_type]').val();
            field['keyname'] = keyname;
            field['source_id'] = source_id;
            field['designer_id'] = designer_id;
            field['employee_id'] = employee_id;
            field['level'] = level;
            field['date'] = date;
            field['times'] = times;
            field['customer_type'] = customer_type;
            //执行重载
            table.reload('crmsearchlist', {
                where: field
                , page: { curr: 1}
            });
        });
      resizefun = function () {
        table.resize('crmsearchlist');
      };
      reload = function () {
        table.reload('crmsearchlist', { where: field }, true);
      };
      var xinjushang = '{$xinjushang}';
      var jd = '定金';
      table.render({
        elem: '#crmsearchlist',
        url: '{:url("community/jiaoding_list")}',
        //even: true,
        cols: [
          [
            {
              title: '客户姓名',
              field: 'name',
              // align: 'center',
              minWidth:140,
              templet: '#crmname',
            },
            {
              title: '小区名称',
              field: 'community_name',
              // align: 'center',
              minWidth: 160,
              templet: '#community',
            },
            {
              title: '重要级',
              field: 'level',
              align: 'center',
              minWidth: 60,
            },
            {
              title: '手机号',
              field: 'phone',
              align: 'center',
              minWidth: 100,
            },
            {
              title: '面积',
              field: 'square',
              align: 'center',
              templet: '#square',
              minWidth: 80,
            },
            {
              title: '楼栋',
              field: 'unit_number',
              align: 'center',
              minWidth: 80,
            },
            {
              title: '所属员工',
              field: 'empname',
              align: 'center',
              templet: '#empname',
              minWidth: 80,
            },
            {
              title: '设计师',
              field: 'designer_name',
              align: 'center',
              templet: '#designer_name',
              minWidth: 80,
            },
            {
              title: '客户种类',
              field: 'customer_type',
              align: 'center',
              minWidth: 80,
            },
            {
              title: '客户来源',
              field: 'source',
              align: 'center',
              templet: '#source',
              minWidth: 80,
            },
            {
              title: '首次见面',
              field: 'fisttime',
              align: 'center',
              minWidth:150,
            },
            {
              title: '报名时间',
              field: 'sign_time',
              align: 'center',
              minWidth: 100,
            },
            {
              title: jd+'时间',
              field: 'jiaoding_time',
              align: 'center',
              minWidth: 150,
            },
            {
              title: jd+'金额',
              field: 'deposit_money',
              align: 'center',
              minWidth: 80,
              //templet: '#status'
            },
            {
              title: jd+'天数',
              field: 'jiaoding_day',
              align: 'center',
              minWidth: 60,
            },
            {
              title: '属性',
              field: 'jiaofang',
              align: 'center',
              minWidth: 100,
            },
            {
              title: '编辑',
              field: 'clue_count',
              align: 'center',
              fixed: 'right',
              minWidth: 105,
              templet: '#editbox'
            },
          ]
        ],
        page: true,
        limits: [17],
        limit: 17, //每页默认显示的数量,
        height: 'full-120',
        text: '对不起，加载出现异常！',
        done: function (res, curr, count) {
          // res.data.forEach(function (item, index) {
          //   // if(item.visit_log_count==0){
          //   //   $('.layui-table').find('tr[data-index="' + index + '"]').addClass('novisitlog');
          //   // }
          // });
          if (controlColor == 1) {
            $.each(res.data, function (index, item) {
              if (item.no_visit_day >= 3 && item.no_visit_day < 7) {
                $('.layui-table').find('tr[data-index="' + index + '"]').addClass('warnningStyle');
              } else if (item.no_visit_day >= 7) {
                $('.layui-table').find('tr[data-index="' + index + '"]').addClass('dangerStyle');
              }
            })

            $('tr').hover(function(){
              let idx = $(this).prop('dataset').index;
              if (idx || idx == 0) {
                $('.layui-table').find('tr[data-index="' + idx + '"]').addClass('layui-table-hovers');
              }
              },function(){
                let idx = $(this).prop('dataset').index;
                if (idx || idx == 0) {
                  $('.layui-table').find('tr[data-index="' + idx + '"]').removeClass('layui-table-hovers');
              }
            })
          }
        }
      });
      var flag = true;
      table.on('tool(crmsearchlist)', function (result) {
        let event = result.event;
        let row = result.data;
        flag = true;
        if(event === "edit"){
          $.ajax({
            url: '{:url("community/checkCustomer")}'
            , data: {
              id: result.data.id,
            }
            , type: 'post'
            , success: function (rs) {
              if(rs.code==0){
                flag = false;
                window.parent.editcrmsg(result.data.id,'jiaoding_list.html','community')
              }else{
                alert(rs.msg)
              }
            }
          })
          
          return false;
        }else if (event === "editstate") {
          $.ajax({
            url: '{:url("community/checkCustomer")}'
            , data: {
              id: result.data.id,
            }
            , type: 'post'
            , success: function (rs) {
              if(rs.code==0){
                flag = false;
                window.parent.statemsg(result.data.id, 'jiaoding_list.html','community');
              }else{
                alert(rs.msg)
              }
            }
          })
          
          return false;
        }
      })
      $('.crmsearchlist').on('click', 'td', function (e) {
        var _event = $(this).find('[lay-event]').attr('lay-event');
        var _obj = table.cache.crmsearchlist[parseInt($(this).parent('tr').attr('data-index'))];
        switch (_event) {
          case 'edit':
            break;
          case 'editstate':
            break;
          default:
            $.ajax({
              url: '{:url("community/checkCustomer")}'
              , data: {
              id: _obj.id,
              }
              , type: 'post'
              , success: function (rs) {
              if(rs.code==0){
                flag = true;
                $('#customer_detail')[0].src = "/empcrm/community/addlog.html?cid=" + _obj.id;
                $('.crmbox').addClass('rightbox');
                $('#customer_detail').show();
                resizefun();
              }else{
                alert(rs.msg)
              }
              }
            })
        }
        return false; //阻止事件冒泡
      })
      table.on('row(crmsearchlist)', function (obj) {
        var data = obj.data;
        if (flag) {
          $.ajax({
            url: '{:url("community/checkCustomer")}'
            , data: {
              id: data.id,
            }
            , type: 'post'
            , success: function (rs) {
              if(rs.code==0){
                $('#customer_detail')[0].src="/empcrm/community/addlog.html?cid="+ data.id;
                $('.crmbox').addClass('rightbox');
                $('#customer_detail').show();
                for (let i = 0; i < $('.crmsearchlist .layui-table-view .layui-table-box .layui-table tr').length; i++) {
                  $($('.crmsearchlist .layui-table-view .layui-table-box .layui-table tr')[i]).removeClass('onclickbg');
                }
                $(obj.tr).addClass('onclickbg');
                resizefun();
              }else{
                alert(rs.msg)
              }
            }
          })
        }
      });
      $('.searchbtn').click(function () {
        window.parent.addcrmmsg('jiaoding_list.html','community')
      })
  })
  function removealog(params) {
    $('#customer_detail').hide();
    $('.crmbox').removeClass('rightbox');
  }
</script>
{/block}