添加合作单位

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

@@ -1,7 +1,9 @@
 /*
  * @Author: your name
  * @Date: 2022-03-07 11:05:19
- * @LastEditTime: 2022-03-14 09:55:53
+
+ * @LastEditTime: 2022-03-14 11:48:28
+
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/drawer/set.tsx
@@ -12,10 +14,11 @@
 import MccsDrawerForm from '@/components/MccsDrawerForm/index';
 import { ProFormDependency, ProFormInstance, ProFormSelect } from '@ant-design/pro-form';
 import MccsClickableTabs from '@/components/MccsClickableTabs/index';
-import { useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { Form, Row, Col } from 'antd'
 import { useModel } from 'umi';
+import MultiResponsibilitySelecter from './multi';
 
 
 
@@ -40,20 +43,22 @@ const SetDrawer = () => {
 
     const drawerFormRef = useRef<ProFormInstance>();
 
+    const [ifsetTargetScore, setifsetTargetScore] = useState(true); //设置目标分数是否必填
+
 
 
     const onVisibleChangeHandle = (visible: boolean) => {
         //drawer展示控制
-        if(visible){
-            if(restModelData.leafData){
+        if (visible) {
+            if (restModelData.leafData) {
                 getDepartmentUsers(restModelData.leafData?.reviewArticle.responsibilityDepartmentId);
             }
         }
-        !visible && articleManagement.setArticleSettingFormInit({});//清空默认值
+        !visible && restModelData.setArticleSettingFormInit(undefined);//清空默认值
         restModelData.setDrawerVisible(visible);
     }
-    
-    const setTitle = (type:string) => {
+
+    const setTitle = () => {
 
         if (restModelData.drawerFormType == 'ARTICLE_SET') {
             return '条文设置'
@@ -61,10 +66,11 @@ const SetDrawer = () => {
         if (restModelData.drawerFormType == 'BATCHSETTING') {
             return '批量设置'
         }
+        return ''
     }
 
-    const onFinishHandle = (values:any)=>{
-        
+    const onFinishHandle = (values: any) => {
+
         if (restModelData.drawerFormType == 'ARTICLE_SET') {
             restModelData.setArticle(values)
         }
@@ -73,95 +79,118 @@ const SetDrawer = () => {
         }
     }
 
+
+
+    useEffect(() => {
+        if (articleManagement.articleSettingFormInit && articleManagement.articleSettingFormInit.targetScores) {
+            setifsetTargetScore(true);
+        } else {
+            setifsetTargetScore(false);
+        }
+    }, [articleManagement.articleSettingFormInit?.targetScores]);
+
+
+
     return (
         <MccsDrawerForm
-            title={setTitle(restModelData.drawerFormType?restModelData.drawerFormType:'')}
+            title={setTitle()}
             width={500}
             formRef={drawerFormRef}
             visible={restModelData.drawerVisible}
-            initialValues={restModelData.drawerFormType == 'ARTICLE_SET' ? { ...articleManagement.articleSettingFormInit } : {}}
+            initialValues={restModelData.drawerFormType == 'ARTICLE_SET' ? { ...articleManagement.articleSettingFormInit } : undefined}
             onFinish={(values: any) => onFinishHandle(values)}
             onVisibleChange={onVisibleChangeHandle}
         >
-                    <div>
-                        <div className='formItemTitle'>负责人及单位</div>
-                        <Row gutter={16}>
-                            <Col className="gutter-row" span={10}>
-                                <ProFormSelect
-                                    name="responsibilityDepartment"
-                                    width='sm'
-                                    showSearch
-                                    request={getDepartmentRequest}
-                                    placeholder="选择单位"
-                                    fieldProps={{
-                                        labelInValue: true,
-                                        onChange: (item, option) => {
-                                            //责任单位修改时清空责任人
-                                            drawerFormRef.current?.setFieldsValue({ ...articleManagement.articleSettingFormInit, responsibilityUser: { label: '', value: '' } });
-                                            getDepartmentUsers(item.value, option)
-                                        }
-                                    }}
-                                    rules={[{ required: true, message: '请选择单位！' }]}
-                                />
-                            </Col>
-
-                            <Col className="gutter-row" span={8}>
-                                <ProFormDependency name={['responsibilityDepartment']}>
-                                    {({ responsibilityDepartment }) => {
-                                        return (
-                                            <ProFormSelect
-                                                name="responsibilityUser"
-                                                width='sm'
-                                                disabled={!responsibilityDepartment || JSON.stringify(responsibilityDepartment) == '{}'}
-                                                options={departmentManagers}
-                                                placeholder="选择负责人"
-                                                fieldProps={{
-                                                    labelInValue: true,
-                                                }}
-                                                rules={[{ required: true, message: '请选择负责人！' }]}
-                                            />
-                                        )
-                                    }}
-                                </ProFormDependency>
-                            </Col>
-                        </Row>
-                        <div className='formItemTitle'>目标分数</div>
-                        <Row >
-                            <Col span={24}>
-                                <Form.Item name='targetScores' rules={[
-                                    {
-                                        required: true,
-                                        message: '请选择目标分数!',
-                                    },
-                                ]}>
-                                    <MccsClickableTabs
-                                        data={restModelData.targetScores}
+            <div>
+                <div className='formItemTitle require'>负责人及单位</div>
+                <Row gutter={16}>
+                    <Col className="gutter-row" span={10}>
+                        <ProFormSelect
+                            name="responsibilityDepartment"
+                            width='sm'
+                            showSearch
+                            request={getDepartmentRequest}
+                            placeholder="选择单位"
+                            fieldProps={{
+                                labelInValue: true,
+                                onChange: (item, option) => {
+                                    //责任单位修改时清空责任人
+                                    drawerFormRef.current?.setFieldsValue({ ...articleManagement.articleSettingFormInit, responsibilityUser: { label: '', value: '' } });
+                                    getDepartmentUsers(item.value, option)
+                                }
+                            }}
+                            rules={[{ required: true, message: '请选择单位！' }]}
+                        />
+                    </Col>
+
+                    <Col className="gutter-row" span={8}>
+                        <ProFormDependency name={['responsibilityDepartment']}>
+                            {({ responsibilityDepartment }) => {
+                                return (
+                                    <ProFormSelect
+                                        name="responsibilityUser"
+                                        width='sm'
+                                        disabled={!responsibilityDepartment || JSON.stringify(responsibilityDepartment) == '{}'}
+                                        options={departmentManagers}
+                                        placeholder="选择负责人"
+                                        fieldProps={{
+                                            labelInValue: true,
+                                        }}
+                                        rules={[{ required: true, message: '请选择负责人！' }]}
                                     />
-                                </Form.Item>
-                            </Col>
+                                )
+                            }}
+                        </ProFormDependency>
+                    </Col>
+                </Row>
+
+                <div className='formItemTitle require'>合作负责人及单位</div>
+                <Row >
+                    <Col span={24}>
+                        <Row gutter={24}>
+                           <MultiResponsibilitySelecter />
                         </Row>
-                        {
-                            true && (
-                                <>
-                                    <div className='formItemTitle'>条文组别</div>
-                                    <Row>
-                                        <Col span={24}>
-                                            <Form.Item name='articleType' rules={[
-                                                {
-                                                    required: true,
-                                                    message: '请选择条文组别!',
-                                                },
-                                            ]}>
-                                                <MccsClickableTabs
-                                                    data={restModelData.ruleTypes}
-                                                />
-                                            </Form.Item>
-                                        </Col>
-                                    </Row>
-                                </>
-                            )
-                        }
-                    </div>
+                    </Col>
+                </Row>
+
+                <div className={ifsetTargetScore ? 'formItemTitle require' : 'formItemTitle'}>目标分数{ifsetTargetScore && <span onClick={() => setifsetTargetScore(false)}>暂不设置</span>}</div>
+                <Row >
+                    <Col span={24}>
+                        <Form.Item name='targetScores' rules={[
+                            {
+                                required: true,
+                                message: '请选择目标分数!',
+                            },
+                        ]}>
+                            <MccsClickableTabs
+                                clear={!ifsetTargetScore}
+                                data={restModelData.targetScores}
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                {
+                    true && (
+                        <>
+                            <div className='formItemTitle require'>条文组别</div>
+                            <Row>
+                                <Col span={24}>
+                                    <Form.Item name='articleType' rules={[
+                                        {
+                                            required: true,
+                                            message: '请选择条文组别!',
+                                        },
+                                    ]}>
+                                        <MccsClickableTabs
+                                            data={restModelData.ruleTypes}
+                                        />
+                                    </Form.Item>
+                                </Col>
+                            </Row>
+                        </>
+                    )
+                }
+            </div>
         </MccsDrawerForm>
     )
 }

src/pages/GradeHospitalAccreditation/articleManagement/components/articleDetailModule/drawer/multi.tsx

@@ -0,0 +1,61 @@
+/*
+ * @Author: your name
+ * @Date: 2022-03-14 11:17:12
+ * @LastEditTime: 2022-03-14 11:48:48
+ * @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/drawer/multi.tsx
+ */
+
+import { ProFormSelect } from "@ant-design/pro-form";
+import { Col } from "antd";
+
+//多级责任人及单位设置
+
+const SelectFormItem = () => {
+
+    return (
+        <div style={{display:'flex',flexDirection:'row'}}>
+            <Col className="gutter-row" span={12}>
+                <ProFormSelect
+                    name="responsibilityDepartment"
+                    width='sm'
+                    showSearch
+                    placeholder="选择单位"
+                    options={[]}
+                    fieldProps={{
+                        labelInValue: true,
+                        onChange: (item, option) => {
+
+                        }
+                    }}
+                    rules={[{ required: true, message: '请选择单位！' }]}
+                />
+            </Col>
+            <Col className="gutter-row" span={10}>
+                <ProFormSelect
+                    name="responsibilityUser"
+                    width='sm'
+                    disabled={true}
+                    options={[]}
+                    placeholder="选择负责人"
+                    fieldProps={{
+                        labelInValue: true,
+                    }}
+                    rules={[{ required: true, message: '请选择负责人！' }]}
+                />
+            </Col>
+        </div>
+    )
+}
+
+const MultiResponsibilitySelecter = ()=>{
+      return (
+          <div style={{display:'flex',flexDirection:'column'}}>
+                 <SelectFormItem />
+                 <div style={{display:'flex',height:'40px',justifyContent:'center',alignContent:'center'}}>+</div>
+          </div>
+      )
+}
+
+export default MultiResponsibilitySelecter;

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-10 11:44:00
+ * @LastEditTime: 2022-03-14 10:48:47
  * @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
