qy-platform/Application/Admin/View/Market/rebind.html

<extend name="Public/base" />

<block name="body">
  <link rel="stylesheet" href="__CSS__/select2.min.css" type="text/css" />
  <link rel="stylesheet" type="text/css" href="__CSS__/admin_table.css" media="all">
  <link href="__STATIC__/icons_alibaba/iconfont.css" rel="stylesheet">
  <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
  <script type="text/javascript" src="__STATIC__/provincecityarea/AreaData_min.js"></script>
  <script src="__STATIC__/layer/layer.js"></script>
  <script type="text/javascript" src="__JS__/select2.min.js"></script>

  <style>
    .tabcon1711 input.time {
      width: 150px;
    }
    #form .txt_area {
      width: 300px;
      height: 150px;
    }
    .tabcon1711 .form_unit {
      margin-left: 2px;
    }
    .tabcon1711 .mustmark {
      margin-left:-7px;
    }
    .list-ratio {
      display: table;
    }
    .list-ratio .li-ratio {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .list-ratio .li-ratio .turnover, .list-ratio .li-ratio .turnover-ratio {
      position: relative;
    }
    .list-ratio .li-ratio .turnover span, .list-ratio .li-ratio .turnover-ratio .error-message {
      color: red;
      position: absolute;
      left: 0;
      top: 30px;
      white-space: nowrap;
      display: none;
    }
    .iconfont-btn {
      cursor: pointer;
    }
    .iconfont-style {
      font-size: 18px;
      color: #fff;
      border-radius: 4px;
      border: 0;
      padding: 5px;
      margin-left: 10px;
    }
    .iconfont-selected {
      background-color: #0A9AF2;
    }
    .iconfont-selected:hover {
      background-color: #03a9f4;
    }
    .iconfont-unselected {
      background-color: #999;
    }
    .iconfont-unselected:hover {
      background-color: #ababab;
    }
    .tabcon1711 .submit_btn.small-btn {
        float: none;
        line-height: 25px;
        width: 50px;
        height: 25px;
        font-size: 12px;
        padding: 0px 8px 0px 0px;
    }
  </style>
  <div class="cf main-place top_nav_list navtab_list">
    <h3 class="page_title">{$meta_title}</h3>
<!--    <p class="description_text">说明：此功是创建推广员时所需填写信息</p>-->
  </div>

  <!-- 标签页导航 -->
  <div class="tab-wrap">
    <div class="tab-content tabcon1711">
      <!-- 表单 -->
      <form id="form" method="post" class="form-horizontal" style="margin-bottom: 40px;">
        <!-- 基础文档模型 -->
        <div id="tab1" class="tab-pane in tab1">
          <table  border="0" cellspacing="0" cellpadding="0">
            <tbody>
            
            <tr>
              <td class="l"><i class="mustmark">*</i>推广公司：</td>
              <td class="r">
                <select name="company_id" id="company-select" class="select_gallery">
                  <option value="">请选择推广公司</option>
                  <?php foreach($companys as $company):?>
                  <option value="<?=$company['id']?>" data-belong="<?=$company['company_belong']?>" <?php if($company['id'] == $promote['company_id']):?>selected<?php endif;?>><?=$company['company_name']?></option>
                  <?php endforeach;?>
                </select>
              </td>
            </tr>
            <tr>
              <td class="l"><i class="mustmark">*</i>会长：</td>
              <td class="r">
                <select name="promote_id" id="promote-select" class="select_gallery">
                  <option value="">请选择会长</option>
                </select>
              </td>
            </tr>
            <tr>
              <td class="l"><i class="mustmark">*</i>原市场专员：</td>
              <td class="r">
                <span id="from-market-name" class="form_radio table_btn" style="color: red;">--</span>
              </td>
            </tr>
            <tr>
              <td class="l"><i class="mustmark">*</i>新市场专员：</td>
              <td class="r">
                <select name="to_id" id="market-select" class="select_gallery">
                  <option value="">请选择新市场专员</option>
                  <?php foreach($marketAdmins as $admin):?>
                  <option value="<?=$admin['id']?>"><?=$admin['username']?></option>
                  <?php endforeach;?>
                </select>
              </td>
            </tr>
            <tr>
              <td class="l">订单切分时间：</td>
              <td class="r">
                <input type="text" id="split_time" name="split_time" class="time" value="" autocomplete="off" placeholder="请选择订单切分时间" style="width: 200px"/>
              </td>
            </tr>
            <tr>
              <td class="l">备注：</td>
              <td class="r">
                <textarea name="" id="remark" cols="30" rows="10"></textarea>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <input type="hidden" name="id" id="id" value="{$record.id}" />
        <div class="form-item cf">
          <button class="submit_btn mlspacing" id="add-item" type="button" target-form="form-horizontal" style="margin-top: 10px;">
            新增
          </button>
        </div>
      </form>
      <div class="data_list">
        <div class="">
            <table id="record-table">
                <!-- 表头 -->
                <thead>
                <tr>
                    <th>推广公司</th>
                    <th>会长账号</th>
                    <th>内外团</th>
                    <th>原市场专员</th>
                    <th>新市场专员</th>
                    <th>订单切分时间</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>

                <!-- 列表 -->
                <tbody>
                </tbody>
            </table>
        </div>
      </div>
      <div style="margin-top: 30px; height: 35px; width: 100%;">
        <a class="submit_btn" href="javascript:;" id="submit" style="margin: 0px auto; margin-left: 208px; ">全部提交</a>
      </div>
    </div>
  </div>

  <div class="common_settings">
    <span class="plus_icon"><span><img src="__IMG__/zwmimages/icon_jia.png"></span></span>
    <form class="addShortcutIcon">
      <input type="hidden" name="title" value="{$m_title}">
      <input type="hidden" name="url" value="Promote/lists/type/1">
    </form>
    <a class="ajax-post add-butn <notempty name='commonset'>addSIsetted</notempty>" href="javascript:;" target-form="addShortcutIcon" url="{:U('Think/addShortcutIcon')}"><img src="__IMG__/zwmimages/icon_jia.png"><span><notempty name='commonset'>已添加<else />添加至常用设置</notempty></span></a>
  </div>

</block>

<block name="script">
  <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
  <php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
  <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
//导航高亮
highlight_subnav("{:U('Market/rebindRecords')}");
$(".select_gallery").select2();

$(function(){
    $('.time').datetimepicker({
        format: 'yyyy-mm-dd',
        language: "zh-CN",
        autoclose: true,
        scrollMonth: false,
        scrollTime: false,
        scrollInput: false,
        startView: 'month',
        minView:'month',
        maxView:'month',
    });
    showTab();
    var promoteIds = []
    $('#company-select').on({
      change: function() {
        var companyId = $(this).val()
        getPromotesByCompany(companyId, function(promotes) {
          var html = '<option value="">请选择会长</option>'
          for (var key in promotes) {
            html += '<option value="' +
              promotes[key].id +
              '" data-admin-id="' +
              promotes[key].admin_id +
              '" data-admin-username="' +
              promotes[key].admin_username +
              '">' + promotes[key].account + '</option>'
          }
          $('#promote-select').html(html)
          $('#promote-select').select2()
        })
      }
    })
    $('#promote-select').on({
      change: function() {
        var promoteOption = $("#promote-select option:selected");
        var fromMarketUsername = promoteOption.attr('data-admin-username')
        var fromMarketId = promoteOption.attr('data-admin-id')
        $('#from-market-name').text(fromMarketUsername)
        $('#from-market-name').attr('data-id', fromMarketId)
      }
    })
    function getPromotesByCompany(companyId, callback) {
      $.ajax({
        url: '{:U("getPromotesByCompany")}',
        type: 'get',
        dataType: 'json',
        data: {company_id: companyId},
        success: function(result) {
          if (result.status == 1) {
            callback(result.data.promotes)
          } else {
            layer.msg(result.message)
          }
        }
      })
    }
    $('#add-item').on({
        click: function () {
            var companyOption = $("#company-select option:selected");
            var companyId = companyOption.val()
            var companyName = companyOption.text()
            var belong = companyOption.attr('data-belong');
            belong == undefined ? '--' : belong
            var promoteOption = $("#promote-select option:selected");
            var promoteId = promoteOption.val()
            var promoteName = promoteOption.text()
            var marketOption = $("#market-select option:selected");
            var marketId = marketOption.val()
            var marketName = marketOption.text()
            var splitTime = $('#split_time').val()
            var remark = $('#remark').val()
            var fromId = $('#from-market-name').attr('data-id')
            if (companyId == '') {
              return layer.msg('请选择推广公司')
            }
            if (promoteId == '') {
              return layer.msg('请选择会长')
            }
            if (marketId == '') {
              return layer.msg('请新市场专员')
            }
            if (promoteIds.includes(promoteId)) {
              return layer.msg('该会长已添加')
            }

            var data = {
              company_id: companyId,
              promote_id: promoteId,
              from_id: fromId,
              to_id: marketId,
              split_time: splitTime,
              remark: remark,
            }

            disabledPromote(promoteId)
            promoteIds.push(promoteId)
            console.log(promoteIds)
            var html = '<tr data-post=' + JSON.stringify(data) + '><td>' + companyName + '</td>' + 
                '<td class="promote-item" data-id="' + promoteId + '">' + promoteName + '</td>' + 
                '<td>' + belong + '</td>' + 
                '<td>' + $('#from-market-name').text() + '</td>' + 
                '<td>' + marketName + '</td>' + 
                '<td>' + splitTime + '</td>' + 
                '<td>' + remark + '</td>' + 
                '<td><a class="delete-btn">删除</a></td>' + 
                '</tr>';
            $('#record-table').find('tbody').append(html);
        }
    })
    $('#record-table').on('click', '.delete-btn', function() {
      var tr = $(this).parents('tr').eq(0)
      tr.remove()
      var promoteId = tr.find('.promote-item').attr('data-id')
      var index = promoteIds.indexOf(promoteId)
      console.log(promoteId)
      console.log(index)
      if (index !== -1) {
        promoteIds.splice(index, 1)
      }
      console.log(promoteIds)
      undisabledPromote(promoteId)
    })

    function disabledPromote(promoteId) {
      var promoteOption = $("#promote-select").children('option').each(function() {
        if ($(this).val() == promoteId) {
          $(this).attr('disabled', true)
          $('#promote-select').select2()
        }
      })
    }

    function undisabledPromote(promoteId) {
      var promoteOption = $("#promote-select").children('option').each(function() {
        if ($(this).val() == promoteId) {
          $(this).attr('disabled', false)
          $('#promote-select').select2()
        }
      })
    }

    $('#submit').click(function (e) {
      var records = []
      $('#record-table').find('tbody').children('tr').each(function() {
        records.push(JSON.parse($(this).attr('data-post')))
      })
      $.ajax({
        url: '{:U("save")}',
        type: 'post',
        dataType: 'json',
        data: {records: records},
        success: function(result) {
          if (result.status == 1) {
            layer.msg(result.message)
            setTimeout(function() {
              window.location.href = '{:U("rebindRecords")}'
            }, 200)
          } else {
            layer.msg(result.message)
          }
        }
      })
    });
});
</script>
</block>