From 53368959c9f903037a2ae910fdcd19d2a2f1bcde Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 26 Jun 2023 17:46:21 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8DTable=E7=BB=84?= =?UTF-8?q?=E4=BB=B6AllowResizing=E5=8A=9F=E8=83=BD=E5=9C=A8=E6=98=8E?= =?UTF-8?q?=E7=BB=86=E8=A1=8C=E5=B5=8C=E5=A5=97=20Table=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=97=B6=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Table/Table.razor.js | 25 +++---- .../BootstrapBlazor.Dock.csproj | 2 +- .../Components/DockView/DockComponent.cs | 13 +--- .../Components/DockView/DockComponentBase.cs | 65 +++++++++++++++++++ .../Components/DockView/DockContent.cs | 22 +------ .../Components/DockView/DockView.razor.cs | 16 +---- .../Components/DockView/DockView.razor.js | 27 ++++++-- .../Components/DockView/IDockComponent.cs | 2 +- 8 files changed, 107 insertions(+), 65 deletions(-) create mode 100644 src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponentBase.cs diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js index 5fb54954c..facb4a31f 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.js +++ b/src/BootstrapBlazor/Components/Table/Table.razor.js @@ -179,7 +179,8 @@ const setResizeListener = table => { else th.classList.remove('border-resize') const index = [].indexOf.call(th.parentNode.children, th); - th.closest('.table-resize').querySelectorAll('.table > tbody > tr').forEach(tr => { + var items = Array.from(th.closest('.table-resize').querySelector('.table > tbody').children); + items.forEach(tr => { if (!tr.classList.contains('is-detail')) { const td = tr.children.item(index) if (toggle) td.classList.add('border-resize') @@ -226,17 +227,17 @@ const setResizeListener = table => { }, e => { const marginX = e.clientX - originalX - el.querySelectorAll('table colgroup').forEach(group => { - const curCol = group.children.item(colIndex) - curCol.style.width = `${colWidth + marginX}px` - const tableEl = curCol.closest('table') - const width = tableWidth + marginX - if (table.fixedHeader) { - tableEl.style.width = `${width}px;` - } else { - tableEL.style.width = (width - 6) + 'px' - } - }) + + const curCol = el.querySelector('table colgroup').children.item(colIndex) + curCol.style.width = `${colWidth + marginX}px` + const tableEl = curCol.closest('table') + const width = tableWidth + marginX + if (table.fixedHeader) { + tableEl.style.width = `${width}px;` + } else { + tableEl.style.width = (width - 6) + 'px' + } + }, () => { eff(col, false) diff --git a/src/Extensions/Components/BootstrapBlazor.Dock/BootstrapBlazor.Dock.csproj b/src/Extensions/Components/BootstrapBlazor.Dock/BootstrapBlazor.Dock.csproj index 16b0a5aae..82a96a110 100644 --- a/src/Extensions/Components/BootstrapBlazor.Dock/BootstrapBlazor.Dock.csproj +++ b/src/Extensions/Components/BootstrapBlazor.Dock/BootstrapBlazor.Dock.csproj @@ -1,7 +1,7 @@ - 7.0.3 + 7.0.4 diff --git a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponent.cs b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponent.cs index ffe606483..c471c0fb1 100644 --- a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponent.cs +++ b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponent.cs @@ -10,14 +10,8 @@ namespace BootstrapBlazor.Components; /// /// DockContentItem 配置项子项对标 content 配置项内部 content 配置 /// -public class DockComponent : IdComponentBase, IDockComponent +public class DockComponent : DockComponentBase { - /// - /// 获得/设置 默认 Component - /// - [JsonConverter(typeof(DockTypeConverter))] - public DockContentType Type { get; } = DockContentType.Component; - /// /// 获得/设置 组件名称 默认 component /// @@ -79,9 +73,6 @@ public class DockComponent : IdComponentBase, IDockComponent [JsonIgnore] public RenderFragment? ChildContent { get; set; } - [CascadingParameter] - private DockContent? Content { get; set; } - /// /// /// @@ -90,7 +81,7 @@ public class DockComponent : IdComponentBase, IDockComponent base.OnInitialized(); ComponentState = new { Id, ShowClose, Class, Key = Key ?? Title }; - Content?.Items.Add(this); + Type = DockContentType.Component; } /// diff --git a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponentBase.cs b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponentBase.cs new file mode 100644 index 000000000..fa48f5199 --- /dev/null +++ b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponentBase.cs @@ -0,0 +1,65 @@ +// Copyright (c) Argo Zhang (argo@163.com). All rights reserved. +// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. +// Website: https://www.blazor.zone or https://argozhang.github.io/ + +using Microsoft.AspNetCore.Components; +using System.Text.Json.Serialization; + +namespace BootstrapBlazor.Components; + +/// +/// DockComponent 基类 +/// +public abstract class DockComponentBase : IdComponentBase, IDockComponent +{ + /// + /// 获得/设置 默认 Component + /// + [Parameter] + [JsonConverter(typeof(DockTypeConverter))] + public DockContentType Type { get; set; } + + /// + /// 获得/设置 DockContent 实例 + /// + [CascadingParameter] + private DockContent? Content { get; set; } + + /// + /// + /// + protected override void OnInitialized() + { + base.OnInitialized(); + + Content?.Items.Add(this); + } + + private bool disposedValue; + + /// + /// 资源销毁方法 + /// + /// + protected virtual void Dispose(bool disposing) + { + if (!disposedValue) + { + disposedValue = true; + + if (disposing) + { + Content?.Items.Remove(this); + } + } + } + + /// + /// 资源销毁方法 + /// + public void Dispose() + { + Dispose(disposing: true); + GC.SuppressFinalize(this); + } +} diff --git a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockContent.cs b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockContent.cs index afd37fea4..5f9123efb 100644 --- a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockContent.cs +++ b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockContent.cs @@ -11,15 +11,8 @@ namespace BootstrapBlazor.Components; /// /// DockContent 类对标 content 配置项 /// -public class DockContent : ComponentBase, IDockComponent +public class DockContent : DockComponentBase { - /// - /// 获得/设置 排列方式 默认 Row 水平排列 - /// - [Parameter] - [JsonConverter(typeof(DockTypeConverter))] - public DockContentType Type { get; set; } - /// /// 获得/设置 子组件 /// @@ -46,19 +39,6 @@ public class DockContent : ComponentBase, IDockComponent [Parameter] public int? Height { get; set; } - [CascadingParameter] - private DockContent? Content { get; set; } - - /// - /// - /// - protected override void OnInitialized() - { - base.OnInitialized(); - - Content?.Items.Add(this); - } - /// /// /// diff --git a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.cs b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.cs index 9fdee69c2..c296cd31c 100644 --- a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.cs +++ b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.cs @@ -85,26 +85,16 @@ public partial class DockView /// /// /// - protected override void OnAfterRender(bool firstRender) + protected override async Task OnAfterRenderAsync(bool firstRender) { - base.OnAfterRender(firstRender); - if (firstRender) { IsRendered = true; Config.Contents.Add(Content); + await base.OnAfterRenderAsync(firstRender); StateHasChanged(); + return; } - } - - /// - /// - /// - /// - /// - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); if (IsRendered && Module != null) { diff --git a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.js b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.js index a9b3f08d4..28266b02b 100644 --- a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.js +++ b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.js @@ -58,8 +58,18 @@ export function update(id, option) { const compotentItem = dock.layout.createAndInitContentItem({ type: option.content[0].type, content: [] }, dock.layout.root) dock.layout.root.addChild(compotentItem) } - - dock.layout.root.contentItems[0].addItem(v) + if (dock.layout.root.contentItems[0].isStack) { + const typeConfig = goldenLayout.ResolvedItemConfig.createDefault(option.content[0].type) + const rowOrColumn = dock.layout.root.layoutManager.createContentItem(typeConfig, dock.layout.root) + const stack = dock.layout.root.contentItems[0] + dock.layout.root.replaceChild(stack, rowOrColumn) + rowOrColumn.addChild(stack) + rowOrColumn.addItem(v) + rowOrColumn.updateSize() + } + else { + dock.layout.root.contentItems[0].addItem(v) + } } }) @@ -74,8 +84,9 @@ export function update(id, option) { v.setTitle(c.title) } }) + + saveConfig(option, dock.layout) } - saveConfig(option, dock.layout) } export function dispose(id) { @@ -125,9 +136,13 @@ const createGoldenLayout = (option, el) => { const closeItem = (el, component) => { const item = document.getElementById(component.id) - item.classList.add('d-none') - component.remove(); - el.append(item) + if (item) { + item.classList.add('d-none') + el.append(item) + } + const parent = component.parent + parent.removeChild(component) + } const getConfig = option => { diff --git a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/IDockComponent.cs b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/IDockComponent.cs index 17c128832..bab67265f 100644 --- a/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/IDockComponent.cs +++ b/src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/IDockComponent.cs @@ -7,7 +7,7 @@ namespace BootstrapBlazor.Components; /// /// IDockComponent 接口定义 /// -public interface IDockComponent +public interface IDockComponent : IDisposable { /// /// 获得/设置 组件类型 -- Gitee