@@ -262,9 +262,30 @@ const ArticleDetail = ({ isModeTwo = false }) => {
     }
 
 
+    const setDrawerFormInit =  ()=>{
+        if (restModelData.leafData) {
+            const { responsibilityDepartmentId, responsibilityDepartmentName, responsibilityUserId, targetEvaluation, responsibilityUserName, accountType } = restModelData.leafData.reviewArticle;
+            if (responsibilityDepartmentName && responsibilityDepartmentId) {
+
+                restModelData.setArticleSettingFormInit({
+                    responsibilityDepartment: { label: responsibilityDepartmentName, value: responsibilityDepartmentId },
+                    responsibilityUser: { label: responsibilityUserName, value: responsibilityUserId },
+                    targetScores: { label: targetEvaluation, value: targetEvaluation },
+                    articleType: { label: accountType, value: accountType },
+                });
+            }
+
+            restModelData.getGradeOptions();  //获取可选档次
+            restModelData.getAccoutTypeOptions(); //可选类型
+
+        }
+    }
+
+
     const articleSetBtnHandle = () => {
         //条文设置
         restModelData.setDrawerFormType('ARTICLE_SET');
+        setDrawerFormInit();
         restModelData.setDrawerVisible(true);
 
     }

src/pages/GradeHospitalAccreditation/articleManagement/index.less

