主数据定义

src/model/msd.js

@@ -15,4 +15,32 @@ export function* updateTreeNode(payload) {
 
 export function* deleteTreeNode(payload) {
   return yield call(service.deleteTreeNode, payload);
+}
+
+export function* getTypes() {
+  return yield call(service.getTypes);
+}
+
+export function* getModels(payload) {
+  return yield call(service.getModels, payload);
+}
+
+export function* addModel(payload) {
+  return yield call(service.addModel, payload);
+}
+
+export function* updateModel(payload) {
+  return yield call(service.updateModel, payload);
+}
+
+export function* deleteModels(payload) {
+  return yield call(service.deleteModels, payload);
+}
+
+export function* getColumns(payload) {
+  return yield call(service.getColumns, payload);
+}
+
+export function* saveColumns(payload) {
+  return yield call(service.saveColumns, payload);
 }
\ No newline at end of file

src/service/msd.js

@@ -14,4 +14,32 @@ export function updateTreeNode(payload) {
 
 export function deleteTreeNode(payload) {
   return PostJSON("/metadatarepo/rest/msdDefinition/deleteTreeNode", payload);
+}
+
+export function getTypes() {
+  return GetJSON("/metadatarepo/rest/msdDefinition/getTypes");
+}
+
+export function getModels(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/getModelByNodeId", payload);
+}
+
+export function addModel(payload) {
+  return Post("/metadatarepo/rest/msdDefinition/addModel", payload);
+}
+
+export function updateModel(payload) {
+  return Post("/metadatarepo/rest/msdDefinition/updateModel", payload);
+}
+
+export function deleteModels(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/deleteModel", payload);
+}
+
+export function getColumns(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/getColumnByModelId", payload);
+}
+
+export function saveColumns(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/batchSaveColumn", payload);
 }
\ No newline at end of file

src/view/Manage/DataMaster/Define/Component/DefineTable.jsx

-import { useMemo, useState } from 'react';
-import { Space, Button, Input } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { Space, Button, Input, Pagination, Tooltip } from 'antd';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import ResizeableTable from '../../../ResizeableTable';
 import DebounceInput from '../../../Model/Component/DebounceInput';
 import { UpdateTemplateModal } from './UpdateTemplateModal';
-import { inputWidth } from '../../../../../util';
-import { tableData } from './Mock';
+import { inputWidth, showMessage } from '../../../../../util';
 
 import './DefineTable.less';
 import 'react-contexify/dist/ReactContexify.css';
+import { dispatch } from '../../../../../model';
 
 const InputDebounce = DebounceInput(300)(Input);
 
 const DefineTable = (props) => {
+  const {nodeId} = props;
   const [keyword, setKeyword] = useState('');
   const [checkedKeys, setCheckedKeys] = useState([]);
   const [isTemplateModalVisible, setIsTemplateModalVisible] = useState(false);
   const [currentTemplate, setCurrentTemplate] = useState({});
   const [action, setAction] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [tableData, setTableData] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
+
+  const {pageNum, pageSize} = pagination;
+
+  useEffect(() => {
+    setPagination({...pagination, pageNum: 1});
+  }, [nodeId])
+
+  useEffect(() => {
+    if (!nodeId || nodeId==='') {
+      setTableData([]);
+      setTotal(0);
+    } else {
+      getTemplates();
+    }
+  }, [keyword, pagination])
 
   const columns = useMemo(() => {
     return ([
@@ -47,29 +68,17 @@ const DefineTable = (props) => {
         ellipsis: true,
       },
       {
-        title: '创建人',
-        dataIndex: 'creator',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'createTime',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '修改人',
-        dataIndex: 'modifier',
+        title: '修改时间',
+        dataIndex: 'lastUpdateTime',
         width: 200,
         ellipsis: true,
       },
       {
-        title: '修改时间',
-        dataIndex: 'modifyTime',
+        title: '模版描述',
+        dataIndex: 'comment',
         width: 200,
         ellipsis: true,
-      },
+      }
     ]);
   }, []);
 
@@ -78,22 +87,66 @@ const DefineTable = (props) => {
     id: MENU_ID,
   });
 
+  const getTemplates = () => {
+    setLoading(true);
+    dispatch({
+      type: 'msd.getModels',
+      payload: {
+        params: {
+          nodeId,
+          keyword,
+          pageNum,
+          pageSize
+        }
+      },
+      callback: (data) => {
+        setLoading(false);
+        setTableData(data?.content||[]);
+        setTotal(data?.numberOfElements||0);
+      }, 
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
   const onAddClick = () => {
     setAction('add');
+    setCurrentTemplate(null);
     setIsTemplateModalVisible(true);
   }
 
-  const onItemClick = () => {
+  const onItemClick = (record) => {
     setAction('detail');
+    setCurrentTemplate(record);
     setIsTemplateModalVisible(true);
   }
 
-  const onTemplateModalCancel = () => {
+  const onTemplateModalCancel = (refresh = false) => {
     setIsTemplateModalVisible(false);
+    if (refresh) {
+      getTemplates();
+    }
   }
 
   const onBatchDeleteClick = () => {
-
+    setDeleteLoading(true);
+    dispatch({
+      type: 'msd.deleteModels',
+      payload: {
+        params: {
+          modelIds: (checkedKeys||[]).join(',')
+        }
+      },
+      callback: (data) => {
+        setDeleteLoading(false);
+        showMessage('success', '删除成功');
+        getTemplates();
+      }, 
+      error: () => {
+        setDeleteLoading(false);
+      }
+    });
   }
 
   const onSearchInputChange = (value) => {
@@ -113,6 +166,11 @@ const DefineTable = (props) => {
     }
   }
 
+  const changeCurrent = (page,size) => {
+    setCheckedKeys([]);
+    setPagination({ pageNum: page, pageSize: size });
+  }
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onTableSelectChange,
@@ -126,7 +184,9 @@ const DefineTable = (props) => {
             <Button onClick={onAddClick}>新建</Button>
           </Space>
           <Space>
-            <Button onClick={onBatchDeleteClick}>删除</Button>
+            <Tooltip title={(checkedKeys||[]).length===0?'请先选择模版':''}>
+            <Button onClick={onBatchDeleteClick} disabled={(checkedKeys||[]).length===0} loading={deleteLoading}>删除</Button>
+            </Tooltip>
           </Space>
         </Space>
         <InputDebounce 
@@ -139,7 +199,8 @@ const DefineTable = (props) => {
       </div>
       <div className='data-master-content p-3'>
         <ResizeableTable 
-          rowKey='id'
+          loading={loading}
+          rowKey='_id'
           rowSelection={rowSelection}
           columns={columns}
           dataSource={tableData}
@@ -152,12 +213,27 @@ const DefineTable = (props) => {
             };
           }}
           pagination={false}
-          scroll={{ y: 'calc(100vh - 94px - 37px - 57px - 24px - 32px)' }}
+          scroll={{ y: 'calc(100vh - 94px - 37px - 57px - 24px - 32px - 48px)' }}
+        />
+        <Pagination
+          size="small"
+          className="text-center m-3"
+          showSizeChanger
+          showQuickJumper
+          onChange={changeCurrent}
+          onShowSizeChange={changeCurrent}
+          current={pageNum}
+          pageSize={pageSize}
+          defaultCurrent={1}
+          total={total}
+          showTotal={total => `共 ${total} 条`}
         />
       </div>
 
       <UpdateTemplateModal
         action={action}
+        nodeId={nodeId}
+        template={currentTemplate}
         visible={isTemplateModalVisible}
         onCancel={onTemplateModalCancel}
       />

src/view/Manage/DataMaster/Define/Component/UpdateBasicInfo.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Row, Col, Descriptions } from "antd";
 const { TextArea } = Input;
 
 const UpdateBasicInfo = (props) => {
-  const { form, editable } = props;
+  const {form, editable, template} = props;
 
   const formItemLayout = {
     labelCol: {
@@ -36,15 +36,15 @@ const UpdateBasicInfo = (props) => {
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12}>
-              <Form.Item label='模版描述' name='desc'>
+              <Form.Item label='模版描述' name='comment'>
                 <TextArea row={4} />
               </Form.Item>
             </Col>
           </Row>  
         </Form> : <Descriptions column={2}>
-          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >中文</Descriptions.Item>
-          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>英文</Descriptions.Item>
-          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>模版描述</div>}>描述</Descriptions.Item>
+          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{template?.cnName||''}</Descriptions.Item>
+          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>{template?.name||''}</Descriptions.Item>
+          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>模版描述</div>}>{template?.comment||''}</Descriptions.Item>
         </Descriptions>    
       }
     </div>    

src/view/Manage/DataMaster/Define/Component/UpdateField.jsx

 import React, { useState, useRef, useEffect, useMemo, useCallback, useContext } from "react";
-import { Tooltip, Table, Space, Popover, Input, Button, Form } from "antd";
+import { Tooltip, Table, Space, Popover, Input, Button, Form, Checkbox } from "antd";
 import { QuestionCircleOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useClickAway } from 'ahooks';
 import update from 'immutability-helper';
@@ -7,26 +7,122 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import DebounceInput from "../../../Model/Component/DebounceInput";
-import { templateFileds } from "./Mock";
 import { inputWidth, generateUUID } from "../../../../../util";
-import { EditableCell, DragableBodyRow } from "../../../Model/Component/ImportActionTable";
+import { DragableBodyRow, DatatypeInput } from "../../../Model/Component/ImportActionTable";
 import { dispatch } from "../../../../../model";
 import { EditTemplateContext } from "./UpdateTemplateModal";
+import { getAllFileds } from "../../../../../model/datamodel";
 
 const InputDebounce = DebounceInput(300)(Input);
 
+const FieldTypeComp = (props) => {
+  const {dataType = {}} = props;
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    try {
+      let dataTypeJson = JSON.parse(dataType);
+
+      if ((dataTypeJson?.name==='Char'||dataTypeJson?.name==='Varchar') && dataTypeJson?.parameterValues?.length>0) {
+        setValue(`${dataTypeJson?.name||''}(${(dataTypeJson?.parameterValues[0]?dataTypeJson?.parameterValues[0]:0)})`);      
+      } else if ((dataTypeJson?.name==='Decimal'||dataTypeJson?.name==='Numeric') && dataTypeJson?.parameterValues?.length>1) {
+        setValue(`${dataTypeJson?.name||''}(${(dataTypeJson?.parameterValues[0]?dataTypeJson?.parameterValues[0]:0)},${(dataTypeJson?.parameterValues[1]?dataTypeJson?.parameterValues[1]:0)})`);
+      } else {
+        setValue(dataTypeJson?.name||'');
+      }
+    } catch(error) {
+      setValue('');
+    }
+  }, [dataType])
+
+  return (
+    <span>{value}</span>
+  )
+}
+
+export const EditableCell = ({
+  editing,
+  dataIndex,
+  colTitle,
+  inputType,
+  record,
+  index,
+  datatypes,
+  require,
+  children,
+  ...restProps
+}) => {
+
+  let editingComponent = null;
+  if (editing) {
+    if (dataIndex !== 'dataType') {
+
+      const inputNode = inputType === 'check' ? <Checkbox /> : <InputDebounce />
+
+      editingComponent = (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          valuePropName={(inputType==='check')? 'checked': 'value'}
+          rules={[
+            {
+              required: (require===null)?false:require,
+              message: `请输入${colTitle}!`,
+            },
+          ]}
+        >
+        { inputNode }
+        </Form.Item>
+      );
+    } else {
+
+      editingComponent = (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          valuePropName={'value'}
+          rules={[
+            {
+              required: (require===null)?false:require,
+              message: `请输入${colTitle}!`,
+            },
+          ]}
+        >
+          <DatatypeInput datatypes={datatypes} />
+        </Form.Item>
+      )
+    }
+  }
+
+
+  return (
+    <td {...restProps}>
+      {editing ? (
+        editingComponent
+      ) : (
+        children
+      )}
+    </td>
+  );
+};
+
 const UpdateField = (props) => {
-  const {editable = true} = props;
-  const [data, setData] = useState(templateFileds);
+  const {editable = true, template, visible, onChange} = props;
+  const [data, setData] = useState([]);
   const [keyword, setKeyword] = useState('');
-  const [editingKey, setEditingKey] = useState('');
+  const [editingKey, setEditingKey] = useState(null);
   const [insertIndex, setInsertIndex] = useState(0);
   const [supportedDatatypes, setSupportedDatatypes] = useState([]);
+  const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const tableRef = useRef(null);
   const { attrIsEditingFunction } = useContext(EditTemplateContext);
 
-  const columns = [
+  const cols = [
     {
       title: '序号',
       dataIndex: 'key',
@@ -68,31 +164,18 @@ const UpdateField = (props) => {
     },
     {
       title: '类型',
-      width: (editingKey!=='')?250:150,
-      dataIndex: 'datatype',
+      width: (editingKey!==null)?250:150,
+      dataIndex: 'dataType',
       editable: true,
       ellipsis: true,
       require: true,
       render: (_, record, __) => {
-        if (record?.datatype) {
-
-          if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
-
-            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
-          
-          } else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
-            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
-          }
-
-          return record.datatype.name||'';
-        }
-
-        return '';
+        return <FieldTypeComp dataType={record?.dataType} />;
       }
     },
     {
       title: '业务含义',
-      dataIndex: 'remark',
+      dataIndex: 'comment',
       editable: true,
       ellipsis: true,
       require: true,
@@ -104,49 +187,71 @@ const UpdateField = (props) => {
           </Tooltip>
         )
       }
-    },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      width: 90,
-      fixed: 'right',
-      render: (_, record) => {
-        return (
-          <React.Fragment>
+    }
+  ];
+
+  const actionCol = {
+    title: '操作',
+    dataIndex: 'action',
+    width: 90,
+    fixed: 'right',
+    render: (_, record) => {
+      return (
+        <React.Fragment>
+        {
+          editable && <React.Fragment> 
           {
-            editable && <React.Fragment> 
-            {
-              <React.Fragment>
-                <Button 
-                  className='mr-3' 
-                  size='small'
-                  type='text' 
-                  icon={<PlusOutlined className='default' />} 
-                  onClick={(event) => { 
-                    event.stopPropagation();
-                    insertToFrontItem(record); 
-                  }}
-                />
-
-                <Button 
-                  className='mr-3' 
-                  size='small'
-                  type='text' 
-                  icon={<DeleteOutlined style={{ color: 'red' }} />} 
-                  onClick={(event) => { 
-                    event.stopPropagation();
-                    removeItem(record); 
-                  }}
-                />
-              </React.Fragment>
-            }
-            </React.Fragment> 
+            <React.Fragment>
+              <Button 
+                className='mr-3' 
+                size='small'
+                type='text' 
+                icon={<PlusOutlined className='default' />} 
+                onClick={(event) => { 
+                  event.stopPropagation();
+                  insertToFrontItem(record); 
+                }}
+              />
+
+              <Button 
+                className='mr-3' 
+                size='small'
+                type='text' 
+                icon={<DeleteOutlined style={{ color: 'red' }} />} 
+                onClick={(event) => { 
+                  event.stopPropagation();
+                  removeItem(record); 
+                }}
+              />
+            </React.Fragment>
           }
-          </React.Fragment>
-        )
-      },
+          </React.Fragment> 
+        }
+        </React.Fragment>
+      )
     },
-  ];
+  };
+
+  useEffect(() => {
+    if (visible) {
+      setEditingKey(null);
+      if (!template) {
+        setData([]);
+      } else {
+        getFileds();
+      }
+    }
+  }, [visible, template])
+
+  const columns = useMemo(() => {
+    const newColumns = [...cols];
+
+    if (editable) {
+      newColumns.push(actionCol);
+    }
+
+    return newColumns;
+  }, [editable]); 
 
   useClickAway(() => {
     save();
@@ -157,25 +262,53 @@ const UpdateField = (props) => {
   }, [])
 
   useEffect(() => {
-    attrIsEditingFunction && attrIsEditingFunction(editingKey!=='');
+    attrIsEditingFunction && attrIsEditingFunction(editingKey!=null);
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ editingKey ])
+  }, [editingKey])
 
   const filterData = useMemo(() => {
     return (data||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
   }, [keyword, data])
 
-  const isEditing = (record) => record?.iid === editingKey;
+  const isEditing = (record) => record?.name === editingKey;
 
   const getSupportedDatatypes = () => {
     dispatch({
-      type: 'datamodel.getSupportedDatatypes',
+      type: 'msd.getTypes',
       callback: data => {
         setSupportedDatatypes(data||[]);
       }
     });
   }
 
+  const getFileds = () => {
+    setLoading(true);
+    dispatch({
+      type: 'msd.getColumns',
+      payload: {
+        params: {
+          modelId: template?._id||''
+        }
+      },
+      callback: data => {
+        setLoading(false);
+
+        function compare(val1, val2) {
+          var a = val1.seq;
+          var b = val2.seq;
+          return (a - b);
+        }
+    
+        (data||[]).sort(compare);
+        setData(data||[]);
+        onChange && onChange(data||[]);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
   const onAddClick = (event) => {
     event.stopPropagation();  
 
@@ -183,15 +316,15 @@ const UpdateField = (props) => {
       if (result) {
         setKeyword('');
 
-        const iid = generateUUID();
-        const newData = [...data, { iid }];
+        const newData = [...data, {name: ''}];
         
         setData(newData);
         setInsertIndex(newData.length-1);
+
+        editItem(newData[newData.length-1]);
     
-        editItem(newData[newData.length-1], false);
         setTimeout(() => {
-          document.getElementById(`field-${iid}`)?.scrollIntoView();
+          document.getElementById(`field-`)?.scrollIntoView();
         }, 200)
       }
     })
@@ -203,16 +336,14 @@ const UpdateField = (props) => {
         setKeyword('');
 
         let newData = [...data];
-        const index = newData.findIndex((item) => record.iid === item.iid);
-
-        const iid = generateUUID();
+        const index = newData.findIndex((item) => record.name === item.name);
 
         if (index === 0) {
-          newData = [{ iid }, ...newData];
+          newData = [{name: ''}, ...newData];
           setInsertIndex(0);
           editItem(newData[0], false);
         } else {
-          newData.splice(index, 0, { iid });
+          newData.splice(index, 0, {name: ''});
           setInsertIndex(index);
           editItem(newData[index], false);
         }
@@ -220,7 +351,7 @@ const UpdateField = (props) => {
         setData(newData);
 
         setTimeout(() => {
-          document.getElementById(`field-${iid}`)?.scrollIntoView();
+          document.getElementById(`field-`)?.scrollIntoView();
         }, 200)
       }
     })
@@ -228,20 +359,21 @@ const UpdateField = (props) => {
 
   const removeItemLogic = (record) => {
     const newData = [...data];
-    const index = newData.findIndex((item) => record.iid === item.iid);
+    const index = newData.findIndex((item) => record.name === item.name);
 
     if (index !== -1) {
       newData.splice(index, 1);
     }
 
     setData(newData);
+    onChange && onChange(newData);
   }
 
   const removeItem = (record) => {
-    if (record.iid !== editingKey) {
+    if (record.name !== editingKey) {
       removeItemLogic(record);
     } else {
-      setEditingKey('');
+      setEditingKey(null);
       removeItemLogic(record);
     }
   }
@@ -256,9 +388,16 @@ const UpdateField = (props) => {
 
   const editItemLogic = (record) => {
     form.resetFields();
-    form.setFieldsValue(record);
 
-    setEditingKey(record?.iid);
+    try {
+      let dataTypeJson = JSON.parse(record?.dataType);
+
+      form.setFieldsValue({...record, dataType: dataTypeJson});
+      setEditingKey(record?.name);
+    } catch {
+      form.setFieldsValue({...record, dataType: {}});
+      setEditingKey(record?.name);
+    }
   }
 
   const editItem = (record) => {
@@ -271,22 +410,22 @@ const UpdateField = (props) => {
 
   const save = async() => {
     try {
-      if (editingKey!=='') {
+      if (editingKey !== null) {
         const row = await form.validateFields();
 
-        if ((row.datatype.name||'')==='') {
-          form.setFields([{ name: 'datatype', errors: ['必须选择类型'] }]);
+        if ((row.dataType.name||'')==='') {
+          form.setFields([{ name: 'dataType', errors: ['必须选择类型'] }]);
           return;
         }
 
-        (row.datatype.parameterNames||[]).forEach((parameterName, index) => {
-          if (!row.datatype.parameterValues[index] || row.datatype.parameterValues[index]==='') {
-            row.datatype.parameterValues[index] = 0;
+        (row.dataType.parameterNames||[]).forEach((parameterName, index) => {
+          if (!row.dataType.parameterValues[index] || row.dataType.parameterValues[index]==='') {
+            row.dataType.parameterValues[index] = 0;
           }
         })
 
         const newData = [...data];
-        const index = newData.findIndex((item) => editingKey === item.iid);
+        const index = newData.findIndex((item) => editingKey === item.name);
     
         //判断字段名称是否唯一
         let _index;
@@ -303,9 +442,11 @@ const UpdateField = (props) => {
           return;
         }
 
+        row.dataType = JSON.stringify(row.dataType);
+
         let attribute = {};
         if (index === -1) {
-          attribute = {...row, iid: editingKey};
+          attribute = {...row};
           newData.splice(insertIndex, 0, attribute);
         } else {
           const item = newData[index];
@@ -313,8 +454,9 @@ const UpdateField = (props) => {
           newData.splice(index, 1, attribute);
         }
 
-        setEditingKey('');
+        setEditingKey(null);
         setData(newData);
+        onChange && onChange(newData);
       }
 
       return true;
@@ -327,14 +469,15 @@ const UpdateField = (props) => {
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
       const dragRow = data[dragIndex];
-      setData(
-        update(data, {
-          $splice: [
-            [dragIndex, 1],
-            [hoverIndex, 0, dragRow],
-          ],
-        }),
-      );
+      const newData = update(data, {
+        $splice: [
+          [dragIndex, 1],
+          [hoverIndex, 0, dragRow],
+        ],
+      });
+
+      setData(newData);
+      onChange && onChange(newData);
     },
     [data],
   );
@@ -342,7 +485,7 @@ const UpdateField = (props) => {
   const onTableRow = (record, index) => {
     let rowParams = {
       index,
-      id: `field-${record.iid}`,
+      id: `field-${record.name}`,
     };
 
     if (editable) {
@@ -384,7 +527,7 @@ const UpdateField = (props) => {
     <div>
       <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
         <Space>
-          <h2 style={{ marginBottom: 0 }}>字段信息</h2>
+          <h3 style={{ marginBottom: 0 }}>字段信息</h3>
           { 
             editable && <Popover content='点击行进行编辑,表格可以通过拖拽来排序'>
               <QuestionCircleOutlined className='pointer' /> 
@@ -410,7 +553,8 @@ const UpdateField = (props) => {
         <DndProvider backend={HTML5Backend} >
           <Form form={form} component={false}>
             <Table
-              rowKey='iid'
+              rowKey='_id'
+              loading={loading}
               dataSource={filterData}
               columns={mergedColumns}
               pagination={false}
@@ -418,7 +562,7 @@ const UpdateField = (props) => {
                 body: {
                   cell: EditableCell,
                   //编辑或者搜索状态下不允许拖动
-                  row: (editable&&editingKey===''&&keyword==='')?DragableBodyRow:null,
+                  row: (editable&&editingKey===null&&keyword==='')?DragableBodyRow:null,
                 },
               }}
               onRow={onTableRow}

src/view/Manage/DataMaster/Define/Component/UpdateTemplateModal.jsx

-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Modal, Form, Button } from "antd";
 
 import UpdateBasicInfo from "./UpdateBasicInfo";
 import UpdateField from "./UpdateField";
 import { showMessage } from '../../../../../util';
+import { dispatch } from '../../../../../model';
 import './UpdateTemplateModal.less';
 
 export const EditTemplateContext = React.createContext({
@@ -11,10 +12,19 @@ export const EditTemplateContext = React.createContext({
 });
 
 export const UpdateTemplateModal = (props) => {
-  const { visible, onCancel, action = 'add' } = props;
+  const { visible, onCancel, action = 'add', template, nodeId } = props;
   const [form] = Form.useForm();
+  const [fields, setFields] = useState([]);
+  const [confirmLoading, setConfirmLoading] = useState(false);
   const attrIsEditingRef = useRef(false);
 
+  useEffect(() => {
+    if (visible) {
+      form?.setFieldsValue({name: template?.name||'', cnName: template?.cnName||'', comment: template?.comment||''});
+      setFields([]);
+    }
+  }, [visible])
+
   const title = useMemo(() => {
     if (action === 'add') {
       return '新建模版';
@@ -32,6 +42,10 @@ export const UpdateTemplateModal = (props) => {
     attrIsEditingRef.current = value;
   }
 
+  const onFieldChange = (values) => {
+    setFields(values);
+  }
+
   const save = (e) => {
     e.stopPropagation();
 
@@ -44,8 +58,52 @@ export const UpdateTemplateModal = (props) => {
 
   const saveLogic = async () => {
     try {
-      await form.validateFields();
-      // const row = await form.validateFields();
+      const row = await form.validateFields();
+      setConfirmLoading(true);
+
+      let url = '', newTemplate = {};
+      if (action === 'add') {
+        url = 'msd.addModel';
+        newTemplate = {...row, nodeId: nodeId||''};
+      } else {
+        url = 'msd.updateModel';
+        newTemplate = {...template, ...row}
+      }
+
+      dispatch({
+        type: url,
+        payload: {
+          data: newTemplate
+        },
+        callback: id => {
+
+          (fields||[]).forEach((field, index) => {
+            field.parentId = id;
+            field.seq = index;
+          });
+
+          dispatch({
+            type: 'msd.saveColumns',
+            payload: {
+              params: {
+                modelId: id
+              },
+              data: fields
+            },
+            callback: () => {
+              setConfirmLoading(false);
+              onCancel && onCancel(true);  
+            },
+            error: () => {
+              setConfirmLoading(false);
+            }
+          });
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      });
+
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
     }
@@ -56,27 +114,29 @@ export const UpdateTemplateModal = (props) => {
       attrIsEditingFunction,
     }}>
       <Modal
+        forceRender
         className='update-template-modal'
         width='80%'
         title={title}
         visible={visible}
-        onCancel={onCancel}
+        onCancel={() => {onCancel && onCancel();}}
         onOk={save}
         footer={[
-          <Button key="cancel" onClick={onCancel}>
+          <Button key="cancel" onClick={() => {onCancel && onCancel();}}>
             取消
           </Button>,
           action!=='detail' && <Button
             key="ok"
             type="primary"
+            loading={confirmLoading}
             onClick={save}
           >
             确定
           </Button>,
         ]}
       >
-        <UpdateBasicInfo form={form} editable={action!=='detail'} />
-        <UpdateField editable={action!=='detail'} />
+        <UpdateBasicInfo form={form} editable={action!=='detail'} template={template} />
+        <UpdateField editable={action!=='detail'} template={template} onChange={onFieldChange} visible={visible} />
       </Modal>
     </EditTemplateContext.Provider>
   );

src/view/Manage/DataMaster/Define/index.jsx

@@ -11,6 +11,7 @@ import './index.less';
 const DataMasterDefine = (props) => {
 
   const [collapse, setCollapse] = useState(false);
+  const [nodeId, setNodeId] = useState('');
 
   const classes = useMemo(() => {
     return classNames('data-master', {
@@ -18,6 +19,10 @@ const DataMasterDefine = (props) => {
     }); 
   }, [collapse]);
 
+  const onTreeClick = (value) => {
+    setNodeId(value);
+  }
+
   const onCollapseClick = () => {
     setCollapse(!collapse);
   }
@@ -31,7 +36,7 @@ const DataMasterDefine = (props) => {
         axis='x'
         minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
       >
-        <DefineTree />
+        <DefineTree onClick={onTreeClick} />
       </ResizableBox>
       <div className='left-collapse-wrap'>
         <div className='left-collapse' onClick={onCollapseClick}>
@@ -39,7 +44,7 @@ const DataMasterDefine = (props) => {
         </div>
       </div>
       <div className='right-wrap'>
-        <DefineTable />
+        <DefineTable nodeId={nodeId} />
       </div>
     </div>
   )