!2412 feat(#I4T74I): edit/search dialog in table component support drag feature

* chore: bump version beta05 * doc: 更新编辑/搜索弹窗可拖拽 * doc: 更新说明文档 * chore: 更新打包脚本 * feat: 搜索弹窗与编辑弹窗支持可拖拽
2024-12-04 21:20:16 +08:00 · 2022-02-11 11:45:44 +00:00 · 2022-02-11 11:45:44 +00:00 · 6a7898f7e4
commit 6a7898f7e4
parent 0a52e7b8d6
9 changed files with 102 additions and 62 deletions
--- a/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs
@ -654,6 +654,34 @@ public partial class Tables
            ValueList = " — ",
            DefaultValue = " — "
        },
+        new() {
+            Name = "EditDialogDraggable",
+            Description = "编辑弹窗是否可拖拽",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new() {
+            Name = "EditDialogSize",
+            Description = "编辑弹窗大小",
+            Type = "Size",
+            ValueList = " — ",
+            DefaultValue = "Large"
+        },
+        new() {
+            Name = "SearchDialogIsDraggable",
+            Description = "搜索弹窗是否可拖拽",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new() {
+            Name = "SearchDialogSize",
+            Description = "搜索弹窗大小",
+            Type = "Size",
+            ValueList = " — ",
+            DefaultValue = "Large"
+        },
        new() {
            Name = "AddModalTitle",
            Description = "新建数据弹窗 Title",
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesEdit.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesEdit.razor
@ -51,9 +51,10 @@
    <p>表格呈现的有些数据列是计算得到的结果，此种类型的列是无法参与编辑的，通过设置 <code>Editable=false</code> 自动生成编辑 UI 时就不会生成此列编辑组件，如本示例中 <code>Count</code> 列在编辑弹窗中是不出现的</p>
    <p>通过设置 <code>Readonly=true</code> 自动生成编辑 UI 会将此字段进行只读处理，新建时请对 <code>Model</code> 进行默认值赋值</p>
    <p>通过设置 <code>IsExtendButtonsInRowHeader=true</code> 使扩展按钮在行前面显示</p>
+    <p>通过设置 <code>EditDialogDraggable="true"</code> 使编辑弹出框可拖拽</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+           IsStriped="true" IsBordered="true" IsMultipleSelect="true" EditDialogDraggable="true"
           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsExtendButtonsInRowHeader="true"
           OnQueryAsync="@OnQueryAsync"
           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesSearch.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesSearch.razor
@ -91,10 +91,11 @@
    <p>由于是搜索条件，本例中姓名搜索列下拉框增加了 请选择... 项</p>
    <p>生成列搜索模板是查找顺序为 SearchTemplate -> AutoGenerate 优先查找是否设置了搜索模板，然后根据绑定字段类型自动生成</p>
    <p>通过设置 <code>ShowSearch="true"</code> <code>ShowSearchText="false"</code> 设置搜索栏仅显示 <b>高级搜索</b></p>
+    <p>通过设置 <code>SearchDialogDraggable="true"</code> 使搜索弹出框可拖拽</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true" ShowSearchText="false"
-           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
+           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true" SearchDialogIsDraggable="true"
           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
-    <Version>6.3.1-beta04</Version>
+    <Version>6.3.1-beta05</Version>
  </PropertyGroup>

  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">
--- a/src/BootstrapBlazor/Components/Modal/Modal.js
+++ b/src/BootstrapBlazor/Components/Modal/Modal.js
@ -3,6 +3,57 @@
        bb_modal_dialog: function (el, obj, method) {
            var $el = $(el);
            $el.data('bb_dotnet_invoker', { obj, method });
+
+            // monitor mousedown ready to drag dialog
+            var originX = 0;
+            var originY = 0;
+            var dialogWidth = 0;
+            var dialogHeight = 0;
+            var pt = { top: 0, left: 0 };
+            if ($el.hasClass('is-draggable')) {
+                $el.find('.modal-header').drag(
+                    function (e) {
+                        originX = e.clientX || e.touches[0].clientX;
+                        originY = e.clientY || e.touches[0].clientY;
+
+                        // 弹窗大小
+                        dialogWidth = $el.width();
+                        dialogHeight = $el.height();
+
+                        // 偏移量
+                        pt.top = parseInt($el.css('marginTop').replace("px", ""));
+                        pt.left = parseInt($el.css('marginLeft').replace("px", ""));
+
+                        // 移除 Center 样式
+                        $el.css({ "marginLeft": pt.left, "marginTop": pt.top });
+                        $el.removeClass('modal-dialog-centered');
+
+                        // 固定大小
+                        $el.css("width", dialogWidth);
+                        this.addClass('is-drag');
+                    },
+                    function (e) {
+                        var eventX = e.clientX || e.changedTouches[0].clientX;
+                        var eventY = e.clientY || e.changedTouches[0].clientY;
+
+                        newValX = pt.left + Math.ceil(eventX - originX);
+                        newValY = pt.top + Math.ceil(eventY - originY);
+
+                        if (newValX <= 0) newValX = 0;
+                        if (newValY <= 0) newValY = 0;
+
+                        if (newValX + dialogWidth < $(window).width()) {
+                            $el.css({ "marginLeft": newValX });
+                        }
+                        if (newValY + dialogHeight < $(window).height()) {
+                            $el.css({ "marginTop": newValY });
+                        }
+                    },
+                    function (e) {
+                        this.removeClass('is-drag');
+                    }
+                );
+            }
        },
        bb_modal: function (el, method) {
            var $el = $(el);
@ -14,61 +65,6 @@
                if ($el.closest('.swal').length === 0) {
                    // move self end of the body
                    $('body').append($el);
-
-                    // monitor mousedown ready to drag dialog
-                    var originX = 0;
-                    var originY = 0;
-                    var dialogWidth = 0;
-                    var dialogHeight = 0;
-                    var pt = { top: 0, left: 0 };
-                    var $dialog = null;
-                    $el.find('.is-draggable .modal-header').drag(
-                        function (e) {
-                            originX = e.clientX || e.touches[0].clientX;
-                            originY = e.clientY || e.touches[0].clientY;
-
-                            // 弹窗大小
-                            $dialog = this.closest('.modal-dialog');
-                            dialogWidth = $dialog.width();
-                            dialogHeight = $dialog.height();
-
-                            // 偏移量
-                            pt.top = parseInt($dialog.css('marginTop').replace("px", ""));
-                            pt.left = parseInt($dialog.css('marginLeft').replace("px", ""));
-
-                            // 移除 Center 样式
-                            $dialog.css({ "marginLeft": pt.left, "marginTop": pt.top });
-                            $dialog.removeClass('modal-dialog-centered');
-
-                            // 固定大小
-                            $dialog.css("width", dialogWidth);
-                            this.addClass('is-drag');
-                        },
-                        function (e) {
-                            var eventX = e.clientX || e.changedTouches[0].clientX;
-                            var eventY = e.clientY || e.changedTouches[0].clientY;
-
-                            newValX = pt.left + Math.ceil(eventX - originX);
-                            newValY = pt.top + Math.ceil(eventY - originY);
-
-                            if (newValX <= 0) newValX = 0;
-                            if (newValY <= 0) newValY = 0;
-
-                            if (newValX + dialogWidth < $(window).width()) {
-                                if ($dialog != null) {
-                                    $dialog.css({ "marginLeft": newValX });
-                                }
-                            }
-                            if (newValY + dialogHeight < $(window).height()) {
-                                if ($dialog != null) {
-                                    $dialog.css({ "marginTop": newValY });
-                                }
-                            }
-                        },
-                        function (e) {
-                            this.removeClass('is-drag');
-                        }
-                    );
                }
                $el.on('shown.bs.modal', function () {
                    var keyboard = $el.attr('data-bs-keyboard') === "true";
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Search.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Search.cs
@ -151,11 +151,17 @@ public partial class Table<TItem>
    }

    /// <summary>
-    /// 编辑框的大小
+    /// 获得/设置 搜索框的大小
    /// </summary>
    [Parameter]
    public Size SearchDialogSize { get; set; } = Size.Large;

+    /// <summary>
+    /// 获得/设置 搜索框是否可以拖拽
+    /// </summary>
+    [Parameter]
+    public bool SearchDialogIsDraggable { get; set; }
+
    /// <summary>
    /// 高级查询按钮点击时调用此方法
    /// </summary>
@ -182,7 +188,8 @@ public partial class Table<TItem>
            ItemsPerRow = SearchDialogItemsPerRow,
            LabelAlign = SearchDialogLabelAlign,
            Size = SearchDialogSize,
-            Items = Columns.Where(i => i.Searchable)
+            Items = Columns.Where(i => i.Searchable),
+            IsDraggable = SearchDialogIsDraggable
        };

        SearchDialogOption<ITableSearchModel> CreateCustomerModelDialog() => new()
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
@ -486,6 +486,12 @@ public partial class Table<TItem>
    [Parameter]
    public Size EditDialogSize { get; set; } = Size.Large;

+    /// <summary>
+    /// 获得/设置 编辑框是否可以拖拽
+    /// </summary>
+    [Parameter]
+    public bool EditDialogDraggable { get; set; }
+
    /// <summary>
    /// 弹出编辑对话框方法
    /// </summary>
@ -508,6 +514,7 @@ public partial class Table<TItem>
            LabelAlign = EditDialogLabelAlign,
            ItemChangedType = changedType,
            Size = EditDialogSize,
+            IsDraggable = EditDialogDraggable,
            OnCloseAsync = async () =>
            {
                var d = DataService ?? InjectDataService;
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js