peko-admin-web/src/views/charge/ChargeRegionView.vue

<template>
  <section class="content">
    <div class="box box-primary">
      <div class="box-body">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1 id="regionTitle">充值H5配置</h1>
        </section>
        <!-- .content -->
        <div id="regionTable"></div>
        <div id="toolbar">
          <div class="col-sm-12">
            <label for="searchType"
                   class="col-sm-2 control-label">地区:</label>
            <div class="col-sm-8">
              <select name="searchType"
                      id="searchType"
                      data-btn-class="btn-warning"
                      class="form-control">
              </select>
            </div>
            <div class="col-sm-2">
              <button id="btnSearch" class="btn btn-default">
                <i class="glyphicon glyphicon-search"></i>查询
              </button>
            </div>
          </div>

        </div>
      </div>
      <div class="box-body"
           style="height:150%;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1 id="channelTitle">渠道和档位配置</h1>
        </section>
        <!-- .content -->
        <div id="channelTable"></div>
      </div>
    </div>
  </section>

  <div class="modal fade"
       id="regionModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="modalLabel">
    <div class="modal-dialog"
         role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title"
              id="regionModalLabel">地区信息编辑</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <input type="hidden"
                   name="code"
                   id="code" />
            <input type="hidden"
                   name="type"
                   id="type" />
            <div class="form-group">
              <label for="name"
                     class="col-sm-3 control-label">使用地区：</label>
              <div class="col-sm-9">
                <input type="text"
                       readonly
                       class="form-control"
                       id="name">
              </div>
            </div>
            <div class="form-group">
              <label for="currency"
                     class="col-sm-3 control-label">货币：</label>
              <div class="col-sm-9">
                <input type="text"
                       readonly
                       class="form-control"
                       id="currency">
              </div>
            </div>
            <div class="form-group">
              <label for="rate"
                     class="col-sm-3 control-label">兑USD汇率：</label>
              <div class="col-sm-9">
                <input type="text"
                       class="form-control"
                       id="rate">
              </div>
            </div>
            <div class="form-group">
              <label for="isRegionEnabled"
                     class="col-sm-3 control-label">地区是否生效：</label>
              <div class="col-sm-9">
                <select name="isRegionEnabled"
                        id="isRegionEnabled"
                        class="form-control validate[required]">
                  <option value="1"
                          selected>是</option>
                  <option value="0">否</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="isRegionRecommend"
                     class="col-sm-3 control-label">代儲是否展示"推荐"：</label>
              <div class="col-sm-9">
                <select name="isRegionRecommend"
                        id="isRegionRecommend"
                        class="form-control validate[required]">
                  <option value="1"
                          selected>是</option>
                  <option value="0">否</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="regionSeq"
                     class="col-sm-3 control-label">排序：</label>
              <div class="col-sm-9">
                <input type="text"
                       class="form-control"
                       id="regionSeq">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button"
                  class="btn btn-default"
                  data-dismiss="modal">取消</button>
          <button type="button"
                  class="btn btn-primary"
                  id="regionSave">确认编辑</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade"
       id="channelModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="modalLabel">
    <div class="modal-dialog"
         role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title"
              id="channelModalLabel">充值渠道编辑</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <input type="hidden"
                   name="channelCode"
                   id="channelCode" />
            <input type="hidden"
                   name="regionCode"
                   id="regionCode" />
            <input type="hidden"
                   name="channelCurrency"
                   id="channelCurrency" />
            <input type="hidden"
                   name="usdRate"
                   id="usdRate" />
            <input type="hidden"
                   name="payChannel"
                   id="payChannel" />
            <input type="hidden"
                   name="paymentType"
                   id="paymentType" />
            <input type="hidden"
                   name="chargeSize"
                   id="chargeSize" />
            <input type="hidden"
                   name="isSpecial"
                   id="isSpecial" />
            <input type="hidden"
                   name="specialValues"
                   id="specialValues" />
            <div class="form-group">
              <label for="regionName"
                     class="col-sm-3 control-label">使用地区：</label>
              <div class="col-sm-9">
                <input type="text"
                       readonly
                       class="form-control"
                       id="regionName">
              </div>
            </div>
            <div class="form-group">
              <label for="desc"
                     class="col-sm-3 control-label">渠道名称：</label>
              <div class="col-sm-9">
                <input type="text"
                       readonly
                       class="form-control"
                       id="desc">
              </div>
            </div>
            <div class="form-group">
              <label for="isChannelEnabled"
                     class="col-sm-3 control-label">是否展示在充值H5：</label>
              <div class="col-sm-9">
                <select name="isChannelEnabled"
                        id="isChannelEnabled"
                        class="form-control validate[required]">
                  <option value="1"
                          selected>是</option>
                  <option value="0">否</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="isChannelRecommend"
                     class="col-sm-3 control-label">是否展示"推荐"：</label>
              <div class="col-sm-9">
                <select name="isChannelRecommend"
                        id="isChannelRecommend"
                        class="form-control validate[required]">
                  <option value="1"
                          selected>是</option>
                  <option value="0">否</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="channelSeq"
                     class="col-sm-3 control-label">排序：</label>
              <div class="col-sm-9">
                <input type="text"
                       class="form-control"
                       id="channelSeq">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">充值档位配置</label>
            </div>
          </form>
        </div>
        <button type="button"
                class="btn btn-primary"
                id="chargeProdAdd">+档位</button>
        <div class="modal-footer">
          <button type="button"
                  class="btn btn-default"
                  data-dismiss="modal">取消</button>
          <button type="button"
                  class="btn btn-primary"
                  id="channelSave">确认编辑</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade"
       id="tipModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="modalLabel">
    <div class="modal-dialog"
         role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">提示信息</h4>
        </div>
        <div class="modal-body"
             id="tipMsg"></div>
      </div>
    </div>
  </div>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';

