支持多条SQL配置

dbsyncer-web/src/main/resources/public/connector/addDqlMysql.html

@@ -23,82 +23,18 @@
         </div>
     </div>
 
-    <!-- SQL配置__开始 -->
-    <div class="sqlTableList" th:with="sqlTableList=${connector?.config?.sqlTables}">
-        <!-- 已添加的SQL配置 -->
-        <div class="form-group">
-            <label class="col-sm-2 control-label">SQL表</label>
-            <div class="col-sm-10">
-                <select id="sqlTableSelect" name="sqlTableSelect" class="form-control select-control">
-                    <option th:each="sqlTable,state:${sqlTableList}" th:value="${sqlTable?.sql}" th:text="${sqlTable?.table}" />
-                </select>
-            </div>
-        </div>
-
-        <!-- 默认配置_开始 -->
-        <div th:if="${#lists.isEmpty(sqlTableList)}">
-            <div class="form-group">
-                <label class="col-sm-2 control-label">主表</label>
-                <div class="col-sm-4">
-                    <input class="form-control" name="table" type="text" maxlength="32" th:value="USER"/>
-                </div>
-                <div class="col-sm-6 text-right">
-                    <button id="addSqlTableBtn" type="button" class="btn btn-primary">
-                        <span class="fa fa-plus"></span>添加(0)
-                    </button>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-sm-2 control-label">SQL</label>
-                <div class="col-sm-10">
-                    <textarea name="sql" class="sql form-control dbsyncer_textarea_resize_none" maxlength="8192" rows="10">SELECT T1.* FROM USER T1</textarea>
-                </div>
-            </div>
-            <div class="form-group">
-                <div class="col-sm-6"></div>
-                <div class="col-sm-6 text-right">
-                    <a href="javascript:beautifySql();"><span class="fa fa-magic fa-1x fa-flip-horizontal dbsyncer_pointer"
-                                                              title="美化SQL"></span>美化SQL</a>
-                </div>
-            </div>
-        </div>
-
-        <!-- 渲染配置_开始 -->
-        <div th:if="${not #lists.isEmpty(sqlTableList)}" th:each="sqlTable,state : ${sqlTableList}">
-            <div class="form-group">
-                <label class="col-sm-2 control-label">主表</label>
-                <div class="col-sm-4">
-                    <input class="form-control" name="table" type="text" maxlength="32" th:value="${sqlTable?.table}"/>
-                </div>
-                <div class="col-sm-6 text-right">
-                    <button id="addSqlTableBtn" type="button" class="btn btn-primary">
-                        <span class="fa fa-plus"></span>添加([[${sqlTableList?.size()} ?: 0]])
-                    </button>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-sm-2 control-label">SQL</label>
-                <div class="col-sm-10">
-                    <textarea name="sql" class="sql form-control dbsyncer_textarea_resize_none" maxlength="8192" rows="10" th:text="${sqlTable?.sql}"></textarea>
-                </div>
-            </div>
-            <div class="form-group">
-                <div class="col-sm-6"></div>
-                <div class="col-sm-6 text-right">
-                    <a href="javascript:beautifySql();"><span class="fa fa-magic fa-1x fa-flip-horizontal dbsyncer_pointer"
-                                                              title="美化SQL"></span>美化SQL</a>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- SQL配置__结束 -->
+    <!-- SQL配置 -->
+    <div th:replace="connector/addSQL :: content"></div>
 
     <script type="text/javascript">
         $(function () {
             // 初始化select插件
             initSelectIndex($(".select-control"), 1);
+
+            $("#sql").val("SELECT T1.* FROM USER T1");
         })
     </script>
+    <script th:src="@{/js/connector/editSQL.js}"></script>
 </div>
 
 </html>

dbsyncer-web/src/main/resources/public/connector/addDqlOracle.html

@@ -15,25 +15,9 @@
         </div>
     </div>
     <div class="form-group">
-        <label class="col-sm-2 control-label">SQL <strong class="driverVerifcateRequired">*</strong></label>
-        <div class="col-sm-10">
-            <textarea name="sql" class="sql form-control dbsyncer_textarea_resize_none" maxlength="8192"
-                      dbsyncer-valid="require" rows="10"
-                      th:text="${connector?.config?.sqlTables[0]?.sql}?:'SELECT T1.*,ROWIDTOCHAR(ROWID) as RID FROM &quot;USER&quot; T1'"></textarea>
-        </div>
-    </div>
-    <div class="form-group">
-        <div class="col-sm-6"></div>
-        <div class="col-sm-6 text-right">
-            <a href="javascript:beautifySql();"><span class="fa fa-magic fa-1x fa-flip-horizontal dbsyncer_pointer"
-                                                      title="美化SQL"></span>美化SQL</a>
-        </div>
-    </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">主表 <strong class="driverVerifcateRequired">*</strong></label>
+        <label class="col-sm-2 control-label">架构名 </label>
         <div class="col-sm-4">