@@ -1,179 +1,208 @@
-
 .ArticleManagement {
-      //overwrite antd css
-.ant-col-6 {
-  margin-bottom: 10px;
-}
-
-.ant-space-align-center {
-  align-items: flex-start;
-}
-
-.ant-pro-table-search {
-  padding-bottom: 0;
-}
 
-.ant-pro-page-container-warp {
-  display: none !important;
-}
+  //overwrite antd css
+  .ant-col-6 {
+    margin-bottom: 10px;
+  }
 
-.ant-pro-card-col {
-  transition: width 0.2s ease-in;
-  transform: translate3d(0,0,0);
-}
+  .ant-space-align-center {
+    align-items: flex-start;
+  }
 
-textarea.ant-input {
-  font-size: 14px !important;
-  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-  font-weight: 400;
-  color: #525866 !important;
-}
+  .ant-pro-table-search {
+    padding-bottom: 0;
+  }
 
-//----------------
+  .ant-pro-page-container-warp {
+    display: none !important;
+  }
 
+  .ant-pro-card-col {
+    transition: width 0.2s ease-in;
+    transform: translate3d(0, 0, 0);
+  }
 
-.onlyMyselfFilter {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding: 0 8px;
-  &>span {
-    font-size: 14px;
+  textarea.ant-input {
+    font-size: 14px !important;
     font-family: SourceHanSansCN-Normal, SourceHanSansCN;
     font-weight: 400;
-    color: #525966;
+    color: #525866 !important;
   }
-}
 
+  //----------------
 
-.selfEvaluationWrap {
-    padding: 16px;
-    background: #FFFFFF;
-    border-radius: 2px;
-    margin-bottom: 16px;
-    margin-top: 16px;
-  .selfEvaluation {
+
+  .onlyMyselfFilter {
     display: flex;
-    height: 28px;
     flex-direction: row;
+    justify-content: space-between;
     align-items: center;
+    margin-bottom: 16px;
+    padding: 0 8px;
 
-    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;
+    &>span {
       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;
-      }
+      color: #525966;
     }
   }
 
-}
-.cardWrap {
-  overflow-y: scroll;
 
-  .card {
+  .selfEvaluationWrap {
     padding: 16px;
     background: #FFFFFF;
     border-radius: 2px;
     margin-bottom: 16px;
+    margin-top: 16px;
 
-    .cardTitle {
-      font-size: 14px;
-      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-      font-weight: 400;
-      color: #292C33;
+    .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;
     }
   }
 
-  &.isModeTwo {
-    padding-top: 16px;
+  .card {
+    padding: 16px;
     background-color: #FFFFFF;
   }
 
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
 
-.card {
-  padding: 16px;
-  background-color: #FFFFFF;
-}
 
+  .selfEvolutionTitle {
+    text-align: left;
+    font-size: 16px;
+    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+    font-weight: 400;
+    color: #7A8599;
+    margin-top: 20px;
 
+  }
 
-.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;
+  }
 
-.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;
-}
+  .formItemTitle {
+    font-size: 16px;
+    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+    font-weight: 400;
+    color: #7A8599;
+    margin-bottom: 16px;
+  }
 
-.tabWrap {
-  justify-content: space-around;
 }
 
 .formItemTitle {
+  position: relative;
   font-size: 16px;
   font-family: SourceHanSansCN-Normal, SourceHanSansCN;
   font-weight: 400;
   color: #7A8599;
   margin-bottom: 16px;
-}
 
-}
+  &>span {
+       position: absolute;
+       right:42px;
+       top:6px;
+       font-size: 12px;
+       color: #598cf0;
+       cursor: pointer;
+       &:hover {
+           color: #3377FF;
+       }
+  }
 
-.formItemTitle {
-  font-size: 16px;
-  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-  font-weight: 400;
-  color: #7A8599;
-  margin-bottom: 16px;
+  &.require {
+    &::before {
+      display: inline-block;
+      position: relative;
+      top: -2px;
+      content: '*';
+      margin-right: 4px;
+      color: rgb(255, 77, 79);
+      font-size: 14px;
+    }
+  }
 }

src/pages/GradeHospitalAccreditation/articleManagement/index.tsx

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-14 10:22:09
- * @LastEditTime: 2022-03-10 16:06:11
+ * @LastEditTime: 2022-03-14 10:42:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/index.tsx
@@ -251,7 +251,7 @@ const ArticleManagement: React.FC<ArticleManagementProps> = (props) => {
         //左侧树节点点击回调
         setCurrentActivedTree(data);
         restModelData.setCurrentSelectedActObj(data);
-        articleManagement.setArticleSettingFormInit({});//清空默认值
+        articleManagement.setArticleSettingFormInit(undefined);//清空默认值
         //重新获取数据
         tableRef?.current?.getTableRef().current?.reload();
     }
@@ -313,26 +313,7 @@ const ArticleManagement: React.FC<ArticleManagementProps> = (props) => {
     }, [restModelData]);
 
 
-    useEffect(() => {
-        //点击叶子结点时回调
-        if (restModelData.leafData) {
-            const { responsibilityDepartmentId, responsibilityDepartmentName, responsibilityUserId, targetEvaluation, responsibilityUserName, accountType } = restModelData.leafData.reviewArticle;
-            if (responsibilityDepartmentName && responsibilityDepartmentId) {
-
-                articleManagement.setArticleSettingFormInit({
-                    responsibilityDepartment: { label: responsibilityDepartmentName, value: responsibilityDepartmentId },
-                    responsibilityUser: { label: responsibilityUserName, value: responsibilityUserId },
-                    targetScores: { label: targetEvaluation, value: targetEvaluation },
-                    articleType: { label: accountType, value: accountType },
-                });
-            }
-
-            restModelData.getGradeOptions();  //获取可选档次
-            restModelData.getAccoutTypeOptions(); //可选类型
-
-        }
-
-    }, [restModelData.leafData]);
+  
 
 
     useEffect(() => {

src/pages/GradeHospitalAccreditation/articleManagement/model.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-14 10:46:45
- * @LastEditTime: 2022-03-10 15:45:59
+ * @LastEditTime: 2022-03-14 10:35:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/model.ts
@@ -97,7 +97,12 @@ const articleManagement = () => {
 
   const [gradeOptions, setGradeOptions] = useState<{ label: string, value: string | number }[]>([]);
   const [accountTypeOptions, setAccountTypeOptions] = useState<{ label: string, value: string | number }[]>([]);
-  const [articleSettingFormInit, setArticleSettingFormInit] = useState<{}>({});  //条文设置表单回显默认值
+  const [articleSettingFormInit, setArticleSettingFormInit] = useState<{
+    responsibilityDepartment:{label:string;value:any};
+    responsibilityUser:{label:string;value:any};
+    targetScores:{label:string;value:any};
+    articleType:{label:string;value:any};
+  }|undefined>(undefined);  //条文设置表单回显默认值
 
   const [currentSelectedActObj, setCurrentSelectedActObj] = useState<any>(undefined);  //当前正在操作的对象，例如当前选中的树中层级数据，点击详情的的行数据
 
@@ -585,8 +590,7 @@ const articleManagement = () => {
   }
 
   useEffect(()=>{
-       console.log({detailDrawerVisible});
-
+  
        if(!detailDrawerVisible&&ifHasEdit){
             //详情抽屉关闭时刷新table
             setReloadRightContent(true);