peko-admin-web/src/views/nameplate/NameplateInfoView.vue

<template>
  <section class="content">
    <div class="box box-primary">
      <div class="box-body">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1 id="itemTitle"></h1>
        </section>
        <div id="toolbar"
             style="height: auto;">
          <form id="searchForm"
                class=""
                action=""
                method="post"
                target="_blank">
            <div class="col-sm-12">
              <label for="nameplateId"
                     class="col-sm-1 control-label">铭牌ID:</label>
              <div class="col-sm-2">
                <input type="text"
                       class="form-control"
                       name="id"
                       id="id">
              </div>

              <label for="name"
                     class="col-sm-1 control-label">铭牌名称:</label>
              <div class="col-sm-2"><input type="text"
                       class="form-control"
                       name="name"
                       id="name"></div>

              <label for="status"
                     class="col-sm-1 control-label">状态:</label>
              <div class="col-sm-2">
                <select name="status"
                        id="status"
                        data-btn-class="btn-warning"
                        class="form-control">
                  <option value=""
                          selected="selected">全部</option>
                </select>
              </div>
            </div>
            <div class="col-sm-12">
              <label for="nameplateType"
                     class="col-sm-1 control-label">铭牌类型:</label>
              <div class="col-sm-2">
                <select name="nameplateType"
                        id="nameplateType"
                        data-btn-class="btn-warning"
                        class="form-control">
                  <option value=""
                          selected="selected">全部</option>
                </select>
              </div>

              <label for="type"
                     class="col-sm-1 control-label">铭牌款式:</label>
              <div class="col-sm-2">
                <select name="type"
                        id="type"
                        data-btn-class="btn-warning"
                        class="form-control">
                  <option value=""
                          selected="selected">全部</option>
                </select>
              </div>

              <label for="partitionId"
                     class="col-sm-1 control-label">地区:</label>
              <div class="col-sm-2">
                <select name="partitionId"
                        id="partitionId"
                        class="form-control"></select>
              </div>

            </div>
          </form>
          <div class="col-sm-12">
            <button id="btnSearch"
                    class="btn btn-default">
              <i class="glyphicon glyphicon-search"></i>查询
            </button>
            <button id="btnAdd"
                    class="btn btn-default">
              <i class="glyphicon glyphicon-plus"></i>新增
            </button>
          </div>
        </div>
      </div>
      <!-- .content -->
      <div id="table"></div>
    </div>
  </section>

  <div class="modal fade"
       id="addModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="modalLabel">
    <div class="modal-dialog"
         role="document">
      <div class="modal-content"
           style="width: 500px;">
        <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="modalLabel">新增铭牌</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal"
                id="addForm">
            <input type="hidden"
                   name="id"
                   id="id" />
            <div class="form-group">
              <label for="partitionFlag"
                     class="col-sm-4 control-label">选择地区:</label>
              <div class="col-sm-6">
                <input type="checkbox"
                       name="partitionFlag"
                       value="1" />英语区<br>
                <input type="checkbox"
                       name="partitionFlag"
                       value="2" />阿拉伯语区<br>
                <input type="checkbox"
                       name="partitionFlag"
                       value="4" />华语区<br>
                <input type="checkbox"
                       name="partitionFlag"
                       value="8" />土耳其区<br>
                <input type="checkbox"
                       name="partitionFlag"
                       value="16" />英语2区<br>
                <input type="checkbox"
                       name="partitionFlag"
                       value="32" />葡萄牙语区<br>
              </div>
            </div>
            <div class="form-group">
              <label for="nameplateType"
                     class="col-sm-4 control-label">铭牌类型:</label>
              <div class="col-sm-6">
                <select name="nameplateType"
                        id="nameplateType1"
                        data-btn-class="btn-warning"
                        class="form-control">
                  <option value="">请选择</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="name1"
                     class="col-sm-4 control-label">铭牌名称:</label>
              <div class="col-sm-6">
                <input type="text"
                       class="form-control validate[required]"
                       name="name1"
                       id="name1"
                       placeholder="请输入,5个字符内">
              </div>
            </div>
            <div class="form-group">
              <label for="ar_name1"
                     class="col-sm-4 control-label">阿语铭牌名称:</label>
              <div class="col-sm-6">
                <input type="text"
                       class="form-control validate[required]"
                       name="name1"
                       id="ar_name1"
                       placeholder="请输入,5个字符内">
              </div>
            </div>
            <div class="form-group">
              <label for="en_name1"
                     class="col-sm-4 control-label">英语铭牌名称:</label>
              <div class="col-sm-6">
                <input type="text"
                       class="form-control validate[required]"
                       name="name1"
                       id="en_name1"
                       placeholder="请输入,5个字符内">
              </div>
            </div>
            <div class="form-group">
              <label for="tr_name1"
                     class="col-sm-4 control-label">土耳其铭牌名称:</label>
              <div class="col-sm-6">
                <input type="text"
                       class="form-control validate[required]"
                       name="name1"
                       id="tr_name1"
                       placeholder="请输入,5个字符内">
              </div>
            </div>
            <div class="form-group">
              <label for="pr_name1"
                     class="col-sm-4 control-label">葡萄牙语铭牌名称:</label>
              <div class="col-sm-6">
                <input type="text"
                       class="form-control validate[required]"
                       name="name1"
                       id="pr_name1"
                       placeholder="请输入,5个字符内">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-4 control-label">用户自定义文案:</label>
              <div class="col-sm-6">
                <label class="radio-inline"><input type="radio"
                         name="isCustomWord"
                         value="0">否</label>
                <label class="radio-inline"><input type="radio"
                         name="isCustomWord"
                         value="1">是</label>
              </div>
            </div>
            <div id="fixedWord-div">
              <div class="form-group">
                <label for="zhFixedWord"
                       class="col-sm-4 control-label">华语固定文案:</label>
                <div class="col-sm-6">
                  <input type="text"
                         class="form-control"
                         name="zhFixedWord"
                         id="zhFixedWord">
                </div>
              </div>
              <div class="form-group">
                <label for="arFixedWord"
                       class="col-sm-4 control-label">阿语固定文案:</label>
                <div class="col-sm-6">
                  <input type="text"
                         class="form-control"
                         name="arFixedWord"
                         id="arFixedWord">
                </div>
              </div>
              <div class="form-group">
                <label for="enFixedWord"
                       class="col-sm-4 control-label">英语固定文案:</label>
                <div class="col-sm-6">
                  <input type="text"
                         class="form-control"
                         name="enFixedWord"
                         id="enFixedWord">
                </div>
              </div>
              <div class="form-group">
                <label for="trFixedWord"
                       class="col-sm-4 control-label">土耳其固定文案:</label>
                <div class="col-sm-6">
                  <input type="text"
                         class="form-control"
                         name="trFixedWord"
                         id="trFixedWord">
                </div>
              </div>
              <div class="form-group">
                <label for="prFixedWord"
                       class="col-sm-4 control-label">葡萄牙语固定文案:</label>
                <div class="col-sm-6">
                  <input type="text"
                         class="form-control"
                         name="prFixedWord"
                         id="prFixedWord">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="days"
                     class="col-sm-4 control-label">有效期（天）:</label>
              <div class="col-sm-6">
                <input type="number"
                       class="form-control validate[required]"
                       name="days"
                       id="days">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-4 control-label">图片:</label>
              <div class="col-sm-6">
                <img src=""
                     id="addIconPicUrl"
                     style="height:44px;"
                     alt="">
                <input type="file"
                       id="addUploadIconPic"
                       name="uploadFile"
                       accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                <button class="btn btn-success"
                        type="button"
                        id="uploadBtn">上传</button>
                <input type="hidden"
                       id="iconPic"
                       name="iconPic"
                       class="form-control" />
                <a href="javascript:void(0)"
                   id="removeIconPic">清除</a>
              </div>
            </div>
            <div class="form-group">
              <label for="status1"
                     class="col-sm-4 control-label">状态:</label>
              <div class="col-sm-6">
                <select name="status1"
                        id="status1"
                        data-btn-class="btn-warning"
                        class="form-control">
                  <option value="">请选择</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="type1"
                     class="col-sm-4 control-label">铭牌款式:</label>
              <div class="col-sm-6">
                <select name="type1"
                        id="type1"
                        data-btn-class="btn-warning"
                        class="form-control">
                  <option value="">请选择</option>
                </select>
              </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="button-save">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 为用户赠送铭牌弹窗 -->
  <div class="modal fade"
       id="sendNameplateModal"
       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">x</span></button>
          <h4 class="modal-title"
              id="modalSendLabel">赠送铭牌</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal"
                id="nameplateSendForm">
            <input type="hidden"
                   name="sendNameplateId"
                   id="sendNameplateId" />
            <div class="form-group">
              <label for="sendErbanNo"
                     class="col-sm-3 control-label">平台号</label>
              <div class="col-sm-9">
                <textarea name="sendErbanNo"
                          id="sendErbanNo"
                          class="form-control validate[required]"
                          placeholder="多个平台号使用换行符分隔"></textarea>
              </div>
            </div>
            <div class="form-group">
              <label for="sendDays"
                     class="col-sm-3 control-label">赠送天数</label>
              <div class="col-sm-9">
                <input type="text"
                       name="days"
                       id="sendDays"
                       class="form-control validate[required]" />
              </div>
            </div>
            <div class="form-group">
              <label for="sendDesc"
                     class="col-sm-3 control-label">备注</label>
              <div class="col-sm-9">
                <input type="text"
                       name="desc"
                       id="sendDesc"
                       class="form-control validate[required]" />
              </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="send">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { getConfigValueByKey } from '@/api/system/sysconf';
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
import { buildSelectOption } from '@/utils/system-helper';

