Browse Source

设置体位列表及父容器的布局方式,使体位列表内容过多时,不撑开体位列表的父容器,从而不撑开更上层的界面元素

sw 1 week ago
parent
commit
18142d5b2f
2 changed files with 18 additions and 15 deletions
  1. 1 1
      src/pages/exam/ContentAreaLarge.tsx
  2. 17 14
      src/pages/exam/components/BodyPositionList.tsx

+ 1 - 1
src/pages/exam/ContentAreaLarge.tsx

@@ -81,7 +81,7 @@ const ContentAreaLarge = () => {
     <Row>
     <Row>
       <Col span={16}>
       <Col span={16}>
         <Row gutter={16}>
         <Row gutter={16}>
-          <Col span={6}>
+          <Col span={6} className="flex flex-col">
             <BodyPositionList layout="vertical"></BodyPositionList>
             <BodyPositionList layout="vertical"></BodyPositionList>
           </Col>
           </Col>
           <Col span={18}>
           <Col span={18}>

+ 17 - 14
src/pages/exam/components/BodyPositionList.tsx

@@ -112,20 +112,23 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
   }, [works, dispatch]);
   }, [works, dispatch]);
 
 
   return (
   return (
-    <div className={`body-position-list ${layout}`}>
-      {bodyPositions.map((bodyPosition, index) => (
-        // {/* @/src\pages\exam\components\BodyPositionList.tsx 向ImageViewer传递src属性值时,首先要使用@/src\API\bodyPosition.ts 提供的方法做一个拼接*/}
-        <ImageViewer
-          key={index}
-          src={
-            bodyPosition.dview.expose_status === 'Exposed'
-              ? getExposedImageUrl(bodyPosition.sop_instance_uid)
-              : getViewIconUrl(bodyPosition.view_icon_name)
-          }
-          className="image-viewer-item"
-          onClick={() => handleImageClick(bodyPosition)}
-        />
-      ))}
+    // 父级是flex,这里是grid,grid的高度需要设置为0,并且flex-grow,这样才能不撑开grid
+    <div className={`${layout} grid grid-rows-[1fr_auto] h-0 flex-grow`}>
+      <div className="overflow-y-auto">
+        {bodyPositions.map((bodyPosition, index) => (
+          <ImageViewer
+            key={index}
+            src={
+              bodyPosition.dview.expose_status === 'Exposed'
+                ? getExposedImageUrl(bodyPosition.sop_instance_uid)
+                : getViewIconUrl(bodyPosition.view_icon_name)
+            }
+            className="image-viewer-item"
+            onClick={() => handleImageClick(bodyPosition)}
+          />
+        ))}
+      </div>
+
       {showAddButton && (
       {showAddButton && (
         <Button
         <Button
           icon={<PlusOutlined />}
           icon={<PlusOutlined />}