export default {
  name: "ChargeRegionView",
  setup () {
    //计算
    function calc (obj) {
      var $obj = $(obj);
      var index = $obj.data('index');
      var amount = $('#amount' + index).val();
      var handlingRate = $('#handlingRate' + index).val();
      var usdRate = $('#usdRate').val();
      var chargeGoldNum = 0;
      if (usdRate && amount && handlingRate) {
        //chargeGoldNum = Math.ceil(Math.ceil(parseFloat(amount).toFixed(4) / parseFloat(usdRate).toFixed(4) * 1000 * parseFloat((100 - parseFloat(handlingRate)) / 100).toFixed(4)) / 10) * 10;
        var money = parseInt(amount * 100);
        $.ajax({
          type: "get",
          url: "/admin/charge/channel/calc?money=" + money + "&handlingRate=" + handlingRate + "&usdRate=" + usdRate,
          dataType: "json",
          async: false,
          success: function (json) {
            if (json.success == 'true' || json.code == 200) {
              chargeGoldNum = json.data;
            }
          }
        });
      }
      console.log('index : ' + index + ', usdRate : ' + usdRate + ', amount : ' + amount + ', handlingRate : ' + handlingRate);
      $("#chargeGoldNum" + index).html(parseFloat(chargeGoldNum).toFixed(2));
    }
    window.calc = calc;
    return {
      calc
    };
  },
  created () {
    this.$nextTick(function () {
      this.initData();
    });
  },
  methods: {
    initData () {
      $(function () {
        //地区
        var regionArray = chargeRegion();
        $('#regionTable').bootstrapTable('destroy');
        $('#regionTable').bootstrapTable({
          columns: [
            { field: 'name', title: '地区', align: 'center', width: '5%' },
            { field: 'currency', title: '货币', align: 'center', width: '5%'},
            {
              field: 'rate',
              title: '兑USD汇率',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                var value = '';
                value += val + '<br/>';
                value += '（上一次更新时间：' + row.updateTime + '）';
                return value;
              }
            },
            {
              field: 'isEnabled',
              title: '地区是否生效',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                var value = '否';
                if (val) {
                  value = '是';
                }
                return value;
              }
            },
            {
              field: 'isRecommend',
              title: '代儲是否展示"推荐"',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                var value = '否';
                if (val) {
                  value = '是';
                }
                return value;
              }
            },
            {
              field: 'id',
              title: '操作',
              align: 'center',
              width: '5%',
              valign: 'middle',
              formatter: function (val, row, index) {
                return '<button class="btn btn-sm btn-default opt-edit" data-index="' + index + '">编辑</button>';
              }
            }
          ],
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 20,
          pagination: false,
          pageList: [20, 50, 100],
          search: false,
          sidePagination: "server", //表示服务端请求
          //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
          //设置为limit可以获取limit, offset, search, sort, order
          queryParamsType: "undefined",
          queryParams: function queryParams (params) {   //设置查询参数
            var param = {
              regionType: $('#searchType').val()
            };
            return param;
          },
          toolbar: '#toolbar',
          url: '/admin/charge/region/page',
          onLoadSuccess: function () {  //加载成功时执行
            console.log("load success");
          },
          onLoadError: function () {  //加载失败时执行
            console.log("load fail");
          }
        });

        $('#channelTable').bootstrapTable('destroy');
        $('#channelTable').bootstrapTable({
          columns: [
            { field: 'payChannel', title: '合作方', align: 'center', width: '5%' },
            {
              field: 'desc',
              title: '渠道名称',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                let color = 'black';
                if (val == 'MyCard點數卡' || val == 'MyCard會員點數' || val == 'MyCard Paypal' || val == '信用卡' || val == '悠遊付' || val == 'ezPay 簡單付' || val == '台灣Pay' || val == 'icash Pay' || val == 'Pi 拍錢包' || val == '全支付' || val == 'LINE Pay') {
                  color = 'green';
                } else if (val == '電子支付' || val == '銀行轉賬') {
                  color = 'blue';
                } else if (val == '市內電話帳單' || val == '行動電話帳單' || val == '電信數據ADSL帳單') {
                  color = 'orange';
                }
                return '<span style="color:' + color + ';">' + val + '</span>';
              }
            },
            {
              field: 'logo',
              title: '图标',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                return '<img src="' + val + '" style="width:90px;height:90px;" alt="">'
              }
            },
            { field: 'currency', title: '货币', align: 'center', width: '5%' },
            {
              field: 'isEnabled',
              title: '是否展示在充值H5',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                var value = '否';
                if (val) {
                  value = '是';
                }
                return value;
              }
            },
            {
              field: 'isRecommend',
              title: '是否展示"推荐"',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                var value = '否';
                if (val) {
                  value = '是';
                }
                return value;
              }
            },
            {
              field: 'chargeProd',
              title: '充值档位和手续费',
              align: 'center',
              width: '5%',
              formatter: function (val, row, index) {
                var value = '';
                var currency = row.currency;
                if (row.chargeProds) {
                  for (let i = 0, len = row.chargeProds.length; i < len; i++) {
                    var chargeProd = row.chargeProds[i];
                    value += currency + ':' + (chargeProd.money / 100) + '手续费 ' + chargeProd.handlingRate + '% 到账金币:' + chargeProd.chargeGoldNum + '<br/>';
                  }
                }
                return value;
              }
            },
            { field: 'seq', title: '排序', align: 'center', width: '5%' },
            {
              field: 'handle',
              title: '操作',
              align: 'center',
              width: '5%',
              valign: 'middle',
              formatter: function (val, row, index) {
                return '<button class="btn btn-sm btn-default opt-edit" data-index="' + index + '">编辑</button>';
              }
            }
          ],
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 20,
          pagination: false,
          pageList: [20, 50, 100],
          search: false,
          sidePagination: "server", //表示服务端请求
          //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
          //设置为limit可以获取limit, offset, search, sort, order
          queryParamsType: "undefined",
          queryParams: function queryParams (params) {   //设置查询参数
            var param = {
              regionType: $('#searchType').val()
            };
            return param;
          },
          url: '/admin/charge/channel/page',
          onLoadSuccess: function () {  //加载成功时执行
            console.log("load success");
          },
          onLoadError: function () {  //加载失败时执行
            console.log("load fail");
          }
        });

        //编辑
        $('#regionTable').on('click', '.opt-edit', function () {
          const currentData = $('#regionTable').bootstrapTable('getData')[$(this).data('index')];
          var code = currentData.code;
          var name = currentData.name;
          var currency = currentData.currency;
          var type = currentData.type;
          var rate = currentData.rate;
          var isRegionEnabled = currentData.isEnabled;
          var isRegionRecommend = currentData.isRecommend;
          var regionSeq = currentData.seq;
          $('#code').val(code);
          $('#name').val(name);
          $('#currency').val(currency);
          $('#type').val(type);
          $('#rate').val(rate);
          $('#isRegionEnabled').val(isRegionEnabled);
          $('#isRegionRecommend').val(isRegionRecommend);
          $('#regionSeq').val(regionSeq);
          $("#regionModal").modal('show');
        });

        $("#regionSave").click(function () {
          const msg = '确定要保存吗？';
          if (confirm(msg)) {
            const data = {
              code: $('#code').val(),
              name: $('#name').val(),
              currency: $('#currency').val(),
              type: $('#type').val(),
              rate: $('#rate').val(),
              isEnabled: $('#isRegionEnabled').val(),
              isRecommend: $('#isRegionRecommend').val(),
              seq: $('#regionSeq').val()
            }
            $.ajax({
              type: "post",
              url: "/admin/charge/region/save",
              data: data,
              dataType: "json",
              success: function (json) {
                if (json.success == 'true' || json.code == 200) {
                  $("#tipMsg").text("保存成功");
                  $("#tipModal").modal('show');
                  TableHelper.doRefresh("#regionTable");
                  TableHelper.doRefresh("#channelTable");
                  $("#regionModal").modal('hide');
                } else {
                  $("#tipMsg").text("保存失败." + json.message);
                  $("#tipModal").modal('show');
                  $("#regionModal").modal('hide');
                }
              }
            });
          }
        });

        //编辑
        $('#channelTable').on('click', '.opt-edit', function () {
          const currentData = $('#channelTable').bootstrapTable('getData')[$(this).data('index')];
          for (let i = 0, len = $('#chargeSize').val(); i < len; i++) {
            $('#chargeProd' + i).remove();
          }
          var channelCode = currentData.channelCode;
          var regionCode = currentData.regionCode;
          var usdRate = currentData.usdRate;
          var payChannel = currentData.payChannel;
          var paymentType = currentData.paymentType;
          var regionName = currentData.regionName;
          var currency = currentData.currency;
          var desc = currentData.desc;
          var isChannelEnabled = currentData.isEnabled;
          var isChannelRecommend = currentData.isRecommend;
          var channelSeq = currentData.seq;
          var chargeProds = currentData.chargeProds;
          var specialValues = currentData.specialValues;
          var isSpecial = (specialValues && specialValues.length > 0);
          console.log(isSpecial);
          console.log(specialValues);
          var chargeSize = 0;
          if (chargeProds) {
            chargeSize = chargeProds.length;
          }
          $('#channelCode').val(channelCode);
          $('#regionCode').val(regionCode);
          $('#usdRate').val(usdRate);
          $('#payChannel').val(payChannel);
          $('#paymentType').val(paymentType);
          $('#regionName').val(regionName);
          $('#channelCurrency').val(currency);
          $('#desc').val(desc);
          $('#isChannelEnabled').val(isChannelEnabled);
          $('#isChannelRecommend').val(isChannelRecommend);
          $('#channelSeq').val(channelSeq);
          $('#chargeSize').val(chargeSize);
          $('#isSpecial').val(isSpecial);
          $('#specialValues').val(specialValues);
          var $form = $('#channelModal .modal-body .form-horizontal');
          for (let i = 0; i < chargeProds.length; i++) {
            var chargeProd = chargeProds[i];
            var chargeProdId = chargeProd.chargeProdId;
            var amount = chargeProd.money / 100;
            var handlingRate = chargeProd.handlingRate;
            var chargeGoldNum = chargeProd.chargeGoldNum;
            var $formGroup = $('<div/>');
            $formGroup.attr('class', 'form-group');
            $formGroup.attr('id', 'chargeProd' + i);
            var $input = $('<input/>');
            $input.attr('type', 'hidden');
            $input.attr('name', 'chargeProdId' + i);
            $input.attr('id', 'chargeProdId' + i);
            $input.attr('value', chargeProdId);
            $formGroup.append($input);
            var $div = $('<div/>');
            $div.attr('class', 'col-sm-12');
            if (isSpecial) {
              $div.append(currency + ' ');
              var $select = $('<select/>');
              $select.attr('class', 'validate[required]');
              $select.attr('data-index', i);
              $select.attr('id', 'amount' + i);
              $select.attr('oninput', 'calc(this)');
              for (let j = 0; j < specialValues.length; j++) {
                var specialValue = specialValues[j];
                var $option = $('<option/>');
                $option.attr('value', specialValue);
                $option.html(specialValue);
                if (parseFloat(amount).toFixed(2) == parseFloat(specialValue).toFixed(2)) {
                  $option.attr('selected', true);
                }
                $select.append($option);
              }
              $div.append($select);
              $div.append(' 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" value="' + handlingRate + '" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '">' + chargeGoldNum + '</span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
            } else {
              $div.html(currency + ' <input type="text" data-index="' + i + '" id="amount' + i + '" oninput="calc(this)" value="' + amount + '" style="width:41px;"/> 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" value="' + handlingRate + '" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '">' + chargeGoldNum + '</span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
            }
            $formGroup.append($div);
            $form.append($formGroup);
          }
          $("#channelModal").modal('show');
        });

        //新增档位
        $("#chargeProdAdd").click(function () {
          var currency = $('#channelCurrency').val();
          var i = parseInt($('#chargeSize').val());
          var isSpecial = JSON.parse($('#isSpecial').val());
          var specialValues = $('#specialValues').val().split(',');
          var $form = $('#channelModal .modal-body .form-horizontal');
          var $formGroup = $('<div/>');
          $formGroup.attr('class', 'form-group');
          $formGroup.attr('id', 'chargeProd' + i);
          var $div = $('<div/>');
          $div.attr('class', 'col-sm-12');
          if (isSpecial) {
            $div.append(currency + ' ');
            var $select = $('<select/>');
            $select.attr('class', 'validate[required]');
            $select.attr('data-index', i);
            $select.attr('id', 'amount' + i);
            $select.attr('oninput', 'calc(this)');
            for (let j = 0; j < specialValues.length; j++) {
              var specialValue = specialValues[j];
              var $option = $('<option/>');
              $option.attr('value', specialValue);
              $option.html(specialValue);
              $select.append($option);
            }
            $div.append($select);
            $div.append(' 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '"></span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
          } else {
            $div.html(currency + ' <input type="text" data-index="' + i + '" id="amount' + i + '" oninput="calc(this)" style="width:41px;"/> 手续费 <input type="text" data-index="' + i + '" id="handlingRate' + i + '" oninput="calc(this)" style="width:41px;"/>% 到账金币：<span id="chargeGoldNum' + i + '"></span> <button class="btn btn-sm btn-default opt-del" data-index="' + i + '">删除</button>');
          }
          $formGroup.append($div);
          $form.append($formGroup);
          $('#chargeSize').val(++i);
        });

        $("#channelSave").click(function () {
          const msg = '确定要保存吗？';
          if (confirm(msg)) {
            var channelCode = $('#channelCode').val();
            var regionCode = $('#regionCode').val();
            var currency = $('#channelCurrency').val();
            var desc = $('#desc').val();
            var payChannel = $('#payChannel').val();
            var paymentType = $('#paymentType').val();
            var chargeSize = $('#chargeSize').val();
            var isEnabled = $('#isChannelEnabled').val();
            var isRecommend = $('#isChannelRecommend').val();
            var seq = $('#channelSeq').val();
            var isSpecial = $('#isSpecial').val();
            var chargeProdArray = [];
            for (let i = 0; i < chargeSize; i++) {
              const isHidden = $('#chargeProd' + i).is(':hidden');
              if (isHidden) {
                continue;
              }

              var chargeProdId = $('#chargeProdId' + i).val();
              var money = parseFloat($('#amount' + i).val()) * 100;
              var handlingRate = $('#handlingRate' + i).val();
              if (!money || !handlingRate) {
                continue;
              }

              const arrayIndex = chargeProdArray.findIndex(prod => prod.money === money);
              if (arrayIndex !== -1) {
                $("#tipMsg").text("保存失败." + money + "档位重复配置");
                $("#tipModal").modal('show');
                return;
              }

              var chargeProd = {
                country: regionCode,
                localCurrencyCode: currency,
                payChannel: payChannel,
                paymentType: paymentType,
                money: parseInt(money),
                seqNo: i,
                handlingRate: handlingRate
              };
              if (chargeProdId) {
                chargeProd.chargeProdId = chargeProdId;
              }
              chargeProdArray.push(chargeProd);
            }
            var data = {
              channelCode: channelCode,
              regionCode: regionCode,
              desc: desc,
              payChannel: payChannel,
              paymentType: paymentType,
              isEnabled: isEnabled,
              isRecommend: isRecommend,
              seq: seq,
              chargeProds: JSON.stringify(chargeProdArray)
            };
            $.ajax({
              type: "post",
              url: "/admin/charge/channel/save",
              data: data,
              dataType: "json",
              success: function (json) {
                if (json.success == 'true' || json.code == 200) {
                  $("#tipMsg").text("保存成功");
                  $("#tipModal").modal('show');
                  TableHelper.doRefresh("#regionTable");
                  TableHelper.doRefresh("#channelTable");
                  $("#channelModal").modal('hide');
                } else {
                  $("#tipMsg").text("保存失败." + json.message);
                  $("#tipModal").modal('show');
                  $("#channelModal").modal('hide');
                }
              }
            });
          }
        });

        //删除
        $('#channelModal .modal-body .form-horizontal').on('click', '.opt-del', function () {
          var index = $(this).data('index');
          var chargeProd = $('#chargeProd' + index);
          chargeProd.hide();
          return false;
          // var chargeProdId = $('#chargeProdId' + index).val();
          // if (chargeProdId) {
          //   const msg = '确定要删除吗？';
          //   if (confirm(msg)) {
          //     $.ajax({
          //       type: "get",
          //       url: "/admin/charge/prod/del?chargeProdId=" + chargeProdId,
          //       dataType: "json",
          //       success: function (json) {
          //         if (json.success == 'true' || json.code == 200) {
          //           $("#tipMsg").text("删除成功");
          //           $("#tipModal").modal('show');
          //           TableHelper.doRefresh("#regionTable");
          //           TableHelper.doRefresh("#channelTable");
          //           $("#channelModal").modal('hide');
          //         } else {
          //           $("#tipMsg").text("删除失败." + json.message);
          //           $("#tipModal").modal('show');
          //           $("#channelModal").modal('hide');
          //         }
          //       }
          //     });
          //     $('#chargeProd' + index).remove();
          //   }
          // }
        });

        //地区
        function chargeRegion () {
          var array;
          $.ajax({
            type: "get",
            url: "/admin/charge/region/list",
            dataType: "json",
            async: false,
            success: function (json) {
              if (json.success == 'true' || json.code == 200) {
                array = json.data;
              }
            }
          });
          var $select = $('#searchType');
          for (let i = 0; i < array.length; i++) {
            var $option = $('<option value="' + array[i].type + '" />');
            $option.html(array[i].desc + '(' + array[i].name + ')');
            if (i == 0) {
              $option.attr('selected', true);
            }
            $select.append($option);
          }
          return array;
        }

        // 查询刷新
        $('#btnSearch').on('click', function () {
          TableHelper.doRefresh('#regionTable');
          TableHelper.doRefresh('#channelTable');
        });
      });
    }
  },
  unmounted () {
    $('#regionTable').bootstrapTable('destroy');
    $('#channelTable').bootstrapTable('destroy');
  }
};
</script>

<style scoped>
.fixed-table-body {
  overflow-x: auto;
  overflow-y: auto;
  height: 25%;
}
</style>