数据类型编辑

src/service/datamodeler.js

-import { filePost, GetJSON, PostJSON } from "../util/axios"
+import { filePost, GetJSON, PostJSON, Post } from "../util/axios"
 
 export function loadDataModelCatalog() {
   return GetJSON("/datamodeler/easyDataModelerCURD/loadDataModelCatalog");
@@ -38,7 +38,7 @@ export function draft(payload) {
 
 //获取支持的数据类型
 export function getSupportedDatatypes() {
-  return GetJSON("/datamodeler/easyDataModelerDesign/getSupportedDatatypes");
+  return GetJSON("/datamodeler/easyDataModelerCURD/getSupportedDatatypes");
 }
 
 export function suggest(payload) {
@@ -47,7 +47,7 @@ export function suggest(payload) {
 
 //保存模型
 export function saveDataModel(payload) {
-  return PostJSON("/datamodeler/easyDataModelerDesign/saveDataModel", payload);
+  return Post("/datamodeler/easyDataModelerCURD/saveDataModel", payload);
 }
 
 export function deleteDataModel(payload) {

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

@@ -5,13 +5,14 @@ import ImportActionHeader from './ImportActionHeader';
 import ImportActionTable from './ImportActionTable';
 // import ImportActionIndex from './ImportActionIndex';
 
-import { dispatchLatest } from '../../../../model'; 
+import { dispatchLatest, dispatch } from '../../../../model'; 
 
 const ImportAction = (props) => {
-  const { action, hints } = props;
+  const { action, hints, onChange } = props;
 
   const [ constraints, setConstraints ] = useState([]);
   const [ modelerData, setModelerData ] = useState({});
+  const [ supportedDatatypes, setSupportedDatatypes ] = useState([]);
 
   const mountRef = useRef();
   mountRef.current = true;
@@ -44,12 +45,27 @@ const ImportAction = (props) => {
       },
       callback: data => {
         setModelerData(data||{});
+        onChange && onChange(data||{});
+        getSupportedDatatypes();
       }
     })
   }
 
+  const getSupportedDatatypes = () => {
+    dispatch({
+      type: 'datamodel.getSupportedDatatypes',
+      callback: data => {
+        setSupportedDatatypes(data||[]);
+      }
+    });
+  }
+
   const onTableChange = (data) => { 
-    setModelerData({...modelerData, easyDataModelerDataModelAttributes: data});
+
+    const newMedelerData = {...modelerData, easyDataModelerDataModelAttributes: data};
+
+    setModelerData(newMedelerData);
+    onChange && onChange(newMedelerData);
   }
 
   return (
@@ -63,7 +79,11 @@ const ImportAction = (props) => {
           className='mb-3'
         />
       }
-      <ImportActionTable modelerData={modelerData||{}} onChange={onTableChange} editable={action!=='detail'} />
+      <ImportActionTable 
+        modelerData={modelerData||{}} 
+        supportedDatatypes={supportedDatatypes} 
+        onChange={onTableChange} 
+        editable={action!=='detail'} />
       {/* <ImportActionIndex data={indexData} fileds={fileds} onChange={onIndexChange} editable={action!=='detail'} /> */}
     </>
   );

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

 import React, { useState, useCallback, useRef } from 'react';
-import { Table, Input, InputNumber, Form, Typography, Radio, Divider, Button, Checkbox, Popconfirm } from 'antd';
+import { Table, Input, InputNumber, Form, Typography, Radio, Divider, Button, Popconfirm, Select } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 import { generateUUID } from '../../../../util';
 import { dispatchLatest } from '../../../../model'; 
 
+const { Option } = Select;
+
 const type = 'DragableTableBodyRow';
 
+const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
+
+  const [ name, setName ] = useState(value.name||'');
+  const [ parameterNames, setParameterNames ] = useState(value.parameterNames||[]);
+  const [ parameterValues, setParameterValues ] = useState(value.parameterValues||[]);
+
+  const onNameChange = (value) => {
+    setName(value);
+
+    let currentDatatype = {}; 
+    (datatypes||[]).forEach((datatype, index) => {
+      if (value === datatype.name) {
+        currentDatatype = datatype;
+      }
+    })
+
+    setParameterNames(currentDatatype.parameterNames);
+    setParameterValues(currentDatatype.parameterValues);
+
+    triggerChange({ 
+      name: value,
+      parameterNames: currentDatatype.parameterNames,
+      parameterValues: currentDatatype.parameterValues
+    });
+  }
+
+  const onParameterValuesChange = (value, index) => {
+
+    const newParameterValues = [...parameterValues];
+
+    newParameterValues[index] = value;
+    setParameterValues(newParameterValues);
+    triggerChange({ parameterValues: newParameterValues });
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange && onChange({
+      ...value,
+      ...changedValue,
+    });
+  };
+
+  return (
+    <>
+      <span>
+        <Select onChange={onNameChange} value={name}>
+        {
+          (datatypes||[]) && datatypes.map((_datatype, index) => {
+            return (
+              <Option key={_datatype.name||''}>{_datatype.name||''}</Option>
+            );
+          })
+        }
+        </Select>
+        {
+          (parameterNames||[]).map((parameterName, index) => {
+            return (
+              <InputNumber 
+                key={index}
+                onChange={(e) => {
+                  onParameterValuesChange(e.target.value, index);
+                }}  
+                value={parameterValues[index]} />
+            );
+          })
+        }
+      </span>
+    </>
+  )
+}
+
 const EditableCell = ({
   editing,
   dataIndex,
@@ -15,29 +88,57 @@ const EditableCell = ({
   inputType,
   record,
   index,
+  datatypes,
   children,
   ...restProps
 }) => {
-  const inputNode = inputType === 'check' ? <Checkbox /> : ( inputType === 'number' ? <InputNumber /> : <Input /> )
 
-  return (
-    <td {...restProps}>
-      {editing ? (
+  let editingComponent = null;
+  if (editing) {
+    if (dataIndex !== 'datatype') {
+      editingComponent = (
         <Form.Item
           name={dataIndex}
           style={{
             margin: 0,
           }}
-          valuePropName={(inputType==='check')? 'checked': 'value'}
+          valuePropName={'value'}
           rules={[
             {
-              required: (inputType==='check')? false: true,
+              required: true,
               message: `请输入${title}!`,
             },
           ]}
         >
-          {inputNode}
+          <Input />
         </Form.Item>
+      );
+    } else {
+
+      editingComponent = (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          valuePropName={'value'}
+          rules={[
+            {
+              required: true,
+              message: `请输入${title}!`,
+            },
+          ]}
+          >
+            <DatatypeInput datatypes={datatypes} />
+        </Form.Item>
+      )
+    }
+  }
+
+  return (
+    <td {...restProps}>
+      {editing ? (
+        editingComponent
       ) : (
         children
       )}
@@ -93,7 +194,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
 };
 
 const ImportActionTable = (props) => {
-  const { modelerData, onChange, editable } = props;
+  const { modelerData, onChange, editable, supportedDatatypes } = props;
   const data = modelerData.easyDataModelerDataModelAttributes||[];
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
@@ -145,6 +246,7 @@ const ImportActionTable = (props) => {
   const save = async() => {
     try {
       const row = await form.validateFields();
+      console.log('row', row);
 
       const newData = [...data];
       const index = newData.findIndex((item) => editingKey === item.iid);
@@ -267,6 +369,7 @@ const ImportActionTable = (props) => {
         dataIndex: col.dataIndex,
         title: col.title,
         editing: isEditing(record),
+        datatypes: supportedDatatypes,
       }),
     };
   });

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

@@ -35,6 +35,7 @@ class ImportModal extends React.Component {
       radioValue: '',
       excelFiles: [],
       hints: [],
+      modelerData: {},
       confirmLoading: false,
     }
   }
@@ -77,6 +78,39 @@ class ImportModal extends React.Component {
     })
   }
 
+  save = () => {
+    const { catalogId, onCancel } = this.props;
+    const { modelerData } = this.state;
+
+    this.setState({ confirmLoading: true }, () => {
+      dispatchLatest({
+        type: 'datamodel.saveDataModel',
+        payload: { 
+          data: modelerData
+        },
+        callback: mid => {
+          dispatchLatest({
+            type: 'datamodel.bindCatalogDataModel',
+            payload: { 
+              params: {
+                easyDataModelCatalogId: catalogId,
+                easyDataModelerDataModelIds: mid
+              }
+            },
+            callback: () => {
+              this.setState({ confirmLoading: false });
+              onCancel && onCancel();
+            }
+          })
+        }
+      })
+    })
+  }
+
+  onActionChange = (data) => {
+    this.setState({ modelerData: data });
+  }
+
   onImportExcelChange = (files) => {
     this.setState({ excelFiles: files||[] });
   }
@@ -94,9 +128,7 @@ class ImportModal extends React.Component {
         destroyOnClose
         onCancel={() => {
           this.setState({ step: 0 }, () => {
-            if (onCancel) {
-              onCancel();
-            }
+            onCancel && onCancel();
           })
         }}
         footer={[ 
@@ -122,6 +154,7 @@ class ImportModal extends React.Component {
             type="primary"
             loading={confirmLoading}
             style={{ display: (step===2)?'':'none' }}
+            onClick={this.save}
           >
           保存
           </Button>
@@ -160,7 +193,7 @@ class ImportModal extends React.Component {
           step===1 && radioValue===4 && <></>
         }
         {
-          step===2 && <ImportAction hints={hints} />
+          step===2 && <ImportAction hints={hints} onChange={this.onActionChange} />
         }
         </>
       </Modal>

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

@@ -100,7 +100,9 @@ class ModelTree extends React.Component {
     dispatchLatest({
       type: 'datamodel.deleteDataModelCatalog',
       payload: {
+        params: {
           easyDataModelerCatalogId: item.id
+        }
       },
       callback: () => {
         message.success('删除目录成功');

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

@@ -5,6 +5,13 @@ import { dispatchLatest } from '../../../../model';
 
 class UpdateTreeItemForm extends React.Component {
 
+  componentDidUpdate(preProps, preState) {
+    const { form } = this.props;
+    if (form && form.resetFields) {
+      form.resetFields(['name', 'remark'])
+    }
+  }
+
   render() {
     const { item, type, form } = this.props;
 
@@ -99,7 +106,6 @@ const UpdateTreeItemModal = (props) => {
       confirmLoading={confirmLoading}
       visible={visible}
       title={type==='add'?"新增目录":"更新目录"}
-      destroyOnClose
       onOk={handleOk}
       onCancel={onCancel}
     >

src/view/Manage/Model/index.jsx

@@ -15,10 +15,12 @@ class Model extends React.Component {
     this.state = {
       importModalVisible: false,
       exportModalVisible: false,
+      catalogId: '',
     }
   }
 
   onTreeSelect = (key) => {
+    this.setState({ catalogId: key });
     dispatchLatest({
       type: 'datamodel.getCurrentDataModelCatalog',
       payload: {
@@ -47,7 +49,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, exportModalVisible } = this.state;
+    const { importModalVisible, exportModalVisible, catalogId } = this.state;
 
     return (
       <div style={{ backgroundColor: '#fff', height: '100%' }}>
@@ -77,6 +79,7 @@ class Model extends React.Component {
         <ImportModal 
           visible={importModalVisible} 
           onCancel={this.onImportModalCancel}
+          catalogId={catalogId} 
         />
 
         <ExportModal