{extend name="public/layout" /} {block name="title"}客户报备设置{/block} {block name="body"}
<style type="text/css">
  html,
  body {
    display: block;
    width: 100%;
    height: 100%;
  }

  .lay-main {
    background-color: #EEEEEE;
    width: 100%;
    height: 100%;
  }

  .flex {
    display: flex;
  }

  .lay-leftBox {
    width: 360px;
    height: 97%;
    background-color: #fff;
    margin: 10px 13px 10px;
    box-sizing: border-box;
    padding: 10px;
  }

  .lay-rightBox {
    width: calc(100% - 400px);
    height: 97%;
    background-color: #fff;
    margin-top: 10px;
    margin-left: 0px;
    box-sizing: border-box;
    padding: 10px;
    overflow-y: auto;
  }

  .lay-leftTips {
    width: 100%;
    height: 18px;
    line-height: 18px;
    border-left: 5px solid #249EFB;
    box-sizing: border-box;
    padding-left: 6px;
  }

  .lay-rightTips {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
  }

  .labelIcon {
    width: 5px;
    height: 18px;
    border-radius: 2px;
    background-color: #249EFB;
  }

  .valid {
    color: #249EFB;
    font-weight: 700;
  }

  .ml6 {
    margin-left: 6px;
  }

  .layui-border-blue,
  .layui-border-blue:hover {
    color: #249EFB;
    border-color: #249EFB;
  }

  .visitlistBox {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .visitItemBox {
    flex: 1;
  }

  .layui-border-black {
    margin: 0px 5px 6px !important;
    position: relative;
  }

  .lay-close {
    position: absolute;
    top: -15px;
    right: -10px;
    z-index: 99 !important;
  }

  .fieldBox {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 10px 0px;
  }

  .fieldLeftBox {
    width: 60%;
    box-sizing: border-box;
  }

  .fieldRightBox {
    flex: 1;
    margin-left: 10px;
    box-sizing: border-box;
  }

  .fieldTitle {
    font-size: 13px;
    color: #333333;
    font-weight: 600;
    line-height: 25px;
  }

  .fieldViewBox {
    border: 1px solid #EEEEEE;
    padding: 5px;
    border-radius: 4px;
    box-sizing: border-box;
    height: 550px;
    overflow: auto;
  }

  /*里面的代码可以根据自己需求去进行更改*/
  /* 设置滚动条的样式 */
  .fieldViewBox::-webkit-scrollbar {
    width: 4px;
  }

  /* 滚动槽 */
  .fieldViewBox::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 0px;
  }

  /* 滚动条滑块 */
  .fieldViewBox::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #cccccc;
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  .searchBox {
    width: 100%;
    height: 40px;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0px 10px;
    display: flex;
    align-items: center;
  }

  .searchBox>input {
    flex: 1;
    height: 100%;
    margin-left: 10px;
    outline: none;
    border: none;
  }

  .selectFieldBox {
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 0px 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .layui-icon-ok:before {
    font-size: 12px !important;
  }

  .layui-form-checkbox {
    margin-bottom: 5px;
  }

  .sortItemBox {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
  }

  .sortLeft>img {
    width: 16px;
  }

  .sortRight>img {
    width: 16px;
  }

  .moveElement {
    cursor: move;
  }

  .fixed-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #cccccc;
    margin-top: 120px;
  }

  .fieldItem {
    width: 50%;
  }

  .checkedDel {
    cursor: pointer;
  }

  .layui-icon-search {
    cursor: pointer;
  }

  .allCheckedField {
    padding-top: 10px;
  }

  .lay-leftcontent {
    width: 100%;
    height: calc(100% - 20px);
    box-sizing: border-box;
    padding: 15px 0px;
  }

  .layaddtitle {
    width: 100%;
    height: 40px;
    background-color: #72C4FF;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }

  .layadditemcontent {
    width: 100%;
    height: calc(100% - 20px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0px 10px;
  }
  /*里面的代码可以根据自己需求去进行更改*/
  /* 设置滚动条的样式 */
  .layadditemcontent::-webkit-scrollbar {
    width: 2px;
  }

  /* 滚动槽 */
  .layadditemcontent::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 0px;
  }

  /* 滚动条滑块 */
  .layadditemcontent::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: #cccccc;
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  .layinputtext {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #DEEAF1;
    display: flex;
  }

  .textlabel {
    width: 120px;
    height: 100%;
    line-height: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
  }

  .textinput {
    width: calc(100% - 120px);
    height: 100%;
    line-height: 40px;
    font-size: 13px;
  }

  .radiocontent {
    width: calc(100% - 150px);
    height: 100%;
    display: flex;
    font-size: 13px;
  }

  .radiocontent>div {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
  }

  .gradecontent {
    width: calc(100% - 150px);
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 13px;
  }

  .gradecontent>span {
    flex: none;
    display: inline-block;
    padding: 2px 8px;
    height: 18px;
    border: 1px solid #9DB6CF;
    font-size: 13px;
    margin-right: 5px;
    font-size: 13px;
  }

  .selectContent {
    width: calc(100% - 150px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }

  .selectContent>img {
    width: 8px;
  }

  .dateContent {
    width: calc(100% - 150px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }

  .dateContent>img {
    width: 14px;
  }

  .lay-default {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .layui-form-checked[lay-skin=primary] i {
		border-color: #249EFB;
		background-color: #249EFB;
	}
</style>

<body>
  <div class="lay-main flex">
    <div class="lay-leftBox">
      <div class="lay-leftTips">手机端示例</div>
      <div class="lay-leftcontent">
        <div class="layaddtitle">客户报备</div>
        <div class="layadditemcontent">
          <!-- <img src="__STATIC__/img/baobei.jpg" width="100%" alt=""> -->
        </div>
      </div>
    </div>
    <div class="lay-rightBox">
      <form class="layui-form">
        <div class="lay-rightTips">
          <div class="labelIcon"></div>
          <span class="ml6">跟进字段设置</span>
        </div>
        <div class="fieldBox">
          <div class="fieldLeftBox">
            <div class="fieldTitle" id="visitAllField"></div>
            <div class="fieldViewBox">
              <div class="searchBox">
                <i class="layui-icon layui-icon-search"></i>
                <input type="text" id="allFieldInput" autocomplete="off">
              </div>
              <div class="allCheckedField">
                <input lay-filter="checkedAll" name="all" title="全选" type="checkbox" lay-skin="primary">
              </div>
              <div class="selectFieldBox">

              </div>
            </div>
          </div>
          <div class="fieldRightBox">
            <div class="fieldTitle" id="checkedFieldEl"></div>
            <div class="fieldViewBox" id="scrollTargetEl">
              <div class="searchBox">
                <i class="layui-icon layui-icon-search"></i>
                <input type="text" id="checkedSearchEl" autocomplete="off">
              </div>
              <div class="checkedFieldBox">

              </div>
            </div>
          </div>
        </div>
        <div class="lay-default">
          <div class="layui-btn layui-btn-primary" id="recoveryDefault">恢复默认</div>
          <div>
            <div class="layui-btn layui-btn-primary">取消</div>
            <div class="layui-btn layui-btn-normal" lay-submit lay-filter="layuiadmin-report-form-submit">确认</div>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
{/block} {block name="js"}
<script type="text/javascript" src="__STATIC__/js/Sortable.js"></script>
<script>
  layui.config({
    base: '__LAYUI__/' //静态资源所在路径
    ,
    urlbase: '/sys'
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'layedit', 'element', 'upload'], function () {
    var $ = layui.$,
      table = layui.table,
      element = layui.element,
      upload = layui.upload,
      form = layui.form,
      visitFieldAll = [],
      checkedArr = [],
      defaultArr = [];

    form.render();

    getVisitFiled();
    function getVisitFiled() {
      $.ajax({
        type: "get",
        url: "{:url('customerSetting/module_report')}",
        data: {},
        dataType: 'json',
        success: function (res) {
          if (res.code == 0) {
            visitFieldAll = res.all;
            checkedArr = res.checked;
            defaultArr = res.default;
            renderVisitFieldHtmls(visitFieldAll);
            renderCheckedFieldHtmls(checkedArr);
            setExampleHtml(checkedArr);
          }
        }
      })
    }

    function setExampleHtml(dataArr) {
      let htmls = dataArr.map(v => {
        if (v.type == 1) {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="textinput">请输入</div>
                  </div>`;
        } else if (v.type == 2) {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="textinput">请输入</div>
                  </div>`;
        } else if (v.keyname == 'level') {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="gradecontent">
                      ${v.select.map(o => {
            return `<span>${o.name}类</span>`;
          }).join('')}
                    </div>
                  </div>`;
        } else if (v.type == 3 && v.select.length == 2) {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="radiocontent">
                      ${v.select.map(o => {
            return `<div>
                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" alt="">
                      <span style="margin-left: 5px;">${o.name}</span>
                    </div>`;
          }).join('')}
                    </div>
                  </div>`;
        } else if (v.type == 3 && v.select.length > 2 && v.keyname != 'level') {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="selectContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/cjtimg.png" alt="">
                    </div>
                  </div>`;
        } else if (v.type == 4) {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="selectContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/cjtimg.png" alt="">
                    </div>
                  </div>`;
        } else if (v.type == 5) {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="dateContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/rili.png" alt="">
                    </div>
                  </div>`;
        } else if (v.type == 6) {
          return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="dateContent">
                      <span></span>
                      <img src="__STATIC__/img/addimg.png" alt="">
                    </div>
                  </div>`;
        }
      }).join('');
      $('.layadditemcontent').html(htmls);
    }

    function renderVisitFieldHtmls(fields) {
      $('#visitAllField').text(`可选择字段(共${fields.length}个）`);
      let htmls = fields.map((item, index) => {
        return `<div class="fieldItem"><input lay-filter="checkboxs" data-keyname="${item.keyname}" data-type="${item.type}" ${item.keyname == 'phone' ? 'disabled' : ''} class="visitFieldElement${item.id}" type="checkbox" ${(returnCheckedStatus(item.id)) ? 'checked' : ''} name="visit" value="${item.id}" title="${item.name}" lay-skin="primary"></div>`;
      }).join('');
      $('.selectFieldBox').html(htmls);
      setTimeout(() => {
        form.render();
        form.on('checkbox(checkboxs)', function (data) {
          if (data.elem.checked) {
            let OneValue = [];
            $(`input:checkbox[name='visit']:checked`).each(function (i) {
              let key = $(this).prop('dataset').keyname;
              let type = $(this).prop('dataset').type;
              OneValue.push({ id: $(this).val(), name: $(this).prop('title'), keyname: key, type: type });
            });
            let name = data.elem.title;
            if (data.elem.dataset.keyname == 'name') {
              checkedArr.unshift({ name: name, id: data.value, keyname: data.elem.dataset.keyname, type: data.elem.dataset.type });
              renderCheckedFieldHtmls(checkedArr);
            } else {
              let itemArr = [];
              OneValue.forEach(k => {
                let item = checkedArr.filter(o => o.id == k.id);
                if (!item.length) {
                  itemArr.push(k)
                }
              })
              checkedArr.push(...itemArr);
              renderCheckedFieldHtmls(checkedArr);
            }
          } else {
            checkedArr.forEach((y, i) => {
              if (data.value == y.id) {
                checkedArr.splice(i, 1);
                renderCheckedFieldHtmls(checkedArr);
                return;
              }
            })
          }
        })

        form.on('checkbox(checkedAll)', function (data) {
          if (data.elem.checked) {
            $(`input:checkbox[name='visit']`).each(function (i) {
              if ($(this).prop('dataset').keyname != 'phone') {
                $(this).prop('checked', true);
              }
            });
            checkedArr = visitFieldAll;
            renderCheckedFieldHtmls(checkedArr);
            form.render();
          } else {
            checkedArr = visitFieldAll.filter(v => v.keyname == 'phone');
            renderCheckedFieldHtmls(checkedArr);
            $(`input:checkbox[name='visit']:checked`).each(function (i) {
              if ($(this).prop('dataset').keyname != 'phone') {
                $(this).prop('checked', false);
              }
            });
            form.render();
          }
        })
      }, 600);
    }

    function renderCheckedFieldHtmls(checkedFields) {
      $('#checkedFieldEl').text(`已选择字段(共${checkedFields.length}个）`);
      let firstArr = checkedFields.filter(v => v.keyname == 'name' || v.keyname == 'phone');
      let htmls1 = '';
      if (firstArr.length == 1) {
        htmls1 = firstArr.map((item, index) => {
          return `<div data-id="${item.id}" data-type="${item.type}" data-keyname="${item.keyname}" data-name="${item.name}" class="sortItemBox">
                  <div data-id="${item.id}" class="sortLeft">
                    ${item.keyname != 'phone' && item.keyname != 'name' ? `<img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">` : ''}
                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
                  </div>
                  <div data-id="${item.id}" class="sortRight">
                    <img data-id="${item.id}" src="/static/img/sTop.png" alt="">
                    ${item.keyname != 'phone' ? `<img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">` : ''}
                  </div>
                </div>`;
        }).join('');
      }
      if (firstArr.length == 2) {
        htmls1 = firstArr.map((item, index) => {
          return `<div data-id="${item.id}" data-type="${item.type}" data-keyname="${item.keyname}" data-name="${item.name}" class="sortItemBox">
                  <div data-id="${item.id}" class="sortLeft">
                    ${item.keyname != 'phone' && item.keyname != 'name' ? `<img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">` : ''}
                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
                  </div>
                  <div data-id="${item.id}" class="sortRight">
                    <img data-id="${item.id}" src="/static/img/sTop.png" alt="">
                    ${item.keyname != 'phone' ? `<img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">` : ''}
                  </div>
                </div>`;
        }).join('');
      }
      let htmls = checkedFields.map((item, index) => {
        if (item.keyname != 'name' && item.keyname != 'phone') {
          return `<div data-id="${item.id}" data-type="${item.type}" data-keyname="${item.keyname}" data-name="${item.name}" class="sortItemBox">
                  <div data-id="${item.id}" class="sortLeft">
                    ${item.keyname != 'phone' && item.keyname != 'name' ? `<img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">` : ''}
                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
                  </div>
                  <div data-id="${item.id}" class="sortRight">
                    <img data-id="${item.id}" class="topping" src="/static/img/sTop.png" alt="">
                    ${item.keyname != 'phone' ? `<img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">` : ''}
                  </div>
                </div>`;
        } else {
          return null;
        }
      }).join('');
      let aHtmls = `${htmls1}<div class="draggleableBox" id="draggleableBox">${htmls}</div>`
      $('.checkedFieldBox').html(aHtmls);
      setTimeout(() => {
        new Sortable($('.draggleableBox')[0], {
          handle: '.moveElement', // handle's class
          filter: ".ignore-elements",
          animation: 150
        });

        $('.checkedDel').click(function () {
          let id = $(this).prop('dataset').id;
          $(this).parent().parent().remove();
          checkedArr.forEach((item, index) => {
            if (item.id == id) {
              $(`.visitFieldElement${id}`).removeAttr('checked');
              checkedArr.splice(index, 1);
              form.render();
              return;
            }
          })
        })

        $('.sortRight').click(function () {
          var ops1 = {
            draggable: ".sortItemBox",
            onChoose: function (evt) {
              var index = evt.oldIndex;
              $("#draggleableBox .sortItemBox").eq(index).insertBefore($("#draggleableBox .sortItemBox").eq(0));
            }
          };
          var sortable1 = Sortable.create($('#draggleableBox')[0], ops1);
        })
      }, 600);
    }

    function returnCheckedStatus(vid) {
      let ids = checkedArr.map(v => parseInt(v.id));
      return ids.includes(parseInt(vid));
    }

    $('#checkedSearchEl').on('keyup', function (e) {
      let val = $(this).val();
      if (e.keyCode == 13 && val) {
        let eleArr = $('.getSortName');
        eleArr.each(function (index) {
          let name = $(this).text();
          if (name === val || name.indexOf(val) > -1) {
            $('#scrollTargetEl').scrollTop((parseInt(index) + 1) * 40);
            return;
          }
        })
      }
    });

    $('#allFieldInput').on('keyup', function (e) {
      let val = $(this).val();
      if (e.keyCode == 13) {
        if (val) {
          let itemArr = visitFieldAll.filter(item => {
            if (val == item.name || item.name.search(val) > -1) {
              return item;
            }
          })
          renderVisitFieldHtmls(itemArr);
        } else {
          renderVisitFieldHtmls(visitFieldAll);
        }
      }
    })

    $('#recoveryDefault').click(function () {
      layer.confirm('确定要恢复默认设置吗?', { title: '提示' }, function (index) {
        checkedArr = defaultArr;
        renderVisitFieldHtmls(visitFieldAll);
        renderCheckedFieldHtmls(checkedArr);
        layer.close(index);
      });
    })

    /* 监听提交 */
    form.on('submit(layuiadmin-report-form-submit)', function (obj) {
      let getCheckedField = $('.sortItemBox');
      let itemArr = [];
      getCheckedField.each(function (i) {
        let obj = $(this).prop('dataset');
        itemArr.push({ id: obj.id, name: obj.name, keyname: obj.keyname, sort: i + 1, type: obj.type });
      })
      $.ajax({
        url: '{:url("customerSetting/module_report_save")}',
        type: 'post',
        data: {
          content: itemArr
        },
        dataType: 'json',
        success: function (res) {
          if (res.code === 0) {
            layer.msg(res.msg, { anim: 0 });
            setTimeout(() => {
              window.parent.reloadFunc();
            }, 1000)
          } else {
            layer.msg(res.msg, { anim: 6 });
          }
        }
      });
      return false;
    });
  });
</script>
{/block}