优化自定义主键，支持输入多个

dbsyncer-web/src/main/resources/public/index.html

@@ -18,6 +18,7 @@
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/bootstrap-dialog/bootstrap-dialog.min.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/bootstrap-select/bootstrap-select.min.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/bootstrap-switch/bootstrap-switch.min.css}"/>
+    <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/bootstrap-tagsinput/bootstrap-tagsinput.min.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/bootstrap-fileinput/fileinput.min.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/icheck/all.css}"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/css/loading-plus/loading-plus.css}"/>
@@ -46,6 +47,7 @@
 <script th:src="@{/plugins/js/bootstrap-growl/jquery.bootstrap-growl.min.js}"></script>
 <script th:src="@{/plugins/js/bootstrap-select/bootstrap-select.min.js}"></script>
 <script th:src="@{/plugins/js/bootstrap-switch/bootstrap-switch.min.js}"></script>
+<script th:src="@{/plugins/js/bootstrap-tagsinput/bootstrap-tagsinput.min.js}"></script>
 <script th:src="@{/plugins/js/bootstrap-fileinput/fileinput.min.js}"></script>
 <script th:src="@{/plugins/js/bootstrap-fileinput/theme.min.js}"></script>
 <script th:src="@{/plugins/js/bootstrap-fileinput/zh.js}"></script>

dbsyncer-web/src/main/resources/public/mapping/editIncrementQuartz.html

@@ -8,19 +8,19 @@
             <div class="col-md-4">
                 <label class="col-sm-3 control-label text-right">Insert*</label>
                 <div class="col-sm-9">
-                    <input name="timingInsert" type="text" class="form-control" dbsyncer-valid="require" th:value="${mapping?.listener?.insert}?:'I'" />
+                    <input name="timingInsert" type="text" class="form-control" data-role="tagsinput" dbsyncer-valid="require" th:value="${mapping?.listener?.insert}?:'I'" />
                 </div>
             </div>
             <div class="col-md-4">
                 <label class="col-sm-3 control-label text-right">Update*</label>
                 <div class="col-sm-9">
-                    <input name="timingUpdate" type="text" class="form-control" dbsyncer-valid="require" th:value="${mapping?.listener?.update}?:'U'"/>
+                    <input name="timingUpdate" type="text" class="form-control" data-role="tagsinput" dbsyncer-valid="require" th:value="${mapping?.listener?.update}?:'U'"/>
                 </div>
             </div>
             <div class="col-md-4">
                 <label class="col-sm-3 control-label text-right">Delete*</label>
                 <div class="col-sm-9">
-                    <input name="timingDelete" type="text" class="form-control" dbsyncer-valid="require" th:value="${mapping?.listener?.delete?:'D'}"/>
+                    <input name="timingDelete" type="text" class="form-control" data-role="tagsinput" dbsyncer-valid="require" th:value="${mapping?.listener?.delete?:'D'}"/>
                 </div>
             </div>
         </div>

dbsyncer-web/src/main/resources/public/mapping/editTable.html

@@ -34,9 +34,9 @@
     <div class="row">
         <!-- 数据源配置 -->
         <div class="col-md-5">
-            <label class="col-sm-3 control-label text-right">标记主键 <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="如果使用的数据源表或视图没有主键，可以自定义主键，多个使用英文逗号,拼接"></i></label>
+            <label class="col-sm-3 control-label text-right">标记主键 <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="数据源表/视图没有主键，自定义一个或多个主键"></i></label>
             <div class="col-sm-9">
-                <input id="sourceTablePK" class="form-control" type="text" />
+                <input id="sourceTablePK" class="form-control" type="text" data-role="tagsinput"/>
             </div>
         </div>
         <!-- 中间图标 -->
@@ -46,9 +46,9 @@
         <!-- 目标源配置 -->
         <div class="col-md-5">
             <div class="form-group">
-                <label class="col-sm-3 control-label text-right">标记主键 <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="如果使用的目标源表或视图没有主键，可以自定义主键，多个使用英文逗号,拼接"></i></label>
+                <label class="col-sm-3 control-label text-right">标记主键 <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="目标源表/视图没有主键，自定义一个或多个主键"></i></label>
                 <div class="col-sm-9">
-                    <input id="targetTablePK" class="form-control" type="text" />
+                    <input id="targetTablePK" class="form-control" type="text" data-role="tagsinput" />
                 </div>
             </div>
         </div>

dbsyncer-web/src/main/resources/static/js/common.js

@@ -80,6 +80,15 @@ function initSelect($select){
         "selectedTextFormat":"count > 10"
     });
 }
+// 绑定多值输入框事件
+function initMultipleInputTags() {
+    $("input[data-role=tagsinput]").tagsinput({
+        maxChars: 24,
+        maxTags: 5,
+        tagClass: 'label label-success',
+        trimValue: true
+    });
+}
 
 // ******************* 扩展JS表单方法 ***************************
 $.fn.serializeJson = function () {

dbsyncer-web/src/main/resources/static/js/mapping/edit.js

@@ -211,6 +211,8 @@ $(function () {
     bindMappingTableGroupListClick();
     // 绑定下拉选择事件自动匹配相似表事件
     bindTableSelect();
+    // 绑定多值输入框事件
+    initMultipleInputTags();
     // 绑定删除表关系点击事件
     bindMappingTableGroupDelClick();
 

dbsyncer-web/src/main/resources/static/plugins/css/bootstrap-tagsinput/bootstrap-tagsinput.min.css

@@ -0,0 +1 @@
+.bootstrap-tagsinput{background-color:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);display:inline-block;padding:4px 6px;color:#555;vertical-align:middle;border-radius:4px;width:100%;line-height:22px;cursor:text;}.bootstrap-tagsinput input{border:none;box-shadow:none;outline:none;background-color:transparent;padding:0 6px;margin:0;width:auto;max-width:inherit;}.bootstrap-tagsinput.form-control input::-moz-placeholder{color:#777;opacity:1;}.bootstrap-tagsinput.form-control input:-ms-input-placeholder{color:#777;}.bootstrap-tagsinput.form-control input::-webkit-input-placeholder{color:#777;}.bootstrap-tagsinput input:focus{border:none;box-shadow:none;}.bootstrap-tagsinput .tag{margin-right:2px;color:white;}.bootstrap-tagsinput .tag [data-role="remove"]{margin-left:8px;cursor:pointer;}.bootstrap-tagsinput .tag [data-role="remove"]:after{content:"x";padding:0px 2px;}.bootstrap-tagsinput .tag [data-role="remove"]:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);}.bootstrap-tagsinput .tag [data-role="remove"]:hover:active{box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);}