调整模型

src/util/index.js

@@ -184,8 +184,8 @@ function highlightSearchContent(content) {
 }
 
 export function highlightSearchContentByTerms(content, terms) {
-  if (content===null || content==='') return '';
-  if ((terms||[]).length===0) return content;
+  if (!content || content==='') return '';
+  if ((terms||[]).length===0 || typeof(content)!=='string') return content;
 
   let processContent = content;
   (terms||[]).forEach(term => {

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

 import React, { useState, useEffect } from 'react';
-import { Select, Spin } from 'antd';
+import { Spin } from 'antd';
 
 import ImportActionHeader from './ImportActionHeader'; 
 import ImportActionTable from './ImportActionTable';
@@ -7,8 +7,6 @@ import ImportActionIndex from './ImportActionIndex';
 
 import { dispatchLatest, dispatch } from '../../../../model'; 
 
-const { Option } = Select;
-
 const ImportAction = (props) => {
   const { action, hints, onChange, form, modelerId, terms } = props;
 
@@ -31,7 +29,8 @@ const ImportAction = (props) => {
         cnName: '',
         name: '',
         remark: '',
-        easyDataModelerModelingTemplate: ''
+        easyDataModelerModelingConstraint: '',
+        easyDataModelerModelingTemplate: '',
       });
     }
 
@@ -75,6 +74,7 @@ const ImportAction = (props) => {
           cnName: data.cnName||'',
           name: data.name||'',
           remark: data.remark||'',
+          easyDataModelerModelingConstraint: data.easyDataModelerModelingConstraint||'',
           easyDataModelerModelingTemplate: data.easyDataModelerModelingTemplate||''
         });
         onChange && onChange(data||{});
@@ -120,6 +120,7 @@ const ImportAction = (props) => {
             cnName: data.cnName||'',
             name: data.name||'',
             remark: data.remark||'',
+            easyDataModelerModelingConstraint: data.easyDataModelerModelingConstraint||'',
             easyDataModelerModelingTemplate: data.easyDataModelerModelingTemplate||''
           });
         }
