调整部分界面展示

src/components/MccsEditableTable/index.tsx

@@ -1,13 +1,13 @@
 /*
  * @Author: your name
  * @Date: 2021-09-27 10:45:50
- * @LastEditTime: 2022-03-15 15:41:18
+ * @LastEditTime: 2022-03-22 15:12:43
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /MedicalWisdomCheckSys/src/components/MccsEditableTable/index.tsx
  */
 
-import { Pagination, Popconfirm } from 'antd';
+import { Pagination, Popconfirm} from 'antd';
 import React, { useState, useEffect, useRef } from 'react'
 import { EditableProTable } from '@ant-design/pro-table';
 import type { Key } from 'antd/lib/table/interface';
@@ -171,7 +171,7 @@ const MccsEditableTable: React.FC<MccsEditableTableType.MccsEditableTableProps>
 
             {
                 pagination && (
-                    <div className='pagination' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
+                    <div className='pagination' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end',paddingRight:'16px' }}>
                         <Pagination
                             size='small'
                             showSizeChanger

src/components/MccsPageContainer/index.less

@@ -4,6 +4,8 @@
     padding: 0 !important;
     margin:0;
     margin-top: 16px;
+    height:100%;
+    overflow-y: scroll;
 }
 .mwc-ant-pro-page-container {
     padding: 0 !important;
@@ -11,6 +13,7 @@
     .mwc-ant-pro-grid-content {
         padding:16px;
         padding-top: 0;
+        padding-bottom: 0;
     }
 }
 

src/global.less

@@ -30,6 +30,10 @@ body,
      }
 }
 
+.mwc-ant-card-body {
+  padding:16px !important;
+}
+
 .mwc-ant-tree-checkbox-checked .ant-tree-checkbox-inner {
   background-color: #00528E;
   border-color: #00528E;
@@ -60,9 +64,9 @@ body,
   filter: invert(80%);
 }
 
-.mwc-ant-layout {
-  min-height: 100vh;
-}
+// .mwc-ant-layout {
+//   min-height: 100vh;
+// }
 .mwc-ant-pro-sider.mwc-ant-layout-sider.mwc-ant-pro-sider-fixed {
   left: unset;
 }

src/pages/GradeHospitalAccreditation/accreditationDetail/index.tsx

@@ -485,7 +485,7 @@ const AccreditationDetail: React.FunctionComponent<AccreditationDetailProps> = p
             )
           }
         </MccsProCard>
-        <MccsProCard colSpan={16} className='rightCard' style={{ height: '78vh', overflow: 'hidden' }} >
+        <MccsProCard colSpan={16} className='rightCard' style={{ height: '100%', overflow: 'hidden' }} >
           <div className="detailRuleTitle">{currentActived?.title}</div>
           <Divider />
           <div className="ruleDetailContainer">

src/pages/GradeHospitalAccreditation/articleManagement/components/articleDetailModule/index.tsx

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2022-03-08 10:41:15
- * @LastEditTime: 2022-03-16 16:46:14
+ * @LastEditTime: 2022-03-22 15:45:27
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/components/articleDetailModule/index.tsx
@@ -229,10 +229,10 @@ const ArticleDetail = ({ isModeTwo = false }) => {
         if (leafContentRef.current) {
             const leafContentH = leafContentHeight ? leafContentHeight : (leafContentRef.current.clientHeight);  //className为leafContent的div
             const headerH = 48 + 16;
-            const scoreH = isModeTwo ? (60 + 32) : 0;
+            const scoreH = isModeTwo ? (60) : 0;
             const h = window.innerHeight - (leafContentH + headerH + scoreH);
-            // console.log({leafContentH,headerH,scoreH,h});
-            setScrollAreaH(h - _num);
+            console.log({leafContentH,headerH,scoreH,h});
+            setScrollAreaH(h - _num - 24);
         }
     }
 
