优化界面操作

dbsyncer-biz/src/main/java/org/dbsyncer/biz/TableGroupService.java

@@ -29,9 +29,10 @@ public interface TableGroupService {
     /**
      * 删除表关系
      *
-     * @param id
+     * @param mappingId
+     * @param ids
      */
-    boolean remove(String id);
+    boolean remove(String mappingId, String ids);
 
     /**
      * 获取表关系

dbsyncer-biz/src/main/java/org/dbsyncer/biz/impl/TableGroupServiceImpl.java

@@ -14,6 +14,7 @@ import org.springframework.stereotype.Service;
 import org.springframework.util.Assert;
 
 import java.util.*;
+import java.util.stream.Stream;
 
 /**
  * @author AE86
@@ -52,16 +53,22 @@ public class TableGroupServiceImpl extends BaseServiceImpl implements TableGroup
     }
 
     @Override
-    public boolean remove(String id) {
-        TableGroup tableGroup = manager.getTableGroup(id);
-        Assert.notNull(tableGroup, "tableGroup can not be null.");
-        assertRunning(tableGroup);
-        log(LogType.TableGroupLog.DELETE, tableGroup);
+    public boolean remove(String mappingId, String ids) {
+        Assert.hasText(mappingId, "Mapping id can not be null");
+        Assert.hasText(ids, "TableGroup ids can not be null");
+        Mapping mapping = manager.getMapping(mappingId);
+        Assert.notNull(mapping, "Mapping can not be null");
+        assertRunning(mapping.getMetaId());
+
+        // 批量删除表
+        Stream.of(ids.split(",")).parallel().forEach(id -> {
+            TableGroup model = manager.getTableGroup(id);
+            log(LogType.TableGroupLog.DELETE, model);
+            manager.removeTableGroup(id);
+        });
 
-        manager.removeTableGroup(id);
         // 合并驱动公共字段
-        mergeMappingColumn(tableGroup.getMappingId());
-
+        mergeMappingColumn(mapping.getId());
         return true;
     }
 

dbsyncer-web/src/main/java/org/dbsyncer/web/controller/index/TableGroupController.java

@@ -1,6 +1,7 @@
 package org.dbsyncer.web.controller.index;
 
-import org.dbsyncer.biz.*;
+import org.dbsyncer.biz.MappingService;
+import org.dbsyncer.biz.TableGroupService;
 import org.dbsyncer.biz.vo.RestResult;
 import org.dbsyncer.parser.model.TableGroup;
 import org.dbsyncer.web.controller.BaseController;
@@ -62,9 +63,9 @@ public class TableGroupController extends BaseController {
 
     @PostMapping("/remove")
     @ResponseBody
-    public RestResult remove(@RequestParam(value = "id") String id) {
+    public RestResult remove(@RequestParam(value = "mappingId") String mappingId, @RequestParam(value = "ids") String ids) {
         try {
-            return RestResult.restSuccess(tableGroupService.remove(id));
+            return RestResult.restSuccess(tableGroupService.remove(mappingId, ids));
         } catch (Exception e) {
             logger.error(e.getLocalizedMessage(), e.getClass());
             return RestResult.restFail(e.getMessage());

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

@@ -36,10 +36,10 @@
         <div class="row">
             <div class="col-md-10"></div>
             <div class="col-md-2 text-right">
-                <button id="tableGroupDel" type="button" class="btn btn-default">
+                <button id="tableGroupDelBtn" th:mappingId="${mapping?.id}" type="button" class="btn btn-default" disabled="disabled">
                     <span class="fa fa-remove"></span>删除
                 </button>
-                <button id="tableGroupAdd" th:mappingId="${mapping?.id}" type="button" class="btn btn-primary">
+                <button id="tableGroupAddBtn" th:mappingId="${mapping?.id}" type="button" class="btn btn-primary">
                     <span class="fa fa-plus"></span>添加
                 </button>
             </div>
@@ -47,7 +47,7 @@
     </div>
 
     <div class="form-group">
-        <table class="table table-hover" id="mappingTableGroupList">
+        <table class="table table-hover">
             <thead>
             <tr>
                 <th>数据源表</th>
@@ -56,8 +56,7 @@
                     <div class="row">
                         <div class="col-md-12">
                             <div class="icheck-danger">
-                                <input type="checkbox" id="del_all" />
-                                <label for="del_all">操作</label>
+                                <input type="checkbox" class="tableGroupCheckboxAll" />
                             </div>
                         </div>
                     </div>
@@ -72,8 +71,7 @@
                         <div class="row">
                             <div class="col-md-12">
                                 <div class="icheck-danger">
-                                    <input type="checkbox" id="del_all" />
-                                    <a th:id="${t?.id}" th:mappingId="${mapping?.id}" class='fa fa-remove fa-2x tableGroupDelete dbsyncer_pointer' title='删除'></a>
+                                    <input th:value="${t?.id}" th:mappingId="${mapping?.id}" type="checkbox" class="tableGroupCheckbox" />
                                 </div>
                             </div>
                         </div>

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

@@ -34,28 +34,46 @@ function bindMappingModelChange() {
 }
 
 // 绑定删除表关系复选框删除事件
-function bindMappingTableGroupDelClick(){
-    var $mappingTableGroupList = $("#mappingTableGroupList");
-    var $checkbox = $mappingTableGroupList.find('input:checkbox[type="checkbox"]');
-    // 初始化icheck插件
-    $checkbox.iCheck({
+function bindMappingTableGroupCheckBoxClick(){
+    var $checkboxAll = $('.tableGroupCheckboxAll');
+    var $checkbox = $('.tableGroupCheckbox');
+    var $tableGroupDelBtn = $("#tableGroupDelBtn");
+    $checkboxAll.iCheck({
         checkboxClass: 'icheckbox_square-red',
         labelHover: false,
         cursor: true
     }).on('ifChecked', function (event) {
-        var length = $('.ck_tags input:checked').length;
-        if (length > 0) {
-            // 显示删除删除按钮
-
-        }
-        console.log(length);
+        $checkbox.iCheck('check');
     }).on('ifUnchecked', function (event) {
-        var length = $('.ck_tags input:checked').length;
-        if (length < 1) {
-            // 隐藏删除删除按钮
+        $checkbox.iCheck('uncheck');
+    }).on('ifChanged', function (event) {
+        showMappingTableGroupDelBtn($checkbox);
+    });
+
+    // 初始化icheck插件
+    $checkbox.iCheck({
+        checkboxClass: 'icheckbox_square-red',
+        cursor: true
+    }).on('ifChanged', function (event) {
+        showMappingTableGroupDelBtn($checkbox);
+    });
+}
+
+// 获取选择的CheckBox[value]
+function getTableGroupCheckBoxSize($checkbox){
+    var checked = [];
+    $checkbox.each(function(){
+        if($(this).prop('checked')){
+            checked.push($(this).val());
         }
-        console.log(length);
     });
+    return checked;
+}
+
+// 显示批量删除表按钮
+function showMappingTableGroupDelBtn($checkbox){
+    var checked = getTableGroupCheckBoxSize($checkbox);
+    $("#tableGroupDel").prop('disabled', checked.length < 1);
 }
 
 // 显示驱动编辑配置（全量/增量）
@@ -79,30 +97,13 @@ function bindMappingTableGroupListClick() {
     $tableGroupList.find("tr").bind('click', function () {
         doLoader('/tableGroup/page/editTableGroup?id=' + $(this).attr("id"));
     });
-
-    var $del = $(".tableGroupDelete");
-    $del.unbind("click");
-    $del.bind('click', function () {
-        // 阻止tr触发click事件
-        event.cancelBubble = true;
-        var $url = "/tableGroup/remove?id=" + $(this).attr("id");
-        var $mappingId = $(this).attr("mappingId");
-        doPoster($url, {}, function (data) {
-            if (data.success == true) {
-                bootGrowl("删除映射关系成功!", "success");
-                refresh($mappingId);
-            } else {
-                bootGrowl(data.resultValue, "danger");
-            }
-        });
-    });
 }
 
 // 绑定新增表关系点击事件
 function bindMappingTableGroupAddClick() {
-    var $tableGroupAdd = $("#tableGroupAdd");
-    $tableGroupAdd.unbind("click");
-    $tableGroupAdd.bind('click', function () {
+    var $tableGroupAddBtn = $("#tableGroupAddBtn");
+    $tableGroupAddBtn.unbind("click");
+    $tableGroupAddBtn.bind('click', function () {
         var m = {};
         m.mappingId = $(this).attr("mappingId");
         m.sourceTable = $("#sourceTable option:checked").val();
@@ -118,6 +119,24 @@ function bindMappingTableGroupAddClick() {
     });
 }
 
+// 绑定删除表关系点击事件
+function bindMappingTableGroupDelClick() {
+    $("#tableGroupDel").click(function () {
+        var ids = getTableGroupCheckBoxSize($(".tableGroupCheckbox"));
+        if (ids.length > 0) {
+            var $mappingId = $(this).attr("mappingId");
+            doPoster("/tableGroup/remove", {"mappingId": $mappingId, "ids" : ids.join()}, function (data) {
+                if (data.success == true) {
+                    bootGrowl("删除映射关系成功!", "success");
+                    refresh($mappingId);
+                } else {
+                    bootGrowl(data.resultValue, "danger");
+                }
+            });
+        }
+    });
+}
+
 // 绑定下拉自动匹配字段
 function bindAutoSelect(){
     var $sourceSelect = $("#sourceTable");
@@ -149,12 +168,14 @@ $(function () {
     // 绑定同步方式切换事件
     bindMappingModelChange();
     // 绑定删除表映射事件
-    bindMappingTableGroupDelClick();
+    bindMappingTableGroupCheckBoxClick();
 
     // 绑定表关系点击事件
     bindMappingTableGroupListClick();
     // 绑定新增表关系点击事件
     bindMappingTableGroupAddClick();
+    // 绑定删除表关系点击事件
+    bindMappingTableGroupDelClick();
 
     // 绑定下拉自动匹配字段
     bindAutoSelect();
@@ -165,7 +186,7 @@ $(function () {
         theme: "classic"
     });
 
-    //保存
+    // 保存
     $("#mappingSubmitBtn").click(function () {
         var $form = $("#mappingModifyForm");
         if ($form.formValidate() == true) {
@@ -174,7 +195,7 @@ $(function () {
         }
     });
 
-    //返回
+    // 返回
     $("#mappingBackBtn").click(function () {
         backIndexPage();
     });