@@ -143,6 +144,9 @@ const ImportAction = (props) => {
 
     if (!currentConstraint) return;
 
+    form.setFieldsValue({ 
+      easyDataModelerModelingConstraint: currentConstraint
+    });
     const newModelerData = {...modelerData, easyDataModelerModelingConstraint: currentConstraint };
     setModelerData(newModelerData)
     onChange && onChange(newModelerData);
@@ -254,27 +258,15 @@ const ImportAction = (props) => {
   }
 
   const container = (<>
-    {
-      <div className='d-flex mb-5' style={{ alignItems: 'center' }}>
-        <span style={{ marginLeft: 'auto' }}>规范:</span>
-        <Select className='ml-3' value={constraint.name?constraint.name:null} placeholder='请选择规范' style={{ minWidth: 100 }} onChange={onConstraintChange} disabled={ action==='detail' } >
-        {
-          (constraints||[]).map((constraint, index) => {
-            return (
-              <Option key={index} value={constraint.name}>{ constraint.cnName||'' }</Option>
-            )
-          })
-        }
-        </Select>
-      </div> 
-    } 
     <ImportActionHeader 
       form={form}
       editable={action!=='detail'} 
       modelerData={modelerData||{}} 
+      constraints={constraints}
       templates={templates}
       validateReports={validateReports}
       onTemplateChange={onTemplateChange}
+      onConstraintChange={onConstraintChange}
       onChange={onHeaderChange}
       terms={terms}
     /> 
@@ -300,14 +292,9 @@ const ImportAction = (props) => {
   </>);
  
   return (
-    <>
-    {
-      //container包裹在Spin中,会有谷歌浏览器字段排序拖动不能滚动鼠标的问题,所以加载完成后,直接展示container
-      loading ? <Spin spinning={loading}>
+    <Spin spinning={loading}>
       { container }
-      </Spin> : container
-    }
-    </>
+    </Spin>
   );
 };
 

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

@@ -6,6 +6,26 @@ import { dispatch } from '../../../../model';
 
 const { Option } = Select;
 
+const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => {
+
+  return (
+    <Select 
+      onChange={onChange} 
+      value={value.name || ''} 
+      placeholder='请选择规范'
+      {...restProps}
+    >
+    {
+      (constraints||[]) && constraints.map((constraint, index) => {
+        return (
+          <Option key={index} value={constraint.name||''} >{constraint.cnName||''}</Option>
+        );
+      })
+    }
+    </Select>
+  )
+}
+
 const TemplateSelect = ({ value = {}, templates = [], onChange, ...restProps }) => {
 
   return (
@@ -27,7 +47,7 @@ const TemplateSelect = ({ value = {}, templates = [], onChange, ...restProps })
 }
 
 const ImportActionHeader = (props) => {
-  const { editable, form, modelerData, templates, onTemplateChange, validateReports, onChange, terms } = props;
+  const { editable, form, modelerData, constraints, templates, onConstraintChange, onTemplateChange, validateReports, onChange, terms } = props;
 
   const [ causes, setCauses ] = useState([]);
   const [ options, setOptions ] = useState([]);
@@ -56,11 +76,11 @@ const ImportActionHeader = (props) => {
   const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
-      sm: { span: 5 },
+      sm: { span: 6 },
     },
     wrapperCol: {
       xs: { span: 24 },
-      sm: { span: 19 },
+      sm: { span: 18 },
     },
   };
 
@@ -117,7 +137,7 @@ const ImportActionHeader = (props) => {
         onValuesChange={onValuesChange}
       >
         <Row gutter={10}>
-          <Col span={12}>
+          <Col span={8}>
             <Form.Item
               label="中文名称"
               name="cnName"
@@ -127,7 +147,7 @@ const ImportActionHeader = (props) => {
               <Input />
             </Form.Item>
           </Col>
-          <Col span={12}>
+          <Col span={8}>
             <Form.Item
               label="英文名称"
               name="name"
@@ -138,9 +158,33 @@ const ImportActionHeader = (props) => {
               {/* <Input /> */}
             </Form.Item>
           </Col>
+          <Col span={8}>
+            <Form.Item
+              label="描述"
+              name="remark"
+              labelAlign="left"
+              rules={[{ required: true, message: '请输入描述!' }]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
         </Row>
         <Row gutter={10}>
-          <Col span={12}>
+          <Col span={8}>
+            <Form.Item
+              label="规范"
+              name="easyDataModelerModelingConstraint"
+              labelAlign="left"
+              rules={[{ required: true, message: '请选择规范!' }]}
+            >
+              <ConstraintSelect 
+                constraints={constraints} 
+                onChange={onConstraintChange} 
+                style={{ width: 150 }}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
             <Form.Item
               label="数据表类型"
               name="easyDataModelerModelingTemplate"
@@ -154,16 +198,6 @@ const ImportActionHeader = (props) => {
               />
             </Form.Item>
           </Col>
-          <Col span={12}>
-            <Form.Item
-              label="描述"
-              name="remark"
-              labelAlign="left"
-              rules={[{ required: true, message: '请输入描述!' }]}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
         </Row>
       </Form> 
     ) : (
@@ -185,9 +219,9 @@ const ImportActionHeader = (props) => {
           </div>
         }
         </Descriptions.Item>
-
-        <Descriptions.Item label="数据表类型">{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item>
         <Descriptions.Item label="描述">{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
+        <Descriptions.Item label="规范">{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}</Descriptions.Item>
+        <Descriptions.Item label="数据表类型">{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item>
       </Descriptions>
     ) 
   )

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

@@ -652,7 +652,7 @@ const ImportActionIndex = (props) => {
 
   return (
     <div className='model-import-action-index mt-7'>
-      <Divider>
+      <Divider orientation='left'>
         <>
         <span>数据表索引</span>
         { editable && ( 

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

@@ -742,7 +742,7 @@ const ImportActionTable = (props) => {
 
   return (
     <div className='model-import-action-table'>
-      <Divider>
+      <Divider orientation='left'>
         <>
         <span>数据表结构</span>
         { editable && ( 

src/view/Manage/Model/index.jsx

@@ -279,7 +279,7 @@ class Model extends React.Component {
               </div>
               <div className='p-3'>
               {
-                loadingTableData ? <Spin loading={loadingTableData}>
+                loadingTableData ? <Spin spinning={loadingTableData}>
                 { content }
                 </Spin> : content
               }