-            <input class="form-control" name="table" type="text" maxlength="32" dbsyncer-valid="require"
-                   placeholder="USER" th:value="${connector?.config?.sqlTables[0]?.table}"/>
+            <input class="form-control" name="schema" type="text" maxlength="32" th:value="${connector?.config?.schema}"/>
         </div>
         <div class="col-sm-6"></div>
     </div>
@@ -43,19 +27,25 @@
             <textarea name="url" class="form-control dbsyncer_textarea_resize_none" maxlength="512" dbsyncer-valid="require" rows="5" th:text="${connector?.config?.url}?:'jdbc:oracle:thin:@127.0.0.1:1521:ORCL'"></textarea>
         </div>
     </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">架构名 </label>
-        <div class="col-sm-4">
-            <input class="form-control" name="schema" type="text" maxlength="32" th:value="${connector?.config?.schema}"/>
-        </div>
-        <div class="col-sm-6"></div>
-    </div>
     <div class="form-group">
         <label class="col-sm-2 control-label">驱动 </label>
         <div class="col-sm-10">
             <input class="form-control" readonly="true" name="driverClassName" type="text" value="oracle.jdbc.OracleDriver" />
         </div>
     </div>
+
+    <!-- SQL配置 -->
+    <div th:replace="connector/addSQL :: content"></div>
+
+    <script type="text/javascript">
+        $(function () {
+            // 初始化select插件
+            initSelectIndex($(".select-control"), 1);
+
+            $("#sql").val("SELECT T1.*,ROWIDTOCHAR(ROWID) as RID FROM \"USER\" T1");
+        })
+    </script>
+    <script th:src="@{/js/connector/editSQL.js}"></script>
 </div>
 
 </html>

dbsyncer-web/src/main/resources/public/connector/addDqlPostgreSQL.html

@@ -15,29 +15,6 @@
                    th:value="${connector?.config?.password}" type="password"/>
         </div>
     </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">SQL <strong class="driverVerifcateRequired">*</strong></label>
-        <div class="col-sm-10">
-            <textarea name="sql" class="sql form-control dbsyncer_textarea_resize_none" maxlength="8192"
-                      dbsyncer-valid="require" rows="10"
-                      th:text="${connector?.config?.sqlTables[0]?.sql}?:'SELECT T1.* FROM &quot;USER&quot; T1'"></textarea>
-        </div>
-    </div>
-    <div class="form-group">
-        <div class="col-sm-6"></div>
-        <div class="col-sm-6 text-right">
-            <a href="javascript:beautifySql();"><span class="fa fa-magic fa-1x fa-flip-horizontal dbsyncer_pointer"
-                                                      title="美化SQL"></span>美化SQL</a>
-        </div>
-    </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">主表 <strong class="driverVerifcateRequired">*</strong></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="table" type="text" maxlength="32" dbsyncer-valid="require"
-                   placeholder="USER" th:value="${connector?.config?.sqlTables[0]?.table}"/>
-        </div>
-        <div class="col-sm-6"></div>
-    </div>
     <div class="form-group">
         <label class="col-sm-2 control-label">URL <strong class="driverVerifcateRequired">*</strong></label>
         <div class="col-sm-10">
@@ -77,6 +54,9 @@
         </div>
     </div>
 
+    <!-- SQL配置 -->
+    <div th:replace="connector/addSQL :: content"></div>
+
     <script type="text/javascript">
         $(function () {
             $('#dropSlotOnCloseSwitch').bootstrapSwitch({
@@ -88,8 +68,11 @@
             });
             // 初始化select插件
             initSelectIndex($(".select-control"), 1);
+
+            $("#sql").val("SELECT T1.* FROM \"USER\" T1");
         })
     </script>
+    <script th:src="@{/js/connector/editSQL.js}"></script>
 </div>
 
 </html>

dbsyncer-web/src/main/resources/public/connector/addDqlSqlServer.html

@@ -14,29 +14,6 @@
                    th:value="${connector?.config?.password}"/>
         </div>
     </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">SQL <strong class="driverVerifcateRequired">*</strong></label>
-        <div class="col-sm-10">
-            <textarea name="sql" class="sql form-control dbsyncer_textarea_resize_none" maxlength="1024"
-                      dbsyncer-valid="require" rows="10"
-                      th:text="${connector?.config?.sqlTables[0]?.sql}?:'SELECT T1.* FROM USER T1'"></textarea>
-        </div>
-    </div>
-    <div class="form-group">
-        <div class="col-sm-6"></div>
-        <div class="col-sm-6 text-right">
-            <a href="javascript:beautifySql();"><span class="fa fa-magic fa-1x fa-flip-horizontal dbsyncer_pointer"
-                                                      title="美化SQL"></span>美化SQL</a>
-        </div>
-    </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">主表 <strong class="driverVerifcateRequired">*</strong></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="table" type="text" maxlength="32" dbsyncer-valid="require"
-                   placeholder="USER" th:value="${connector?.config?.sqlTables[0]?.table}"/>
-        </div>
-        <div class="col-sm-6"></div>
-    </div>
     <div class="form-group">
         <label class="col-sm-2 control-label">URL <strong class="driverVerifcateRequired">*</strong></label>
         <div class="col-sm-10">
