模型编辑详情

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;
 
-      dispatchLatest({
-        type: 'datamodel.getAllConstraints',
-        callback: data => {
-          setConstraints(data||[]);
-          setConstraint((data||[]).length>0?data[0]:{});
-          getDraft((data||[]).length>0?data[0]:{}, hints);
-        }
-      })
+      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,17 +125,19 @@ 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.cnName||'' }</Option>
-            )
-          })
-        }
-        </Select>
-      </div>  
+      {
+        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 (
+                <Option key={index} value={constraint.id}>{ constraint.cnName||'' }</Option>
+              )
+            })
+          }
+          </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,52 +16,54 @@ const ImportActionHeader = (props) => {
   };
 
   return (
-    <Form
-      form={form}
-      {...formItemLayout}
-      name="basic"
-      initialValues={{
-        cnName: modelerData.cnName||'',
-        name: modelerData.name||'',
-        remark: modelerData.remark||'',
-      }}
-    >
-      <Row gutter={10}>
-        <Col span={12}>
-          <Form.Item
-            label="中文名称"
-            name="cnName"
-            labelAlign="left"
-            rules={[{ required: true, message: '请输入中文名称!' }]}
-          >
-            <Input disabled={!editable} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item
-            label="英文名称"
-            name="name"
-            labelAlign="left"
-            rules={[{ required: true, message: '请输入英文名称!' }]}
-          >
-            <Input disabled={!editable} />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={10}>
-        <Col span={12}>
-          <Form.Item
-            label="描述"
-            name="remark"
-            labelAlign="left"
-            disabled={!editable}
-            rules={[{ required: true, message: '请输入描述!' }]}
-          >
-            <Input disabled={!editable} />
-          </Form.Item>
-        </Col>
-      </Row>
-    </Form>  
+    editable ? (
+      <Form
+        form={form}
+        {...formItemLayout}
+      >
+        <Row gutter={10}>
+          <Col span={12}>
+            <Form.Item
+              label="中文名称"
+              name="cnName"
+              labelAlign="left"
+              rules={[{ required: true, message: '请输入中文名称!' }]}
+            >
+              <Input disabled={!editable} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="英文名称"
+              name="name"
+              labelAlign="left"
+              rules={[{ required: true, message: '请输入英文名称!' }]}
+            >
+              <Input disabled={!editable} />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={10}>
+          <Col span={12}>
+            <Form.Item
+              label="描述"
+              name="remark"
+              labelAlign="left"
+              disabled={!editable}
+              rules={[{ required: true, message: '请输入描述!' }]}
+            >
+              <Input disabled={!editable} />
+            </Form.Item>
+          </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,25 +398,49 @@ const ImportActionTable = (props) => {
         );
       },
     },
-  ];
+  ]
 
-  const mergedColumns = columns.map((col) => {
-    if (!col.editable) {
-      return col;
+  const mergedColumns = () => {
+    if (editable) {
+      return editableColumn.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,
+          }),
+        };
+      });
     }
 
-    return {
-      ...col,
-      onCell: (record) => ({
-        record,
-        inputType: 'text',
-        dataIndex: col.dataIndex,
-        title: col.title,
-        editing: isEditing(record),
-        datatypes: supportedDatatypes,
-      }),
-    };
-  });
+    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,12 +155,78 @@ const ImportModal = (props) => {
   }
 
   let title = '';
-  if (step === 0) {
-    title = '创建方式';
-  } else if (step === 1 && radioValue===0) {
-    title = 'excel导入';
-  } else if (step === 2 && radioValue===0) {
-    title = '模型创建-excel导入';
+  if (action === 'add') {
+    if (step === 0) {
+      title = '创建方式';
+    } else if (step === 1 && radioValue===0) {
+      title = 'excel导入';
+    } else if (step === 2 && radioValue===0) {
+      title = '模型创建-excel导入';
+    }
+  } else if (action === 'edit') {
+    title = '模型编辑';
+  } else if (action === 'detail') {
+    title = '模型详情';
+  }
+
+  let footer = null;
+  if (action === 'add') {
+    footer = [ 
+      <Button
+        key="0" 
+        type="primary"
+        style={{ display: (step!==0)?'':'none' }}
+        onClick={prev}
+      >
+      上一步
+      </Button>,
+      <Button
+        key="1" 
+        type="primary"
+        loading={confirmLoading}
+        style={{ display: (step<2)?'':'none' }}
+        onClick={next}
+      >
+      下一步
+      </Button>, 
+      <Button
+        key="2" 
+        type="primary"
+        loading={confirmLoading}
+        style={{ display: (step===2)?'':'none' }}
+        onClick={save}
+      >
+      保存
+      </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 (
@@ -158,34 +241,7 @@ const ImportModal = (props) => {
         reset();
         onCancel && onCancel();
       }}
-      footer={[ 
-        <Button
-          key="0" 
-          type="primary"
-          style={{ display: (step!==0)?'':'none' }}
-          onClick={prev}
-        >
-        上一步
-        </Button>,
-        <Button
-          key="1" 
-          type="primary"
-          loading={confirmLoading}
-          style={{ display: (step<2)?'':'none' }}
-          onClick={next}
-        >
-        下一步
-        </Button>, 
-        <Button
-          key="2" 
-          type="primary"
-          loading={confirmLoading}
-          style={{ display: (step===2)?'':'none' }}
-          onClick={save}
-        >
-        保存
-        </Button>
-      ]}
+      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 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