修改目录问题

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

@@ -101,7 +101,7 @@ const ImportAction = (props) => {
         {
           (constraints||[]).map((constraint, index) => {
             return (
-              <Option key={index} value={constraint.id}>{ constraint.name||'' }</Option>
+              <Option key={index} value={constraint.id}>{ constraint.cnName||'' }</Option>
             )
           })
         }

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

@@ -13,7 +13,7 @@ const type = 'DragableTableBodyRow';
 const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
 
   const [ name, setName ] = useState(value.name||'');
-  const [ parameterNames, setParameterNames ] = useState(value.parameterNames||[]);
+  const [ parameterCnNames, setParameterCnNames ] = useState(value.parameterCnNames||[]);
   const [ parameterValues, setParameterValues ] = useState(value.parameterValues||[]);
 
   const onNameChange = (value) => {
@@ -26,12 +26,14 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
       }
     })
 
-    setParameterNames(currentDatatype.parameterNames);
+    setParameterCnNames(currentDatatype.parameterCnNames);
     setParameterValues(currentDatatype.parameterValues);
 
     triggerChange({ 
       name: value,
+      cnName: currentDatatype.cnName,
       parameterNames: currentDatatype.parameterNames,
+      parameterCnNames: currentDatatype.parameterCnNames,
       parameterValues: currentDatatype.parameterValues
     });
   }
@@ -40,7 +42,8 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
 
     const newParameterValues = [...parameterValues];
 
-    newParameterValues[index] = value;
+    //默认为0
+    newParameterValues[index] = value||0;
     setParameterValues(newParameterValues);
     triggerChange({ parameterValues: newParameterValues });
   }
@@ -67,7 +70,7 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
           {
             (datatypes||[]) && datatypes.map((_datatype, index) => {
               return (
-                <Option key={_datatype.name||''}>{_datatype.name||''}</Option>
+                <Option key={_datatype.name||''}>{_datatype.cnName||''}</Option>
               );
             })
           }