@@ -56,6 +33,19 @@
             <input class="form-control" readonly="true" name="driverClassName" type="text" th:value="${connector?.config?.driverClassName} ?: 'com.microsoft.sqlserver.jdbc.SQLServerDriver'" />
         </div>
     </div>
+
+    <!-- SQL配置 -->
+    <div th:replace="connector/addSQL :: content"></div>
+
+    <script type="text/javascript">
+        $(function () {
+            // 初始化select插件
+            initSelectIndex($(".select-control"), 1);
+
+            $("#sql").val("SELECT T1.* FROM USER T1");
+        })
+    </script>
+    <script th:src="@{/js/connector/editSQL.js}"></script>
 </div>
 
 </html>

dbsyncer-web/src/main/resources/public/connector/addSQL.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
+
+<div th:fragment="content">
+    <!-- SQL配置 -->
+    <div class="page-header"></div>
+
+    <!-- 已添加的SQL配置 -->
+    <div class="form-group">
+        <label class="col-sm-2 control-label">SQL表</label>
+        <div class="col-sm-4">
+            <select id="sqlTableSelect" class="form-control select-control">
+                <option th:each="sqlTable,state:${connector?.config?.sqlTables}" th:value="${sqlTable?.sql}" th:text="${sqlTable?.table}" />
+            </select>
+        </div>
+        <div class="col-sm-6 text-right">
+            <button id="addSqlTableBtn" type="button" class="btn btn-default"> <span class="fa fa-plus"></span>添加([[${sqlTableList?.size()} ?: 0]])</button>
+        </div>
+        <input type="hidden" id="sqlTableSelectParams" name="sqlTableSelect"/>
+    </div>
+
+    <div class="form-group">
+        <label class="col-sm-2 control-label">SQL名称</label>
+        <div class="col-sm-4">
+            <input class="form-control" id="sqlName" type="text" maxlength="32" placeholder="ERP用户表"/>
+        </div>
+        <label class="col-sm-2 control-label">主表 <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="用于增量同步，根据监听的主表获取增量数据"></i></label>
+        <div class="col-sm-4">
+            <input class="form-control" id="table" type="text" maxlength="32" placeholder="USER"/>
+        </div>
+    </div>
+    <div class="form-group">
+        <label class="col-sm-2 control-label">SQL</label>
+        <div class="col-sm-10">
+            <textarea id="sql" name="sql" class="sql form-control dbsyncer_textarea_resize_none" maxlength="8192" rows="10"></textarea>
+        </div>
+    </div>
+    <div class="form-group">
+        <div class="col-sm-12 text-right">
+            <a href="javascript:beautifySql();"><span class="fa fa-magic fa-1x fa-flip-horizontal dbsyncer_pointer" title="美化SQL"></span>美化SQL</a>
+        </div>
+    </div>
+
+</div>
+</html>

dbsyncer-web/src/main/resources/static/js/connector/editSQL.js

@@ -0,0 +1,45 @@
+$(function () {
+    // 添加SQL配置项
+    let $addSqlTableBtn = $("#addSqlTableBtn");
+    $addSqlTableBtn.click(function () {
+        $addSqlTableBtn.prop('disabled', true);
+        let $sqlTableSelectParams = $("#sqlTableSelectParams");
+        let json = $sqlTableSelectParams.val();
+        let jsonArray = [];
+        if(!isBlank(json)){
+            jsonArray = JSON.parse(json);
+        }
+
+        // 校验参数
+        let $sqlName = $("#sqlName");
+        if(isBlank($sqlName.val())){
+            bootGrowl("SQL名称不能空.", "danger");
+            $addSqlTableBtn.removeAttr('disabled');
+            return;
+        }
+        let $table = $("#table");
+        if(isBlank($table.val())){
+            bootGrowl("主表不能空.", "danger");
+            $addSqlTableBtn.removeAttr('disabled');
+            return;
+        }
+        let $sql = $("#sql");
+        if(isBlank($sql.val())){
+            bootGrowl("SQL不能空.", "danger");
+            $addSqlTableBtn.removeAttr('disabled');
+            return;
+        }
+        // 重复校验
+
+        // 暂存配置
+        jsonArray.push({"sqlName": $sqlName.val(), "table": $table.val(), "sql": $sql.val()});
+        $sqlTableSelectParams.val(JSON.stringify(jsonArray));
+
+        $sqlName.val("");
+        $table.val("");
+        $sql.val("");
+        $addSqlTableBtn.removeAttr('disabled');
+    });
+
+
+})