Переглянути джерело

feat: checkGroup表格滚动与要点序号圆圈

code4eat 4 тижнів тому
батько
коміт
600679d2da

+ 3 - 2
src/pages/baseInfoMana/checkGroupMana/index.tsx

@@ -2,7 +2,7 @@
  * @Author: code4eat awesomedema@gmail.com
  * @Date: 2023-03-03 11:30:33
  * @LastEditors: code4eat awesomedema@gmail.com
- * @LastEditTime: 2025-11-07 11:07:51
+ * @LastEditTime: 2025-12-15 11:18:35
  * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/pubDicTypeMana/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -1164,6 +1164,7 @@ const CheckGroupMana: React.FC = () => {
                         search={false}
                         options={false}
                         pagination={false}
+                        scroll={{ y: 'calc(100vh - 232px)' }}
                         rowSelection={{
                           selectedRowKeys: selectedEmployeeKeys,
                           onChange: (keys) =>
@@ -1254,7 +1255,7 @@ const CheckGroupMana: React.FC = () => {
             padding: '0 16px',
             transition: 'left 0.2s, width 0.2s',
           }}
-        >
+        > 
           <span style={{ color: '#3377FF', fontWeight: 500 }}>
             已选 {selectedEmployeeKeys.length + selectedCheckpointKeys.length}{' '}

+ 6 - 1
src/pages/checkPointMana/index.tsx

@@ -1267,7 +1267,12 @@ const CheckPointMana: React.FC = () => {
                 onMouseEnter={() => setHoveredNode(item.key)}
                 onMouseLeave={() => setHoveredNode(null)}
               >
-                <span>{item.title}</span>
+                <span className="dept-leaf-title">
+                  {item.sort !== undefined && item.sort !== null && (
+                    <span className="dept-sort-circle">{item.sort}</span>
+                  )}
+                  <span className="dept-leaf-text">{item.title}</span>
+                </span>
                 {(selectedDept?.key === item.key ||
                   hoveredNode === item.key ||
                   openDropdownNode === item.key) && (

+ 27 - 3
src/pages/checkPointMana/style.less

@@ -180,14 +180,38 @@
           box-sizing: border-box;
           border-radius: 4px;
 
-          > span {
+          .dept-leaf-title {
             flex: 1;
+            min-width: 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
             font-size: 14px;
             color: #17181a; // 颜色稍浅,区别于父节点
+            margin-right: 8px; // 给右侧按钮留出空间
+          }
+
+          .dept-sort-circle {
+            flex: 0 0 auto;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            line-height: 18px;
+            color: #3377ff;
+            border: 1px solid rgba(51, 119, 255, 0.5);
+            background: rgba(51, 119, 255, 0.08);
+          }
+
+          .dept-leaf-text {
+            flex: 1;
+            min-width: 0;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            margin-right: 8px; // 给右侧按钮留出空间
           }
 
           &:hover {
@@ -198,7 +222,7 @@
             background: #f0f2f5;
             border: none;
 
-            > span {
+            .dept-leaf-title {
               color: #17181a;
               font-weight: 500;
             }