<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../bootstrap/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
<link href="../../bootstrap/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-6">
      <div class="card">
        <header class="card-header"><div class="card-title"> 生成数据表 CURD </div></header>
        <div class="card-body">
          <div class="form-group">
            <label for="tableSelect">选择数据表，可进行多选：</label>
            <select multiple="" class="form-control" id="tableSelect" style="height: 260px;">
              {{range .}}
                <option value="{{ .Name }}">{{ .Name }} -- 备注：{{ .Comment }}</option>
              {{end}}
            </select>
          </div>

          <p>
            <button type="button" id="btnOk" class="btn btn-primary">确认</button>
            <button type="button" id="btnLoading" class="btn btn-primary" disabled style="display: none">
              <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
              执行中...
            </button>
          </p>

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <header class="card-header"><div class="card-title">执行结果</div></header>
        <div class="card-body">
          <pre id="resultDiv"></pre>
        </div>
      </div>
    </div>

  </div>
</div>

<script type="text/javascript" src="../../bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../bootstrap/js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#btnOk").click(function(){
      var tables = [];
      var options = $("#tableSelect").find("option:selected");

      if (options.length < 1) {
        $.alert({
          title: '温馨提示',
          icon: 'mdi mdi-alert',
          type: 'orange',
          content: '请选择数据表。',
        });
        return false;
      }

      $("#resultDiv").text("");
      $(this).hide();
      $("#btnLoading").show();

      for (var i = 0; i < options.length; i++) {
        tables.push(options.eq(i).val()); // 将所有的值赋给数组
      }

      $.post("/generator/gorm/execute",{tables:tables.join(',')},function (data) {
        $("#resultDiv").text(data);
        $("#btnLoading").hide();
        $("#btnOk").show();
      })

    })
  })
</script>
<div style="display:none">
  <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279911342'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1279911342%26' type='text/javascript'%3E%3C/script%3E"));</script>
</div>
</body>
</html>
