模型编辑详情

src/util/axios.js

@@ -85,8 +85,9 @@ export const SetSource = function (source) {
 }
 
 const callback = resp => {
+
   if (resp.status === 401) {
-    showMessage('warn', "session过期,请重新登录!");
+    showMessage('warn', 'session过期,请重新登录!');
     //外网
     window.location.href="/center-home/view/login"
     //内网
@@ -94,7 +95,11 @@ const callback = resp => {
     return null;
   }
   else if (resp.status !== 200) {
-    throw resp.data
+    if (resp && resp.data && resp.data.ApiError && resp.data.ApiError.cnMessage) {
+      showMessage('warn', resp.data.ApiError.cnMessage||'');
+    }
+
+    return null;
   }
 
   return resp.data || resp;

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

@@ -10,7 +10,7 @@ import { dispatchLatest, dispatch } from '../../../../model';
 const { Option } = Select;
 
 const ImportAction = (props) => {
-  const { action, hints, onChange, form } = props;
+  const { action, hints, onChange, form, modelerId } = props;
 
   const [ constraints, setConstraints ] = useState([]);
   const [ constraint, setConstraint ] = useState({});
@@ -25,16 +25,23 @@ const ImportAction = (props) => {
     if (mountRef.current) {
       mountRef.current = false;
 
+      if (action === 'detail') {
+        getCurrentDataModel();
+      } else {
         dispatchLatest({
           type: 'datamodel.getAllConstraints',
           callback: data => {
             setConstraints(data||[]);
+            if (action === 'add') {
               setConstraint((data||[]).length>0?data[0]:{});
               getDraft((data||[]).length>0?data[0]:{}, hints);
+            } else if(action === 'edit') {
+              getCurrentDataModel();
+            }
           }
         })
       }
-
+    }
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -60,6 +67,28 @@ const ImportAction = (props) => {
     })
   }
 
+  const getCurrentDataModel = () => {
+    dispatchLatest({
+      type: 'datamodel.getDataModel',
+      payload: {
+        id: modelerId||'' 
+      },
+      callback: data => {
+        setModelerData(data||{});
+        onChange && onChange(data||{});
+        getSupportedDatatypes();
+        
+        if (action === 'edit') {
+          form.setFieldsValue({ 
+            cnName: data.cnName||'',
+            name: data.name||'',
+            remark: data.remark||'',
+          });
+        }
+      }
+    })
+  }
+
   const onConstraintChange = (value) => {
     let currentConstraint = null, _hints = [];
     
@@ -96,8 +125,9 @@ const ImportAction = (props) => {
 
   return (
     <>
-      <div className='d-flex mb-3'>
-        <Select value={constraint.id?constraint.id:''} style={{ marginLeft: 'auto' }} onChange={onConstraintChange}>
+      {
+        action!=='detail' && <div className='d-flex mb-3'>
+          <Select value={constraint.id?constraint.id:null} placeholder='请选择规则' style={{ marginLeft: 'auto', minWidth: 100 }} onChange={onConstraintChange}>
           {
             (constraints||[]).map((constraint, index) => {
               return (
@@ -107,6 +137,7 @@ const ImportAction = (props) => {
           }
           </Select>
         </div> 
+      } 
       <ImportActionHeader 
         form={form}
         editable={action!=='detail'} 

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

 import React from 'react';
-import { Form, Input, Row, Col } from 'antd';
+import { Form, Input, Row, Col, Descriptions } from 'antd';
 
 const ImportActionHeader = (props) => {
-  const { editable, modelerData, form } = props;
+  const { editable, form, modelerData } = props;
 
   const formItemLayout = {
     labelCol: {
@@ -16,15 +16,10 @@ const ImportActionHeader = (props) => {
   };
 
   return (
+    editable ? (
       <Form
         form={form}
         {...formItemLayout}
-      name="basic"
-      initialValues={{
-        cnName: modelerData.cnName||'',
-        name: modelerData.name||'',
-        remark: modelerData.remark||'',
-      }}
       >
         <Row gutter={10}>
           <Col span={12}>
@@ -62,6 +57,13 @@ const ImportActionHeader = (props) => {
           </Col>
         </Row>
       </Form> 
+    ) : (
+      <Descriptions>
+        <Descriptions.Item label="中文名称">{modelerData.cnName||''}</Descriptions.Item>
+        <Descriptions.Item label="英文名称">{modelerData.name||''}</Descriptions.Item>
+        <Descriptions.Item label="描述">{modelerData.remark||''}</Descriptions.Item>
+      </Descriptions>
+    ) 
   )
 }
 

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

@@ -367,6 +367,10 @@ const ImportActionTable = (props) => {
       dataIndex: 'remark',
       editable: true,
     },
+  ];
+
+  const editableColumn = [
+    ...columns,
     {
       title: '操作',
       dataIndex: 'action',
@@ -394,9 +398,11 @@ const ImportActionTable = (props) => {
         );
       },
     },
-  ];
+  ]
 
-  const mergedColumns = columns.map((col) => {
+  const mergedColumns = () => {
+    if (editable) {
+      return editableColumn.map((col) => {
         if (!col.editable) {
           return col;
         }
@@ -413,6 +419,28 @@ const ImportActionTable = (props) => {
           }),
         };
       });
+    }
+
+    return columns;
+  }
+
+  // const mergedColumns = columns.map((col) => {
+  //   if (!col.editable) {
+  //     return col;
+  //   }
+
+  //   return {
+  //     ...col,
+  //     onCell: (record) => ({
+  //       record,
+  //       inputType: 'text',
+  //       dataIndex: col.dataIndex,
+  //       title: col.title,
+  //       editing: isEditing(record),
+  //       datatypes: supportedDatatypes,
+  //     }),
+  //   };
+  // });
 
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
@@ -458,7 +486,7 @@ const ImportActionTable = (props) => {
               }
             }}
             dataSource={data||[]}
-            columns={mergedColumns}
+            columns={mergedColumns()}
             size='small'
             rowKey='iid'
             rowClassName="editable-row"

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

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Modal, Radio, Button, Form } from 'antd';
 
 // import ImportLog from './ImportLog';
@@ -28,7 +28,7 @@ const modes = [
 ]
 
 const ImportModal = (props) => {
-  const { catalogId, visible, onCancel, action } = props;
+  const { catalogId, visible, onCancel, action, modelerId } = props;
   const [ step, setStep ] = useState(0);
   const [ radioValue, setRadioValue ] = useState('');
   const [ excelFiles, setExcelFiles ] = useState([]);
@@ -38,6 +38,18 @@ const ImportModal = (props) => {
 
   const [form] = Form.useForm();
 
+  useEffect(() => {
+
+    if (visible) {
+      if (action === 'add') {
+        setStep(0);
+      } else {
+        setStep(2);
+      }
+    }
+
+  }, [visible, catalogId, action])
+
   const onRadioChange = e => {
     setRadioValue(e.target.value);
   };
@@ -81,6 +93,11 @@ const ImportModal = (props) => {
     setStep(step+1);
   }
 
+  const cancel = () => {
+    reset();
+    onCancel && onCancel(true);
+  }
+
   const save = async () => {
     try {
       const row = await form.validateFields();
@@ -138,6 +155,7 @@ const ImportModal = (props) => {
   }
 
   let title = '';
+  if (action === 'add') {
     if (step === 0) {
       title = '创建方式';
     } else if (step === 1 && radioValue===0) {
@@ -145,20 +163,15 @@ const ImportModal = (props) => {
     } else if (step === 2 && radioValue===0) {
       title = '模型创建-excel导入';
     }
+  } else if (action === 'edit') {
+    title = '模型编辑';
+  } else if (action === 'detail') {
+    title = '模型详情';
+  }
 
-  return (
-    <Modal 
-      visible={visible}
-      title={title}
-      width={1000}
-      maskClosable={false}
-      destroyOnClose
-      onCancel={() => {
-        setStep(0);
-        reset();
-        onCancel && onCancel();
-      }}
-      footer={[ 
+  let footer = null;
+  if (action === 'add') {
+    footer = [ 
       <Button
         key="0" 
         type="primary"
@@ -185,7 +198,50 @@ const ImportModal = (props) => {
       >
       保存
       </Button>
-      ]}
+    ];
+  } else if (action === 'edit') {
+    footer = [
+      <Button
+        key="1" 
+        type="primary"
+        onClick={cancel}
+      >
+      取消
+      </Button>, 
+      <Button
+        key="2" 
+        type="primary"
+        loading={confirmLoading}
+        onClick={save}
+      >
+      保存
+      </Button>
+    ];
+  } else if (action === 'detail') {
+    footer = [
+      <Button
+        key="1" 
+        type="primary"
+        onClick={cancel}
+      >
+      取消
+      </Button>
+    ];
+  }
+
+  return (
+    <Modal 
+      visible={visible}
+      title={title}
+      width={1000}
+      maskClosable={false}
+      destroyOnClose
+      onCancel={() => {
+        setStep(0);
+        reset();
+        onCancel && onCancel();
+      }}
+      footer={footer}
     >
       <>
       {
@@ -220,7 +276,7 @@ const ImportModal = (props) => {
         step===1 && radioValue===4 && <></>
       }
       {
-        step===2 && <ImportAction hints={hints} onChange={onActionChange} action={action} form={form} />
+        step===2 && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} />
       }
       </>
     </Modal>

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

@@ -8,7 +8,7 @@ import './ModelTable.less';
 
 const ModelTable = (props) => {
 
-  const { data, onChange, loading } = props;
+  const { data, onChange, loading, onItemAction } = props;
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
 
   const [modal, contextHolder] = Modal.useModal();
@@ -33,7 +33,7 @@ const ModelTable = (props) => {
         return (
           <Space size='small'>
             <Tooltip placement='bottom' title={'修改'}>
-              <Button icon={<EditOutlined />} size='small' />
+              <Button icon={<EditOutlined />} size='small' onClick={() => { editItem(record); }} />
             </Tooltip>
             <Tooltip placement='bottom' title={'详情'}>
               <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailItem(record); }} />
@@ -50,8 +50,12 @@ const ModelTable = (props) => {
     }
   ];
 
-  const detailItem = (record) => {
+  const editItem = (record) => {
+    onItemAction && onItemAction(record.id||'', 'edit');
+  }
 
+  const detailItem = (record) => {
+    onItemAction && onItemAction(record.id||'', 'detail');
   }
 
   const deleteItem = (record) => {

src/view/Manage/Model/index.jsx

@@ -48,6 +48,10 @@ class Model extends React.Component {
     })
   }
 
+  onTableItemAction = (id, action) => {
+    this.setState({ importModalVisible: true, importModalAction: action, modelerId: id });
+  }
+
   onImportBtnClick = () => {
     const { catalogId } = this.state;
     if (!catalogId || catalogId==='') {
@@ -72,7 +76,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData } = this.state;
+    const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData, modelerId } = this.state;
 
     return (
       <div style={{ backgroundColor: '#ECEEF3', height: '100%' }}>
@@ -96,7 +100,7 @@ class Model extends React.Component {
                 <Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
               </div>
               <div className='p-3'>
-                <ModelTable loading={loadingTableData} data={tableData} onChange={this.onTableChange} />
+                <ModelTable loading={loadingTableData} data={tableData} onChange={this.onTableChange} onItemAction={this.onTableItemAction} />
               </div>
             </div>
           </Col>
@@ -107,6 +111,7 @@ class Model extends React.Component {
           action={importModalAction}
           onCancel={this.onImportModalCancel}
           catalogId={catalogId} 
+          modelerId={modelerId}
         />
 
         <ExportModal