export default {
  name: "NameplateInfoView",
  setup () {
    return {};
  },
  created () {
    this.$nextTick(function () {
      this.initPartition();
      this.initData();
    });
  },
  methods: {
    initData () {
      $(function () {
        setStatusSelectOption();
        setTypeSelectOption();
        setStyleTypeSelectOption();
        $('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
          columns: [
            { field: 'id', title: '铭牌id', align: 'middle', width: '5%' },
            { field: 'nameplateTypeStr', title: '铭牌类型', align: 'middle', width: '5%' },
            { field: 'name.zh', title: '铭牌名称', align: 'middle', width: '5%' },
            { field: 'name.ar', title: '阿语铭牌名称', align: 'middle', width: '5%' },
            { field: 'name.en', title: '英语铭牌名称', align: 'middle', width: '5%' },
            { field: 'name.tr', title: '土耳其名称', align: 'middle', width: '5%' },
            { field: 'name.pr', title: '葡萄牙语名称', align: 'middle', width: '5%' },
            {
              field: 'partitionFlag',
              title: '地区',
              align: 'center',
              width: '10%',
              formatter: function (val, row, index) {
                let value = '';
                if ((val & 1) != 0) {
                  value += '英语区<br>';
                }
                if ((val & 2) != 0) {
                  value += '阿拉伯语区<br>';
                }
                if ((val & 4) != 0) {
                  value += '华语区<br>';
                }
                if ((val & 8) != 0) {
                  value += '土耳其区<br>';
                }
                if ((val & 16) != 0) {
                  value += '英语2区<br>';
                }
                if ((val & 32) != 0) {
                  value += '葡萄牙语<br>';
                }
                return value;
              }
            },
            {
              field: 'iconPic',
              title: '铭牌图片',
              align: 'middle',
              valign: 'middle',
              width: '5%',
              formatter: function (val, row, index) {
                if (val) {
                  return "<img style='max-width: 200px;max-height: 200px' src='" + val + "'>";
                } else {
                  return '-';
                }
              }
            },
            { field: 'isCustomWordStr', title: '是否自定义文案', align: 'middle', width: '5%' },
            {
              field: 'fixedWord.zh',
              title: '固定文案',
              align: 'middle',
              width: '5%',
              formatter: function (val, row, index) {
                if (isEmpty(val)) {
                  return '/';
                } else {
                  return val;
                }
              }
            },
            {
              field: 'fixedWord.ar',
              title: '阿语固定文案',
              align: 'middle',
              width: '5%',
              formatter: function (val, row, index) {
                if (isEmpty(val)) {
                  return '/';
                } else {
                  return val;
                }
              }
            },
            {
              field: 'fixedWord.en',
              title: '英语固定文案',
              align: 'middle',
              width: '5%',
              formatter: function (val, row, index) {
                if (isEmpty(val)) {
                  return '/';
                } else {
                  return val;
                }
              }
            },
            {
              field: 'fixedWord.tr',
              title: '土耳其固定文案',
              align: 'middle',
              width: '5%',
              formatter: function (val, row, index) {
                if (isEmpty(val)) {
                  return '/';
                } else {
                  return val;
                }
              }
            },
            {
              field: 'fixedWord.pr',
              title: '葡萄牙语固定文案',
              align: 'middle',
              width: '5%',
              formatter: function (val, row, index) {
                if (isEmpty(val)) {
                  return '/';
                } else {
                  return val;
                }
              }
            },
            { field: 'days', title: '有效期(天)', align: 'middle', width: '5%' },
            { field: 'statusStr', title: '状态', align: 'middle', width: '5%' },
            { field: 'typeStr', title: '铭牌款式', align: 'middle', width: '5%' },
            { field: 'updateBy', title: '操作人', align: 'middle', width: '5%' },
            {
              field: 'updateTime',
              title: '操作时间',
              align: 'middle',
              width: '5%',
              valign: 'middle',
              formatter: function (val, row, index) {
                if (val) {
                  var date = new Date(val);
                  return date.format("yyyy-MM-dd hh:mm:00");
                } else {
                  return '-';
                }
              }
            },
            {
              field: 'id',
              title: '操作',
              align: 'middle',
              width: '5%',
              formatter: function (val, row, index) {
                let isSendDisabled = false;
                if (row.nameplateType == 3) {
                  isSendDisabled = true;
                }
                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
                  '<i class="glyphicon glyphicon-edit"></i> 编辑</button>&nbsp;&nbsp;' +
                  '<button id="btnSend" name="btnSend" class="btn btn-sm btn-success opt-send" data-id=' + val + `${isSendDisabled ? ' disabled ' : ''}` + '>' +
                  '<i class="glyphicon glyphicon-edit"></i> 赠送</button>&nbsp;&nbsp;' +
                  '<button id="btnSync" name="btnSync" class="btn btn-sm btn-success opt-sync" data-id=' + val + '>' +
                  '<i class="glyphicon glyphicon-edit"></i> 同步</button>&nbsp;&nbsp;';
              }
            }
          ],
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 20,
          pagination: true,
          pageList: [20, 30, 50],
          search: false,
          sidePagination: "server", //表示服务端请求
          queryParamsType: "-",
          queryParams: function queryParams (params) {   //设置查询参数
            var param = {
              pageNumber: params.pageNumber,
              pageSize: params.pageSize,
              nameplateType: $('#nameplateType').val(),
              id: $('#id').val(),
              name: $('#name').val(),
              status: $('#status').val(),
              type: $('#type').val(),
              partitionId: $('#partitionId').val(),
            };
            return param;
          },
          ajax: function (request) {                    //使用ajax请求
            $.ajax({
              type: "GET",
              url: '/admin/nameplate/list',
              contentType: 'application/json;charset=utf-8',
              dataType: 'json',
              data: request.data,
              success: function (res) {
                console.log(res);
                request.success({
                  "rows": res.rows.map(i => {
                    let nameValue = i.name;
                    if (nameValue && nameValue.startsWith('{') && nameValue.endsWith('}')) {
                      i.name = JSON.parse(i.name);
                    } else {
                      i.name = {
                        zh: nameValue,
                        ar: nameValue,
                        en: nameValue,
                        tr: nameValue,
                        pr: nameValue,
                      };
                    }
                    let fixedWordValue = i.fixedWord;
                    if (fixedWordValue && fixedWordValue.startsWith('{') && fixedWordValue.endsWith('}')) {
                      i.fixedWord = JSON.parse(i.fixedWord);
                    } else {
                      i.fixedWord = {
                        zh: fixedWordValue,
                        ar: fixedWordValue,
                        en: fixedWordValue,
                        tr: fixedWordValue,
                        pr: fixedWordValue,
                      };
                    }
                    return i;
                  }),
                  "total": res.total
                });
              },
              error: function (error) {
                console.log(error);
              }
            })
          },
          toolbar: '#toolbar',
          // url: '/admin/nameplate/list',
          onLoadSuccess: function () {  //加载成功时执行
            console.log("load success");
          },
          onLoadError: function () {  //加载失败时执行
            console.log("load fail");
          }
        });

        // 查询刷新
        $('#btnSearch').on('click', function () {
          TableHelper.doRefresh('#table');
        });

        $("#table").on("click", '#btnEdit', function () {
          cleanNamePlateModal();
          var id = $(this).attr("data-id");
          $.ajax({
            type: "get",
            url: "/admin/nameplate/get",
            data: { id: id },
            dataType: "json",
            success: function (json) {
              if (json) {
                $("#id").val(json.id);
                $("#nameplateType1").val(json.nameplateType);
                let name = json.name;
                if (name && name.startsWith('{') && name.endsWith('}')) {
                  var jsonName = JSON.parse(json.name);
                  console.log(jsonName)
                  $("#name1").val(jsonName.zh);
                  $("#ar_name1").val(jsonName.ar);
                  $("#en_name1").val(jsonName.en);
                  $("#tr_name1").val(jsonName.tr);
                  $("#pr_name1").val(jsonName.pr);
                } else {
                  $("#name1").val(name);
                  $("#ar_name1").val(name);
                  $("#en_name1").val(name);
                  $("#tr_name1").val(name);
                  $("#pr_name1").val(name);
                }
                let fixedWord = json.fixedWord;
                if (fixedWord && fixedWord.startsWith('{') && fixedWord.endsWith('}')) {
                  let jsonValue = JSON.parse(json.fixedWord);
                  $('#zhFixedWord').val(jsonValue.zh);
                  $('#arFixedWord').val(jsonValue.ar);
                  $('#enFixedWord').val(jsonValue.en);
                  $('#trFixedWord').val(jsonValue.tr);
                  $('#prFixedWord').val(jsonValue.pr);
                } else {
                  $('#zhFixedWord').val(fixedWord);
                  $('#arFixedWord').val(fixedWord);
                  $('#enFixedWord').val(fixedWord);
                  $('#trFixedWord').val(fixedWord);
                  $('#prFixedWord').val(fixedWord);
                }
                $('#nameplateType1').attr("disabled", "true");
                if (!json.isCustomWord) {
                  $('input[name="isCustomWord"]').get(0).checked = true;
                  $('#fixedWord-div').addClass("hidden");
                  $('#zhFixedWord').val('');
                  $('#arFixedWord').val('');
                  $('#enFixedWord').val('');
                  $('#trFixedWord').val('');
                  $('#prFixedWord').val('');
                } else {
                  $('input[name="isCustomWord"]').get(1).checked = true;
                  $('#fixedWord-div').removeClass("hidden");
                }
                $("#days").val(json.days);
                $("#status1").val(json.status);
                $("#type1").val(json.type);
                if (json.iconPic) {
                  $('#iconPic').val(json.iconPic);
                  $('#addIconPicUrl').attr('src', json.iconPic);
                }
                //分区
                let partitionFlag = json.partitionFlag;
                if ((partitionFlag & 1) != 0) {
                  $("input:checkbox[name='partitionFlag']")[0].checked = true;
                } else {
                  $("input:checkbox[name='partitionFlag']")[0].checked = false;
                }
                if ((partitionFlag & 2) != 0) {
                  $("input:checkbox[name='partitionFlag']")[1].checked = true;
                } else {
                  $("input:checkbox[name='partitionFlag']")[1].checked = false;
                }
                if ((partitionFlag & 4) != 0) {
                  $("input:checkbox[name='partitionFlag']")[2].checked = true;
                } else {
                  $("input:checkbox[name='partitionFlag']")[2].checked = false;
                }
                if ((partitionFlag & 8) != 0) {
                  $("input:checkbox[name='partitionFlag']")[3].checked = true;
                } else {
                  $("input:checkbox[name='partitionFlag']")[3].checked = false;
                }
                if ((partitionFlag & 16) != 0) {
                  $("input:checkbox[name='partitionFlag']")[4].checked = true;
                } else {
                  $("input:checkbox[name='partitionFlag']")[4].checked = false;
                }
                if ((partitionFlag & 32) != 0) {
                  $("input:checkbox[name='partitionFlag']")[5].checked = true;
                } else {
                  $("input:checkbox[name='partitionFlag']")[5].checked = false;
                }
                // 打开编辑弹窗
                $("#addModal").modal('show');
                $("#modalLabel").text("编辑铭牌");
              } else {
                $("#tipMsg").text("获取菜单信息出错");
                $("#tipModal").modal('show');
              }
            }
          });
        });
        $('#uploadBtn').on('click', function () {
          var options = {
            type: 'post',
            url: '/admin/upload/img',
            dataType: 'json',
            success: function (json) {
              if (json.path) {
                $('#iconPic').val(json.path);
                $('#addIconPicUrl').attr("src", json.path);
              } else {
                $("#tipMsg").text(json.msg);
                $("#tipModal").modal('show');
              }
            }
          };
          $("#addForm").ajaxSubmit(options);
        });
        $('#removeIconPic').on('click', function () {
          $('#addIconPicUrl').attr('src', '');
          $('#addUploadIconPic').val('');
          $('#iconPic').val('');
        });

        //打开新增页面
        $('#btnAdd').on('click', function () {
          cleanNamePlateModal();
          $("#addModal").modal('show');
          $("#modalLabel").text("新增铭牌");
        });
        //保存
        $('#button-save').on('click', function () {
          var iconPic = $('#iconPic').val();
          var status = $('#status1').val();
          var type = $('#type1').val();
          var days = $('#days').val();
          var zhFixedWord = $('#zhFixedWord').val();
          var arFixedWord = $('#arFixedWord').val();
          var enFixedWord = $('#enFixedWord').val();
          var trFixedWord = $('#trFixedWord').val();
          var prFixedWord = $('#prFixedWord').val();
          let fixedWordValue = '';
          if (!(zhFixedWord == '' && arFixedWord == '' && enFixedWord == '' && trFixedWord == "")) {
            let jsonFixedWord = { 'zh': zhFixedWord, 'ar': arFixedWord, 'en': enFixedWord, 'tr': trFixedWord };
            fixedWordValue = JSON.stringify(jsonFixedWord);
          }
          var isCustomWord = $('input[name="isCustomWord"]:checked').val();
          var name = $('#name1').val();
          var ar_name = $('#ar_name1').val();
          var en_name = $('#en_name1').val();
          var tr_name = $('#tr_name1').val();
          var pr_name = $('#pr_name1').val();

          var jsonName = { "zh": name, "ar": ar_name, "en": en_name, "tr": tr_name }
          const nameValue = JSON.stringify(jsonName);
          var nameplateType = $('#nameplateType1').val();
          var id = $('#id').val();
          //分区
          const partitionFlagArray = $("input:checkbox[name='partitionFlag']:checked").serializeArray();
          let partitionFlag = 0;
          for (let i = 0, len = partitionFlagArray.length; i < len; i++) {
            console.log(partitionFlagArray[i]);
            partitionFlag |= partitionFlagArray[i].value;
          }
          //做下数据校验
          if (isEmpty(nameplateType) && id == null) {
            $("#tipMsg").text("铭牌类型不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(name)) {
            $("#tipMsg").text("铭牌名字不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(ar_name)) {
            $("#tipMsg").text("阿语铭牌名字不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(en_name)) {
            $("#tipMsg").text("英语铭牌名字不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(tr_name)) {
            $("#tipMsg").text("土耳其语铭牌名字不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(pr_name)) {
            $("#tipMsg").text("葡萄牙语铭牌名字不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(days)) {
            $("#tipMsg").text("有效期不能为空");
            $("#tipModal").modal('show');
            return;
          } else if (id == null && days < 1) {
            $("#tipMsg").text("有效期不能小于1");
            $("#tipModal").modal('show');
            return;
          } else if (id != null && days < 0) {
            $("#tipMsg").text("有效期不能小于0");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(status)) {
            $("#tipMsg").text("状态不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if (isEmpty(iconPic)) {
            $("#tipMsg").text("图片不能为空");
            $("#tipModal").modal('show');
            return;
          }
          if ($("#addForm").validationEngine('validate')) {
            $.ajax({
              type: "post",
              url: "/admin/nameplate/save",
              data: {
                nameplateType: nameplateType,
                name: nameValue,
                isCustomWord: isCustomWord,
                fixedWord: fixedWordValue,
                days: days,
                status: status,
                type: type,
                iconPic: iconPic,
                id: id,
                partitionFlag: partitionFlag,
              },
              dataType: "json",
              success: function (json) {
                if (json.success == 'true') {
                  $("#tipMsg").text("保存成功");
                  $("#tipModal").modal('show');
                  TableHelper.doRefresh("#table");
                  $("#addModal").modal('hide');
                } else {
                  $("#tipMsg").text("保存失败，错误信息：" + json.msg);
                  $("#tipModal").modal('show');
                }
              }
            });
          }
        });
        //是否自定义文案变化
        $('input[type=radio][name=isCustomWord]').change(function () {
          if ($(this).val() == 1) {
            $('#fixedWord-div').removeClass("hidden");
          } else {
            $('#fixedWord-div').addClass("hidden");
          }
        });

        //打开赠送铭牌弹窗
        $("#table").on('click', '.opt-send', function () {
          //清除数据
          $('#sendNameplateModal').find('input').val('');
          $('#sendNameplateModal').find('textarea').val('');
          //设置数据
          var headWearId = $(this).attr("data-id");
          $('#sendNameplateId').val(headWearId);
          $('#sendNameplateModal').modal('show');
        });

        //同步用户铭牌
        $("#table").on('click', '.opt-sync', function () {
          //设置数据
          var id = $(this).attr("data-id");
          $.ajax({
            type: "get",
            url: "/admin/nameplate/sync",
            data: {
              id: id
            },
            dataType: "json",
            success: function (json) {
              if (json.code == 200) {
                $("#tipMsg").text("同步成功");
                $("#tipModal").modal('show');
              } else {
                $("#tipMsg").text("同步失败");
                $("#tipModal").modal('show');
              }
            }
          });
        });

        //赠送铭牌
        $("#send").click(function () {
          // debugger;
          var erbanNo = $('#sendErbanNo').val().trim();//去掉首尾的空格和换行符
          if (!(erbanNo.length > 0)) {
            $("#tipMsg").text("请输入平台号");
            $("#tipModal").modal('show');
            return;
          }

          if (!$('#sendDays').val()) {
            $("#tipMsg").text("请输入体验天数");
            $("#tipModal").modal('show');
            return;
          }
          var sendDays = $('#sendDays').val();
          var sendDesc = $('#sendDesc').val();
          var nameplateId = $('#sendNameplateId').val();
          $("#tipMsg").text("赠送中，请稍后...");
          $("#tipModal").modal('show');
          if ($("#NameplateSendForm").validationEngine('validate')) {
            $.ajax({
              type: "post",
              url: "/admin/nameplate/send",
              data: {
                nameplateId: nameplateId,
                erbanNo: erbanNo,
                sendDesc: sendDesc,
                days: sendDays
              },
              dataType: "json",
              success: function (json) {
                if (json.code == 100) {
                  $('#sendNameplateModal').modal('hide');
                  $("#tipMsg").text("全部赠送成功");
                  TableHelper.doRefresh("#table");
                } else if (json.code == 200) {
                  $("#tipMsg").text("部分用户赠送失败,赠送失败平台号:" + json.erban + ",赠送失败原因:" + json.message);
                } else {
                  $("#tipMsg").text("全部赠送失败,赠送失败原因:" + json.message);
                }
              }
            });
          }
        });
      });
    },
    initPartition () {
      getPartitionInfoList().then(res => {
        let data = res.data;
        buildSelectOption(
          "#partitionId",
          null,
          [{
            value: '',
            text: '全部',
          }].concat(data.map((v) => {
            return {
              value: v.id,
              text: v.desc,
            };
          }))
        );
      });
    },
  },
};

function cleanNamePlateModal () {
  $('#id').val('');
  $('#addIconPicUrl').attr('src', '');
  $('#addUploadIconPic').val('');
  $('#iconPic').val('');
  $('#status1').val('');
  $('#type1').val('');
  $('#days').val('');
  $('#zhFixedWord').val('');
  $('#arFixedWord').val('');
  $('#enFixedWord').val('');
  $('#trFixedWord').val('');
  $('#prFixedWord').val('');
  $('input[name="isCustomWord"]').each(function () {
    $(this).removeAttr("checked");
  });
  $('#name1').val('');
  $('#ar_name1').val('');
  $('#en_name1').val('');
  $('#tr_name1').val('');
  $('#pr_name1').val('');
  $('#nameplateType1').val('');
  $('#name1').removeAttr("readonly");
  $('#nameplateType1').removeAttr("disabled");
  $('#fixedWord-div').removeClass("hidden");
  $('input[name="partitionFlag"]').each(function () {
    $(this).checked = false;
  });
}
//判断空值
function isEmpty (data) {
  if (data == null || data == undefined || data == "") {
    return true;
  }
  return false;
}

function setStatusSelectOption () {
  var rows = {
    "0": '待上架',
    "1": '上架',
    "2": '下架',
    "3": '已删除'
  };
  console.log(rows);
  for (var key in rows) {
    $('#status').append('<option value="' + key + '">' + rows[key] + '</option>');
    $('#status1').append('<option value="' + key + '">' + rows[key] + '</option>');
  }
}

function setStyleTypeSelectOption () {
  getConfigValueByKey({
    'configId': 'heartbeat_nameplate',
  }).then(res => {
    let sysConf = res.data;
    if (sysConf && sysConf.configValue) {
      let data = JSON.parse(sysConf.configValue);
      let floor = 52000;
      let upper = 131400;
      if (data.length == 2) {
        floor = data[0];
        upper = data[1];
      }
      var rows = {
        '1': floor + '~' + (upper - 1) + '送出',
        '2': floor + '~' + (upper - 1) + '收到',
        '3': upper + '+送出',
        '4': upper + '+收到',
        '5': 'CP铭牌审核送出',
        '6': '粉丝团铭牌送出',
        '7': '贵族等级铭牌送出'
      };
      console.log(rows);
      for (var key in rows) {
        $('#type').append('<option value="' + key + '">' + rows[key] + '</option>');
        $('#type1').append('<option value="' + key + '">' + rows[key] + '</option>');
      }
    }
  });
}

function setTypeSelectOption () {
  var rows = {
    "0": '官方主播',
    "1": '普通',
    "3": '贵族铭牌'

  };
  console.log(rows);
  for (var key in rows) {
    $('#nameplateType').append('<option value="' + key + '">' + rows[key] + '</option>');
    $('#nameplateType1').append('<option value="' + key + '">' + rows[key] + '</option>');
  }
}

</script>

<style scoped>
.fixed-table-body {
  height: auto !important;
}

.pull-left {
  width: 100% !important;
}
</style>