增加规则切换

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

 import React, { useState, useEffect, useRef } from 'react';
-import { Alert } from 'antd';
+import { Alert, Select } from 'antd';
 
 import ImportActionHeader from './ImportActionHeader'; 
 import ImportActionTable from './ImportActionTable';
@@ -7,11 +7,14 @@ import ImportActionTable from './ImportActionTable';
 
 import { dispatchLatest, dispatch } from '../../../../model'; 
 
+const { Option } = Select;
+
 const ImportAction = (props) => {
   const { action, hints, onChange, form } = props;
 
   const [ constraints, setConstraints ] = useState([]);
-  const [ modelerData, setModelerData ] = useState({});
+  const [ constraint, setConstraint ] = useState({});
+  const [ modelerData, setModelerData ] = useState(null);
   const [ supportedDatatypes, setSupportedDatatypes ] = useState([]);
 
   const mountRef = useRef();
@@ -26,7 +29,8 @@ const ImportAction = (props) => {
         type: 'datamodel.getAllConstraints',
         callback: data => {
           setConstraints(data||[]);
-          getDraft((data||[]).length>0?data[0]:{});
+          setConstraint((data||[]).length>0?data[0]:{});
+          getDraft((data||[]).length>0?data[0]:{}, hints);
         }
       })
     }
@@ -34,23 +38,45 @@ const ImportAction = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const getDraft = (constraint) => { 
+  const getDraft = (_constraint, _hints) => { 
     dispatchLatest({
       type: 'datamodel.getDraft',
       payload: {
         data: {
           hints,
-          modelerModelingConstraint: constraint
+          modelerModelingConstraint: _constraint
         }   
       },
       callback: data => {
+        if (!modelerData) {
           setModelerData(data||{});
+        } else {
+          //切换规则,更新数据表结构
+          setModelerData({...modelerData, easyDataModelerDataModelAttributes: [...data.easyDataModelerDataModelAttributes] })
+        }
         onChange && onChange(data||{});
         getSupportedDatatypes();
       }
     })
   }
 
+  const onConstraintChange = (value) => {
+    let currentConstraint = null, _hints = [];
+    
+    (constraints||[]).forEach((_constraint, index) => {
+      if (_constraint.id === value) {
+        currentConstraint = _constraint;
+      }
+    });
+
+    (modelerData.easyDataModelerDataModelAttributes||[]).forEach((_attribute, index) => {
+      _hints.push(_attribute.cnName||'');
+    });
+
+    setConstraint(currentConstraint);
+    getDraft(currentConstraint, _hints);
+  }
+
   const getSupportedDatatypes = () => {
     dispatch({
       type: 'datamodel.getSupportedDatatypes',
@@ -70,6 +96,17 @@ const ImportAction = (props) => {
 
   return (
     <>
+      <div className='d-flex mb-3'>
+        <Select value={constraint.id?constraint.id:''} style={{ marginLeft: 'auto' }} onChange={onConstraintChange}>
+        {
+          (constraints||[]).map((constraint, index) => {
+            return (
+              <Option key={index} value={constraint.id}>{ constraint.name||'' }</Option>
+            )
+          })
+        }
+        </Select>
+      </div>  
       <ImportActionHeader 
         form={form}
         editable={action!=='detail'} 
@@ -85,6 +122,7 @@ const ImportAction = (props) => {
       }
       <ImportActionTable 
         modelerData={modelerData||{}}
+        constraint={constraint} 
         supportedDatatypes={supportedDatatypes} 
         onChange={onTableChange} 
         editable={action!=='detail'} />

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

@@ -4,9 +4,21 @@ import { Form, Input, Row, Col } from 'antd';
 const ImportActionHeader = (props) => {
   const { editable, modelerData, form } = props;
 
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 20 },
+    },
+  };
+
   return (
     <Form
       form={form}
+      {...formItemLayout}
       name="basic"
       initialValues={{
         cnName: modelerData.cnName||'',
@@ -19,6 +31,7 @@ const ImportActionHeader = (props) => {
           <Form.Item
             label="中文名称"
             name="cnName"
+            labelAlign="left"
             rules={[{ required: true, message: '请输入中文名称!' }]}
           >
             <Input disabled={!editable} />
@@ -28,6 +41,7 @@ const ImportActionHeader = (props) => {
           <Form.Item
             label="英文名称"
             name="name"
+            labelAlign="left"
             rules={[{ required: true, message: '请输入英文名称!' }]}
           >
             <Input disabled={!editable} />
@@ -39,6 +53,7 @@ const ImportActionHeader = (props) => {
           <Form.Item
             label="描述"
             name="remark"
+            labelAlign="left"
             disabled={!editable}
             rules={[{ required: true, message: '请输入描述!' }]}
           >

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

-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { Table, Input, InputNumber, Form, Typography, Radio, Divider, Button, Popconfirm, Select, Row, Col } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -211,12 +211,17 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
 };
 
 const ImportActionTable = (props) => {
-  const { modelerData, onChange, editable, supportedDatatypes } = props;
+  const { modelerData, onChange, editable, supportedDatatypes, constraint } = props;
   const data = modelerData.easyDataModelerDataModelAttributes||[];
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
   const [suggests, setSuggests] = useState([]);
 
+  //规则改变的时候 数据表为可编辑状态
+  useEffect(() => {
+    setEditingKey('');
+  }, [constraint])
+  
   const isEditing = (record) => record.iid === editingKey;
 
   const onAddClick = () => {