增加管理信息

src/view/Manage/Model/Component/EditModel.jsx

@@ -11,7 +11,7 @@ import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Edita
 import HistoryAndVersionDrawer from './HistoryAndVersionDrawer';
 import { EditModelContext } from './ContextManage';
 import EditInherited from './EditInherited';
-import { ImportActionHeaderSubject } from './ImportActionHeader';
+import { ImportActionHeaderSubject } from './ImportActionManage';
 import PermissionButton from '../../../../util/Component/PermissionButton';
 
 import './EditModel.less';

src/view/Manage/Model/Component/ImportAction.jsx

@@ -6,6 +6,7 @@ import ImportActionHeader from './ImportActionHeader';
 import ImportActionInherited from './ImportActionInherited';
 import { ImportActionTable } from './ImportActionTable';
 import ImportActionIndex from './ImportActionIndex';
+import ImportActionManage from './ImportActionManage';
 import { getInternalCurrentAnchor, getQueryParam } from '../../../../util';
 import { Action } from '../../../../util/constant';
 import { dispatch } from '../../../../model'; 
@@ -131,6 +132,7 @@ const ImportAction = React.forwardRef((props, ref) => {
         'model-import-action-technical',
         'model-import-action-table',
         'model-import-action-index',
+        'model-import-action-manage',
       ],
       0,
       5,
@@ -588,6 +590,7 @@ const ImportAction = React.forwardRef((props, ref) => {
             <Tabs.TabPane tab='技术信息' key="model-import-action-technical" />
             <Tabs.TabPane tab='数据表结构' key="model-import-action-table" />
             <Tabs.TabPane tab='数据表索引' key="model-import-action-index" />
+            <Tabs.TabPane tab='管理信息' key="model-import-action-manage" />
           </Tabs>
         </div>
         <div ref={setContainer} style={{ height: action==='edit-inherite-modal'?'60vh':'calc(100vh - 44px - 64px - 82px)', overflow: 'auto', padding: '0 20px' }}>
@@ -627,6 +630,11 @@ const ImportAction = React.forwardRef((props, ref) => {
             editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 
             terms={terms}
           />
+          <ImportActionManage
+            form={form}
+            modelerData={modelerData||{}} 
+            editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 
+          />
         </div>
         </div>
       }

src/view/Manage/Model/Component/ImportActionHeader.jsx

@@ -46,31 +46,17 @@ const updateOptions = [
 const dataTypeRemark = '描述ETL框架中目标表的数据类型';
 const bindingLoadRemark = '描述ETL框架绑定加载列表，如chain、daily、current等';
 
-export const ImportActionHeaderSubject = new Subject();
-
 const ImportActionHeader = (props) => {
   const { editable, form, modelerData, constraints, templates, onConstraintChange, onTemplateChange, validateReports, onChange, terms, supportedPartitionTypes } = props;
 
   const [ options, setOptions ] = useState([]);
 
   const [ autoTranslate, setAutoTranslate ] = useState(false);
-  const [ maintenanceRecords, setMaintenanceRecords ] = useState(null);
   const [ dataTypeList, setDataTypeList ] = useState(null);
   const [ bindingLoadRangeList, setBindingLoadRangeList ] = useState(null);
   const [isCollapse, setCollapse] = useState(true)
 
   useEffect(() => {
-    const $$header = ImportActionHeaderSubject.subscribe((act) => {
-      if (act?.type === 'refreshMaintenanceRecords') {
-        getMaintenanceRecords();
-      } 
-    })
-    return () => {
-      $$header.unsubscribe()
-    }
-  }, [modelerData])
-
-  useEffect(() => {
     getDataTypeList();
   }, [])
 
@@ -87,30 +73,11 @@ const ImportActionHeader = (props) => {
     setAutoTranslate((modelerData.name||'')==='');
     if (modelerData) {
       form?.setFieldsValue(modelerData);
-
-      if ((modelerData.id||'')!=='' && maintenanceRecords===null) {
-        getMaintenanceRecords();
-      }
     }
     
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modelerData])
 
-  useEffect(() => {
-    if ((maintenanceRecords||[]).length>0) {
-      let maintenanceDescription = '';
-      maintenanceRecords.forEach((record, index) => {
-        if (index !== 0) {
-          maintenanceDescription += '/';
-        }
-        maintenanceDescription += record;
-      })
-  
-      form?.setFieldsValue({ maintenanceRecords: maintenanceDescription });
-    }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [maintenanceRecords, editable])
-
   //分布
   const distributionDescription = useMemo(() => {
     let newDistributionDescription = ''
@@ -194,20 +161,6 @@ const ImportActionHeader = (props) => {
     },
   };
 
-  const getMaintenanceRecords = () => {
-    dispatch({
-      type: 'datamodel.getMaintenanceRecords',
-      payload: {
-        params: {
-          id: modelerData.id
-        }
-      },
-      callback: data => {
-        setMaintenanceRecords(data);
-      }
-    })
-  }
-
   const getDataTypeList = () => {
     dispatch({
       type: 'datamodel.dataTypeList',
@@ -318,14 +271,14 @@ const ImportActionHeader = (props) => {
           >
             <Row gutter={10}>
               <Col xs={24} sm={24} lg={12} xl={8}>                
-                  <Form.Item
-                    label={<ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} />}
-                    name="cnName"
-                    rules={[{ required: true, message: '请输入中文名称!' }]}
-                    style={{ marginBottom }}
-                  >
-                    <InputDebounce />
-                  </Form.Item>
+                <Form.Item
+                  label={<ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} />}
+                  name="cnName"
+                  rules={[{ required: true, message: '请输入中文名称!' }]}
+                  style={{ marginBottom }}
+                >
+                  <InputDebounce />
+                </Form.Item>
               </Col>
               <Col xs={24} sm={24} lg={12} xl={8}>
                 <Form.Item

src/view/Manage/Model/Component/ImportActionManage.jsx

+import React from 'react'
+import { Button, Form, Descriptions, Input, Row, Col } from 'antd'
+import { DownOutlined, UpOutlined } from '@ant-design/icons'
+import { Subject } from 'rxjs';
+
+import { dispatch } from '../../../../model'
+
+export const ImportActionHeaderSubject = new Subject();
+
+const FC = (props) => {
+  const { editable, form, modelerData } = props
+  const [isCollapse, setCollapse] = React.useState(true)
+  const [maintenanceRecords, setMaintenanceRecords] = React.useState()
+
+  React.useEffect(() => {
+    if (modelerData?.id) {
+      getMaintenanceRecords()
+    }
+
+    const $$header = ImportActionHeaderSubject.subscribe((act) => {
+      if (act?.type === 'refreshMaintenanceRecords') {
+        getMaintenanceRecords();
+      } 
+    })
+    return () => {
+      $$header.unsubscribe()
+    }
+  }, [modelerData])
+
+  const maintenanceDescription = React.useMemo(() => {
+    if ((maintenanceRecords??[]).length>0) {
+      let newDescription = ''
+      for (const [index, record] of maintenanceRecords.entries()) {
+        if (index !== 0) {
+          newDescription += '/'
+        }
+        newDescription += record
+      }
+      
+      return newDescription
+    }
+    return ''
+  }, [maintenanceRecords])
+
+  const getMaintenanceRecords = () => {
+    dispatch({
+      type: 'datamodel.getMaintenanceRecords',
+      payload: {
+        params: {
+          id: modelerData?.id
+        }
+      },
+      callback: data => {
+        setMaintenanceRecords(data);
+      }
+    })
+  }
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 6 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 18 },
+    },
+  };
+
+  return (
+    <div className='model-import-action-header'>
+      <div className='model-import-action-manage mb-3' style={{ 
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <h2 className='mr-3' style={{ marginBottom: 0 }}>管理信息</h2>
+        {
+          isCollapse ? <Button type='primary' size='small' onClick={() => {
+            setCollapse(!isCollapse)
+          }}>展开<DownOutlined /></Button> : <Button type='primary' size='small' onClick={() => {
+            setCollapse(!isCollapse)
+          }}>收起<UpOutlined /></Button>
+        }
+      </div>
+      {
+        !isCollapse && <React.Fragment>
+          {
+            editable ? (
+              <Form form={form} {...formItemLayout}>
+                <Row gutter={10}>
+                  <Col xs={24} sm={24} lg={12} xl={8}>                
+                    <Form.Item
+                      label="维护历史"
+                    >
+                      <Input.TextArea rows={3} disabled={true} value={maintenanceDescription} />
+                    </Form.Item>
+                  </Col>
+                </Row> 
+              </Form> 
+            ) : (
+              <Descriptions column={3}>
+                <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }} >维护历史</div>} >
+                  <div style={{ maxHeight: 70, overflow: 'auto' }}>
+                  {
+                    (maintenanceRecords||[]).map((record, index) => {
+                      return <div key={index}>{record||''}</div>;
+                    })
+                  }
+                  </div>
+                </Descriptions.Item> 
+              </Descriptions>          
+            ) 
+          }
+        </React.Fragment>
+      }
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file