@@ -457,7 +457,7 @@ const ArticleDetail = ({ isModeTwo = false }) => {
                                 && restModelData.implementationData[restModelData.selectedSelfEvolution.label].map((item, index) => {
 
                                     return (
-                                        <div className='card' key={index} style={{ marginBottom: isModeTwo ? 0 : '16px', paddingBottom: isModeTwo ? 0 : '16px', paddingTop: isModeTwo ? 0 : '16px' }}>
+                                        <div className='card' key={index} style={{ marginBottom: isModeTwo ? 0 : '16px', paddingBottom: isModeTwo ? 0 : '16px' }}>
                                             <div className='cardTitle' style={{ marginBottom: isModeTwo ? '8px' : '16px' }}>{`执行情况说明（等级${item.level}）`}</div>
 
                                             <TextArea showCount maxLength={2000}
@@ -495,6 +495,7 @@ const ArticleDetail = ({ isModeTwo = false }) => {
                                     <MccsEditableTable
                                         bordered={true}
                                         controlled={false}
+                                        bodyStyle={{padding:'16px'}}
                                         edit={restModelData.editMode}
                                         reload={!restModelData.editMode}
                                         pagination={true}

src/pages/GradeHospitalAccreditation/articleManagement/components/articleDetailModule/style.less

@@ -1,248 +1,408 @@
+.articleDetailContainer {
 
+  .leafContent {
 
+    position: relative;
+    background-color: #fff;
+    padding: 16px;
 
-.articleDetailContainer {
-      
-    .leafContent {
-  
-        position: relative;
-        background-color: #fff;
-        padding:16px;
-        .telescopicBtn {
-          position: absolute;
-          top:16px;
-          right:16px;
-          z-index: 99;
-          cursor: pointer;
-           margin-left: -15px;
-          width: 25px;
-          height: 25px;
-          border-radius: 50%;
-          background: url('../../../../../../public/arrow.png');
-          background-size: 60%;
-          background-position: center center;
-          transition: all 0.2s ease-in;
-          background-repeat: no-repeat;
-          transform: rotate(0deg);
-          &.collapse {
-              transform: rotate(180deg);
-          }
-          &:hover {
-            background-image: url('../../../../../../public/arrow_white.png');
-            background-color:#A3B1CC;
-          }
-      
-        }
-        .leafContentTitle {
-          font-size: 16px;
-          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-          font-weight: bold;
-          color: #292C33;
-          line-height: 24px;
-          overflow: hidden; //超出的文本隐藏
-          text-overflow: ellipsis; //溢出用省略号显示
-          white-space: nowrap; //溢出不换行
-          margin-bottom: 16px;
+    .telescopicBtn {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      z-index: 99;
+      cursor: pointer;
+      margin-left: -15px;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      background: url('../../../../../../public/arrow.png');
+      background-size: 60%;
+      background-position: center center;
+      transition: all 0.2s ease-in;
+      background-repeat: no-repeat;
+      transform: rotate(0deg);
+
+      &.collapse {
+        transform: rotate(180deg);
+      }
+
+      &:hover {
+        background-image: url('../../../../../../public/arrow_white.png');
+        background-color: #A3B1CC;
+      }
+
+    }
+
+    .leafContentTitle {
+      font-size: 16px;
+      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+      font-weight: bold;
+      color: #292C33;
+      line-height: 24px;
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
+      white-space: nowrap; //溢出不换行
+      margin-bottom: 16px;
+    }
+
+    .peopleGroup {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 12px;
+
+      span {
+        font-size: 14px;
+        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+        font-weight: 400;
+        color: #292C33;
+        line-height: 21px;
+
+        &:nth-child(2n) {
+          margin-right: 40px;
         }
-      
-        .peopleGroup {
+      }
+    }
+
+    .coOperateList {
+      display: flex;
+      flex-direction: row;
+
+    }
+
+    .scoreRow {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      height: 32px;
+
+      .scoreInfo {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        .scoreBlock {
           display: flex;
           flex-direction: row;
-          justify-content: flex-start;
+          justify-content: center;
           align-items: center;
-          margin-bottom: 12px;
-      
-          span {
-            font-size: 14px;
-            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-            font-weight: 400;
-            color: #292C33;
-            line-height: 21px;
-      
-            &:nth-child(2n) {
-              margin-right: 40px;
-            }
+          width: 117px;
+          height: 16px;
+          font-size: 12px;
+          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+          font-weight: 400;
+          color: #525866;
+          border-right: 1px solid #DADEE6;
+
+          &>span {
+            position: relative;
+            top: -2px;
+            display: inline-block;
+            margin-left: 16px;
+            font-size: 20px;
+            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+            font-weight: 500;
+          }
+
+          &:last-child {
+            border: none;
+          }
+
+          &:first-child {
+            width: 94px;
           }
         }
+      }
 
-        .coOperateList {
-            display: flex;
-            flex-direction: row;
+      .ruleSettingBtn,
+      .editPageBtn {
+        font-size: 14px;
+        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+        font-weight: 400;
+        color: #525966;
+        padding-right: 16px;
+        cursor: pointer;
+
+        &::before {
+          position: relative;
+          top: 3px;
+          display: inline-block;
+          content: '';
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+          background: url('../../../../../../public/ruleSettingIcon.png');
+          background-size: contain;
 
         }
-      
-        .scoreRow {
+      }
+
+      .editPageBtn {
+        &::before {
+          position: relative;
+          top: 3px;
+          display: inline-block;
+          content: '';
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+          background: url('../../../../../../public/pageEditIcon.png');
+          background-size: contain;
+
+        }
+      }
+    }
+
+    .scoreGradeDetail {
+      width: 100%;
+      margin-top: 26px;
+      border-radius: 2px;
+      overflow: hidden;
+
+      .scoreGradeDetailList {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: stretch;
+        padding-left: 40px;
+        margin-bottom: 2px;
+
+        .head {
+          position: absolute;
+          top: 0;
+          left: 0;
           display: flex;
-          flex-direction: row;
-          justify-content: space-between;
+          justify-content: center;
           align-items: center;
-          height:32px;
-      
-          .scoreInfo {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-start;
-            align-items: center;
-      
-            .scoreBlock {
-              display: flex;
-              flex-direction: row;
-              justify-content: center;
-              align-items: center;
-              width: 117px;
-              height: 16px;
-              font-size: 12px;
-              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-              font-weight: 400;
-              color: #525866;
-              border-right: 1px solid #DADEE6;
-      
-              &>span {
-                position: relative;
-                top: -2px;
-                display: inline-block;
-                margin-left: 16px;
-                font-size: 20px;
-                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-                font-weight: 500;
-              }
-      
-              &:last-child {
-                border: none;
-              }
-      
-              &:first-child {
-                width: 94px;
-              }
-            }
-          }
-      
-          .ruleSettingBtn,
-          .editPageBtn {
-            font-size: 14px;
-            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-            font-weight: 400;
-            color: #525966;
-            padding-right: 16px;
-            cursor: pointer;
-      
-            &::before {
-              position: relative;
-              top: 3px;
-              display: inline-block;
-              content: '';
-              width: 16px;
-              height: 16px;
-              margin-right: 8px;
-              background: url('../../../../../../public/ruleSettingIcon.png');
-              background-size: contain;
-      
-            }
-          }
-      
-          .editPageBtn {
-            &::before {
-              position: relative;
-              top: 3px;
-              display: inline-block;
-              content: '';
-              width: 16px;
-              height: 16px;
-              margin-right: 8px;
-              background: url('../../../../../../public/pageEditIcon.png');
-              background-size: contain;
-      
-            }
-          }
+          width: 40px;
+          height: 100%;
+          background: #A3B1CC;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+          font-weight: bold;
+          color: #FFFFFF;
         }
-      
-        .scoreGradeDetail {
+
+        .detail {
           width: 100%;
-          margin-top: 26px;
-          border-radius: 2px;
-          overflow: hidden;
-      
-          .scoreGradeDetailList {
-            position: relative;
-            display: flex;
-            width: 100%;
-            height: 100%;
-            flex-direction: row;
-            justify-content: flex-start;
-            align-items: stretch;
-            padding-left: 40px;
-            margin-bottom: 2px;
-      
-            .head {
-              position: absolute;
-              top: 0;
-              left: 0;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              width: 40px;
-              height: 100%;
-              background: #A3B1CC;
-              font-size: 16px;
-              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-              font-weight: bold;
-              color: #FFFFFF;
-            }
-      
-            .detail {
-              width: 100%;
-              background: #F5F7FA;
-              padding: 9px 18px;
-      
-              .textLine {
-                font-size: 12px;
-                font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-                font-weight: 400;
-                color: #5C7099;
-                line-height: 14px;
-                margin-bottom: 5px;
-      
-                &:last-child {
-                  margin-bottom: 0;
-                }
-              }
-            }
-      
+          background: #F5F7FA;
+          padding: 9px 18px;
+
+          .textLine {
+            font-size: 12px;
+            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+            font-weight: 400;
+            color: #5C7099;
+            line-height: 14px;
+            margin-bottom: 5px;
+
             &:last-child {
               margin-bottom: 0;
             }
           }
         }
-      
-        .articleSetBtn {
-          height: 50px;
-          text-align: center;
-          line-height: 50px;
-          background: #FFFFFF;
-          border-radius: 25px;
-          border: 1px dashed #DADEE6;
-          margin-top: 40px;
-          margin-bottom: 40px;
-      
-          span {
-            font-size: 16px;
-            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-            font-weight: 400;
-            cursor: pointer;
-            color: @primary-color;
-          }
+
+        &:last-child {
+          margin-bottom: 0;
         }
-      
-        &.collapse {
-          height:55px;
-          overflow-y: hidden;
+      }
+    }
+
+    .articleSetBtn {
+      height: 50px;
+      text-align: center;
+      line-height: 50px;
+      background: #FFFFFF;
+      border-radius: 25px;
+      border: 1px dashed #DADEE6;
+      margin-top: 40px;
+      margin-bottom: 40px;
+
+      span {
+        font-size: 16px;
+        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+        font-weight: 400;
+        cursor: pointer;
+        color: @primary-color;
+      }
+    }
+
+    &.collapse {
+      height: 55px;
+      overflow-y: hidden;
+    }
+  }
+
+  .selfEvaluationWrap {
+    padding: 16px;
+    background: #FFFFFF;
+    border-radius: 2px;
+    margin-bottom: 0px;
+    margin-top: 16px;
+
+    .selfEvaluation {
+      display: flex;
+      height: 28px;
+      flex-direction: row;
+      align-items: center;
+
+      span {
+        font-size: 20px;
+        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
+        font-weight: 500;
+        padding-left: 16px;
+      }
+    }
+
+    .wrap {
+      .tab {
+        width: 20%;
+        height: 28px;
+        cursor: pointer;
+        text-align: center;
+        line-height: 28px;
+        background: #F7F8FA;
+        border-radius: 14px;
+        font-size: 14px;
+        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+        font-weight: 400;
+        color: #525866;
+        margin-right: 16px;
+
+        &.on {
+          color: #3377FF;
+          background: #EBF1FF;
+        }
+
+        &:last-child {
+          margin-right: 0;
         }
+      }
     }
-    .cardWrap {
-         .card {
-          textarea {
-            width: 100%;
-          }
-         }
+
+  }
+
+  .cardWrap {
+    overflow-y: scroll;
+    padding-bottom: 16px;
+    background-color: #fff;
+
+    .card {
+      padding: 16px;
+      background: #FFFFFF;
+      border-radius: 2px;
+      margin-bottom: 16px;
+      padding-top: 16px;
+
+      textarea {
+        width: 100%;
+      }
+
+      .cardTitle {
+        font-size: 14px;
+        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+        font-weight: 400;
+        color: #292C33;
+        margin-bottom: 16px;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
     }
-}
+
+    //   .cardWrap {
+    //     overflow-y: scroll;
+
+    //     .card {
+    //       padding: 16px;
+    //       background: #FFFFFF;
+    //       border-radius: 2px;
+    //       margin-bottom: 16px;
+
+    //       .cardTitle {
+    //         font-size: 14px;
+    //         font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+    //         font-weight: 400;
+    //         color: #292C33;
+    //         margin-bottom: 16px;
+    //       }
+
+    //       &:last-child {
+    //         margin-bottom: 0 !important;
+
+    //       }
+    //     }
+
+    //     &.isModeTwo {
+    //       padding-top: 16px;
+    //       background-color: #FFFFFF;
+    //     }
+
+
+
+
+    //     &:last-child {
+    //       margin-bottom: 0 !important;
+    //     .ant-form-item {
+    //       margin-bottom: 0;
+    //     }
+    //   }
+
+    //   // .card {
+    //   //   padding: 16px;
+    //   //   background-color: #FFFFFF;
+    //   // }
+
+
+    //   .mwc-ant-form-item {
+    //     margin-bottom: 0;
+    //   }
+    // }
+
+
+
+    .selfEvolutionTitle {
+      text-align: left;
+      font-size: 16px;
+      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+      font-weight: 400;
+      color: #7A8599;
+      margin-top: 20px;
+
+    }
+
+    .selfEvolutionArea {
+      text-align: center;
+      line-height: 50px;
+      background: #FFFFFF;
+      border-radius: 10px;
+      border: 1px dashed #DADEE6;
+      margin-top: 20px;
+      margin-bottom: 40px;
+      padding: 10px;
+      padding-top: 40px;
+    }
+
+    .tabWrap {
+      justify-content: space-around;
+    }
+
+    .formItemTitle {
+      font-size: 16px;
+      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+      font-weight: 400;
+      color: #7A8599;
+      margin-bottom: 16px;
+    }
+
+  }
+}

src/pages/GradeHospitalAccreditation/articleManagement/index.less

@@ -61,143 +61,6 @@ textarea.mwc-ant-input {
   }
 
 
-}
-.cardWrap {
-  overflow-y: scroll;
-  .card {
-    padding: 16px;
-    background: #FFFFFF;
-    border-radius: 2px;
-    margin-bottom: 16px;
-    margin-top: 16px;
-
-    .selfEvaluation {
-      display: flex;
-      height: 28px;
-      flex-direction: row;
-      align-items: center;
-
-      span {
-        font-size: 20px;
-        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-        font-weight: 500;
-        padding-left: 16px;
-      }
-    }
-
-    .wrap {
-      .tab {
-        width: 20%;
-        height: 28px;
-        cursor: pointer;
-        text-align: center;
-        line-height: 28px;
-        background: #F7F8FA;
-        border-radius: 14px;
-        font-size: 14px;
-        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-        font-weight: 400;
-        color: #525866;
-        margin-right: 16px;
-
-        &.on {
-          color: #3377FF;
-          background: #EBF1FF;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-  }
-
-  .cardWrap {
-    overflow-y: scroll;
-
-    .card {
-      padding: 16px;
-      background: #FFFFFF;
-      border-radius: 2px;
-      margin-bottom: 16px;
-
-      .cardTitle {
-        font-size: 14px;
-        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-        font-weight: 400;
-        color: #292C33;
-        margin-bottom: 16px;
-      }
-
-      &:last-child {
-        margin-bottom: 0 !important;
-
-      }
-    }
-
-    &.isModeTwo {
-      padding-top: 16px;
-      background-color: #FFFFFF;
-    }
-
-
-    
-
-    &:last-child {
-      margin-bottom: 0 !important;
-    .ant-form-item {
-      margin-bottom: 0;
-    }
-  }
-
-  .card {
-    padding: 16px;
-    background-color: #FFFFFF;
-  }
-
-
-  .mwc-ant-form-item {
-    margin-bottom: 0;
-  }
-}
-
-
-
-  .selfEvolutionTitle {
-    text-align: left;
-    font-size: 16px;
-    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-    font-weight: 400;
-    color: #7A8599;
-    margin-top: 20px;
-
-  }
-
-  .selfEvolutionArea {
-    text-align: center;
-    line-height: 50px;
-    background: #FFFFFF;
-    border-radius: 10px;
-    border: 1px dashed #DADEE6;
-    margin-top: 20px;
-    margin-bottom: 40px;
-    padding: 10px;
-    padding-top: 40px;
-  }
-
-  .tabWrap {
-    justify-content: space-around;
-  }
-
-  .formItemTitle {
-    font-size: 16px;
-    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-    font-weight: 400;
-    color: #7A8599;
-    margin-bottom: 16px;
-  }
-
 }
 
 .formItemTitle {

src/pages/GradeHospitalAccreditation/articleManagement/index.tsx

@@ -2,7 +2,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-14 10:22:09
- * @LastEditTime: 2022-03-15 16:35:22
+ * @LastEditTime: 2022-03-22 15:31:09
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/index.tsx
@@ -431,7 +431,7 @@ const ArticleManagement: React.FC<ArticleManagementProps> = (props) => {
                 }
 
                 <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', width: '100%' }}>
-                    <div style={{ height: '85vh', width: restModelData.editMode ? 0 : '25%', transition: 'width 0.2s ease-in', padding: '16px', backgroundColor: '#fff', marginRight: '16px', boxSizing: 'border-box' }} >
+                    <div style={{ height: 'calc(100vh - 88px)', width: restModelData.editMode ? 0 : '25%', transition: 'width 0.2s ease-in', padding: '16px', backgroundColor: '#fff', marginRight: '16px', boxSizing: 'border-box' }} >
                         {
                             defaultOpened && (
                                 <MccsFileTree
@@ -454,7 +454,7 @@ const ArticleManagement: React.FC<ArticleManagementProps> = (props) => {
                         }
                     </div>
                     <div style={{ padding: 0, width: restModelData.editMode ? '100%' : '75%', transition: 'width 0.2s ease-in' }}>
-                        <div className='card' style={{ display: currentActivedTree?.isLeaf ? 'none' : 'block',height:'85vh' }}>
+                        <div className='card' style={{ display: currentActivedTree?.isLeaf ? 'none' : 'block',height:'calc(100vh - 88px)'}}>
                             <MccsTable
                                 ref={tableRef}
                                 columns={columnsFromProps.length > 0 ? columnsFromProps : columns}

src/pages/GradeHospitalAccreditation/articleManagement/model.ts

@@ -2,7 +2,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-14 10:46:45
- * @LastEditTime: 2022-03-15 16:49:41
+ * @LastEditTime: 2022-03-17 16:47:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/model.ts
@@ -644,7 +644,7 @@ const articleManagement = () => {
       const userData = JSON.parse(t as string);
 
       setHasEditAuthority(userId == userData.userId);
-
+      // setHasEditAuthority(true);
       setImplementationData({ [selfEvaluation]: leafData.pfmImplementations });
 
       const selfEvolution = leafData.reviewArticle.selfEvaluation;

src/pages/GradeHospitalAccreditation/ledgerUpload/componets/deitailModule/detail.tsx

@@ -1,441 +0,0 @@
-/*
- * @Author: your name
- * @Date: 2021-12-30 18:57:21
- * @LastEditTime: 2022-01-05 10:21:17
- * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/ledgerUpload/detail.tsx
- */
-
-
-import React, { useEffect, useState,useRef} from 'react';
-import { useModel } from 'umi';
-import { Select, Input, Switch } from 'antd'
-import { getScoreColor } from '@/constant';
-import MccsLightTable from '@/components/MccsLightTable';
-
-import MccsEditableTable from '@/components/MccsEditableTable/index';
-
-
-
-import { getCurrentLevelTable, getTaizhangDirectoryTable } from '@/pages/GradeHospitalAccreditation/articleManagement/server';
-
-
-import './style.less';
-
-const { TextArea } = Input;
-const {Option} = Select;
-
-enum ActType {
-    'NOACT',  // 不操作
-    'ADD',
-    'EDIT',
-    'DEL'
-};
-
-
-
-const DetailModule = () => {
-
-    const { articleManagement } = useModel('allModels', model => {
-        return { articleManagement: model.articleManagement, ledgerUpload: model.ledgerUpload };
-    });
-
-    const {
-        currentActivedTree,
-        scoreList,
-        accountTypeOptions,
-        gradeOptions,
-        ...restModelData
-    } = articleManagement;
-
-    const [idEditMode, setIfEditMode] = useState(false);
-
-    const [isModeTwo, setIsModeTwo] = useState(true);
-
-    const [scrollAreaH,setScrollAreaH] = useState(100);
-    const leafContentRef = useRef<HTMLDivElement>(null);
-
-    const MccsLightTableColumns = [
-        {
-            key: 'gradeLevel',
-            title: '档次',
-            width: 10
-        },
-        {
-            key: 'directory',
-            title: '名称',
-            width: 60
-        },
-        {
-            key: 'accountType',
-            title: '类型',
-        },
-        {
-            key: 'accountStatus',
-            title: '需要台账',
-            render: (record: any) => {
-                return record.accountStatus == 0 ? '否' : '是'
-            }
-        },
-    ]
-
-
-    const mccsEditableTableColumns = [
-        {
-            title: '名称',
-            dataIndex: 'directory',
-            width: '50%',
-            align: 'center',
-            formItemProps: () => {
-                return {
-                    rules: [{ required: true, message: '此项为必填项' }],
-                };
-            },
-        },
-        {
-            title: '档次',
-            dataIndex: 'grade',
-            width: '15%',
-            align: 'center',
-            formItemProps: () => {
-                return {
-                    rules: [{ required: true, message: '此项为必填项' }],
-                };
-            },
-            renderFormItem: (_: any, config: any, form: any) => {
-
-                const { isEditable } = config;
-
-                return isEditable ? (
-                    <Select
-                        mode='multiple'
-                        placeholder='请选择'
-                    >
-                        {
-                            gradeOptions.map((item, index) => (
-                                <Option value={item.value} key={index}>{item.label}</Option>
-                            ))
-                        }
-                    </Select>
-
-                ) : <Input />;
-            },
-            render: (_: any, row: any) => {
-                // console.log({ _, row }); 
-                return typeof _ === 'object' ? _.join(',') : _;
-            },
-        },
-        {
-            title: '类型',
-            dataIndex: 'accountType',
-            align: 'center',
-            width: '15%',
-            formItemProps: () => {
-                return {
-                    rules: [{ required: true, message: '此项为必填项' }],
-                };
-            },
-            renderFormItem: (_: any, { isEditable }: { isEditable: boolean }, form: any) => {
-
-                return isEditable ? (
-                    <Select
-                        placeholder='请选择'
-                    >
-                        {
-                            accountTypeOptions.map((item, index) => (
-                                <Option value={item.value} key={index}>{item.label}</Option>
-                            ))
-                        }
-                    </Select>
-                ) : <Input />;
-            },
-
-
-        },
-        {
-            title: '台账上传',
-            align: 'center',
-            dataIndex: 'accountStatus',
-            width: '10%',
-            valueType: 'switch',
-            renderFormItem: (_: any, { isEditable }: { isEditable: boolean }) => {
-                return isEditable ? (
-                    // <Form.Item name='accountStatus' valuePropName='checked'>
-                    <Switch size='small' />
-                    // </Form.Item>
-                ) : <Input />
-            },
-            render: (_: any, row: any) => {
-                return (
-                    <Switch size='small' disabled checked={row.accountStatus} />
-                )
-            },
-        },
-
-    ]
-
-
-    const setEditStatus = () => {
-        setIfEditMode(true);
-        restModelData.setEditMode(true);
-    }
-
-    const followWindowResize = ()=>{
-
-        if(leafContentRef.current){
-         const leafContentH = leafContentRef.current.clientHeight + 50;  // 加上padding
-         const headerH = 0;
-         const scoreH = isModeTwo?(60+32):0;
-         const h =   window.innerHeight - (leafContentH + headerH + scoreH);
-         setScrollAreaH(h);
-       }
-    }
-
-    const taizhangDataDerectoryEditHandle = (data: any, actType: ActType) => {
-        // 台账资料目录编辑回调
-        const version = restModelData.leafData?.reviewArticle.version;
-        let prevData = restModelData.taizhangDataDirectoryCommitList;
-        const numStr = restModelData.leafData?.reviewArticle.numStr;
-
-        if (actType == ActType.DEL && data.id == '-') {
-            // 如果是删除操作且删除的不是数据库已有数据时,剔除之前暂时保留数据
-            prevData = prevData.filter(item => item.directory != data.directory);
-            restModelData.setTaizhangDataDirectoryCommitList([...prevData]);
-            return;
-        }
-
-        restModelData.setTaizhangDataDirectoryCommitList([...prevData, { ...data, dataStatus: actType, version: version || '', grade: data.grade.join(','), numStr, accountStatus: data.accountStatus ? '1' : '0' }])
-    }
-
-    const onTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>, level: string) => {
-        // 更改执行情况说明数据
-        // 首先找出要更新的项，再进行整体替换
-
-        if (restModelData.selectedSelfEvolution) {
-
-            const editTargetLevel = restModelData.selectedSelfEvolution.label;  // 目标等级
-            // 找出目标等级下正在更新的level
-            const editImplementationDataItemIndex = restModelData.implementationData[editTargetLevel].findIndex(item => item.level == level);
-            // 拷贝旧的目标等级数据
-            const _cpOldImplemetationItem = restModelData.implementationData[editTargetLevel];
-            // 将新的编辑内容赋值给正在编辑的目标下的level
-            _cpOldImplemetationItem[editImplementationDataItemIndex].note = e.target.value;
-
-            if (editImplementationDataItemIndex != -1) {
-                restModelData.setImplementationData({
-                    ...restModelData.implementationData,
-                    // 插入更新
-                    [editTargetLevel]: _cpOldImplemetationItem
-                }
-                )
-            }
-        }
-
-    }
-
-
-
-    useEffect(() => {
-        const {leafData} = restModelData;
-        if (leafData) {
-            restModelData.setSelectedSelfEvolution({
-                label: leafData.reviewArticle.selfEvaluation,
-                value: leafData.reviewArticle.selfEvaluation
-            });
-        }
-        
-        restModelData.getAccoutTypeOptions();
-        restModelData.getGradeOptions();
-
-        window.addEventListener("resize",followWindowResize);
-
-        setTimeout(()=>{
-            // 首次加载叶子节点内容触发一次
-            const myEvent = new Event('resize');
-            window.dispatchEvent(myEvent); 
-            document.body.style.overflowY = 'hidden';  // 叶子节点下锁住页面滚动
-        },100);
-
-        return ()=>{
-            window.removeEventListener("resize",followWindowResize);
-        }
-
-    }, [])
-
-
-    return (
-        <div className='DetailModule'>
-            <div ref={leafContentRef}>
-            <div className='leafContentTitle'>{currentActivedTree ? currentActivedTree.title : ''}</div>
-            <div className='peopleGroup'>
-                <span>条文组别：</span>
-                <span>{restModelData.leafData?.reviewArticle?.accountType}</span>
-                <span>负责单位：</span>
-                <span>{restModelData.leafData?.reviewArticle?.responsibilityDepartmentName}</span>
-                <span>负责人：</span>
-                <span>{restModelData.leafData?.reviewArticle?.responsibilityUserName}</span>
-            </div>
-
-            <div className='scoreRow'>
-                <div className='scoreInfo'>
-                    {
-                        scoreList.map((item, index) => {
-                            return (
-                                <div key={index} className='scoreBlock'>
-                                    {item.label}
-                                    {item.value && item.value != '-' ? (<span style={{ color: getScoreColor(item.value) }}>{item.value}</span>) : ' -'}
-                                </div>
-                            )
-                        })
-                    }
-                </div>
-
-                {
-                    // 台账上传页面且非编辑状态下
-                    !restModelData.editMode && restModelData.hasEditAuthority && <div className='editPageBtn' onClick={() => setEditStatus()}>{restModelData.editMode ? '取消编辑' : '开启编辑'}</div>
-                }
-            </div>
-       
-            <div className='scoreGradeDetail'>
-
-                {
-                    restModelData.leafData?.pfmViewRuleDetailDataVoList.map((item, index) => (
-                        <div className='scoreGradeDetailList' key={index}>
-                            <div className='head'>{item.evaluation}</div>
-                            <div className='detail'>
-                                {
-                                    item.viewRuleAndLevelVos && item.viewRuleAndLevelVos.map((v, k) => (
-                                        <div className='textLine' key={k}>{`${v.grade} ${v.detail}`}</div>
-                                    ))
-                                }
-                            </div>
-                        </div>
-                    ))
-                }
-            </div>
-            </div>
-
-            {
-                true && (
-                    <div className='selfEvaluationWrap'>
-                        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%', }}>
-                            <div className='selfEvaluation'>
-                                自评等级
-                                {!restModelData.editMode && (
-                                    <span style={{ color: getScoreColor(restModelData.leafData ? restModelData.leafData.reviewArticle.selfEvaluation : '') }}>{restModelData.leafData?.reviewArticle.selfEvaluation ? restModelData.leafData?.reviewArticle.selfEvaluation : '-'}</span>
-                                )}
-                            </div>
-                            {
-                                restModelData.editMode && (
-                                    <div className='wrap' style={{ width: '60%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
-                                        {
-                                            restModelData.targetScores.map((item, index) => (
-                                                <div className={restModelData.selectedSelfEvolution?.label == item.label ? 'tab on' : 'tab'} key={index} onClick={() => restModelData.onSelfEvolutionTabChange(item)}>{item.label}</div>
-                                            ))
-                                        }
-                                    </div>
-                                )
-                            }
-                        </div>
-                    </div>
-                )
-            }
-
-            {
-                restModelData.leafData && (
-                    // 台账上传页面时，背景色统一白色，cardWrap提供容器实现上下滑动
-                    <div className={isModeTwo ? 'cardWrap isModeTwo' : 'cardWrap'} style={{height:`${scrollAreaH}px`}}>
-                        <div>
-                            {
-                                // 渲染执行情况说明
-                                /**
-                                 * 满足条件：
-                                 * 1.存在自评等级从接口获取或手动点击选择
-                                 * 2.implementationData里有当前等级的数据
-                                 */
-                                (restModelData.selectedSelfEvolution && restModelData.implementationData[restModelData.selectedSelfEvolution.label])
-                                && restModelData.implementationData[restModelData.selectedSelfEvolution.label].map((item, index) => {
-
-                                    return (
-                                        <div className='card' key={index} style={{ marginBottom: isModeTwo ? 0 : '16px', paddingBottom: isModeTwo ? 0 : '16px', paddingTop: isModeTwo ? 0 : '16px' }}>
-                                            <div className='cardTitle' style={{ marginBottom: isModeTwo ? '8px' : '16px' }}>{`执行情况说明（等级${item.level}）`}</div>
-
-                                            <TextArea allowClear showCount maxLength={2000}
-                                                autoSize={{
-                                                    minRows: 5,
-                                                    maxRows: 20
-                                                }}
-                                                disabled={!restModelData.editMode} value={item.note}
-                                                onChange={e => onTextAreaChange(e, item.level)}
-                                                style={{ marginBottom: 20 }} />
-
-                                            {
-                                                !isModeTwo && (
-                                                    <MccsLightTable
-                                                        columns={MccsLightTableColumns}
-                                                        request={(current, pageSize) => getCurrentLevelTable({
-                                                            level: item.level,
-                                                            numStr: currentActivedTree ? currentActivedTree.code : 'null',
-                                                            version: restModelData.leafData ? (restModelData.leafData.reviewArticle.version) : 'null',
-                                                            current,
-                                                            pageSize
-                                                        })}
-                                                    />
-                                                )
-                                            }
-                                        </div>
-                                    )
-                                })
-                            }
-                            <div >
-                                {
-                                    // 台帐下展示
-                                    (isModeTwo && restModelData.leafData) && (
-                                        <MccsEditableTable
-                                            bordered={true}
-                                            edit={restModelData.editMode}
-                                            pagination={true}
-                                            addHandle={
-                                                (data: any) => taizhangDataDerectoryEditHandle(data, ActType.ADD)
-                                            }
-                                            editHandle={
-                                                (data: any) => taizhangDataDerectoryEditHandle(data, ActType.EDIT)
-                                            }
-                                            delHandle={
-                                                (data: any) => taizhangDataDerectoryEditHandle(data, ActType.DEL)
-                                            }
-                                            request={async (current, pageSize) => {
-                                                console.log('leafData', restModelData.leafData)
-                                                if (restModelData.leafData) {
-                                                    const { numStr, version } = restModelData.leafData.reviewArticle;
-                                                    const resp = await getTaizhangDirectoryTable({ numStr, version, current, pageSize });
-                                                    const { list = [] } = resp;
-                                                    return {
-                                                        data: list.map(item => ({ ...item, grade: item.grade ? item.grade.split(',') : [], accountStatus: item.accountStatus != '0' })), // 多选下拉需传数组值
-                                                        total: resp.totalCount,
-                                                        current: resp.current,
-                                                        success: true
-                                                    };
-                                                }
-                                                return {
-                                                    data: [],
-                                                    total: 0,
-                                                    success: false
-                                                }
-                                            }}
-                                            columns={mccsEditableTableColumns}
-                                        />
-                                    )
-                                }
-                            </div>
-                        </div>
-                    </div>
-                )
-            }
-
-        </div>
-    )
-}
-
-export default DetailModule;

src/pages/GradeHospitalAccreditation/ledgerUpload/componets/deitailModule/style.less

@@ -1,248 +0,0 @@
-.DetailModule {
-  .scoreRow {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 32px;
-
-    .scoreInfo {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-
-      .scoreBlock {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        width: 117px;
-        height: 16px;
-        font-size: 12px;
-        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-        font-weight: 400;
-        color: #525866;
-        border-right: 1px solid #DADEE6;
-
-        &>span {
-          position: relative;
-          top: -2px;
-          display: inline-block;
-          margin-left: 16px;
-          font-size: 20px;
-          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-          font-weight: 500;
-        }
-
-        &:last-child {
-          border: none;
-        }
-
-        &:first-child {
-          width: 94px;
-        }
-      }
-    }
-
-    .ruleSettingBtn,
-    .editPageBtn {
-      font-size: 14px;
-      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-      font-weight: 400;
-      color: #525966;
-      padding-right: 16px;
-      cursor: pointer;
-
-      &::before {
-        position: relative;
-        top: 3px;
-        display: inline-block;
-        content: '';
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-        background: url('../../../../../../public//pageEditIcon.png');
-        background-size: contain;
-
-      }
-    }
-
-    .editPageBtn {
-      &::before {
-        position: relative;
-        top: 3px;
-        display: inline-block;
-        content: '';
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-        background: url('../../../../../../public//pageEditIcon.png');
-        background-size: contain;
-
-      }
-    }
-  }
-
-  .scoreGradeDetail {
-    width: 100%;
-    margin-top: 26px;
-    border-radius: 2px;
-    overflow: hidden;
-
-    .scoreGradeDetailList {
-      position: relative;
-      display: flex;
-      width: 100%;
-      height: 100%;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: stretch;
-      padding-left: 40px;
-      margin-bottom: 2px;
-
-      .head {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 40px;
-        height: 100%;
-        background: #A3B1CC;
-        font-size: 16px;
-        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
-        font-weight: bold;
-        color: #FFFFFF;
-      }
-
-      .detail {
-        width: 100%;
-        background: #F5F7FA;
-        padding: 9px 18px;
-
-        .textLine {
-          font-size: 12px;
-          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-          font-weight: 400;
-          color: #5C7099;
-          line-height: 14px;
-          margin-bottom: 5px;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .articleSetBtn {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-    background: #FFFFFF;
-    border-radius: 25px;
-    border: 1px dashed #DADEE6;
-    margin-top: 40px;
-    margin-bottom: 40px;
-
-    span {
-      font-size: 16px;
-      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-      font-weight: 400;
-      cursor: pointer;
-      color: @primary-color;
-    }
-  }
-
-  .selfEvaluationWrap {
-    padding: 16px;
-    background: #FFFFFF;
-    border-radius: 2px;
-    margin-bottom: 0px;
-    margin-top: 16px;
-
-    .selfEvaluation {
-      display: flex;
-      height: 28px;
-      flex-direction: row;
-      align-items: center;
-
-      span {
-        font-size: 20px;
-        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
-        font-weight: 500;
-        padding-left: 16px;
-      }
-    }
-
-    .wrap {
-      .tab {
-        width: 20%;
-        height: 28px;
-        cursor: pointer;
-        text-align: center;
-        line-height: 28px;
-        background: #F7F8FA;
-        border-radius: 14px;
-        font-size: 14px;
-        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-        font-weight: 400;
-        color: #525866;
-        margin-right: 16px;
-
-        &.on {
-          color: #3377FF;
-          background: #EBF1FF;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-  }
-
-  .cardWrap {
-
-    overflow-y: scroll;
-    padding-bottom: 16px;
-
-    .card {
-      padding: 16px;
-      background: #FFFFFF;
-      border-radius: 2px;
-      padding-left: 0;
-      padding-right: 0;
-      margin-bottom: 16px;
-
-      .cardTitle {
-        font-size: 14px;
-        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-        font-weight: 400;
-        color: #292C33;
-        margin-bottom: 16px;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &.isModeTwo {
-      padding-top: 16px;
-      background-color: #FFFFFF;
-    }
-
-    .ant-form-item {
-      margin-bottom: 0;
-    }
-  }
-}

src/pages/GradeHospitalAccreditation/ledgerUpload/index.tsx

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-14 10:22:09
- * @LastEditTime: 2022-03-10 10:54:42
+ * @LastEditTime: 2022-03-22 14:19:38
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/index.tsx
@@ -20,10 +20,11 @@ import ArticleManagementCopy from '@/pages/GradeHospitalAccreditation/articleMan
 import MccsDrawerForm from '@/components/MccsDrawerForm/index';
 import './index.less';
 
-import DetailModule from './componets/deitailModule/detail';
+// import DetailModule from './componets/deitailModule/detail';
 
 import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
+import ArticleDetail from '../articleManagement/components/articleDetailModule';
 
 
 type LedgerUploadPropsType = {
@@ -221,7 +222,8 @@ const LedgerUpload: React.FC<LedgerUploadPropsType> = (props) => {
                 </div>):null}
             >
                 <div className='leafContent'>
-                     <DetailModule />
+                     {/* <DetailModule /> */}
+                     <ArticleDetail  />
                 </div>
             </MccsDrawerForm>
         </React.Fragment>