@@ -75,11 +78,11 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
         </Col>
       </Row> 
       {
-        (parameterNames||[]).map((parameterName, index) => {
+        (parameterCnNames||[]).map((parameterCnName, index) => {
           return (
             <Row key={index} className='mt-2' align='middle'>
               <Col span={12}>
-                <span>{`${parameterName||''}:`}</span>
+                <span>{`${parameterCnName||''}:`}</span>
               </Col>
               <Col span={12}>
                 <InputNumber 
@@ -268,7 +271,13 @@ const ImportActionTable = (props) => {
   const save = async() => {
     try {
       const row = await form.validateFields();
-      console.log('row', row);
+
+      (row.datatype.parameterNames||[]).forEach((parameterName, index) => {
+        if (!row.datatype.parameterValues[index]) {
+          row.datatype.parameterValues[index] = 0;
+        }
+      })
+      // console.log('row', row);
 
       const newData = [...data];
       const index = newData.findIndex((item) => editingKey === item.iid);
@@ -341,7 +350,16 @@ const ImportActionTable = (props) => {
       dataIndex: 'datatype',
       editable: true,
       render: (datatype, record, index) => {
-        return datatype?(datatype.name||''):'';
+
+        let _text = '';
+        if (datatype) {
+          _text = datatype.cnName||'';
+          (datatype.parameterCnNames||[]).forEach((cnName, index) => {
+            _text += ' ' + cnName + ':' + (datatype.parameterValues[index]?datatype.parameterValues[index]:0);
+          })
+        }
+
+        return _text;
       }
     },
     {

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

@@ -15,6 +15,7 @@ const ModelTree = (props) => {
   const [ item, setItem ] = useState(null);
   const [ visible, setVisible ] = useState(false);
   const [ type, setType ] = useState(null);
+  const [ rootId, setRootId ] = useState('');
 
   const [modal, contextHolder] = Modal.useModal();
 
@@ -48,14 +49,23 @@ const ModelTree = (props) => {
 
         recursion(data.subCatalogs);
         setLoading(false);
-        setTreeData([ data||{} ]);
-        setItem(data);
-        onSelect && onSelect(data.key||'');
+        setTreeData(data.subCatalogs||[]);
+        setRootId(data.id||'');
+        const firstItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
+
+        setItem(firstItem);
+
+        firstItem && onSelect && onSelect(firstItem.key||'');
       }
     })
   }
 
   const onTreeSelect = (keys,data) => {
+
+    if ((keys||[]).length === 0) {
+      return;
+    }
+
     const _item = {...data.selectedNodes[0]||[]};
 
     setItem(_item);
@@ -159,8 +169,7 @@ const ModelTree = (props) => {
       <div
         className='p-3'
       >
-      {
-        loading? <Spin /> : (
+      <Spin spinning={loading} >
         <Tree 
           showLine 
           showIcon={false} 
@@ -168,13 +177,13 @@ const ModelTree = (props) => {
           treeData={treeData} 
           selectedKeys={[item?item.key:'']} 
         />      
-        )
-      } 
+      </Spin>
       </div>
       <UpdateTreeItemModal 
         visible={visible} 
         type={type}
         item={item}
+        rootId={rootId}
         onOk={onUpdateTreeItemModalOk} 
         onCancel={onUpdateTreeItemModalCancel} 
         />

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

-import React, { useState } from 'react';
-import { Modal, Form, Input } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Input, Radio } from 'antd';
 
 import { dispatchLatest } from '../../../../model'; 
 
 class UpdateTreeItemForm extends React.Component {
 
+  constructor(props){
+    super(props);
+    this.state = {
+      radioDisable: false
+    }
+  }
+
+  componentDidMount() {
+    this.radioState();
+  }
+
   componentDidUpdate(preProps, preState) {
-    const { form } = this.props;
-    if (form && form.resetFields) {
-      form.resetFields(['name', 'remark'])
+    const { item } = this.props;
+    if (item!==preProps.item) {
+      this.radioState();
+    }
   }
+
+  radioState = () => {
+    const { item } = this.props;
+    this.setState({ radioDisable: item? false: true })
   }
 
   render() {
-    const { item, type, form } = this.props;
+    const { type, form } = this.props;
+    const { radioDisable } = this.state;
 
     const formItemLayout = {
       labelCol: {
@@ -30,14 +47,15 @@ class UpdateTreeItemForm extends React.Component {
       <Form 
         {...formItemLayout}
         form={form}
-        name="basic"
-        initialValues={
-          type!=='add'?{
-            name: item?item.name:'',
-            remark: item?item.remark:'',
-          }:null
-        }
       >
+        {
+          type==='add'&&<Form.Item label="目录类型" name="action">
+            <Radio.Group disabled={radioDisable} >
+              <Radio value='root'>根目录</Radio>
+              <Radio value='sub'>子目录</Radio>
+            </Radio.Group>
+          </Form.Item>
+        }
         <Form.Item 
           label="名称" 
           name="name"
@@ -59,26 +77,53 @@ class UpdateTreeItemForm extends React.Component {
 
 const UpdateTreeItemModal = (props) => {
 
-  const { onOk, type, item, onCancel, visible } = props;
+  const { onOk, type, item, onCancel, visible, rootId } = props;
   const [ confirmLoading, setConfirmLoading ] = useState(false);
   const [form] = Form.useForm();
 
+  useEffect(() => {
+    if (visible) {
+
+      let _action = '';
+      if (type === 'add') {
+        _action = item ? 'sub' : 'root';
+      }
+
+      if (type === 'add') {
+        form.setFieldsValue({ action: _action, name: '', remark: '' });
+      } else {
+        form.setFieldsValue({ action: '', name: item?item.name:'', remark: item?item.remark:'' });
+      }
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
   const handleOk = async () => {
 
     setConfirmLoading(true);
 
     try {
       const values = await form.validateFields();
+
+      // console.log('value action', values.action);
       let payload = null;
-      if (type === 'add') {
+      if (type === 'add' && values.action==='root') {
         payload = {
-          ...values, 
+          name: values.name||'',
+          remark: values.remark||'', 
+          parentId: rootId
+        };
+      } else if (type === 'add') {
+        payload = {
+          name: values.name||'',
+          remark: values.remark||'', 
           parentId: item.id
         };
       } else {
         payload = {
           ...item,
-          ...values,
+          name: values.name||'',
+          remark: values.remark||'', 
         }
       }
 
@@ -103,11 +148,15 @@ const UpdateTreeItemModal = (props) => {
 
   return (
     <Modal 
+      forceRender
       confirmLoading={confirmLoading}
       visible={visible}
       title={type==='add'?"新增目录":"更新目录"}
       onOk={handleOk}
-      onCancel={onCancel}
+      onCancel={() => {
+        setConfirmLoading(false);
+        onCancel && onCancel();
+      }}
     >
       <UpdateTreeItemForm form={form} item={item} type={type} />
     </Modal>