YwxAppThink/app/backend/view/datatable/index.html

<div class="layui-fluid"><div class="layui-card">
  <div class="layui-card-header">
    数据表管理
    <span class="layui-word-aux" style="margin-left:10px">
      表前缀：<b>{$prefix}</b>　建表成功后可直接用 addon:crud 生成 CRUD
    </span>
  </div>
  <div class="layui-card-body">
    <div class="layui-form" lay-filter="search-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="keyword" placeholder="表名 / 表备注" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
          <select name="unregistered">
            <option value="0">全部表</option>
            <option value="1">仅未归档（不在任何 install.sql）</option>
          </select>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn">
            <i class="layui-icon layui-icon-search"></i> 搜索
          </button>
          <button class="layui-btn layui-btn-primary" id="btn-reset">
            <i class="layui-icon layui-icon-refresh"></i>
          </button>
        </div>
      </div>
    </div>
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
  </div>
</div></div>

<!-- 顶部工具条 -->
<script type="text/html" id="tableBar">
<div class="layui-btn-group">
  <button class="layui-btn layui-btn-sm" lay-event="create" data-perm="datatable:create">
    <i class="layui-icon layui-icon-add-1"></i> 新建表
  </button>
  <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="optimize" data-perm="datatable:optimize">
    <i class="layui-icon layui-icon-set"></i> 优化选中
  </button>
  <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="export" data-perm="datatable:export">
    <i class="layui-icon layui-icon-export"></i> 导出安装 SQL
  </button>
  <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload" data-perm="datatable:index">
    <i class="layui-icon layui-icon-refresh"></i> 刷新
  </button>
</div>
</script>

<!-- 行操作 -->
<script type="text/html" id="tableAction">
<div class="layui-btn-group">
  <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="structure" data-perm="datatable:index">结构</button>
  <button class="layui-btn layui-btn-xs" lay-event="exportRow" data-perm="datatable:export">导出SQL</button>
  <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="optimizeRow" data-perm="datatable:optimize">优化</button>
  {{# if(!d.protected){ }}
  <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="drop" data-perm="datatable:drop">删除</button>
  {{# } }}
</div>
</script>

<!-- 新建表弹窗 -->
<script type="text/html" id="createTpl">
<div style="padding:15px">
  <form class="layui-form layui-form-pane" lay-filter="create-form" id="create-form">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label" style="width:70px">表名</label>
        <div class="layui-input-inline" style="width:150px">
          <input type="text" name="table" placeholder="demo_item" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label" style="width:70px">表备注</label>
        <div class="layui-input-inline" style="width:180px">
          <input type="text" name="comment" placeholder="演示表" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label" style="width:70px">引擎</label>
        <div class="layui-input-inline" style="width:110px">
          <select name="engine"><option value="InnoDB">InnoDB</option><option value="MyISAM">MyISAM</option><option value="MEMORY">MEMORY</option></select>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label" style="width:70px">字符集</label>
        <div class="layui-input-inline" style="width:120px">
          <select name="charset"><option value="{$charset}">{$charset}</option><option value="utf8">utf8</option><option value="gbk">gbk</option></select>
        </div>
      </div>
    </div>

    <fieldset class="layui-elem-field">
      <legend>字段（至少 1 个）</legend>
      <div class="layui-field-box" id="fieldRows"></div>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" id="btn-add-field">
        <i class="layui-icon layui-icon-add-1"></i> 添加字段
      </button>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" id="btn-add-id">补一个 id 主键行</button>
    </fieldset>

    <div class="layui-form-item" style="margin-top:10px">
      <label class="layui-form-label" style="width:70px">SQL 预览</label>
      <div class="layui-input-block" style="margin-left:100px">
        <textarea id="sqlPreview" class="layui-textarea" rows="8" readonly placeholder="点「生成 SQL 预览」后显示，确认无误再执行"></textarea>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block" style="margin-left:0;text-align:right">
        <button type="button" class="layui-btn layui-btn-primary" id="btn-preview">
          <i class="layui-icon layui-icon-fonts-code"></i> 生成 SQL 预览
        </button>
        <button type="button" class="layui-btn" id="btn-exec" data-perm="datatable:create">
          <i class="layui-icon layui-icon-ok"></i> 执行创建
        </button>
      </div>
    </div>
  </form>
</div>
</script>

<!-- 导出安装 SQL 弹窗 -->
<script type="text/html" id="exportTpl">
<div style="padding:15px">
  <div id="exportSummary" class="layui-word-aux" style="margin-bottom:8px"></div>
  <table class="layui-table layui-table-sm">
    <thead><tr><th>表</th><th style="width:120px">归档状态</th><th>建议写入</th></tr></thead>
    <tbody id="exportBody"></tbody>
  </table>
  <textarea id="exportSqlText" class="layui-textarea" rows="14" readonly></textarea>
  <div style="margin-top:8px;text-align:right">
    <button type="button" class="layui-btn layui-btn-primary" id="btn-copy-sql">复制</button>
    <button type="button" class="layui-btn" id="btn-download-sql">下载 .sql</button>
  </div>
  <div class="layui-word-aux" style="margin-top:6px">
    表名已换成 <code>__PREFIX__</code> 占位符，可直接粘进对应 install.sql；
    若该表还需运行期自愈，记得在对应 Schema 类里登记 ensureTable()。
  </div>
</div>
</script>

<!-- 表结构弹窗 -->
<script type="text/html" id="structureTpl">
<div style="padding:15px">
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
      <li class="layui-this">字段</li>
      <li>建表语句</li>
    </ul>
    <div class="layui-tab-content" style="padding:10px 0">
      <div class="layui-tab-item layui-show">
        <table class="layui-table layui-table-sm" id="columnTable">
          <thead><tr>
            <th>字段</th><th>类型</th><th>可空</th><th>默认</th><th>键</th><th>额外</th><th>注释</th>
          </tr></thead>
          <tbody id="columnBody"></tbody>
        </table>
      </div>
      <div class="layui-tab-item">
        <textarea id="createSqlText" class="layui-textarea" rows="16" readonly></textarea>
      </div>
    </div>
  </div>
</div>
</script>

<script>
  layui.use(['datatable'], function () {});
</script>