feat: [CTable]设置默认列添加弹窗

ShuyunFF2E · Dec 12, 2024 · 4edac56 · 4edac56
2 parents 0cc30b8 + 83fbd34
commit 4edac56
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 68 deletions.
diff --git a/docs/log.md b/docs/log.md
@@ -1,16 +1,13 @@
----
-title: 组件(v1版)更新日志
-nav:
-  title: 指南
-  path: /guide
-group:
-  title: 组件(v1版)更新日志
-  path: /log
-  order: 3
----
+## 2.0.5 (2024-12-09)
+
+### Features
+
+* [inputTag] 修改icon样式 ([2e1116a](https://github.com/ShuyunFF2E/cloud-react/commit/2e1116a7234a8aba2a604925cacd50b6285a6e31))
+* [inputTag] 修改样式及替换icon ([eacdc70](https://github.com/ShuyunFF2E/cloud-react/commit/eacdc703b14cda146ae2a26f42498b3e19041bd2))
+* [Modal] confirm添加外部footer样式属性 ([d8263a4](https://github.com/ShuyunFF2E/cloud-react/commit/d8263a4326dad2b4a866f865e7b1e55851bab44b))
 
-# [2.1.0](https://github.com/ShuyunFF2E/cloud-react/compare/v2.0.2...v2.1.0) (2024-10-25)
 
+## 2.0.4(2024-10-25)
 
 ### Bug Fixes
 
@@ -32,11 +29,7 @@ group:
 * [tooltip]设置滚动根节点 ([a5cf0a6](https://github.com/ShuyunFF2E/cloud-react/commit/a5cf0a6))
 
 
-
-
-### Changelog
-
-### [v2.0.2](https://github.com/ShuyunFF2E/cloud-react/compare/v1.0.33...v2.0.2)
+## [v2.0.2](https://github.com/ShuyunFF2E/cloud-react/compare/v1.0.33...v2.0.2)
 * :bug: [CTable] 使用标题 tooltip 功能无需配置前置条件 ([6f5734c](https://github.com/ShuyunFF2E/cloud-react/commit/6f5734c))
 * :bug: [CTable] 修复表格配置 align 失效的问题 ([103f935](https://github.com/ShuyunFF2E/cloud-react/commit/103f935))
 * :bug: [CTable] 解决表格禁用行配置 tooltip 内容为空，tooltip 仍然展示的问题 (#721) ([b8bc203](https://github.com/ShuyunFF2E/cloud-react/commit/b8bc203)), closes [#721](https://github.com/ShuyunFF2E/cloud-react/issues/721)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cloud-react",
-  "version": "2.1.0",
+  "version": "2.0.5",
   "description": "数据赢家 react 组件",
   "scripts": {
     "gen:index": "node ./scripts/generate-index.js",

diff --git a/src/components/c-table/css/business.less b/src/components/c-table/css/business.less
@@ -15,6 +15,10 @@
   width: 100%;
 }
 
+.@{prefix}-table-modal-outer {
+  z-index: 1031 !important;
+}
+
 .header-bordered-resizable(@index: 1) {
   position: relative;
   background: @blue-1;
@@ -116,6 +120,7 @@
     }
 
     &.@{tablePrefixCls}-support-resize {
+
       // 可见的最后一列
       .@{tablePrefixCls}-resizeable {
         .bordered-resizable(1);
@@ -146,6 +151,7 @@
     }
 
     .@{tablePrefixCls}-scroll-horizontal {
+
       // 可见的最后一列
       th:nth-last-of-type(1):after {
         display: none;
@@ -206,15 +212,14 @@
     }
 
     .@{tablePrefixCls}-row-level-1 {
-      td.@{prefix}-table-row-expand-column + td {
+      td.@{prefix}-table-row-expand-column+td {
         padding-left: 34px;
       }
     }
   }
 
   // 树状表格（多级），展开图标不单独占一列
-  &.@{tablePrefixCls}-support-tree {
-  }
+  &.@{tablePrefixCls}-support-tree {}
 
   // 带有展开行的表格
   &.@{tablePrefixCls}-expand-details {
@@ -293,6 +298,7 @@
     &.@{tablePrefixCls}-support-checkbox {
       .@{tablePrefixCls}-resizeable {
         &:first-child {
+
           &::after,
           .react-resizable-handle-se {
             display: none;
@@ -311,6 +317,7 @@
 
   // 表格支持配置列的展示和隐藏
   &.@{tablePrefixCls}-config-column {
+
     tbody tr td:last-child,
     thead tr th:nth-last-of-type(-n+1) {
       padding-right: 40px;
@@ -348,7 +355,7 @@
     //}
 
     .@{tablePrefixCls}-header colgroup col:not(:last-child) {
-      display: table-column!important;
+      display: table-column !important;
     }
 
     // 带边框表格
@@ -373,13 +380,16 @@
     &.@{tablePrefixCls}-support-resize {
       &.@{tablePrefixCls}-header-bordered {
         .@{tablePrefixCls}-scroll-horizontal {
+
           // 可见的最后一列
           th:nth-last-of-type(2):after {
             display: none;
           }
         }
       }
+
       .@{tablePrefixCls}-resizeable {
+
         // 可见的最后一列
         &:nth-last-of-type(2) {
           .react-resizable-handle-se {
@@ -422,7 +432,7 @@
   min-width: 236px;
   overflow: auto;
   padding: 16px;
-  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1), 0 0 1px 0 rgba(0,0,0,0.3) !important;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.3) !important;
   border-radius: 3px;
 
   &::after {
@@ -434,7 +444,7 @@
     flex-direction: column;
     gap: 12px;
 
-    > li {
+    >li {
       width: 180px;
       .text-overflow-ellipsis;
 
@@ -536,7 +546,7 @@
 }
 
 .@{tablePrefixCls}-drag-line {
-  border: 1px solid @blue-4!important;
+  border: 1px solid @blue-4 !important;
 }
 
 .@{tooltipPrefixCls} {
@@ -561,4 +571,4 @@
     border: 4px solid transparent;
     border-top: 4px solid @gray-9;
   }
-}
+}
diff --git a/src/components/c-table/js/columnConfig.js b/src/components/c-table/js/columnConfig.js
@@ -12,6 +12,13 @@ const columnConfigPanelHeight = 466;
 const popoverIgnoreClass = `${tablePrefixCls}-config-column-button`;
 
 class ColumnConfig extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
   onDragEnd = (fromIndex, toIndex) => {
     const { hideConfigColumns, originColumnData, disabledSortColumns, setOriginColumnData } = this.props;
     // 禁止拖拽和排序的列（只能在首部）
@@ -162,19 +169,32 @@ class ColumnConfig extends Component {
             size="small"
             type="link"
             onClick={() => {
-              if (!defaultConfigColumns?.length) {
-                setOriginColumnData(originConfigColumnData.map(item => ({
-                  ...item,
-                  show: true,
-                  columnChecked: true,
-                })), refreshColumn);
-              } else {
-                setOriginColumnData(originConfigColumnData.map(item => ({
-                  ...item,
-                  show: defaultConfigColumns.includes(item.dataIndex),
-                  columnChecked: defaultConfigColumns.includes(item.dataIndex),
-                })), refreshColumn);
-              }
+              Modal.confirm({
+                title: '确定恢复为系统默认设置吗？',
+                body: '确定后，已编辑内容将不会被保存',
+                outerClassName: `${tablePrefixCls}-modal-outer`,
+                onOk: () => {
+                  if (!defaultConfigColumns?.length) {
+                    setOriginColumnData(originConfigColumnData.map(item => ({
+                      ...item,
+                      show: true,
+                      columnChecked: true,
+                    })), refreshColumn);
+                  } else {
+                    setOriginColumnData(originConfigColumnData.map(item => ({
+                      ...item,
+                      show: defaultConfigColumns.includes(item.dataIndex),
+                      columnChecked: defaultConfigColumns.includes(item.dataIndex),
+                    })), refreshColumn);
+                  }
+                },
+                onClose: () => {
+                  this.setState({visible: true});
+                },
+                onCancel: () => {
+                  this.setState({visible: true});
+                }
+              });
             }}
             className={popoverIgnoreClass}
           >
@@ -189,6 +209,7 @@ class ColumnConfig extends Component {
                 ...item,
                 show: item.columnChecked,
               })), refreshColumn);
+              this.setState({ visible: false });
             }}
             className={popoverIgnoreClass}
           >
@@ -205,6 +226,7 @@ class ColumnConfig extends Component {
                   columnChecked: targetColumn.show,
                 };
               }), refreshColumn);
+              this.setState({ visible: false });
             }}
             className={popoverIgnoreClass}
           >
@@ -240,9 +262,18 @@ class ColumnConfig extends Component {
         contentStyle={{ maxHeight: columnConfigPanelHeight - 24 }}
         containerEle={tableRef.current}
         ignoreClassList={isComplexConfig ? [popoverIgnoreClass] : []}
+        control
+        visible={this.state.visible}
       >
         <Tooltip content="列设置" theme="light" overlayStyle={{ minWidth: 50 }}>
-          <span className={`${tablePrefixCls}-config-icon`} style={isLoading || loadingOpts.loading ? { zIndex: -1 } : {}}>
+          <span
+            className={`${tablePrefixCls}-config-icon`}
+            style={isLoading || loadingOpts.loading ? { zIndex: -1 } : {}}
+            onClick={() => {
+              const { visible } = this.state;
+              this.setState({ visible: !visible });
+            }}
+          >
             <Icon type="config" />
           </span>
         </Tooltip>

diff --git a/src/components/input-tag/index.js b/src/components/input-tag/index.js
@@ -182,7 +182,7 @@ export default class InputTag extends Component {
                 </span>
               </Tooltip>
               {!disabled && (
-                <Icon type="close" onClick={() => this.handleRemove(index)} />
+                <Icon type="close" onClick={() => this.handleRemove(index)} className="closed" />
               )}
             </span>
           ))
@@ -267,17 +267,17 @@ export default class InputTag extends Component {
           )}
         </div>
         <div className={`${selector}-operate`}>
-          <span style={{ color: 'red' }}>
+          <span className={`${selector}-text`}>
             {this.count}
             /
             {max}
           </span>
           <Tooltip content="一键复制，以指定分隔符拼接，默认为英文分号">
-            <Icon type="remark" onClick={this.handleCopy} />
+            <Icon type="copy" onClick={this.handleCopy} />
           </Tooltip>
           {!disabled && (
             <Tooltip content="一键清空所有内容">
-              <Icon type="close-circle-solid" onClick={this.handleClear} />
+              <Icon type="close-line" onClick={this.handleClear} />
             </Tooltip>
           )}
         </div>

diff --git a/src/components/input-tag/index.less b/src/components/input-tag/index.less
@@ -13,7 +13,8 @@
   height: auto;
   padding: 7px 10px;
   overflow: auto;
-  border: 1px solid #e8e8e8;
+  border: 1px solid @gray-4;
+  border-radius: 3px;
 
   &-config {
     height: 30px;
@@ -32,8 +33,10 @@
       min-width: 100px;
       height: 24px;
       outline: none;
+      color: @gray-9;
+
       &::placeholder {
-        color: #c9c9c9;
+        color: @gray-6;
         font-size: 12px;
       }
     }
@@ -49,31 +52,40 @@
     height: 24px;
     font-size: 12px;
     box-sizing: border-box;
-    background: #eff7ff;
-    border: 1px solid #ccdceb;
-    border-radius: 2px;
+    color: @gray-8;
+    background: @gray-3;
+    border-radius: 3px;
 
     .text {
       .text-overflow-ellipsis();
     }
-  }
 
-  .icon-close {
-    font-size: 8px;
-    cursor: pointer;
+    .closed {
+      font-size: 12px;
+      cursor: pointer;
+      color: @gray-6;
+
+      &:hover {
+        color: @gray-7;
+      }
+    }
   }
 
   &-operate {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 5px;
-    color: #666;
+    color: @color-gray2;
     font-size: 12px;
 
     i {
-      color: #00aaf1;
+      color: @gray-7;
       cursor: pointer;
     }
   }
+
+  &-text {
+    color: @gray-7;
+  }
 }