服务

package.json

@@ -75,6 +75,6 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://139.198.127.28:17389",
+  "proxy": "http://139.198.126.96:8089",
   "homepage": "http://myhost/data-govern"
 }

src/App.js

@@ -24,6 +24,9 @@ import EditTemplate from './view/Manage/ModelConfig/Component/EditTemplate';
 import AssetTree from './view/Manage/AssetManage/Component/AssetTree';
 import Asset1104Manage from './view/Manage/Asset1104Manage';
 import AssetTask from './view/Manage/AssetTask';
+import DataService from './view/Manage/Model';
+import DataServiceDetail from './view/Manage/Pdata/Component/ServiceDetail';
+import GrantedDataServiceList from './view/Manage/Pdata/Component/GrantedList';
 
 import { AssetMountReference } from './util/constant';
 
@@ -131,6 +134,57 @@ export class App extends React.Component {
       );
     }
 
+    if (message === 'showDataService' || message === 'showDataServiceManage') {
+      return (
+        <AppContext.Provider value={{
+          env: hostParams?.env,
+          user: hostParams?.user,
+          openAdmit: hostParams?.openAdmit,
+          openDetail: hostParams?.openDetail,
+          editServer: hostParams?.editServer,
+          applyServer: hostParams?.applyServer,
+          setGlobalState,
+          onGlobalStateChange
+        }}>
+          <DataService 
+            isOnlyEnding={message==='showDataServiceManage'} 
+            location={this.props.location}
+          />
+        </AppContext.Provider>
+      );
+    }
+
+    if (message === 'showDataServiceDetail') {
+      return (
+        <AppContext.Provider value={{
+          setGlobalState,
+          onGlobalStateChange
+        }}>
+          <DataServiceDetail
+            id={id} 
+            terms={terms}
+          />
+        </AppContext.Provider>
+      );
+    }
+
+    if (message === 'showGrantedDataService') {
+      return (
+        <AppContext.Provider value={{
+          env: hostParams?.env,
+          user: hostParams?.user,
+          openAdmit: hostParams?.openAdmit,
+          openDetail: hostParams?.openDetail,
+          editServer: hostParams?.editServer,
+          applyServer: hostParams?.applyServer,
+          setGlobalState,
+          onGlobalStateChange
+        }}>
+          <GrantedDataServiceList/>
+        </AppContext.Provider>
+      );
+    }
+
     return (
       <AppContext.Provider value={{
         env: hostParams?.env,
@@ -170,6 +224,7 @@ export class App extends React.Component {
             <Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact /> 
             <Route path={'/center-home/menu/asset-task'} component={AssetTask} exact /> 
             <Route path={'/center-home/menu/asset-1104-manage'} component={Asset1104Manage} exact /> 
+            <Route path={'/center-home/menu/data-service'} component={DataService} exact />
             <Route path={'/center-home/data-model-action'} component={EditModel} exact />
             <Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
             <Route path={'/center-home/session/asset-detail'} component={AssetDetailPage} exact />

src/model/index.js

@@ -10,8 +10,9 @@ import * as map from './map';
 import * as datamodel from './datamodel';
 import * as assetmanage from './assetmanage';
 import * as tag from './tag';
+import * as pds from './pds';
 
-const funcs = Connect({ user, datamodel, map, assetmanage, datasource, tag })
+const funcs = Connect({ user, datamodel, map, assetmanage, datasource, tag, pds })
 
 function* request(args) {
   const { type, payload, callback, error } = args.args;

src/model/pds.js

+import * as pds from '../service/pds';
+import { call } from 'redux-saga/effects';
+
+export function* refreshCatalog(payload) {
+  return yield call(pds.refreshCatalog, payload);
+}
+
+export function* loadDataServiceCatalog() {
+  return yield call(pds.loadDataServiceCatalog)
+}
+
+export function* loadStateCatalog(payload) {
+  return yield call(pds.loadStateCatalog, payload);
+}
+
+export function* saveCatalog(payload) {
+  return yield call(pds.saveCatalog, payload);
+}
+
+export function* deleteCatalog(payload) {
+  return yield call(pds.deleteCatalog, payload);
+}
+
+export function* upDownCatalog(payload) {
+  return yield call(pds.upDownCatalog, payload);
+}
+
+export function* getServices(payload) {
+  return yield call(pds.getServices, payload);
+}
+
+export function* getGrantedServices(payload) {
+  return yield call(pds.getGrantedServices, payload)
+}
+
+export function* getStateServices(payload) {
+  return yield call(pds.getStateServices, payload)
+}
+
+export function* searchService(payload) {
+  return yield call(pds.searchService, payload)
+}
+
+export function* getDataService(payload) {
+  return yield call(pds.getDataService, payload)
+}
+
+export function* deleteService(payload) {
+  return yield call(pds.deleteService, payload);
+}
+
+export function* recatalogService(payload) {
+  return yield call(pds.recatalogService, payload);
+}
+
+export function* nextState(payload) {
+  return yield call(pds.nextState, payload);
+}
+
+export function* checkoutService(payload) {
+  return yield call(pds.checkoutService, payload);
+}
+
+export function* getCheckoutService(payload) {
+  return yield call(pds.getCheckoutService, payload)
+}
+
+export function* getServiceDigest(payload) {
+  return yield call(pds.getServiceDigest, payload)
+}
+
+export function* getVersions(payload) {
+  return yield call(pds.getVersions, payload)
+}
+
+export function* getDataServiceLocation(payload) {
+  return yield call(pds.getDataServiceLocation, payload)
+}
+
+export function* getSample(payload) {
+  return yield call(pds.getSample, payload)
+}
+
+export function* enableOData(payload) {
+  return yield call(pds.enableOData, payload)
+}
+
+export function* disableOData(payload) {
+  return yield call(pds.disableOData, payload)
+}
+
+export function* authorize(payload) {
+  return yield call(pds.authorize, payload)
+}
+
+export function* release(payload) {
+  return yield call(pds.release, payload)
+}
+
+export function* offline(payload) {
+  return yield call(pds.offline, payload);
+}
+
+export function* getSmartBiUrl(payload) {
+  return yield call(pds.getSmartBiUrl, payload)
+}
+
+export function* getOwners() {
+  return yield call(pds.getOwners)
+}
+
+export function* getDepartments() {
+  return yield call(pds.getDepartments)
+}
+
+export function* saveOwner(payload) {
+  return yield call(pds.saveOwner, payload)
+}
+
+export function* changeOwner(payload) {
+  return yield call(pds.changeOwner, payload)
+}
\ No newline at end of file

src/routes.js

@@ -16,6 +16,10 @@ export const routes = [
         text: '数据源管理',
       },
       {
+        name: 'data-service',
+        text: '服务管理',
+      },
+      {
         name: 'data-model',
         text: '模型设计',
       },

src/service/pds.js

+import { PostFile, GetJSON, PostJSON, Post, Get } from "../util/axios"
+
+export function refreshCatalog() {
+  return GetJSON("/pdataservice/pdsCURD/refreshDataServiceCatalog")
+}
+
+export function loadDataServiceCatalog() {
+  return GetJSON("/pdataservice/pdsCURD/loadDataServiceCatalog");
+}
+
+export function loadStateCatalog(payload) {
+  return GetJSON("/pdataservice/pdsCURD/loadDataServiceStateCatalog", payload)
+}
+
+export function saveCatalog(payload) {
+  return PostJSON("/pdataservice/pdsCURD/saveDataServiceCatalog", payload)
+}
+
+export function deleteCatalog(payload) {
+  return PostJSON("/pdataservice/pdsCURD/deleteDataServiceCatalog", payload)
+}
+
+export function upDownCatalog(payload) {
+  return GetJSON("/pdataservice/pdsCURD/upDownDataServiceCatalog", payload)
+}
+
+export function getServices(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getCurrentDataServiceCatalog", payload)
+}
+
+export function getGrantedServices(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getGrantedDataService", payload)
+}
+
+export function getStateServices(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getCurrentDataServiceStateCatalog", payload)
+}
+
+export function searchService(payload) {
+  return GetJSON("/pdataservice/pdsCURD/searchPDSDataServicesByNaming", payload)
+}
+
+export function getDataService(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getDataService", payload)
+}
+
+export function deleteService(payload) {
+  return PostJSON("/pdataservice/pdsCURD/deleteDataService", payload);
+}
+
+export function recatalogService(payload) {
+  return Post("/pdataservice/pdsCURD/recatalogDataService", payload);
+}
+
+export function nextState(payload) {
+  return GetJSON("/pdataservice/pdsCURD/nextState", payload);
+}
+
+export function checkoutService(payload) {
+  return PostJSON("/pdataservice/pdsCURD/checkOutDataService", payload)
+}
+
+export function getCheckoutService(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getCheckoutDataService", payload)
+}
+
+export function getServiceDigest(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getDataServiceDigest", payload)
+}
+
+export function getVersions(payload) {
+  return PostJSON("/pdataservice/pdsCURD/getVersions", payload)
+}
+
+export function getDataServiceLocation(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getDataServiceLocation", payload)
+}
+
+export function getSample(payload) {
+  return PostJSON("/pdataservice/pdsCURD/getSample", payload)
+}
+
+export function enableOData(payload) {
+  return Post("/pdataservice/pdsOData/enableOData", payload)
+}
+
+export function disableOData(payload) {
+  return Post("/pdataservice/pdsOData/disableOData", payload)
+}
+
+export function authorize(payload) {
+  return PostJSON("/pdataservice/pdsWorkflow/kickoffAuthorize", payload)
+}
+
+export function release(payload) {
+  return PostJSON("/pdataservice/pdsWorkflow/kickoffRelease", payload)
+}
+
+export function offline(payload) {
+  return PostJSON("/pdataservice/pdsWorkflow/kickoffOffline", payload)
+}
+
+export function getSmartBiUrl(payload) {
+  return Get(`/${payload.url}`);
+}
+
+export function getOwners() {
+  return GetJSON("/informationmanagement/userData/findAll")
+}
+
+export function getDepartments() {
+  return GetJSON("/informationmanagement/userData/getAllDepartment")
+}
+
+export function saveOwner(payload) {
+  return GetJSON("/informationmanagement/userData/getUserDataAndInsert", payload);
+}
+
+export function changeOwner(payload) {
+  return PostJSON("/pdataservice/pdsCURD/changeOwnerOfDataService", payload)
+}
\ No newline at end of file

src/util/constant.js

@@ -18,6 +18,11 @@ export const StateId = 'sid';
 export const VersionId = 'vid';
 export const TemplateId = 'tid';
 export const Holder = 'holder';
+export const ReadOnly = 'readOnly';
+
+export const DataModelerRoleAdmin = 'admin';
+export const DataModelerRoleUser = 'user';
+export const DataModelerRoleReader = 'reader';
 
 //资产
 export const AssetManageReference = 'asset-manage';

src/util/index.js

@@ -6,6 +6,7 @@ import { Subject } from 'rxjs';
 
 import { dispatchLatest, action } from '../model';
 import { set_sess_state } from "../model/reducer";
+import { DataModelerRoleAdmin, DataModelerRoleUser, DataModelerRoleReader } from './constant';
 
 //内网深交所环境 isSzseEnv true
 //元曜公网环境 isSzseEnv false
@@ -382,4 +383,17 @@ export function getTextWidth(text, font='14px tabular-nums') {
   context.font = font;
   const metrics = context.measureText(text);
   return metrics.width;
+}
+
+export function getDataModelerRole(user) {
+  if ((user?.roles||[]).indexOf('ROLE_dataService_admin') !== -1) {
+    return DataModelerRoleAdmin;
+  } 
+  // else if ((user?.roles||[]).indexOf('ROLE_dataModeler_user') !== -1) {
+  //   return DataModelerRoleUser;
+  // } else if ((user?.roles||[]).indexOf('ROLE_dataModeler_reader') !== -1) {
+  //   return DataModelerRoleReader;
+  // }
+  
+  return '';
 }
\ No newline at end of file

src/view/Manage/Pdata/Component/CatalogModal.jsx

+import React, { useState } from "react";
+import { Modal } from "antd";
+
+import ModelTree from './ModelTree';
+import { showMessage } from '../../../../util';
+
+const CatalogModal = (props) => {
+  
+  const { onCancel, visible } = props;
+  const [ catalogId, setCatalogId ] = useState('');
+
+  const onSelect = (value) => {
+    setCatalogId(value);
+  }
+
+  const onOk = () => {
+    if ((catalogId||'') === '') {
+      showMessage('warn', '请先选择模型目录');
+      return;
+    }
+    
+    onCancel && onCancel(catalogId);
+  }
+
+  const reset = () => {
+    setCatalogId('');
+  }
+
+  return(
+    <Modal
+        title='选择目录'
+        visible={ visible }
+        width={ 400 }
+        onCancel={()=>{ 
+          reset();
+          onCancel && onCancel()
+        }}
+        onOk={ onOk }
+      >
+      {
+        visible && <ModelTree
+          refrence='recatalog'
+          onSelect={onSelect} 
+        />
+      } 
+      </Modal>
+  )
+}
+
+export default CatalogModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/ColSettingModal.jsx

+import { useState, useEffect } from 'react';
+import { Modal, Button, Switch, Row, Col, Checkbox, Typography } from 'antd';
+
+import { dispatch } from '../../../../model';
+
+const cols = [
+  {title: '模型名称', require: true},
+  {title: '中文名称'},
+  {title: '路径'},
+  {title: '状态'},
+  {title: '创建人'},
+  {title: '版本号'},
+  {title: '模型描述'},
+];
+
+const ColSettingModal = (props) => {
+  const {visible, onCancel} = props;
+
+  const [checkedKeys, setCheckedKeys] = useState([]);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+
+  useEffect(() => {
+
+    if (visible) {
+      getPreference();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
+  const getPreference = () => {
+    dispatch({
+      type: 'datamodel.getPreference',
+      callback: data => {
+        if ((data.cols||'') === '') {
+          onCheckAllChange(true);
+        } else {
+          setCheckedKeys(data.cols.split(','));
+        }
+      }
+    })
+  }
+
+  const onCheckAllChange = (checked) => {
+    const newCheckedKeys = [];
+
+    if (checked) {
+      cols.forEach(col => {
+        newCheckedKeys.push(col.title);
+      });
+    } else {
+      cols.forEach(col => {
+        if (col.require) {
+          newCheckedKeys.push(col.title);
+        }
+      });
+    }
+
+    setCheckedKeys(newCheckedKeys);
+  }
+
+  const onCheckChange = (e) => {
+    if (e.target.checked) {
+      setCheckedKeys([...checkedKeys, e.target.value]);
+    } else {
+      const index = checkedKeys.findIndex(key => key === e.target.value);
+      const newCheckedKeys = [...checkedKeys];
+      newCheckedKeys.splice(index, 1)
+      setCheckedKeys(newCheckedKeys);
+    }
+  }
+
+  const onModalCancel = () => {
+    onCancel && onCancel();
+  }
+
+  const onModalOk = () => {
+    setConfirmLoading(true);
+    dispatch({
+      type: 'datamodel.savePreference',
+      payload: { 
+        data: {
+          cols: checkedKeys.join(',')
+        }
+      },
+      callback: () => {
+        setConfirmLoading(false);
+        onCancel && onCancel(true);
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  return (
+    <Modal
+      title='可见列设置'
+      visible={visible}
+      onCancel={onModalCancel}
+      footer={[ 
+        <Button
+          key="0" 
+          onClick={onModalCancel}
+        >
+        取消
+        </Button>,
+        <Button
+          key="1" 
+          type="primary"
+          onClick={onModalOk}
+          loading={confirmLoading}
+        >
+        确定
+        </Button>,
+      ]}
+    >
+      <div className='d-flex'>
+        <Switch 
+          checkedChildren="全不选" 
+          unCheckedChildren="全选" 
+          onChange={onCheckAllChange}
+          style={{ marginLeft: 'auto' }}
+        />
+      </div>
+      <div className='mt-3' style={{ maxHeight: 450, overflow: 'auto' }}>
+        <Row>
+        {
+          cols.map((col, index) => {
+            return (
+              <Col className='mb-3' key={index} md={6}>
+                <div className='d-flex'>
+                  <Checkbox checked={ checkedKeys.indexOf(col.title||'')!==-1 } value={col.title} onChange={onCheckChange} disabled={col.require} >
+                  </Checkbox>
+                  <Typography.Paragraph className='ml-1' title={col.title} ellipsis>
+                  {col.title}
+                  </Typography.Paragraph>
+                </div>
+              </Col>
+            )
+          })
+        }
+        </Row>
+      </div>
+    </Modal>
+  )
+}
+
+export default ColSettingModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/ContextManage.jsx

+import React from 'react';
+
+export const EditModelContext = React.createContext({
+  attrIsEditingFunction: null,
+  indexIsEditingFunction: null,
+});
\ No newline at end of file

src/view/Manage/Pdata/Component/DebounceInput.jsx

+import React from "react";
+import _ from "lodash";
+
+/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */
+export default (triggerMs = 0) => {
+  return ReactElement => {
+    class DebounceInput extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {};
+        this.state.value = props.value;
+      }
+
+      componentDidUpdate(preProps, preState) {
+        if (preProps.value !== this.props.value) {
+          this.setState({ value: this.props.value });
+        }
+      }
+
+      onChange = (() => {
+        let updb = this.props.onChange;
+        if (triggerMs >= 0) {
+          updb = _.debounce(value => {
+            this.props.onChange(value);
+          }, triggerMs);
+        }
+        return updb;
+      })();
+
+      handleOnChange = event => {
+        const {
+          target: { value }
+        } = event;
+        this.setState({ value });
+        return this.onChange(value);
+      };
+
+      render() {
+        const theProps = {
+          ...this.props,
+          ...this.state
+        };
+        theProps.onChange = this.handleOnChange;
+        return <ReactElement {...theProps} />;
+      }
+    }
+
+    return DebounceInput;
+  };
+};

src/view/Manage/Pdata/Component/EditModel.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import { Form, Button, Space, Tooltip } from 'antd';
+import LocalStorage from 'local-storage';
+import { useMount, useUnmount } from 'ahooks';
+
+import ImportAction from './ImportAction';
+import CatalogModal from './CatalogModal';
+import { dispatchLatest } from '../../../../model'; 
+import { getQueryParam, showMessage, showNotifaction } from '../../../../util';
+import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, VersionId, Holder, DDL, ReadOnly } from '../../../../util/constant';
+import HistoryAndVersionDrawer from './HistoryAndVersionDrawer';
+import { EditModelContext } from './ContextManage';
+
+import './EditModel.less';
+
+const EditModel = (props) => {
+
+  const [ actionData, setActionData ] = useState({ action: '', catalogId: '', modelerId: '', hints: [],  roughModelerData: null, permitCheckOut: false, editable: false, stateId: '', versionId: '', ddl: '', readOnly: false });
+
+  const [ modelerData, setModelerData ] = useState({});
+  const [ terms, setTerms ] = useState([]);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+  const [ catalogModalVisible, setCatalogModalVisible ] = useState(false);
+  const [ historyAndVersionDrawerVisible, setHistoryAndVersionDrawerVisible ] = useState(false);
+  const [ autoTabKey, setAutoTabKey ] = useState(null);
+
+  const actionRef = useRef('');
+  const attrIsEditingRef = useRef(false);
+  const indexIsEditingRef = useRef(false);
+
+  const { action, catalogId, modelerId, hints, roughModelerData, permitCheckOut, editable, stateId, versionId, holder, ddl, readOnly } = actionData;
+
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    const _action = getQueryParam(Action, props.location.search);
+    const _catalogId = getQueryParam(CatalogId, props.location.search);
+    const _modelerId = getQueryParam(ModelerId, props.location.search);
+    const _hintsStr = getQueryParam(Hints, props.location.search);
+    const _modelerDataStr = getQueryParam(ModelerData, props.location.search)
+    const _permitCheckOut = getQueryParam(PermitCheckOut, props.location.search);
+    const _editable = getQueryParam(Editable, props.location.search);
+    const _stateId = getQueryParam(StateId, props.location.search);
+    const _versionId = getQueryParam(VersionId, props.location.search);
+    const _holder = getQueryParam(Holder, props.location.search);
+    const _ddl = getQueryParam(DDL, props.location.search);
+    const _readOnly = getQueryParam(ReadOnly, props.location.search);
+
+    let _hints = [];
+    if ((_hintsStr||'') !== '') {
+      _hints = _hintsStr.split(',');
+    }
+
+    let _roughModelerData = null;
+    if ((_modelerDataStr||'') !== '') {
+      _roughModelerData = JSON.parse(_modelerDataStr);
+
+      judgeAttributeRepeat(_roughModelerData.easyDataModelerDataModelAttributes);
+    } 
+
+    setActionData({ action: _action, catalogId: _catalogId, modelerId: _modelerId, hints: _hints, roughModelerData: _roughModelerData, permitCheckOut: (_permitCheckOut==='true'), editable: (_editable==='true'), stateId: _stateId, versionId: _versionId, holder: _holder, ddl: _ddl, readOnly: _readOnly });
+    actionRef.current = _action;
+
+    const interval = setInterval(() => {
+      heartbeat();
+    }, 10*60*1000);
+
+    return () => {
+      clearInterval(interval);
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useMount(() => {
+    window?.addEventListener('beforeunload', confirmQuit);
+  })
+
+  useUnmount(() => {
+    window?.removeEventListener('beforeunload', confirmQuit);
+  })
+
+  const heartbeat = () => {
+    dispatchLatest({
+      type: 'datamodel.heartbeat'
+    });
+  }
+
+  const confirmQuit = (e) => {
+    if (actionRef.current==='edit' || actionRef.current==='add') {
+      e.returnValue = '';
+    }
+  }
+
+  const judgeAttributeRepeat = (attrs) => {
+    const names = [], nameCountMap = {}, terms = [];
+
+    var repeat = false;
+    (attrs||[]).forEach(item => {
+      names.push(item.name||'');
+
+      if (nameCountMap[item.name]) {
+        nameCountMap[item.name]++;
+      } else {
+        nameCountMap[item.name] = 1;
+      }
+    })
+
+    Object.keys(nameCountMap).forEach(key => {
+      if (nameCountMap[key] > 1) {
+        repeat = true;
+        terms.push(key);
+      }
+    })
+
+    if (repeat) {
+      setAutoTabKey('2');
+      setTerms(terms);
+    }
+  }
+
+  const save = (e) => {
+    e.stopPropagation();
+
+    if (attrIsEditingRef.current) {
+      showMessage("warn", '还有字段正在编辑，需先保存该字段!');
+    } else if (indexIsEditingRef.current) {
+      showMessage("warn", '还有索引正在编辑，需先保存该索引!');
+    } else {
+      saveLogic();
+    }
+  }
+
+  const saveLogic = async (e, cid = '') => {
+
+    setAutoTabKey(null);
+
+    try {
+      const row = await form.validateFields();
+
+      const newModelerData = {...modelerData, ...row};
+
+      if (newModelerData.easyDataModelerModelingTemplate==='' || newModelerData.easyDataModelerModelingTemplate==={}) {
+        newModelerData.easyDataModelerModelingTemplate = null;
+      } 
+
+      if (newModelerData.partition && ( !newModelerData.partition.partitionType || newModelerData.partition.partitionType==={} || (newModelerData.partition.keys||[]).length===0 )) {
+        newModelerData.partition = null;
+      }
+
+      if (action==='add' && (cid||'')==='' && ((catalogId||'')==='')) {
+        setCatalogModalVisible(true);
+        return ;
+      }
+
+      setConfirmLoading(true);
+      dispatchLatest({
+        type: 'datamodel.saveDataModel',
+        payload: { 
+          data: newModelerData
+        },
+        callback: data => {
+          if (action === 'add') {
+            dispatchLatest({
+              type: 'datamodel.bindCatalogDataModel',
+              payload: { 
+                params: {
+                  easyDataModelCatalogId: ((cid||'')!=='')?cid:catalogId,
+                  easyDataModelerDataModelIds: data.id||''
+                }
+              },
+              callback: message => {
+                setConfirmLoading(false);
+                setTerms([]);
+
+                if ((message||'')!=='' && (message||'')!=='ok') {
+                  showNotifaction('提示', message, 5);
+                } else {
+                  showMessage("success", '新增模型成功');
+                }
+
+                setActionData({ ...actionData, ...{ action: 'detail', modelerId: data.id||'', editable: data?.editable||false, stateId: data?.state?.id||'' } });
+                actionRef.current = 'detail';
+
+                LocalStorage.set('modelId', data.id||'');
+                LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
+              },
+              error: () => {
+                setConfirmLoading(false);
+              }
+            })
+          } else {
+            setConfirmLoading(false);
+            setTerms([]);
+
+            showMessage("success", '保存模型成功');
+
+            const _action = getQueryParam(Action, props.location.search);
+            
+            setActionData({ ...actionData, ...{ action: (_action==='flow')?'flow':'detail', modelerId: data.id||'', stateId: data?.state?.id||'', permitCheckOut: data?.permitCheckOut||false, editable: data?.editable||false } });
+            actionRef.current = (_action==='flow')?'flow':'detail';
+
+            LocalStorage.set('modelId', data.id||'');
+            LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
+          }
+        },
+        error: (err) => {
+          setConfirmLoading(false);
+          setTerms([err.ApiError?.message||'']);
+        }
+      })
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+      setAutoTabKey('1');
+    }
+
+  }
+
+  const edit = () => {
+    setActionData({ ...actionData, action: 'edit' });
+    actionRef.current = 'edit';
+  }
+
+  const cancelEdit = () => {
+    const _action = getQueryParam(Action, props.location.search);
+
+    setActionData({ ...actionData, action: (_action==='flow')?'flow':'detail' });
+    actionRef.current = (_action==='flow')?'flow':'detail';
+  }
+
+  const onActionChange = (data) => {
+    setModelerData(data);
+
+    const _action = getQueryParam(Action, props.location.search);
+    if (_action === 'flow' || (permitCheckOut&&data?.permitCheckOut===false)) {
+      setActionData({ ...actionData, ...{modelerId: data?.id, editable: data?.editable||false, stateId: data?.state?.id||'', permitCheckOut: data?.permitCheckOut||false}  });
+    }
+  }
+
+  const onCatalogModalCancel = (id = null) => {
+    setCatalogModalVisible(false);
+
+    if ((id||'') !== '') {
+      saveLogic(null, id);
+    }
+  }
+
+  const onHistory = () => {
+    setHistoryAndVersionDrawerVisible(true);
+  }
+
+  const onHistoryAndVersionDrawerCancel = () => {
+    setHistoryAndVersionDrawerVisible(false);
+  }
+
+  const attrIsEditingFunction = (value) => {
+    attrIsEditingRef.current = value;
+  }
+
+  const indexIsEditingFunction = (value) => {
+    indexIsEditingRef.current = value;
+  }
+
+  let title = '';
+  if (action === 'add') {
+    title = '新增模型';
+  } else if (action === 'edit') {
+    title = '模型编辑';
+  } else if (action === 'detail' || action === 'flow') {
+    title = '模型详情';
+  } else if (action === 'detail-version') {
+    title = '模型版本详情';
+  }
+
+  let actionsBtn = null;
+
+  if (action==='add') {
+    actionsBtn = (
+      <Space>
+        <Button 
+          type='primary' 
+          onClick={save}
+          loading={confirmLoading}
+          danger
+        >
+        保存
+        </Button>
+      </Space>
+    )
+  } else if (action === 'detail') {
+
+    let editTip = '';
+    if (!editable && stateId !== '4') {
+      if (stateId === '2') {
+        editTip = '待发布的模型不允许编辑';
+      }
+    }
+
+    if (!permitCheckOut && stateId === '4') {
+      editTip = `${holder||''}正在编辑中, 不允许再编辑`;
+    }
+
+    actionsBtn = (
+      <Space>
+        <Button type='primary' onClick={onHistory} danger >版本历史</Button>
+        {
+          (readOnly!=='true') && <Tooltip title={editTip}>
+            <Button type='primary' onClick={edit} disabled={(stateId==='4')?!permitCheckOut:!editable} danger >
+              编辑
+            </Button>
+          </Tooltip>
+        }
+      </Space>
+    );
+  } else if (action === 'edit') {
+    actionsBtn = (
+      <Space>
+        <Button onClick={cancelEdit} >
+        取消
+        </Button>
+        <Button type='primary' onClick={onHistory} danger >
+          版本历史
+        </Button>
+        <Button 
+          type='primary' 
+          onClick={save}
+          loading={confirmLoading}
+          danger
+        >
+        保存
+        </Button>
+      </Space>
+    )
+  } else if (action === 'flow') {
+    actionsBtn = (
+      <Space>
+        <Button type='primary' onClick={onHistory} danger>
+        版本历史
+        </Button>
+        {
+          editable && <Button type='primary' onClick={edit} danger >
+          编辑
+          </Button>
+        }
+      </Space>
+    );
+  }
+
+  return (
+    <EditModelContext.Provider value={{
+      attrIsEditingFunction,
+      indexIsEditingFunction,
+    }}>
+      <div className='edit-model position-relative'>
+        <div className='edit-header'>
+          <span style={{ fontSize: 16, fontWeight: 'bold', color: '#fff' }}>{title}</span>
+        </div>
+        <div className='edit-container'>
+          <div className='edit-container-card'>
+            <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} ddl={ddl} form={form} terms={terms} roughModelerData={roughModelerData} permitCheckOut={permitCheckOut} stateId={stateId} versionId={versionId} autoTabKey={autoTabKey} {...props} /> 
+          </div>
+        </div>
+        <div className='edit-footer'>
+        {actionsBtn}  
+        </div>
+        <CatalogModal
+          visible={catalogModalVisible}
+          onCancel={onCatalogModalCancel}
+        />
+        <HistoryAndVersionDrawer
+          id={modelerId}
+          visible={historyAndVersionDrawerVisible}
+          onCancel={onHistoryAndVersionDrawerCancel}
+        />
+      </div>
+    </EditModelContext.Provider>
+  );
+} 
+
+export default EditModel;
\ No newline at end of file

src/view/Manage/Pdata/Component/EditModel.less

+.edit-model {
+  .edit-header {
+    display: flex;
+    width: 100%;
+    height: 44px; 
+    padding: 0 15px;
+    background-color: #464d6e;
+    align-items: center;
+    position: fixed; 
+    justify-content: space-between; 
+    border-bottom: 1px solid #EFEFEF;
+    z-index: 100;
+  }
+
+  .edit-container {
+    top: 44px;
+    width: 100%;
+    height: calc(100vh - 44px - 64px);
+    overflow: auto;
+    background: #EDF0F5;
+    padding: 10px 20px;
+    position: absolute;
+  }
+
+  .edit-container-card {
+    padding: 20px;
+    background: #fff;
+  }
+
+  .edit-footer {
+    display: flex;
+    bottom: 0; 
+    width: 100%; 
+    height: 64px; 
+    position: fixed; 
+    justify-content: flex-end;
+    opacity: 0.9;
+    background: #fff;
+    box-shadow: 0 -1px 4px 0 #e5e9ea;
+    padding: 0 20px;
+  }
+}
\ No newline at end of file

src/view/Manage/Pdata/Component/ExchangeOwner.jsx

+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Form, Descriptions, Space, Spin } from 'antd';
+
+import { dispatch } from '../../../../model';
+import SelectUsers from './SelectUsers';
+import './ExchangeOwner.less';
+
+const FC = ({ visible, id, onCancel }) => {
+  const [service, setService] = useState(undefined);
+  const [loading, setLoading] = useState(false);
+  const [owners, setOwners] = useState(undefined);
+  const [currentOwner, setCurrentOwner] = useState(undefined);
+
+  useEffect(() => {
+    if (visible) {
+      getService();
+      getOwners();
+    }
+  }, [visible, id])
+
+  const getService = () => {
+    setLoading(true);
+    dispatch({
+      type: 'pds.getDataService',
+      payload: {
+        id
+      },
+      callback: (data) => {
+        setLoading(false);
+        setService(data);
+        setCurrentOwner(data?.editor);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const getOwners = () => {
+    dispatch({
+      type: 'pds.getOwners',
+      callback: (data) => {
+        setOwners(data);
+      },
+      error: () => {
+      }
+    })
+  } 
+
+  const onOwnerChange = (value) => {
+    setCurrentOwner(value);
+    if (value) {
+      dispatch({
+        type: 'pds.saveOwner',
+        payload: {
+          jobNumber: value
+        }
+      })
+    }
+  }
+
+  const cancel = () => {
+    reset();
+    onCancel?.();
+  }
+
+  const onOk = () => {
+    setLoading(true);
+    dispatch({
+      type: 'pds.changeOwner',
+      payload: {
+        params: {
+          id,
+          ownerName: currentOwner
+        }
+      },
+      callback: () => {
+        setLoading(false);
+        onCancel?.(true);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const reset = () => {
+    setService(undefined);
+    setLoading(false);
+  }
+
+  const footer = [ 
+    <Button
+      key="0" 
+      onClick={cancel}
+    >
+    取消
+    </Button>,
+    <Button
+      key="1" 
+      type="primary"
+      onClick={onOk}
+    >
+    确定
+    </Button>,
+  ];
+
+  return (
+    <Modal 
+      className='exchange-owner'
+      forceRender
+      visible={visible}
+      title='更换管理人'
+      width={800}
+      onCancel={cancel}
+      footer={footer}
+    >
+      <Spin spinning={loading}>
+        <Descriptions title={<Space>
+          <div style={{ height: 18, width: 3, background: 'rgb(2, 105, 172)' }}></div>
+          <div>基本信息</div>
+        </Space>}>
+          <Descriptions.Item label="数据服务名称">{service?.name}</Descriptions.Item>
+          <Descriptions.Item label="数据服务技术名称">{service?.cnName}</Descriptions.Item>
+          <Descriptions.Item label="数据服务描述">{service?.remark}</Descriptions.Item>
+        </Descriptions>
+        <Descriptions title={<Space>
+          <div style={{ height: 18, width: 3, background: 'rgb(2, 105, 172)' }}></div>
+          <div>提供方信息</div>
+        </Space>} />
+        <Space>
+          <div>管理人:</div>
+          <div style={{ width: 200 }}>
+            <SelectUsers type='edit' users={owners} value={currentOwner} onChange={onOwnerChange} />
+          </div>
+        </Space>
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC;
\ No newline at end of file

src/view/Manage/Pdata/Component/ExchangeOwner.less

+.exchange-owner {
+  .yy-descriptions-header {
+    margin-bottom: 5px;
+  }
+}
\ No newline at end of file

src/view/Manage/Pdata/Component/ExpandedModelTable.jsx

+import React, { useState, useEffect } from "react";
+import { Tooltip, Table, Typography } from 'antd';
+import classnames from 'classnames';
+import { Resizable } from 'react-resizable';
+import ResizeObserver from 'rc-resize-observer';
+
+import { dispatch } from '../../../../model'; 
+import { isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
+import { DataModelerRoleReader } from '../../../../util/constant';
+
+// import Tag from "../../Tag";
+
+import './ModelTable.less';
+
+const { Text } = Typography;
+const { Column } = Table;
+
+const ModelNameColumn = (props) => {
+  const { text, record, detailItem } = props;
+  const [ data, setData ] = useState(record);
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+      ellipsis: true,
+    },
+    {
+      title: '字段中文名称',
+      width: 160,
+      dataIndex: 'cnName',
+      editable: true,
+      ellipsis: true,
+    },
+    {
+      title: '字段英文名称',
+      width: 160,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+    },
+  ];
+
+  let _textComponent = <span style={{ color: '#000' }}>{text}</span>;
+  if (data.digest) {
+    _textComponent = <div style={{ width: 500, maxHeight: 300, overflow: 'auto' }}>
+      <Table 
+        rowKey='name'
+        dataSource={data.digest.attributeDigests||[]}
+        columns={cols}
+        loading={false}
+        pagination={false}
+        size='small'
+        rowClassName={(record, index) => {
+          if (record?.primaryKey) {
+            return 'primary-row';
+          }
+
+          return '';
+        }}
+      />
+    </div>;
+  }
+
+  return (
+    <Tooltip 
+      title={_textComponent}
+      overlayClassName='tooltip-common'
+      onVisibleChange={(visible) => {
+        if (visible && !record.digest) {
+          dispatch({
+            type: 'datamodel.getDataModelDigest',
+            payload: {
+              id: record.id
+            },
+            callback: _data => {
+              record.digest = _data;
+              setData({...record});
+            }
+          })
+        }
+      }}
+    >
+        <a onClick={()=>{detailItem(record);}}>
+      {text||''}
+      </a>
+    </Tooltip>
+  );
+}
+
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
+const ExpandedModelTable = (props) => {
+
+  const { onItemAction, onExpandedSelect, onExpandedChange, id = null, pid = null, checked, dataMap, onContextMenu, user, visibleColNames } = props;
+  
+  const [ tableWidth, setTableWidth ] = useState(0);
+  const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
+  const [ data, setData ] = useState([]);
+
+  const [ columns, setColumns ] = useState([]);
+  
+  const cols = [
+    {
+      title: '模型名称',
+      dataIndex: 'name',
+      width: isSzseEnv?360:160,
+      ellipsis: true,
+      render: (text, record, index) => {
+        return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
+      }
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: isSzseEnv?420:160,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <Text ellipsis={true}>{text||''}</Text>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '路径',
+      dataIndex: 'path',
+      width: 120,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <Text ellipsis={true}>{text||''}</Text>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      width: 100,
+      ellipsis: true,
+      render: (_, record) => {
+
+        let color = '';
+        if (record?.state?.id === '1') {
+          color = '#DE7777';
+        } else if (record?.state?.id === '2') {
+          color = '#779BDE';
+        } else if (record?.state?.id === '4') {
+          color = '#77DEBF';
+        }
+
+        return (
+          <span>
+            <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: color  }}></span>
+            <span>{record?.state?.cnName||''}</span>
+          </span>
+        );
+      }
+    },
+    {
+      title: '管理人',
+      dataIndex: 'editor',
+      width: 100,
+      ellipsis: true,
+    },
+    {
+      title: '版本号',
+      dataIndex: 'modifiedTs',
+      width: 170,
+      ellipsis: true,
+      render: (_,record) => {
+        return `V_${formatDate(record.modifiedTs)}`;
+      }
+    },
+    // {
+    //   title: '标签',
+    //   dataIndex: 'tag',
+    //   width: 200,
+    //   onCell: (record) => ({ 
+    //     onMouseEnter: event => {
+    //       setMouseEnterKey(record.id);
+    //     }, 
+    //     onMouseLeave: event => {
+    //       setMouseEnterKey(null);
+    //     },
+    //   }),
+    //   render: (_,record) => {
+    //     return (
+    //       record.id===mouseEnterKey?<Tag styleType='complex' id={record.id} />:<Tag id={record.id} />
+    //     );
+    //   }
+    // },
+    {
+      title: '模型描述',
+      dataIndex: 'remark',
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''} overlayClassName='tooltip-common'>
+            <Text ellipsis={true}>{text||''}</Text>
+          </Tooltip>
+        );
+      }
+    },
+  ];
+
+  useEffect(() => {
+    setSelectedRowKeys(checked?[id]:[]);
+    if (dataMap.has(id)) {
+      setData([dataMap.get(id)]);
+    } else {
+      getCheckoutDataModel();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if (tableWidth>0) {
+      let newColumns = [...cols];
+
+      if ((visibleColNames||[]).length > 0) {
+        newColumns = newColumns.filter(col => visibleColNames.indexOf(col.title)!==-1);
+      }
+
+      newColumns.forEach((column, index) => {
+        if (!column.width) {
+          const rowWidth = (newColumns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
+          
+          if (tableWidth - rowWidth > 200) {
+            column.width = tableWidth-rowWidth;        
+          } else {
+            newColumns.width = 200;
+          }
+        }
+      });
+
+      setColumns([ ...newColumns, <Column key='auto' />]);
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ tableWidth, visibleColNames ])
+
+  const getCheckoutDataModel = () => {
+    dispatch({
+      type: 'datamodel.getCheckoutDataModel',
+      payload: {
+        id: pid
+      },
+      callback: data => {
+        setData(data?[data]:[]);
+        onExpandedChange && onExpandedChange(id, data);
+      }
+    })
+  }
+
+  const detailItem = (record) => {
+    onItemAction && onItemAction(record, 'detail', getDataModelerRole(user)===DataModelerRoleReader);
+  }
+  const onExpandedSelectChange = keys => {
+    setSelectedRowKeys(keys);
+    onExpandedSelect && onExpandedSelect(keys, data[0].id);
+  };
+
+  const handleResize = index => (e, { size }) => {
+    let nextColumns = [...columns];
+    
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onExpandedSelectChange,
+    hideSelectAll: true,
+  };
+
+  const mergedColumns = () => {
+    let newColumns = [...columns];
+
+    return (
+      newColumns.map((col, index) => ({
+        ...col,
+        onHeaderCell: column => ({
+          width: column.width,
+          onResize: handleResize(index),
+        }),
+      }))
+    );
+  }
+
+  const classes = classnames('model-table', {
+    'model-table-sub': id
+  });  
+
+  return (
+    <div className={classes}>
+      <ResizeObserver
+        onResize={({ width }) => {
+          setTableWidth(width);
+        }}
+      >
+        <Table
+          rowSelection={rowSelection} 
+          components={{
+            header: {
+              cell: ResizeableHeaderCell,
+            }
+          }}
+          columns={mergedColumns()}
+          rowKey={'id'}
+          dataSource={data||[]}
+          pagination={false}
+          size='small'
+          onRow={(record, index) => {
+            return {
+              onContextMenu: event => {
+                onContextMenu && onContextMenu(event, record);
+              },
+            }
+          }}
+        />
+      </ResizeObserver>
+    </div>
+  );
+}
+
+export default ExpandedModelTable;
\ No newline at end of file

src/view/Manage/Pdata/Component/ExportDDLModal.jsx

+import React from 'react';
+import { Modal, Button, Select, Input } from 'antd';
+
+import { showMessage } from '../../../../util';
+import { dispatch } from '../../../../model';
+
+const { Option } = Select;
+
+class ExportDDLModal extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      loadingDDLGenerators: false,
+      ddlGenerators: [],
+      selectDDLGeneratorName: null,
+      selectModalerNameKey: 0,
+      confirmLoading: false,
+      ddlExportSuccess: false,
+      ddlExportStrings: [],
+      ddlExportString: '',
+      loadingDatabases: false,
+      databases: [],
+      filterDatabases: [],
+      currentDatabaseId: '',
+      loadingSchemas: false,
+      schemas: [],
+      currentSchemaId: ''
+    }
+  }
+
+  componentDidMount() {
+
+    this.init();
+  }
+
+  componentDidUpdate(preProps, preState) {
+    const { visible } = this.props;
+    if (visible!==preProps.visible && visible) {
+      this.init();
+    } 
+  }
+
+  init = () => {
+    const { reference = 'exportDDL' } = this.props;
+
+    if (reference === 'exportDDL') {
+      this.getDDLGenerators();
+    } else if (reference === 'createTable') {
+      this.getDDLGeneratorsThenGetAllDatasource();
+    }
+  }
+
+  getDDLGeneratorsThenGetAllDatasource = () => {
+    this.getDDLGenerators(true);
+  }
+
+  getDDLGenerators = (needDB = false) => {
+    this.setState({ loadingDDLGenerators: true }, () => {
+      dispatch({
+        type: 'datamodel.ddlGenerators',
+        callback: data => {
+          this.setState({ ddlGenerators: data, loadingDDLGenerators: false, selectDDLGeneratorName: (data||[]).length>0?data[0].name:'' }, () => {
+            if (needDB) {
+              this.getDatabases();
+            }
+          });
+        }, 
+        error: () => {
+          this.setState({ loadingDDLGenerators: false });
+        }
+      });
+    })
+  }
+
+  getDatabases = () => {
+    const { env } = this.props;
+    const { selectDDLGeneratorName } = this.state;
+
+    console.log('env', env);
+
+    this.setState({ loadingDatabases: true }, () => {
+      dispatch({
+        type: 'datamodel.getDatasourcesByEnv',
+        payload: {
+          catalog: env?.value,
+          model: 'Catalog,Database'
+        },
+        callback: data => {
+
+          let _filterData = [];
+  
+          if (selectDDLGeneratorName === 'Greenplum') {
+            _filterData = data.filter(item => item.databaseType==='PostgreSQL');
+          } else if (selectDDLGeneratorName === 'MySQL') {
+            _filterData = data.filter(item => item.databaseType==='MySQL');
+          }
+
+          this.setState({ loadingDatabases: false, databases: data, filterDatabases: _filterData, currentDatabaseId: ((_filterData||[]).length>0)?_filterData[0]._id:'' }, () => {
+            if ((_filterData||[]).length>0) {
+              this.getSchemas(_filterData[0]?._id);
+            } else {
+              this.setState({ schemas: [], currentSchemaId: '' });
+            }
+          });
+        }, 
+        error: () => {
+          this.setState({ loadingDatabases: false });
+        }
+      });
+    })
+  }
+
+  getSchemas = (dbId) => {
+    this.setState({ loadingSchemas: true }, () => {
+      dispatch({
+        type: 'datamodel.getSchemasByDatasourceId',
+        payload: {
+          parentId: dbId||''
+        },
+        callback: data => {
+          this.setState({ loadingSchemas: false, schemas: data, currentSchemaId: (data||[]).length>0?data[0]._id:'' });
+        }, 
+        error: () => {
+          this.setState({ loadingSchemas: false });
+        }
+      });
+    })
+  }
+
+  generatorDDLStrings = () => {
+    const { ids, reference } = this.props;
+    const { ddlGenerators, loadingDDLGenerators, selectDDLGeneratorName, currentSchemaId } = this.state;
+
+    if (loadingDDLGenerators) {
+      showMessage('info', '正在加载ddl支持的数据库类型');
+      return;
+    }
+
+    if ((ddlGenerators||[]).length===0) {
+      showMessage('info', 'ddl支持的数据库类型没有查找到,重新查找中');
+      this.getDDLGenerators();
+      return;
+    }
+
+    if (!selectDDLGeneratorName || selectDDLGeneratorName==='') {
+      showMessage('info', '请选择ddl支持的数据库类型');
+      return;
+    }
+
+    if (reference==='createTable' && (currentSchemaId||'')==='') {
+      showMessage('info', '请选择Schema');
+      return;
+    }
+
+    this.setState({ confirmLoading: true }, () => {
+      dispatch({
+        type: 'datamodel.exportDDLString',
+        payload: {
+          ids: ids.join(','),
+          ddlGeneratorName: selectDDLGeneratorName
+        },
+        callback: data => {
+          this.setState({ confirmLoading: false }, () => {
+            this.setState({ ddlExportSuccess: true, ddlExportStrings: data||[], selectModalerNameKey: 0, ddlExportString: data[0]||'' });
+          });
+        }, 
+        error: () => {
+          this.setState({ confirmLoading: false });
+        }
+      });
+    })
+
+  }
+
+  createTable = () => {
+    const { onCancel } = this.props;
+    const { databases, schemas, currentDatabaseId, currentSchemaId, ddlExportStrings, selectDDLGeneratorName } = this.state;
+    
+    let _currentDatabase = {}, _currentSchema = {};
+
+    (databases||[]).forEach(item => {
+      if (item._id === currentDatabaseId) {
+        _currentDatabase = item;
+      }
+    });
+
+    (schemas||[]).forEach(item => {
+      if (item._id === currentSchemaId) {
+        _currentSchema = item;
+      }
+    });
+
+    let namespace = '', scope = '', dbType = '';
+    if ((_currentSchema?.namePathList||[]).length>0) {
+      namespace = _currentSchema.namePathList[0];
+    }
+    if ((_currentSchema?.sysList||[]).length>0) {
+      scope = _currentSchema.sysList[0];
+    }
+
+    if (selectDDLGeneratorName === 'Greenplum') {
+      dbType = 'PGTarget';
+    } else if (selectDDLGeneratorName === 'MySQL') {
+      dbType = 'MysqlTarget';
+    }
+
+    this.setState({ confirmLoading: true }, () => {
+      dispatch({
+        type: 'datamodel.autoCreateTable',
+        payload: {
+          params: {
+            namespace,
+            scope,
+            dataSourceName: _currentDatabase?.name,
+            schema: _currentSchema?.name,
+            dbType,
+          },
+          data: ddlExportStrings
+        },
+        callback: () => {
+          this.setState({ confirmLoading: false });
+          this.reset();
+          onCancel && onCancel();
+        }, 
+        error: () => {
+          this.setState({ confirmLoading: false });
+        }
+      });
+    })
+
+  }
+
+  reset = () => {
+    this.setState({ ddlExportSuccess: false, ddlExportStrings: [] });
+  }
+
+  onModalerNameChange = (value) => {
+    const { ddlExportStrings } = this.state;
+    this.setState({ selectModalerNameKey: value, ddlExportString: ddlExportStrings[value]||'' });
+  }
+
+  onDDLGeneratorChange = (value) => {
+    this.setState({ selectDDLGeneratorName: value||'' }, () => {
+      this.getDatabases();
+    });
+  }
+
+  onDatabaseChange = (value) => {
+    this.setState({ currentDatabaseId: value||'' }, () => {
+      this.getSchemas(value);
+    });
+  }
+
+  onSchemaChange = (value) => {
+    this.setState({ currentSchemaId: value||'' });
+  }
+
+  onDDLStringChange = (e) => {
+    const { reference = 'exportDDL' } = this.props;
+    const { ddlExportStrings, selectModalerNameKey } = this.state;
+
+    if (reference === 'createTable') {
+      const _newDDLExportStrings = [...ddlExportStrings];
+      _newDDLExportStrings[selectModalerNameKey] = e.target.value;
+
+      this.setState({ ddlExportString: e.target.value||'', ddlExportStrings: _newDDLExportStrings });
+    }
+  }
+
+  render() {
+    const { visible, onCancel, names, ids, reference } = this.props;
+    const { ddlGenerators, loadingDDLGenerators, confirmLoading, selectDDLGeneratorName, ddlExportSuccess, ddlExportString, selectModalerNameKey, loadingDatabases, loadingSchemas, schemas, currentDatabaseId, currentSchemaId, filterDatabases } = this.state;
+
+    let title = '';
+    if (reference === 'exportDDL') {
+      title = ddlExportSuccess ? 'DDL导出详情' : 'DDL导出';
+    } else if (reference === 'createTable') {
+      title = ddlExportSuccess ? '模型自动建表详情' : '模型自动建表';
+    }
+
+    let footer = null;
+    if (reference === 'exportDDL') {
+      footer = ddlExportSuccess ? ([
+        <Button
+          key="0" 
+          onClick={() => {
+            this.reset();
+            onCancel && onCancel();
+          }}
+        >
+        取消
+        </Button>,
+        <Button
+          key="1" 
+          type="primary"
+          onClick={() => {
+            window.open(`/api/datamodeler/easyDataModelerExport/ddlStringAsFile?ids=${ids.join(',')}&ddlGeneratorName=${selectDDLGeneratorName}`);
+            this.reset();
+            onCancel && onCancel();
+          }}
+        >
+        导出到文件
+        </Button>
+      ]) : ([
+        <Button
+          key="0" 
+          onClick={() => {
+            this.reset();
+            onCancel && onCancel();
+          }}
+        >
+        取消
+        </Button>,
+        <Button
+          key="1" 
+          type="primary"
+          onClick={this.generatorDDLStrings}
+        >
+        预览
+        </Button>
+      ])
+    } else if (reference === 'createTable') {
+      footer = ddlExportSuccess ? ([
+        <Button
+          key="0" 
+          onClick={() => {
+            this.reset();
+            onCancel && onCancel();
+          }}
+        >
+        取消
+        </Button>,
+        <Button
+          key="1" 
+          type="primary"
+          onClick={this.createTable}
+        >
+        建表
+        </Button>
+      ]) : ([
+        <Button
+          key="0" 
+          onClick={() => {
+            this.reset();
+            onCancel && onCancel();
+          }}
+        >
+        取消
+        </Button>,
+        <Button
+          key="1" 
+          type="primary"
+          onClick={this.generatorDDLStrings}
+        >
+        预览
+        </Button>
+      ])
+    }
+
+    return (
+      <Modal 
+        visible={visible}
+        title={title}
+        loading={confirmLoading}
+        onCancel={() => {
+          this.reset();
+          onCancel && onCancel();
+        }}
+        footer={footer}
+      > 
+        <React.Fragment>
+        {
+          ddlExportSuccess ? <React.Fragment>
+            <div className='d-flex mb-5' style={{ alignItems: 'center' }}>
+              <span className='mr-2'>模型名称:</span>
+              <Select 
+                value={selectModalerNameKey}
+                style={{ width: 180 }} 
+                placeholder='请选择模型名称'
+                onChange={this.onModalerNameChange}
+              >
+              {
+                names && names.map((name, index) => {
+                  return <Option key={index} value={index}>{name||''}</Option>
+                })
+              }
+              </Select>
+            </div>
+            <Input.TextArea value={ddlExportString||''} autoSize={{minRows:4,maxRows:20}} onChange={this.onDDLStringChange} ></Input.TextArea>
+          </React.Fragment> : <React.Fragment> 
+            <div className='d-flex' style={{ alignItems: 'center' }}>
+              <span className='mr-2' style={{ width: 85 }}>数据库类型: </span>
+              <Select 
+                value={selectDDLGeneratorName}
+                loading={loadingDDLGenerators}
+                style={{ width: 180 }} 
+                placeholder='请选择数据库类型'
+                onChange={this.onDDLGeneratorChange}
+              >
+              {
+                ddlGenerators && ddlGenerators.map((ddlGenerator, index) => {
+                  return <Option key={index} value={ddlGenerator.name||''}>{ddlGenerator.cnName||''}</Option>
+                })
+              }
+              </Select>
+            </div>
+            {
+              reference==='createTable' && <React.Fragment>
+                <div className='d-flex mt-3' style={{ alignItems: 'center' }}>
+                  <span className='mr-2' style={{ width: 85 }}>数据源名称:</span>
+                  <Select 
+                    value={currentDatabaseId}
+                    style={{ width: 180 }} 
+                    placeholder='请选择数据源名称'
+                    onChange={this.onDatabaseChange}
+                    loading={loadingDatabases}
+                  >
+                  {
+                    filterDatabases && filterDatabases.map((item, index) => {
+                      return <Option key={index} value={item._id}>{item.name||''}</Option>
+                    })
+                  }
+                  </Select>
+                </div>
+                <div className='d-flex mt-3' style={{ alignItems: 'center' }}>
+                  <span className='mr-2' style={{ width: 85 }}>Schema名称:</span>
+                  <Select 
+                    value={currentSchemaId}
+                    style={{ width: 180 }} 
+                    placeholder='请选择Schema名称'
+                    onChange={this.onSchemaChange}
+                    loading={loadingSchemas}
+                  >
+                  {
+                    schemas && schemas.map((item, index) => {
+                      return <Option key={index} value={item._id}>{item.name||''}</Option>
+                    })
+                  }
+                  </Select>
+                </div>
+              </React.Fragment>
+            }
+          </React.Fragment>
+        }
+        </React.Fragment>
+      </Modal>
+    )
+  }
+}
+
+export default ExportDDLModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/ExportOtherModal.jsx

+import React, { useState } from 'react';
+import { Modal, Button, Form, Radio } from 'antd';
+
+const exportModes = [
+  { name: '导出DDL', key: 'ddl' },
+  { name: '导出Erwin', key: 'erwin' },
+  { name: '导出Excel', key: 'excel' },
+  { name: '导出Word', key: 'word' },
+] 
+
+const ExportOtherModal = (props) => {
+  const { visible, onCancel } = props;
+
+  const [ modeKey, setModeKey ] = useState('');
+
+  const [ form ] = Form.useForm();
+
+  const onModeChange = (e) => {
+    setModeKey(e.target?.value);
+  }
+
+  const onOk = async() => {
+    try {
+      await form.validateFields();
+      reset();
+      onCancel && onCancel(modeKey);
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+
+  }
+
+  const cancel = () => {
+    reset();
+    onCancel && onCancel();
+  }
+
+  const reset = () => {
+    form.resetFields();
+    setModeKey('');
+  }
+
+  const footer = [ 
+    <Button
+      key="0" 
+      onClick={cancel}
+    >
+    取消
+    </Button>,
+    <Button
+      key="1" 
+      type="primary"
+      onClick={onOk}
+    >
+    确定
+    </Button>,
+  ];
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='模型导出'
+      width={540}
+      onCancel={cancel}
+      footer={footer}
+    >
+      <Form form={form}>
+        <Form.Item 
+          name='mode'
+          label='导出方式'
+          rules={[
+            {
+              required: true,
+              message: '请选择导出方式',
+            },
+          ]}
+        >
+          <Radio.Group onChange={onModeChange} value={modeKey}>
+          {
+            exportModes.map((item, index) => {
+
+              return (
+                <Radio 
+                  value={item.key}
+                  key={index} 
+                >
+                  {item.name}
+                </Radio>
+              );
+            })
+          }
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+export default ExportOtherModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/FilterColumnAction.jsx

+import { useState } from 'react';
+import { Popover, Table } from 'antd';
+import { MenuOutlined } from '@ant-design/icons';
+
+const { Column } = Table;
+
+const ColumnSelect = (props) => {
+  const { columns, onChange, defaultSelectedKeys } = props;
+
+  const [ selectedKeys, setSelectedKeys ] = useState(defaultSelectedKeys);
+
+  const changeSelect = (selectedRowKeys) => {
+    setSelectedKeys(selectedRowKeys);
+    onChange && onChange(selectedRowKeys);
+  }
+
+  const rowSelection = {
+    selectedRowKeys: selectedKeys,
+    onChange:changeSelect
+  }
+
+  return(
+    <div style={{width:230}}>
+      <Table
+        rowKey="title"
+        rowSelection={rowSelection}
+        showHeader={true}
+        pagination={false}
+        size="small"
+        scroll={{ y:350 }}
+        dataSource={columns}
+      >
+        <Column title="字段名字" dataIndex="title" key="title" />
+      </Table>
+    </div>
+  )
+}
+
+const FilterColumnAction = (props) => {
+  return (
+    <Popover 
+      title="选择显示字段" 
+      placement="leftTop" 
+      content={
+        <ColumnSelect {...props} />
+      }>
+      <MenuOutlined />
+    </Popover>
+  );
+}
+
+export default FilterColumnAction;
\ No newline at end of file

src/view/Manage/Pdata/Component/GrantedList.jsx

+import React, { useEffect, useState, useContext } from 'react';
+import { Spin } from 'antd';
+
+import { AppContext } from '../../../../App';
+import { dispatch } from '../../../../model';
+import ModelTable from "./ModelTable";
+import HistoryAndVersionDrawer from './HistoryAndVersionDrawer';
+
+const FC = (props) => {
+  const app = useContext(AppContext);
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [historyParams, setHistoryParams] = useState({visible: false, id: undefined })
+
+  useEffect(() => {
+    getServices();
+  }, [])
+
+  const getServices = () => {
+    setLoading(true);
+    dispatch({
+      type: 'pds.getGrantedServices',
+      payload: {
+        namespace: `${app?.env?.domainId}`
+      },
+      callback: data => {
+        setLoading(false);
+        setData(data);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const onHistory = (id) => {
+    setHistoryParams({visible: true, id});
+  }
+
+  const onHistoryCancel = () => {
+    setHistoryParams({visible: false, id: undefined});
+  }
+
+  return (
+    <div>
+      <Spin spinning={loading}>
+        <ModelTable 
+          user={app?.user} 
+          view='grant'
+          data={data} 
+          onHistory={onHistory}
+          {...props} />
+      </Spin>
+      <HistoryAndVersionDrawer
+        id={historyParams?.id}
+        visible={historyParams?.visible}
+        onCancel={onHistoryCancel}
+      />
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/Pdata/Component/Help.js

+/*------------------------------------------------*/
+/* LIBRARIES
+/*------------------------------------------------*/
+import throttle from "lodash/throttle";
+
+/*------------------------------------------------*/
+/* CONSTANTS
+/*------------------------------------------------*/
+const OFFSET = 1; // This is the top/bottom offset you use to start scrolling in the div.
+const PX_DIFF = 1;
+
+/*------------------------------------------------*/
+/* GLOBAL VARIABLES
+/*------------------------------------------------*/
+let scrollIncrement = 0;
+let isScrolling = false;
+let sidebarElement = null;
+let scrollHeightSidebar = 0;
+let clientRectBottom = 0;
+let clientRectTop = 0;
+
+/*------------------------------------------------*/
+/* METHODS
+/*------------------------------------------------*/
+
+/**
+ * Scroll up in the sidebar.
+ */
+const goUp = () => {
+  scrollIncrement -= PX_DIFF;
+  sidebarElement.scrollTop = scrollIncrement;
+
+  if (isScrolling && scrollIncrement >= 0) {
+    window.requestAnimationFrame(goUp);
+  }
+};
+
+/**
+ * Scroll down in the sidebar.
+ */
+const goDown = () => {
+  scrollIncrement += PX_DIFF;
+  sidebarElement.scrollTop = scrollIncrement;
+
+  if (isScrolling && scrollIncrement <= scrollHeightSidebar) {
+    window.requestAnimationFrame(goDown);
+  }
+};
+
+const onDragOver = (event) => {
+  const isMouseOnTop =
+    scrollIncrement >= 0 &&
+    event.clientY > clientRectTop &&
+    event.clientY < clientRectTop + OFFSET;
+  const isMouseOnBottom =
+    scrollIncrement <= scrollHeightSidebar &&
+    event.clientY > clientRectBottom - OFFSET &&
+    event.clientY <= clientRectBottom;
+
+  if (!isScrolling && (isMouseOnTop || isMouseOnBottom)) {
+    isScrolling = true;
+    scrollIncrement = sidebarElement.scrollTop;
+
+    if (isMouseOnTop) {
+      window.requestAnimationFrame(goUp);
+    } else {
+      window.requestAnimationFrame(goDown);
+    }
+  } else if (!isMouseOnTop && !isMouseOnBottom) {
+    isScrolling = false;
+  }
+};
+
+/**
+ * The "throttle" method prevents executing the same function SO MANY times.
+ */
+const throttleOnDragOver = throttle(onDragOver, 150);
+
+export const addEventListenerForSidebar = (elementId) => {
+  // In Chrome the scrolling works.
+  if (navigator.userAgent.indexOf("Chrome") === -1) {
+    sidebarElement = document.getElementById(elementId);
+    scrollHeightSidebar = sidebarElement.scrollHeight;
+    const clientRect = sidebarElement.getBoundingClientRect();
+    clientRectTop = clientRect.top;
+    clientRectBottom = clientRect.bottom;
+
+    sidebarElement.addEventListener("dragover", throttleOnDragOver);
+  }
+};
+
+export const removeEventListenerForSidebar = () => {
+  isScrolling = false;
+
+  if (sidebarElement) {
+    sidebarElement.removeEventListener("dragover", throttleOnDragOver);
+  }
+};

src/view/Manage/Pdata/Component/HistoryAndVersionDrawer.jsx

+import React from 'react';
+import { Drawer, Tabs } from 'antd';
+
+import VersionHistory from './VersionHistory';
+import VersionCompare from './VersionCompare';
+
+const { TabPane } = Tabs;
+
+const HistoryAndVersionDrawer = (props) => {
+  const { onCancel, visible, id } = props;
+
+  return (
+    <Drawer 
+      title=''
+      placement="right"
+      closable={true}
+      width={'40%'}
+      onClose={() => {
+        onCancel && onCancel();
+      }}
+      visible={visible}
+    >
+    {
+      visible && <Tabs defaultActiveKey="1" type="card" size='small'>
+        <TabPane tab="版本历史" key="1">
+          <VersionHistory id={id} />
+        </TabPane>
+        {/* <TabPane tab="版本对比" key="2">
+          <VersionCompare id={id} />
+        </TabPane> */}
+      </Tabs>
+    }
+    </Drawer>
+  );
+}
+
+export default HistoryAndVersionDrawer;
\ No newline at end of file

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

+import React, { useState, useEffect, useRef } from 'react';
+import { Spin } from 'antd';
+import LocalStorage from 'local-storage';
+
+import ImportActionHeader from './ImportActionHeader'; 
+import { ImportActionTable } from './ImportActionTable';
+import ImportActionIndex from './ImportActionIndex';
+import { getQueryParam } from '../../../../util';
+import { Action } from '../../../../util/constant';
+
+import { dispatch } from '../../../../model'; 
+
+const ImportAction = (props) => {
+  const { action, hints, onChange, form, modelerId, terms, ddl, roughModelerData, versionId, permitCheckOut } = props;
+
+  const [ constraints, setConstraints ] = useState([]);
+  const [ constraint, setConstraint ] = useState({});
+  const [ templates, setTemplates ] = useState([]);
+  const [ template, setTemplate ] = useState({});
+  const [ modelerData, setModelerData ] = useState(null);
+  const [ supportedDatatypes, setSupportedDatatypes ] = useState([]);
+  const [ supportedPartitionTypes, setSupportedPartitionTypes ] = useState([]); 
+  const [ supportedIndextypes, setSupportedIndextypes ] = useState([]);
+  const [ validateReports, setValidateReports ] = useState([]);
+  const [ loading, setLoading ] = useState(false);
+
+  const mountRef = useRef(true);
+  const modelerDataRef = useRef(null);
+
+  useEffect(() =>{
+ 
+    if ((action||'')==='') return;
+
+    if (!mountRef.current && action === 'edit' && !permitCheckOut) {
+      return;
+    }
+
+    //流程打开模型详情的情况下,id由-1变成-2,会再次触发获取模型详情.这里直接return掉
+    if (!mountRef.current && action === 'flow') {
+      return;
+    }
+
+    mountRef.current = false;
+      
+    //初始化form状态
+    if (action==='add'||action==='edit'||action==='flow') {
+      form.resetFields();
+    }
+
+    if (action === 'detail'|| action ==='flow' || action === 'detail-version') {
+       //把数据表结构中的数据清空,解决性能问题
+        const newModelerData = { ...modelerData, easyDataModelerDataModelAttributes: [] };
+
+        onChange && onChange(newModelerData);
+        setModelerData(newModelerData);
+        modelerDataRef.current = newModelerData;
+    }
+
+    setLoading(true);
+
+    dispatch({
+      type: 'datamodel.getAllConstraintsAndTemplates',
+      callback: data => {
+        setConstraints(data.constraints||[]);
+        setTemplates(data.templates||[]);
+        if (action === 'add') {
+          setConstraint((data.constraints||[]).length>0?data.constraints[0]:{});
+          setTemplate({});
+          if ((hints||[]).length>0) {
+            getDraft((data.constraints||[]).length>0?data.constraints[0]:{}, {} ,hints);
+          } else if ((ddl||'').length>0) {
+            getDraftUsingDDL((data.constraints||[]).length>0?data.constraints[0]:{}, {} ,ddl);
+          } else if ((modelerId||'')!=='') {
+            getCurrentDataModel();
+          } else if (roughModelerData) {
+            setLoading(false);
+            getExtraData(roughModelerData);
+          } else {
+            getDraft((data.constraints||[]).length>0?data.constraints[0]:{}, {} ,[]);
+          }
+        } else if(action === 'edit' || action === 'detail' || action ==='flow' || action === 'detail-version') {
+          getCurrentDataModel();
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [action, hints, modelerId, ddl ]);
+
+  const getDraft = (_constraint, _template, _hints) => { 
+    dispatch({
+      type: 'datamodel.getDraft',
+      payload: {
+        data: {
+          hints: _hints,
+          modelerModelingConstraint: _constraint,
+          easyDataModelerModelingTemplate: _template
+        }   
+      },
+      callback: data => {
+        setLoading(false);
+        getExtraData(data);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const getDraftUsingDDL = (_constraint, _template, _ddl) => { 
+    dispatch({
+      type: 'datamodel.getDraftUsingDDL',
+      payload: {
+        data: {
+          ddl: _ddl,
+          modelerModelingConstraint: _constraint,
+          easyDataModelerModelingTemplate: _template
+        }   
+      },
+      callback: data => {
+        setLoading(false);
+        getExtraData(data);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const getConsult = (data) => {
+    dispatch({
+      type: 'datamodel.getConsult',
+      payload: {
+        data  
+      },
+      callback: data => {
+        let newModelerData = {...(data||{})};
+        newModelerData = { ...newModelerData, ...getConsistentKeys(newModelerData) };
+
+        setModelerData(newModelerData);
+        modelerDataRef.current = newModelerData;
+
+        onChange && onChange(newModelerData);
+        validateDataModel(newModelerData);
+
+      }
+    })
+  }
+
+  const getCurrentDataModel = () => {
+
+    if ((modelerId||'') === '') {
+      setLoading(false);
+      return;
+    }
+
+    let type = 'datamodel.getDataModel';
+
+    let params = {
+      id: modelerId||''
+    };
+
+    if (action === 'add') {
+      type = 'datamodel.modelCopy';
+    } else if (action === 'flow') {
+      type = 'datamodel.getDataModelWithRecommendedDefinitionAndTermDiscovery';
+    } else if (action === 'detail-version') {
+      type = 'datamodel.getDataModelByVersionId';
+      params = {
+        params: {
+          id: modelerId||'',
+          versionId
+        }
+      }
+    } else if (action==='edit' && permitCheckOut) {
+      type = 'datamodel.checkOutDataModel';
+    } else if (action==='edit') {
+      const _action = getQueryParam(Action, props.location.search);
+
+      if (_action === 'flow') {
+        params.ignoreNamespace = true;
+      }
+    } 
+
+    dispatch({
+      type,
+      payload: params,
+      callback: data => {
+        if (action==='edit' && permitCheckOut) {
+          LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
+        }
+
+        setLoading(false);
+        getExtraData(data);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const getExtraData = (data) => {
+    const newModelerData = { ...(data||{}), ...getConsistentKeys(data||{}) };
+
+    setModelerData(newModelerData||{});
+    modelerDataRef.current = newModelerData||{};
+
+    setConstraint(newModelerData.easyDataModelerModelingConstraint||{});
+    setTemplate(newModelerData.easyDataModelerModelingTemplate||{});
+    onChange && onChange(newModelerData||{});
+    getSupportedDatatypes();
+    getSupportedPartitionTypes();
+    getSupportedIndextypes();
+
+    if (newModelerData) {
+      form.setFieldsValue({ 
+        cnName: newModelerData.cnName||'',
+        name: newModelerData.name||'',
+        remark: newModelerData.remark||'',
+        easyDataModelerModelingConstraint: newModelerData.easyDataModelerModelingConstraint||'',
+        easyDataModelerModelingTemplate: newModelerData.easyDataModelerModelingTemplate||'',
+        dataResidence: newModelerData.dataResidence||'',
+        tableType: newModelerData.tableType||'',
+        dataUpdatingTiming: newModelerData.dataUpdatingTiming||'',
+        maintenanceRecords: newModelerData.maintenanceRecords||'',
+        dataLoadingStrategy: newModelerData.dataLoadingStrategy||'',
+        primaryKeysDescription: newModelerData.primaryKeysDescription||'',
+        distributionKeysDescription: newModelerData.distributionKeysDescription||'',
+        dataCircumstances: newModelerData.dataCircumstances||'',
+        partitionsDescription: newModelerData.partitionsDescription||'',
+        semiPrimaryKeysDescription: newModelerData.semiPrimaryKeysDescription||'',
+      });
+    }
+    
+    validateDataModel(newModelerData||{});
+  }
+
+  const onConstraintChange = (value) => {
+    let currentConstraint = null;
+    
+    (constraints||[]).forEach((_constraint, index) => {
+      if (_constraint.name === value) {
+        currentConstraint = _constraint;
+      }
+    });
+
+    if (!currentConstraint) return;
+
+    form.setFieldsValue({ 
+      easyDataModelerModelingConstraint: currentConstraint
+    });
+    const newModelerData = {...modelerData, easyDataModelerModelingConstraint: currentConstraint };
+    setModelerData(newModelerData);
+    modelerDataRef.current = newModelerData;
+
+    onChange && onChange(newModelerData);
+
+    setConstraint(currentConstraint);
+    getConsult(newModelerData);
+  }
+
+  const onTemplateChange = (value) => {
+    let currentTemplate = null;
+    
+    (templates||[]).forEach((_template, index) => {
+      if (_template.name === value) {
+        currentTemplate = _template;
+      }
+    });
+
+    form.setFieldsValue({ 
+      easyDataModelerModelingTemplate: currentTemplate||{}
+    });
+
+    const newModelerData = {...modelerData, easyDataModelerModelingTemplate: currentTemplate };
+
+    setModelerData(newModelerData);
+    modelerDataRef.current = newModelerData;
+
+    onChange && onChange(newModelerData);
+
+    setTemplate(currentTemplate);
+    getConsult(newModelerData);
+  }
+
+  const getSupportedDatatypes = () => {
+    dispatch({
+      type: 'datamodel.getSupportedDatatypes',
+      callback: data => {
+        setSupportedDatatypes(data||[]);
+      }
+    });
+  }
+
+  const getSupportedPartitionTypes = () => {
+    dispatch({
+      type: 'datamodel.getSupportedPartitionTypes',
+      payload: {
+        excludeBuiltin: false
+      },
+      callback: data => {
+        setSupportedPartitionTypes(data||[]);
+      }
+    });
+  }
+
+  const getSupportedIndextypes = () => {
+    dispatch({
+      type: 'datamodel.getSupportedIndextypes',
+      callback: data => {
+        setSupportedIndextypes(data||[]);
+      }
+    });
+  }
+
+  const onHeaderChange = (changedValues, allValues) => {
+
+    let newModelerData = {...modelerData, ...allValues};
+
+    if (newModelerData.easyDataModelerModelingTemplate==='' || newModelerData.easyDataModelerModelingTemplate==={}) {
+      newModelerData.easyDataModelerModelingTemplate = null;
+    } 
+
+    //主键不允许为空
+    if (changedValues.hasOwnProperty('easyDataModelerPrimaryKey')) {
+      (newModelerData.easyDataModelerDataModelAttributes||[]).forEach(attribute => {
+        let ownPrimaryKey = false;
+        if (newModelerData?.easyDataModelerPrimaryKey) {
+          ownPrimaryKey = (newModelerData.easyDataModelerPrimaryKey.filter(item => item.name===attribute.name).length>0);
+        }
+
+        if (ownPrimaryKey) {
+          attribute.notNull = true;
+        }
+      })
+    }
+
+    //类主键自动创建索引
+    let autoEasyDataModelerIndexOrders = [];
+    (newModelerData.easyDataModelerSemiPrimaryKey||[]).forEach(item => {
+      autoEasyDataModelerIndexOrders.push('ASC');
+    });
+    let autoEasyDataModelerIndex = {
+      "name": `i_pk_${newModelerData.name}`,
+      "indextype": {
+          "name": "btree",
+          "displayName": "B-tree",
+          "supportedDBTypes": [
+            "Greenplum",
+            "MySQL"
+          ],
+          "default": true
+      },
+      "indexedAttributeOrders": [...autoEasyDataModelerIndexOrders],
+      "indexedEasyDataModelAttributes": [...newModelerData.easyDataModelerSemiPrimaryKey],
+      "unique": false
+    };
+
+    let newEasyDataModelerIndices = [];
+
+    (newModelerData.easyDataModelerIndices||[]).forEach((easyDataModelerIndex, index) => {
+      if (easyDataModelerIndex.name!==`i_pk_${modelerDataRef.current?.name}` && easyDataModelerIndex.name!==`i_pk_${newModelerData.name}`) {
+        newEasyDataModelerIndices.push(easyDataModelerIndex);
+      }
+    });
+
+    newEasyDataModelerIndices.push(autoEasyDataModelerIndex);
+
+    newEasyDataModelerIndices = newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
+
+    newModelerData = {...newModelerData, easyDataModelerIndices: newEasyDataModelerIndices};
+
+    setModelerData(newModelerData);
+    modelerDataRef.current = newModelerData;
+
+    onChange && onChange(newModelerData);
+
+    if (changedValues.hasOwnProperty('name') || changedValues.hasOwnProperty('cnName')) {
+      validateDataModel(newModelerData);
+    }
+  }
+
+  //validate 是否需要对字段进行校验
+  const onTableChange = (data, validate=false) => { 
+
+    let newModelerData = {...modelerDataRef.current, ...{easyDataModelerDataModelAttributes: data}};
+
+    newModelerData = { ...newModelerData, ...getConsistentKeys(newModelerData) };
+    
+    setModelerData(newModelerData);
+    modelerDataRef.current = newModelerData;
+
+    onChange && onChange(newModelerData);
+
+    if (validate) {
+      validateDataModel(newModelerData);
+    }
+  }
+
+  const validateDataModel = (data) => {
+
+    const row = form.getFieldsValue();
+
+    dispatch({
+      type: 'datamodel.validateDataModel',
+      payload: {
+        data: (action==='detail'||action==='flow'||action==='detail-version')?data:{ ...data, ...{ name: row.name||'', cnName: row.cnName||'' } },
+      },
+      callback: _data => {
+        setValidateReports(_data||[]);
+      }
+    })
+  }
+
+  const onIndexChange = (data, validate=false) => {
+    const newModelerData = {...modelerDataRef.current, easyDataModelerIndices: data};
+
+    setModelerData(newModelerData);
+    modelerDataRef.current = newModelerData;
+
+    onChange && onChange(newModelerData);
+
+    if (validate) {
+      validateDataModel(newModelerData);
+    }
+  }
+
+  const getConsistentKeys = (newModelerData) => {
+
+    //分布键
+    let newDistribution = [];
+
+    (newModelerData.easyDataModelerDistributionKey||[]).forEach((item, index) => {
+      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
+
+      if (_index !== -1) {
+        newDistribution.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
+      } 
+    })
+
+     //主键
+     let newPrimary = [];
+
+     (newModelerData.easyDataModelerPrimaryKey||[]).forEach((item, index) => {
+       const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
+ 
+       if (_index !== -1) {
+        newPrimary.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
+       } 
+     })
+
+    //分区
+    let newPartition = {...(newModelerData.partition||[])};
+
+    const newKeys = [];
+
+    (newPartition.keys||[]).forEach((item, index) => {
+      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
+
+      if (_index !== -1) {
+        newKeys.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
+      } 
+    })
+
+    newPartition.keys = newKeys;
+
+    if ((newKeys||[]).length === 0) {
+      newPartition = null;
+    }
+
+    //类主键
+    let newSemiPrimary = [];
+
+    (newModelerData.easyDataModelerSemiPrimaryKey||[]).forEach((item, index) => {
+      const _index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(_item => item.iid === _item.iid);
+
+      if (_index !== -1) {
+        newSemiPrimary.push({...newModelerData.easyDataModelerDataModelAttributes[_index]});
+      } 
+    })
+
+    //索引
+    let newEasyDataModelerIndices = [...(newModelerData.easyDataModelerIndices||[])];
+
+    (newModelerData.easyDataModelerIndices||[]).forEach((easyDataModelerIndex, index) => {
+
+      const newIndexedEasyDataModelAttributes = [], newIndexedAttributeOrders = [];
+
+      (easyDataModelerIndex.indexedEasyDataModelAttributes||[]).forEach((indexedEasyDataModelAttribute, _index) => {
+        const __index = (newModelerData.easyDataModelerDataModelAttributes||[]).findIndex(item => item.iid === indexedEasyDataModelAttribute.iid);
+
+        if (__index !== -1) {
+          newIndexedEasyDataModelAttributes.push({...newModelerData.easyDataModelerDataModelAttributes[__index]});
+          newIndexedAttributeOrders.push(easyDataModelerIndex.indexedAttributeOrders[_index]);
+        } 
+      })
+
+      const item = newEasyDataModelerIndices[index];
+      newEasyDataModelerIndices.splice(index, 1, {...item, ...{ indexedEasyDataModelAttributes: newIndexedEasyDataModelAttributes, indexedAttributeOrders: newIndexedAttributeOrders }} )
+    })
+
+    newEasyDataModelerIndices = newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
+
+    return { partition: newPartition, easyDataModelerDistributionKey: newDistribution, easyDataModelerPrimaryKey: newPrimary, easyDataModelerIndices: newEasyDataModelerIndices, easyDataModelerSemiPrimaryKey: newSemiPrimary};
+  }
+
+  return (
+    <Spin spinning={loading}>
+      <ImportActionHeader 
+        form={form}
+        editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
+        modelerData={modelerData||{}} 
+        constraints={constraints}
+        templates={templates}
+        validateReports={validateReports}
+        onTemplateChange={onTemplateChange}
+        onConstraintChange={onConstraintChange}
+        onChange={onHeaderChange}
+        terms={terms}
+        supportedPartitionTypes={supportedPartitionTypes} 
+      />   
+      <ImportActionTable 
+        modelerData={modelerData||{}}
+        constraint={constraint} 
+        template={template}
+        validateReports={validateReports}
+        supportedDatatypes={supportedDatatypes} 
+        onChange={onTableChange} 
+        editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
+        action={action} 
+        originAction={getQueryParam(Action, props?.location?.search)}
+        terms={terms}
+      /> 
+      <ImportActionIndex 
+        modelerData={modelerData||{}} 
+        constraint={constraint} 
+        template={template}
+        types={supportedIndextypes}
+        validateReports={validateReports}
+        onChange={onIndexChange} 
+        editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
+        terms={terms}
+      />
+    </Spin>
+  );
+};
+
+export default ImportAction;
\ No newline at end of file

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

+import React, { useState, useEffect } from 'react';
+import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider } from 'antd';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+
+import { highlightSearchContentByTerms, generateUUID } from '../../../../util';
+import { dispatch, dispatchLatest } from '../../../../model'; 
+
+import DebounceInput from './DebounceInput';
+
+import './ImportActionHeader.less';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+const InputDebounce = DebounceInput(300)(Input);
+
+const loadOptions = ['append', 'refresh', 'insert', 'update', 'full', 'chain', 'delete', '手工导入'];
+const updateOptions = [
+  '每个交易日早间交易前加载上一交易日数据,历史资料入历史表',
+  '每个交易日早间交易前清空该表,交易期间实时加载,下午收市后入历史表',
+  '每个交易日7:30加载',
+  '每个交易日8:30加载',
+  '每个交易日15:00加载',
+  '每个交易日18:00加载',
+  '每个交易日19:00加载',
+  '每个交易日19:30加载',
+  '每个交易日20:00加载',
+  '每个交易日22:00加载',
+  '每个交易日23:00加载',
+  '每个交易日20:00加载T-2的数据',
+  '每日中午12:00加载T-3日数据',
+  '实时更新',
+  '收盘后加载',
+  '收市后加载',
+  '下午收市后加载',
+  '下午收市后入历史表',
+  '下午收市后入实时和历史表',
+  '晚间结算后加载',
+  '实时从mysql同步',
+  '手工维护',
+  '用户提交',
+  '作业提交',
+  '脚本加载',
+];
+
+const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => {
+
+  return (
+    <Select 
+      onChange={onChange} 
+      value={value?.name || ''} 
+      placeholder='请选择规范'
+      {...restProps}
+    >
+    {
+      (constraints||[]) && constraints.map((constraint, index) => {
+        return (
+          <Option key={index} value={constraint.name||''} >{constraint.cnName||''}</Option>
+        );
+      })
+    }
+    </Select>
+  )
+}
+
+// const TemplateSelect = ({ value = {}, templates = [], onChange, ...restProps }) => {
+
+//   return (
+//     <Select 
+//       onChange={onChange} 
+//       value={value?.name || ''} 
+//       placeholder='请选择生成表类型'
+//       allowClear
+//       {...restProps}
+//     >
+//     {
+//       (templates||[]) && templates.map((template, index) => {
+//         return (
+//           <Option key={index} value={template.name||''} >{template.cnName||''}</Option>
+//         );
+//       })
+//     }
+//     </Select>
+//   )
+// }
+
+const AttributesSelect = ({ value = [], modelerData, onChange, mode = 'multiple', ...restProps }) => {
+
+  const onAttributeChange = (value) => {
+    let currentAttributes = [];
+    if (mode === 'multiple') {
+      currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.iid)!==-1);
+    } else {
+      (value||[]).forEach(item => {
+
+        const filterAttributes = (newAttributes||[]).filter(attribute => item ===attribute.iid);
+
+        if (filterAttributes.length !== 0) {
+          currentAttributes = [...currentAttributes, ...filterAttributes];
+        } else {
+          currentAttributes = [...currentAttributes, { name: item, iid: generateUUID() }];
+        }
+      })
+    }
+
+    triggerChange(currentAttributes);
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange?.(changedValue);
+  };
+
+    //value有可能为空
+    value = value ? value: [];
+  
+    let attributeIds = [];
+    let newAttributes = [...(modelerData?.easyDataModelerDataModelAttributes||[])];
+  
+    value.forEach(attribute => {
+      attributeIds.push(attribute.iid);
+  
+      if (mode === 'tags') {
+        const filterAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(_attribute => attribute.iid ===_attribute.iid);
+  
+        if (filterAttributes.length === 0) {
+          newAttributes = [...newAttributes, attribute];
+        } 
+      }
+    })
+
+  return (
+    <Select 
+      onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
+      value={attributeIds} 
+      placeholder='请选择字段名称'
+      mode={mode}
+      allowClear={true}
+    >
+    {
+      (newAttributes||[]).map((attribute, index) => {
+        return (
+          <Option key={index} value={attribute.iid?attribute.iid:(attribute.name||'')}>{attribute.name||''}</Option>
+        );
+      })
+    }
+    </Select>
+  );
+}
+
+const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChange, ...restProps }) => {
+
+  const onPartitionTypeChange = (value) => {
+
+    let currentPartitionType = {}; 
+    (partitionTypes||[]).forEach((partitionType, index) => {
+      if (value === partitionType.name) {
+        currentPartitionType = partitionType;
+      }
+    })
+
+    triggerChange({ partitionType: currentPartitionType });
+  }
+
+  const onAttributeChange = (value) => {
+    const currentAttributes = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(attribute => (value||[]).indexOf(attribute.iid)!==-1);
+
+    triggerChange({ keys: currentAttributes });
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange?.({
+      ...value,
+      ...changedValue,
+    });
+  };
+
+  //value有可能为空
+  value = value ? value: {};
+  
+  let attributeIds = [];
+  (value?.keys||[]).forEach(attribute => {
+    attributeIds.push(attribute.iid);
+  })
+
+  return (
+    <Row gutter={10}>
+      <Col span={8}>
+      <Select 
+        onChange={onPartitionTypeChange} 
+        value={value?.partitionType?.name || ''} 
+        placeholder='请选择分区类型'
+        allowClear={true}
+      >
+      {
+        (partitionTypes||[]).map((partitionType, index) => {
+          return (
+            <Option key={partitionType.name||''}>{partitionType.cnName||''}</Option>
+          );
+        })
+      }
+      </Select>
+      </Col>
+      <Col span={16}>
+        <Select 
+          onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
+          value={attributeIds} 
+          placeholder='请选择字段名称'
+          mode='multiple'
+          allowClear={true}
+        >
+        {
+          (modelerData?.easyDataModelerDataModelAttributes||[]).map((attribute, index) => {
+            return (
+              <Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
+            );
+          })
+        }
+        </Select>
+      </Col>
+    </Row>
+  );
+}
+
+const LoadSelect = ({ value = '', onChange, ...restProps }) => {
+
+  const onLoadChange = (value) => {
+
+    triggerChange(value.join('/'));
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange?.(changedValue);
+  };
+
+  //value有可能为空
+  value = value ? value: '';
+  
+  let loadNames = [];
+
+  if (value !== '') {
+    value.split('/').forEach(item => {
+      loadNames.push(item);
+    })
+  }
+
+  return (
+    <Select 
+      mode="tags" 
+      tokenSeparators={['/', ' ']}
+      onChange={(value) => { onLoadChange && onLoadChange(value) }} 
+      value={loadNames} 
+      placeholder='请选择选择或者手动输入加载方式'
+      allowClear={true}
+    >
+    {
+      loadOptions.map((item, index) => {
+        return (
+          <Option key={index} value={item}>{item}</Option>
+        );
+      })
+    }
+    </Select>
+  );
+}
+
+const UpdateSelect = ({ value = '', onChange, ...restProps }) => {
+
+  const onUpdateChange = (value) => {
+
+    triggerChange(value.join('/'));
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange?.(changedValue);
+  };
+
+  //value有可能为空
+  value = value ? value: '';
+  
+  let updateNames = [];
+  if (value !== '') {
+    value.split('/').forEach(item => {
+      updateNames.push(item);
+    })
+  }
+
+  return (
+    <Select 
+      mode="tags" 
+      tokenSeparators={['/', ' ']}
+      onChange={(value) => { onUpdateChange && onUpdateChange(value) }} 
+      value={updateNames} 
+      placeholder='请选择选择或者手动输入更新时间'
+      allowClear={true}
+    >
+    {
+      updateOptions.map((item, index) => {
+        return (
+          <Option key={index} value={item}>{item}</Option>
+        );
+      })
+    }
+    </Select>
+  );
+}
+
+const ImportActionHeader = (props) => {
+  const { editable, form, modelerData, constraints, templates, onConstraintChange, onTemplateChange, validateReports, onChange, terms, supportedPartitionTypes } = props;
+
+  const [ causes, setCauses ] = useState([]);
+  const [ options, setOptions ] = useState([]);
+
+  const [ autoTranslate, setAutoTranslate ] = useState(false);
+  const [ onlyShowRequireChange, setOnlyShowRequireChange ] = useState(true);
+  const [ maintenanceRecords, setMaintenanceRecords ] = useState(null);
+
+  useEffect(() => {
+
+    const causes = [];
+    (validateReports||[]).forEach(report => {
+    
+      if (report.type === 'DataModel') {
+        (report.reportItems||[]).forEach((item) => {
+          causes.push(item.cause||'');
+        })
+      }
+    });
+
+    if (editable) {
+      form?.setFields([{ name: 'name', errors: causes }]);
+    } else {
+      setCauses(causes);
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validateReports])
+
+  useEffect(() => {
+
+    setAutoTranslate((modelerData.name||'')==='');
+    if (modelerData) {
+      form?.setFieldsValue(modelerData);
+
+      if ((modelerData.id||'')!=='' && maintenanceRecords===null) {
+        getMaintenanceRecords();
+      }
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelerData])
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 6 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 18 },
+    },
+  };
+
+  const getMaintenanceRecords = () => {
+    dispatch({
+      type: 'datamodel.getMaintenanceRecords',
+      payload: {
+        params: {
+          id: modelerData.id
+        }
+      },
+      callback: data => {
+        setMaintenanceRecords(data);
+      }
+    })
+  }
+
+  const onSearch = (searchText) => {
+
+    const _searchText = searchText.replace(/ /g,'');
+    if (_searchText !== '') {
+      dispatchLatest({
+        type: 'datamodel.autocomplete',
+        payload: {
+          params: {
+            word: _searchText,
+            isEasyDataModelerDataModelAttribute: false,
+          }
+        },
+        callback: data => {
+          const _options = [];
+          (data||[]).forEach(item => {
+            _options.push({ value: item });
+          })
+
+          setOptions(_options);
+        }
+      })
+    } else {
+      dispatchLatest({
+        type: 'datamodel.recommandEnglishWords',
+        payload: {
+          params: {
+            chineseWord: modelerData.cnName,
+          }
+        },
+        callback: data => {
+          const _options = [];
+          (data||[]).forEach(item => {
+            _options.push({ value: item });
+          })
+
+          setOptions(_options);
+        }
+      })
+    }
+  }
+
+  const onValuesChange = (changedValues, allValues) => {
+
+    onChange && onChange(changedValues, allValues);
+
+    //有手动编辑过英文名称并且有内容的情况下, 不能通过编辑中文名称自动翻译
+    if (changedValues.hasOwnProperty('name')) {
+      setAutoTranslate(changedValues.name==='');
+    } else if (changedValues.hasOwnProperty('cnName')) {
+      if (autoTranslate) {
+        dispatchLatest({
+          type: 'datamodel.translatePhase',
+          payload: {
+            params: {
+              phaseInChinese: changedValues.cnName,
+            }
+          },
+          callback: data => {
+            if ((data?.translated||'') !== '') {
+              form?.setFieldsValue({ name: data?.translated||'' });
+              onChange && onChange({...changedValues, ...{name: data?.translated||''}}, {...allValues, ...{name: data?.translated||''}});
+            }
+          }
+        })
+      }
+    }
+  }
+
+  const onOnlyShowRequireChange = () => {
+    setOnlyShowRequireChange(!onlyShowRequireChange);
+  }
+
+  let distributionDescription = '', primaryDescription = '', partitionsDescription = '', semiPrimaryDescription = '', maintenanceDescription = '';
+
+  if (!editable && modelerData) {
+    //分布
+    if (modelerData?.easyDataModelerDistributionKey) {
+      (modelerData?.easyDataModelerDistributionKey||[]).forEach((item, index) => {
+        if (index > 0) {
+          distributionDescription += ',';
+        }
+
+        distributionDescription += item.name||'';
+      });
+    }
+
+    //主键
+    if (modelerData?.easyDataModelerPrimaryKey) {
+      (modelerData?.easyDataModelerPrimaryKey||[]).forEach((item, index) => {
+        if (index > 0) {
+          primaryDescription += ',';
+        }
+
+        primaryDescription += item.name||'';
+      })
+    }
+
+    //分区
+    if (modelerData?.partition?.keys) {
+      (modelerData?.partition?.keys||[]).forEach((item, index) => {
+        if (index > 0) {
+          partitionsDescription += ',';
+        }
+
+        partitionsDescription += item.name||'';
+      })
+    }
+
+    if (modelerData?.partition?.partitionType?.cnName) {
+      partitionsDescription += '/' + modelerData?.partition?.partitionType?.cnName||'';
+    }
+
+     //类主键
+     if (modelerData?.easyDataModelerSemiPrimaryKey) {
+      (modelerData?.easyDataModelerSemiPrimaryKey||[]).forEach((item, index) => {
+        if (index > 0) {
+          semiPrimaryDescription += ',';
+        }
+
+        semiPrimaryDescription += item.name||'';
+      })
+    }
+  }
+
+  if ((maintenanceRecords||[]).length>0) {
+    maintenanceRecords.forEach((record, index) => {
+      if (index !== 0) {
+        maintenanceDescription += '/';
+      }
+      
+      maintenanceDescription += record;
+    })
+
+    form?.setFieldsValue({ maintenanceRecords: maintenanceDescription });
+  }
+
+  return (
+    <div className='model-import-action-header'>
+    <div 
+      className='mb-3'
+      style={{ 
+      display: 'flex',
+      alignItems: 'center',
+      }}
+    >
+      <h2 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h2>
+      {
+        onlyShowRequireChange ? <Button type='text' style={{ padding: 0, color: '#0069AC' }} onClick={onOnlyShowRequireChange}>展开<DownOutlined /></Button> : <Button type='text' style={{ padding: 0, color: '#0069AC' }} onClick={onOnlyShowRequireChange}>收起<UpOutlined /></Button>
+      }
+    </div>
+    {
+      editable ? (
+        <Form
+          form={form}
+          {...formItemLayout}
+          onValuesChange={onValuesChange}
+        >
+          <Row gutter={10}>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="中文名称"
+                name="cnName"
+                rules={[{ required: true, message: '请输入中文名称!' }]}
+              >
+                <InputDebounce />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="英文名称"
+                name="name"
+                rules={[{ required: true, message: '请输入英文名称!' }]}
+              >
+                <AutoComplete options={options} onSearch={onSearch} />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="规范"
+                name="easyDataModelerModelingConstraint"
+                rules={[{ required: true, message: '请选择规范!' }]}
+              >
+                <ConstraintSelect 
+                  constraints={constraints} 
+                  onChange={onConstraintChange} 
+                />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="数据内容"
+                name="remark"
+                rules={[{ required: true, message: '请输入数据内容!' }]}
+                style={{ marginBottom: 15 }}
+              >
+                <TextArea row={4} />
+              </Form.Item>
+            </Col>
+          </Row>
+          {
+            !onlyShowRequireChange && <Divider style={{ margin: '0 0 15px' }} />
+          }
+          {
+            !onlyShowRequireChange && <Row gutter={10}>  
+            {/* <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="生成表类型"
+                name="easyDataModelerModelingTemplate"
+                rules={[{ required: false, message: '请选择生成表类型!' }]}
+              >
+                <TemplateSelect 
+                  templates={templates} 
+                  onChange={onTemplateChange} 
+                />
+              </Form.Item>
+            </Col> */}
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="数据表类型"
+                name="tableType"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="数据平台"
+                name="dataResidence"
+              >
+                <Input disabled={true} />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="数据情况"
+                name="dataCircumstances"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>     
+              <Form.Item
+                label="分布键"
+                name="easyDataModelerDistributionKey"
+              >
+                <AttributesSelect modelerData={modelerData} />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>  
+              <Form.Item
+                label="分区键"
+                name="partition"
+              >
+                <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="技术主键"
+                name="easyDataModelerPrimaryKey"
+              >
+                <AttributesSelect modelerData={modelerData} />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>  
+              <Form.Item
+                label="类主键"
+                name="easyDataModelerSemiPrimaryKey"
+              >
+                <AttributesSelect modelerData={modelerData} mode='tags' />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="加载方式"
+                name="dataLoadingStrategy"
+              >
+                <LoadSelect />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="更新时间"
+                name="dataUpdatingTiming"
+              >
+                <UpdateSelect />
+              </Form.Item>
+            </Col>
+            <Col xs={24} sm={24} lg={12} xl={8}>
+              <Form.Item
+                label="维护历史"
+                name="maintenanceRecords"
+              >
+                <TextArea rows={3} disabled={true} />
+              </Form.Item>
+            </Col>
+          </Row>
+          }  
+        </Form> 
+      ) : (
+        <React.Fragment>
+          <Descriptions column={3}>
+            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
+            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>
+            {
+              <div>
+                <div>{highlightSearchContentByTerms(modelerData.name||'', terms)}</div>
+                {
+                  (causes||[]).map((cause, index) => {
+                    return (
+                      <div key={index} style={{ color: '#ff4d4f' }}>
+                      {cause||''}
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            }
+            </Descriptions.Item>
+            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>规范</div>} >{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}</Descriptions.Item>
+            <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据内容</div>}>{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
+          </Descriptions>  
+          {
+            !onlyShowRequireChange && <Divider style={{ margin: '0 0 15px' }} />
+          }
+          {
+            !onlyShowRequireChange && <Descriptions column={3}>
+              {/* <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>生成表类型</div>} >{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item> */}
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据表类型</div>} >{highlightSearchContentByTerms(modelerData.tableType||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据平台</div>} >{highlightSearchContentByTerms(modelerData.dataResidence||'', terms)}</Descriptions.Item>   
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据情况</div>} >{highlightSearchContentByTerms(modelerData.dataCircumstances||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>分布键</div>} >{highlightSearchContentByTerms(distributionDescription||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>分区键</div>} >{highlightSearchContentByTerms(partitionsDescription||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>技术主键</div>} >{highlightSearchContentByTerms(primaryDescription||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>类主键</div>} >{highlightSearchContentByTerms(semiPrimaryDescription||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>加载方式</div>} >{highlightSearchContentByTerms(modelerData.dataLoadingStrategy||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>更新时间</div>} >{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item>
+              <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>维护历史</div>} >
+                <div>
+                {
+                  (maintenanceRecords||[]).map((record, index) => {
+                    return <div key={index}>{record||''}</div>;
+                  })
+                }
+                </div>
+              </Descriptions.Item> 
+            </Descriptions>
+          }         
+        </React.Fragment>
+      ) 
+    }
+    </div>
+  )
+}
+
+export default ImportActionHeader;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportActionHeader.less

+.model-import-action-header {
+  .yy-form-item:nth-last-col {
+    margin-bottom: 24px;
+  }
+
+  .yy-form-item-has-error {
+    margin-bottom: 0px;
+  }
+
+  .yy-descriptions-row > th, .yy-descriptions-row > td {
+    padding-bottom: 15px;
+  }
+}
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportActionIndex.jsx

+import React, { useState, useCallback, useRef, useEffect, useContext } from 'react';
+import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Space } from 'antd';
+import { DeleteOutlined, CloseOutlined, CheckOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import update from 'immutability-helper';
+import { useClickAway } from 'ahooks';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
+
+import DebounceInput from './DebounceInput';
+import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
+import { showMessage, highlightSearchContentByTerms, inputWidth } from '../../../../util';
+import { EditModelContext } from './ContextManage';
+
+const { Option } = Select;
+
+const type = 'DragableIndexBodyRow';
+const MENU_ID = 'model-index-menu';
+
+const InputDebounce = DebounceInput(300)(Input);
+
+const TypesItem = ({ value, types, onChange }) => {
+
+  useEffect(() => {
+    if ((value?.name||'')==='' && (types||[]).length > 0) {
+      const filterTypes = (types||[]).filter(type => type.default===true);
+      if ((filterTypes||[]).length > 0) {
+        onChange && onChange(filterTypes[0]);
+      }
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  const onTypeChange = (val) => {
+    const filterTypes = (types||[]).filter(type => type.name===val);
+    if ((filterTypes||[]).length > 0) {
+      onChange && onChange(filterTypes[0]);
+    }
+  }
+
+  return (
+    <span onClick={e => e.stopPropagation()}>
+      <Select 
+        onChange={(val) => { onTypeChange && onTypeChange(val) }} 
+        value={value?.name} 
+        placeholder='请选择排序方式'
+      >
+      {
+        (types||[]).map((type, index) => {
+          return (
+            <Option key={index} value={type.name}>{type.displayName}</Option>
+          );
+        })
+      }
+      </Select>
+    </span>
+  );
+}
+
+const AttributesInputItem = ({ indexedAttribute = null, indexedAttributeOrder = null, attributes, onAttributeChange, onOrderChange, onDelete , className }) => {
+
+  return (
+    <Row align='middle' className={className} >
+      <Col span={4}>
+        <span>字段名称:</span>
+      </Col>
+      <Col span={6}>
+        <span onClick={e => e.stopPropagation()}>
+          <Select 
+            onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
+            value={indexedAttribute ? (indexedAttribute.name||'') : ''} 
+            placeholder='请选择字段名称'
+          >
+          {
+            (attributes||[]).map((attribute, index) => {
+              return (
+                ((attribute.name||'')==='') ? null : <Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
+              );
+            })
+          }
+          </Select>
+        </span>
+      </Col>
+      <Col span={1}></Col>
+      <Col span={2}>
+        <span>排序:</span>
+      </Col>
+      <Col span={6}>
+        <span onClick={e => e.stopPropagation()}>
+          <Select 
+            onChange={(value) => { onOrderChange && onOrderChange(value) }} 
+            value={indexedAttributeOrder||''} 
+            placeholder='请选择排序方式'
+          >
+            <Option value='DESC'>DESC</Option>
+            <Option value='ASC'>ASC</Option>
+          </Select>
+        </span>
+      </Col>
+      <Col span={1}></Col>
+      <Col span={1}>
+        <Tooltip title="删除">
+          <Button type="text" icon={<DeleteOutlined />} onClick={onDelete} />
+        </Tooltip>
+      </Col>
+    </Row> 
+  );
+}
+
+const AttributesInput = ({ value = {}, attributes, onChange }) => {
+  
+  const { indexedEasyDataModelAttributes, indexedAttributeOrders } = value;
+
+  const onAttributeChange = (value, index) => {
+
+    if (indexedEasyDataModelAttributes.findIndex(item => item.iid === value) !== -1) {
+      showMessage('warn', '字段不能重复选择');
+      return;
+    }
+
+    const newIndexedEasyDataModelAttributes = [...indexedEasyDataModelAttributes];
+
+    const _index = attributes.findIndex(item => item.iid === value);
+    newIndexedEasyDataModelAttributes.splice(index, 1, {...attributes[_index]});
+    triggerChange({
+      indexedEasyDataModelAttributes: newIndexedEasyDataModelAttributes
+    });
+  }
+
+  const onOrderChange = (value, index) => {
+    const newIndexedAttributeOrders = [...indexedAttributeOrders];
+    newIndexedAttributeOrders.splice(index, 1, value);
+    triggerChange({
+      indexedAttributeOrders: newIndexedAttributeOrders
+    })
+  }
+
+  const onItemDelete = (index) => {
+    const newIndexedEasyDataModelAttributes = [...indexedEasyDataModelAttributes];
+    const newIndexedAttributeOrders = [...indexedAttributeOrders];
+
+    newIndexedEasyDataModelAttributes.splice(index, 1);
+    newIndexedAttributeOrders.splice(index, 1);
+
+    if (newIndexedEasyDataModelAttributes.length === 0) {
+      newIndexedEasyDataModelAttributes.push({});
+    }
+    if (newIndexedAttributeOrders.length === 0) {
+      newIndexedAttributeOrders.push('');
+    }
+
+    triggerChange({
+      indexedEasyDataModelAttributes: newIndexedEasyDataModelAttributes,
+      indexedAttributeOrders: newIndexedAttributeOrders,
+    });
+  }
+
+  const addAttribute = () => {
+    triggerChange({
+      indexedEasyDataModelAttributes: [...indexedEasyDataModelAttributes, {}],
+      indexedAttributeOrders: [...indexedAttributeOrders, ''],
+    })
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange && onChange({
+      ...value,
+      ...changedValue,
+    });
+  };
+
+  return (
+    <React.Fragment>
+      {
+        (indexedEasyDataModelAttributes||[]).map((indexedAttribute, index) => {
+          return (
+            <AttributesInputItem 
+              key={index}
+              className='mb-2'
+              indexedAttribute={indexedAttribute}
+              indexedAttributeOrder={indexedAttributeOrders[index]||''}
+              attributes={attributes}
+              onAttributeChange={(value) => { onAttributeChange(value, index) } }
+              onOrderChange={(value) => { onOrderChange(value, index) }}
+              onDelete={(event) => { 
+                event.stopPropagation();
+                onItemDelete(index) 
+              }}
+            />
+          );
+        })
+      }
+      <Button onClick={addAttribute}>新增字段</Button>
+    </React.Fragment>
+  )
+}
+
+const EditableCell = ({
+  editing,
+  dataIndex,
+  colTitle,
+  inputType,
+  record,
+  index,
+  attributes,
+  types,
+  children,
+  ...restProps
+}) => {
+
+  let editingComponent = null;
+  if (editing) {
+    if (dataIndex!=='attributesWithOrders' && dataIndex!=='indextype') {
+
+      const inputNode = inputType === 'check' ? <Checkbox /> : <Input />
+
+      editingComponent = (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          valuePropName={(inputType==='check')? 'checked': 'value'}
+          rules={[
+            {
+              required: (inputType === 'text'),
+              message: `请输入${colTitle}!`,
+            },
+          ]}
+        >
+        { inputNode }
+        </Form.Item>
+      );
+    } else if (dataIndex === 'indextype') {
+
+      editingComponent = (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          valuePropName={'value'}
+          rules={[
+            {
+              required: true,
+              message: `请输入${colTitle}!`,
+            },
+          ]}
+        >
+          <TypesItem types={types} />
+        </Form.Item>
+      );
+
+    } else {
+      editingComponent = (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          valuePropName={'value'}
+          rules={[
+            {
+              required: true,
+              message: `请输入${colTitle}!`,
+            },
+          ]}
+          >
+          <AttributesInput attributes={attributes} />
+        </Form.Item>
+      )
+    }
+  }
+
+
+  return (
+    <td {...restProps}>
+      {editing ? (
+        editingComponent
+      ) : (
+        children
+      )}
+    </td>
+  );
+};
+
+const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
+
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop(
+    () => ({
+      accept: type,
+      collect: monitor => {
+
+        const { index: dragIndex } = monitor.getItem() || {};
+        if (dragIndex === index) {
+          return {};
+        }
+        return {
+          isOver: monitor.isOver(),
+          dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+        };
+      },
+      drop: item => {
+        if (moveRow) {
+          moveRow(item.index, index);
+        }
+      },
+    }),
+    [index],
+  );
+  const [, drag] = useDrag(
+    () => ({
+      type,
+      item: () => {
+        addEventListenerForSidebar("containerId");
+        return { index }; 
+      },
+      end: (_, __) => {
+        removeEventListenerForSidebar();
+      }, 
+      collect: monitor => ({
+        isDragging: monitor.isDragging(),
+      }),
+    }),
+    [index],
+  );
+  drop(drag(ref));
+
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
+};
+
+const ImportActionIndex = (props) => {
+  const { modelerData, onChange, editable, constraint, template, validateReports, terms, types } = props;
+
+  const [ attributes, setAttributes ] = useState([]);
+  const [ data, setData ] = useState([]);
+
+  const [ form ] = Form.useForm();
+  const [ editingKey, setEditingKey ] = useState(null);
+  const [ keywordCondition, setKeywordCondition ] = useState({ keyword: '', needFilter: true });
+  const { keyword, needFilter } = keywordCondition;
+
+  const [ filterData, setFilterData ] = useState([]);
+  const [ insertIndex, setInsertIndex ] = useState(0);
+  const [ currentItem, setCurrentItem ] = useState(null);
+
+  const { indexIsEditingFunction } = useContext(EditModelContext);
+
+  const dataRef = useRef();
+  dataRef.current = data;
+
+  const tableRef = useRef(null);
+  const termsRef = useRef(null);
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  useClickAway(() => {
+    save();
+  }, tableRef);
+
+  useEffect(() => {
+    indexIsEditingFunction && indexIsEditingFunction(editingKey!==null);
+    //eslint-disable-next-line react-hooks/exhaustive-deps    
+  }, [ editingKey ])
+  
+  //规则改变的时候 数据表为可编辑状态
+  useEffect(() => {
+    setEditingKey(null);
+  }, [constraint, template, modelerData])
+
+  useEffect(() => {
+    termsRef.current = terms;
+
+    setAttributes(modelerData.easyDataModelerDataModelAttributes||[]);
+    setData(modelerData.easyDataModelerIndices||[]);
+    dataRef.current = (modelerData.easyDataModelerIndices||[]);
+
+    const _filterData = (modelerData.easyDataModelerIndices||[]).filter(item => (item.name||'').indexOf(keyword)!==-1);
+
+    const __filterData = [];
+    (_filterData||[]).forEach(item => {
+
+      __filterData.push({...item, ...{ attributesWithOrders: {
+        indexedEasyDataModelAttributes: item.indexedEasyDataModelAttributes||[],
+        indexedAttributeOrders: item.indexedAttributeOrders||[],
+      } }});
+    })
+
+    setFilterData(__filterData);
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelerData, terms])
+
+  useEffect(() => {
+    if (needFilter) {
+      const _filterData = (modelerData.easyDataModelerIndices||[]).filter(item => (item.name||'').indexOf(keyword)!==-1);
+
+      const __filterData = [];
+      (_filterData||[]).forEach(item => {
+  
+        __filterData.push({...item, ...{ attributesWithOrders: {
+          indexedEasyDataModelAttributes: item.indexedEasyDataModelAttributes||[],
+          indexedAttributeOrders: item.indexedAttributeOrders||[],
+        } }});
+      })
+  
+      setFilterData(__filterData);
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keywordCondition])
+  
+  const isEditing = (record) => record.name === editingKey;
+
+  const onAddClick = (event) => {
+    event.stopPropagation(); 
+
+    save().then(result => {
+      if (result) {
+
+        setKeywordCondition({ keyword: '', needFilter: false });
+
+        const newData = [...dataRef.current, {name: ''}];
+
+        setFilterData(newData);    
+        setInsertIndex(newData.length-1);
+        edit(newData[newData.length-1], false);   
+      }
+    })
+  }
+
+  const insertToFront = (record) => {
+    save().then(result => {
+
+      if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
+        let newData = [...dataRef.current];
+
+        const index = newData.findIndex((item) => record.name === item.name);
+
+        if (index === -1) {
+
+          if (insertIndex === 0) {
+            newData = [{name: ''}, ...newData];
+  
+            edit(newData[0], false);
+          } else {
+            newData.splice(insertIndex, 0, {name: ''});
+            edit(newData[insertIndex], false);
+          }
+
+        } else if (index === 0) {
+          newData = [{name: ''}, ...newData];
+
+          setInsertIndex(0);
+          edit(newData[0], false);
+        } else {
+          newData.splice(index, 0, {name: ''});
+          setInsertIndex(index);
+          edit(newData[index], false);
+        }
+
+        setFilterData(newData);
+      }
+    })
+  }
+
+  const insertToBack = (record) => {
+    save().then(result => {
+      if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
+        const newData = [...dataRef.current];
+        const index = newData.findIndex((item) => record.name === item.name);
+
+        if (index === -1) {
+          newData.splice(insertIndex+1, 0, {name: ''});
+          setFilterData(newData);
+          
+          setInsertIndex(insertIndex+1);
+          edit(newData[insertIndex+1], false);
+        } else {
+          newData.splice(index+1, 0, {name: ''});
+          setFilterData(newData);
+          
+          setInsertIndex(index+1);
+          edit(newData[index+1], false);
+        }
+      }
+    })
+  }
+
+  const editLogic = (record) => {
+    form.resetFields();
+    form.setFieldsValue({
+      name: '',
+      attributesWithOrders: {
+        indexedEasyDataModelAttributes: [{}],
+        indexedAttributeOrders: [''],
+      },
+      indextype: {},
+      unique: false,
+      ...record,
+    });
+
+    setEditingKey(record?.name);
+  }
+
+  const edit = (record, needSave = true) => {
+
+    if (needSave) {
+      save().then(result => {
+        if (result) {
+          editLogic(record);
+        }
+      })
+    } else {
+      editLogic(record);
+    }
+  };
+
+  const removeLogic = (record) => {
+    const newData = [...dataRef.current];
+    const index = newData.findIndex((item) => record.name === item.name);
+  
+    if (index !== -1) {
+      newData.splice(index, 1);
+    }
+
+    onChange && onChange(newData);
+  }
+
+  const remove = (record) => {
+
+    if (record.name === '') {
+      const newData = [...dataRef.current];
+      onChange && onChange(newData);
+    } else {
+      if (record.name !== editingKey) {
+        save().then(result => {
+          if (result) {
+            removeLogic(record);
+          }
+        })
+      } else {
+        removeLogic(record);
+      }
+    }
+
+    save().then(result => {
+      if (result) {
+        const newData = [...dataRef.current];
+        const index = newData.findIndex((item) => record.name === item.name);
+    
+        if (index !== -1) {
+          newData.splice(index, 1);
+        }
+    
+        onChange && onChange(newData);
+      }
+    })
+  }
+
+  const save = async() => {
+    try {
+      if (editingKey!==null) {
+        const row = await form.validateFields();
+
+        // console.log('row', row);  
+        
+        const newData = [...data];
+        const index = newData.findIndex((item) => editingKey === item.name);
+    
+        //判断索引名称是否唯一
+        let _index;
+        if (index === -1) {
+          _index = (data||[]).findIndex(item => item.name === row.name);
+        } else {
+          const newDataExcludeSelf = [...data];
+          newDataExcludeSelf.splice(index, 1);  
+          _index = (newDataExcludeSelf||[]).findIndex(item => item.name === row.name);
+        }
+
+        if (_index !== -1) {
+          form.setFields([{ name: 'name', errors: ['索引名称不能重复'] }]);
+          return;
+        }
+
+        const _indexedEasyDataModelAttributes = [], _indexedAttributeOrders = [];
+        row.attributesWithOrders.indexedEasyDataModelAttributes.forEach((item, index) => {
+          if ((item.iid||'')!=='') {
+            _indexedEasyDataModelAttributes.push(item);
+            _indexedAttributeOrders.push(row.attributesWithOrders.indexedAttributeOrders[index]);
+          }
+        })
+
+        if (_indexedEasyDataModelAttributes.length === 0) {
+          form.setFields([{ name: 'attributesWithOrders', errors: ['必须选择字段'] }]);
+          return;
+        }
+
+        if (index === -1) {
+
+          newData.splice(insertIndex, 0 , {
+            name: row.name,
+            unique: row.unique,
+            indextype: row.indextype,
+            indexedEasyDataModelAttributes: _indexedEasyDataModelAttributes,
+            indexedAttributeOrders: _indexedAttributeOrders,
+          });
+
+        } else {
+          newData.splice(index, 1, {...{
+            name: row.name,
+            unique: row.unique,
+            indextype: row.indextype,
+            indexedEasyDataModelAttributes: _indexedEasyDataModelAttributes,
+            indexedAttributeOrders: _indexedAttributeOrders,
+          }});
+        }
+
+        dataRef.current = newData;
+    
+        onChange && onChange(newData, true);
+
+        setEditingKey(null);
+      }
+
+      return true;
+      
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+      return false;
+    }
+  };
+
+  const onValuesChange = (changedValues, allValues) => {
+    // console.log('changed values', changedValues);
+    // console.log('all values', allValues);
+  };
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      width: 60,
+      render: (_, __, index) => {
+        return (index+1).toString();
+      }
+    },
+    {
+      title: '索引名称',
+      width: 200,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+      render: (text, record, index) => {
+        return (
+          <Tooltip title={text||''}>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, termsRef.current)}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '索引类型',
+      width: 200,
+      dataIndex: 'indextype',
+      editable: true,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return (
+          <Tooltip title={record.indextype?.displayName||''}>
+          <span >{highlightSearchContentByTerms(record.indextype?.displayName||'', termsRef.current)}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '是否唯一索引',
+      width: 200,
+      dataIndex: 'unique',
+      editable: true,
+      render: (unique, _, __) => {
+        if (unique === false) {
+          return ( 
+            <CloseOutlined />
+          );
+        } else if (unique === true) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '索引字段列表',
+      dataIndex: 'attributesWithOrders',
+      editable: true,
+      ellipsis: true,
+      render: (_, record, index) => {
+
+        return (
+          <div>
+          {
+            (record.indexedEasyDataModelAttributes||[]).map((item, index) => {
+
+              const order = record.indexedAttributeOrders[index]||'';
+
+              return (
+                <Row key={index}>
+                  <span>字段: </span>
+                  { highlightSearchContentByTerms(item.name||'', termsRef.current) }
+                  <span>{` 排序:  ${order||''}`}</span>
+                </Row>
+              )
+            })
+          }
+          </div>
+        );
+      }
+    },
+  ];
+
+  const editableColumn = [
+    ...columns,
+    {
+      title: '操作',
+      dataIndex: 'action',
+      width: 180,
+      render: (_, record) => {
+        if (!editable) return null;
+
+        return (
+          <React.Fragment>
+            <Button 
+              className='mr-3' 
+              size='small'
+              type='text' 
+              icon={<PlusOutlined />} 
+              onClick={(event) => { 
+                event.stopPropagation();
+                insertToFront(record); 
+              }}
+            />
+
+            <Button 
+              className='mr-3' 
+              size='small'
+              type='text' 
+              icon={<DeleteOutlined style={{ color: 'red' }} />} 
+              onClick={(event) => { 
+                event.stopPropagation();
+                remove(record); 
+              }}
+            />
+          </React.Fragment>
+        )
+      },
+    },
+  ]
+
+  const validateColumn = {
+    title: '规范',
+    dataIndex: 'validate',
+    width: 180,
+    ellipsis: true,
+    render: (text, record, index) => {
+      let shortCauses = []; 
+      let causes = [];
+      (validateReports||[]).forEach((report) => {
+        if (report.type==='Index' && report.iid === record.name) {
+          (report.reportItems||[]).forEach((item) => {
+            shortCauses.push(item.shortCause||'');
+            causes.push(item.cause||'');
+          })
+        }
+      });
+
+      return (
+        <div className='d-flex' key={index} style={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <div>
+          {
+            shortCauses && shortCauses.map((shortCause, index) => {
+              return (
+                <Tooltip key={index} title={shortCause}>
+                  <div className='textOverflow' style={{ width: 130, color: '#f5222d' }} title={shortCause} key={index}>
+                    <span>{shortCause||''}</span>
+                  </div>
+                </Tooltip>
+              );
+            })
+          }
+          </div>
+          {
+            (causes||[]).length>0 && <Popover
+              content={
+                <div style={{ maxWidth: 200, maxHeight: 200, wordWrap: 'break-word', overflow: 'auto'  }}>
+                {
+                  causes && causes.map((cause, index) => {
+                    return (
+                      <Typography.Paragraph key={index} >
+                      {cause||''}
+                      </Typography.Paragraph>
+                    )
+                  })
+                }
+                </div>
+              }
+              title="规则详情"
+            >     
+              <a href="#">详情</a>     
+            </Popover>
+          }
+        </div>
+      )
+    }
+  };
+
+  const includeValidateColumn = [
+    ...columns,
+    validateColumn
+  ]
+
+  const includeValidateEditableColumn = [
+    ...editableColumn,
+    validateColumn
+  ]
+
+  const mergedColumns = () => {
+    const hasValidateReports = (validateReports||[]).filter(report => report.type==='Index').length>0;
+
+    if (editable) {
+
+      let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
+
+      return _columns.map((col) => {
+        if (!col.editable) {
+          return col;
+        }
+    
+        return {
+          ...col,
+          onCell: (record) => ({
+            record,
+            dataIndex: col.dataIndex,
+            inputType:  (col.dataIndex==='unique') ? 'check' : 'text',
+            colTitle: col.title,
+            editing: isEditing(record),
+            attributes,
+            types,
+          }),
+        };
+      });
+    }
+
+    return hasValidateReports ? includeValidateColumn : columns;
+  }
+
+  const moveRow = useCallback(
+    (dragIndex, hoverIndex) => {
+
+      const dragRow = dataRef.current[dragIndex];
+      const newData = update(dataRef.current, {
+        $splice: [
+          [dragIndex, 1],
+          [hoverIndex, 0, dragRow],
+        ],
+      })
+      onChange && onChange(newData);
+    },
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    [dataRef.current],
+  );
+
+  const onSearchInputChange = (value) => {
+    setEditingKey(null);
+    setKeywordCondition({ keyword: value||'', needFilter: true });
+  }
+
+  const displayMenu = (e) => {
+    show({
+      event: e
+    })
+  }
+
+  const handleItemClick = ({ id, event, props }) => {
+    if (id === 'up') {
+      insertToFront(currentItem);
+    } else if (id === 'down') {
+      insertToBack(currentItem);
+    }
+  }
+
+  return (
+    <div className='model-import-action-index'>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
+        <Space>
+          <h2 style={{ marginBottom: 0 }}>数据表索引</h2>
+          { 
+            editable && <Popover content='点击行进行编辑,表格可以通过拖拽来排序'>
+              <QuestionCircleOutlined className='pointer' /> 
+            </Popover> 
+          }
+        </Space>
+        <Space>
+          { 
+            editable && <Tooltip>
+              <Button onClick={onAddClick} >新建</Button>
+            </Tooltip>
+          }
+          <div className='d-flex' style={{ alignItems: 'center' }}>
+            <InputDebounce 
+              placeholder="请输入索引名称" 
+              allowClear 
+              value={keyword}
+              onChange={onSearchInputChange} 
+              style={{ width: inputWidth }}
+            />
+          </div>
+        </Space>
+      </div>
+      <div className='mb-3' id="containerId" ref={tableRef}>
+        <DndProvider backend={HTML5Backend} >
+          <Form form={form} component={false} onValuesChange={onValuesChange}>
+            <Table
+              components={{
+                body: {
+                  cell: EditableCell,
+                  //编辑或者搜索状态下不允许拖动
+                  row: (editable&&editingKey===null&&keyword==='')?DragableBodyRow:null,
+                },
+              }}
+              onRow={(record, index) => {
+                let rowParams = {
+                  index,
+                };
+
+                if (editable) {
+                  rowParams = {...rowParams, onContextMenu: event => {
+                      setCurrentItem(record);
+                      displayMenu(event);
+                    }
+                  };
+
+                  if (!isEditing(record)) {
+                    rowParams = {...rowParams, onClick: (event) => {
+                        event.stopPropagation();
+                        edit(record);
+                      }
+                    }
+
+                    if (keyword.length===0) {
+                      rowParams = {...rowParams, moveRow};
+                    }
+                  }
+                }
+
+                return rowParams;
+              }}
+              dataSource={filterData||[]}
+              columns={mergedColumns()}
+              size='small'
+              rowKey='name'
+              rowClassName="editable-row"
+              pagination={false}
+              sticky
+              scroll={{
+                x: 1200
+              }}
+            />
+          </Form>
+        </DndProvider>
+
+        <RcMenu id={MENU_ID} >
+          <RcItem id="up" onClick={handleItemClick}>
+            在上方插入行
+          </RcItem>
+          <RcItem id="down" onClick={handleItemClick}>
+            在下方插入行
+          </RcItem>
+        </RcMenu>
+      </div>
+    </div>
+  );
+};
+
+export default ImportActionIndex;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportActionPartition.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Typography, Button, Select, Row, Col, Tooltip, Table } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+
+import { showMessage, highlightSearchContentByTerms } from '../../../../util';
+
+const { Option } = Select;
+
+const PartitionTypeInput = ({ value = {}, partitionTypes, onChange }) => {
+
+  const onNameChange = (value) => {
+
+    let currentPartitionType = {}; 
+    (partitionTypes||[]).forEach((partitionType, index) => {
+      if (value === partitionType.name) {
+        currentPartitionType = partitionType;
+      }
+    })
+
+    triggerChange(currentPartitionType);
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange && onChange(changedValue);
+  };
+
+  //value有可能为空
+  value = value ? value: {};
+
+  return (
+    <>
+      <Row align='middle'>
+        <Col span={9}>
+          <span>名称:</span>
+        </Col>
+        <Col span={15}>
+          <Select 
+            onChange={onNameChange} 
+            value={value.name || ''} 
+            placeholder='请选择类型名称'
+          >
+          {
+            (partitionTypes||[]).map((partitionType, index) => {
+              return (
+                <Option key={partitionType.name||''}>{partitionType.name||''}</Option>
+              );
+            })
+          }
+          </Select>
+        </Col>
+      </Row> 
+    </>
+  )
+}
+
+const AttributesInputItem = ({ indexedAttribute = null, attributes, onAttributeChange, onDelete , className }) => {
+
+  return (
+    <Row align='middle' className={className} >
+      <Col span={4}>
+        <span>字段名称:</span>
+      </Col>
+      <Col span={6}>
+        <Select 
+          onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
+          value={indexedAttribute ? (indexedAttribute.name||'') : ''} 
+          placeholder='请选择字段名称'
+        >
+        {
+          (attributes||[]).map((attribute, index) => {
+            return (
+              ((attribute.name||'')==='') ? null : <Option key={index} value={attribute.iid||''}>{attribute.name||''}</Option>
+            );
+          })
+        }
+        </Select>
+      </Col>
+      <Col span={1}></Col>
+      <Col span={1}>
+        <Tooltip title="删除">
+          <Button type="text" icon={<DeleteOutlined />} onClick={onDelete} />
+        </Tooltip>
+      </Col>
+    </Row> 
+  );
+}
+
+const AttributesInput = ({ value = [], attributes, onChange }) => {
+  
+  const indexedEasyDataModelAttributes = value;
+
+  const onAttributeChange = (value, index) => {
+
+    if (indexedEasyDataModelAttributes.findIndex(item => item.iid === value) !== -1) {
+      showMessage('warn', '字段不能重复选择');
+      return;
+    }
+
+    const newIndexedEasyDataModelAttributes = [...indexedEasyDataModelAttributes];
+
+    const _index = attributes.findIndex(item => item.iid === value);
+    newIndexedEasyDataModelAttributes.splice(index, 1, {...attributes[_index]});
+    triggerChange(newIndexedEasyDataModelAttributes);
+  }
+
+  const onItemDelete = (index) => {
+    const newIndexedEasyDataModelAttributes = [...indexedEasyDataModelAttributes];
+
+    newIndexedEasyDataModelAttributes.splice(index, 1);
+
+    if (newIndexedEasyDataModelAttributes.length === 0) {
+      newIndexedEasyDataModelAttributes.push({});
+    }
+
+    triggerChange(newIndexedEasyDataModelAttributes);
+  }
+
+  const addAttribute = () => {
+    triggerChange([...indexedEasyDataModelAttributes, {}])
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange && onChange(changedValue);
+  };
+
+  return (
+    <>
+      {
+        (indexedEasyDataModelAttributes||[]).map((indexedAttribute, index) => {
+          return (
+            <AttributesInputItem 
+              key={index}
+              className='mb-2'
+              indexedAttribute={indexedAttribute}
+              attributes={attributes}
+              onAttributeChange={(value) => { onAttributeChange(value, index) } }
+              onDelete={() => { onItemDelete(index) }}
+            />
+          );
+        })
+      }
+      <Button onClick={addAttribute}>新增字段</Button>
+    </>
+  )
+}
+
+const EditableCell = ({
+  editing,
+  dataIndex,
+  colTitle,
+  inputType,
+  record,
+  index,
+  attributes,
+  partitionTypes,
+  children,
+  ...restProps
+}) => {
+
+  let editingComponent = null;
+  if (editing) {
+    editingComponent = (
+      <Form.Item
+        name={dataIndex}
+        style={{
+          margin: 0,
+        }}
+        valuePropName={'value'}
+        rules={[
+          {
+            required: true,
+            message: `请输入${colTitle}!`,
+          },
+        ]}
+        >
+      { (dataIndex==='keys') ? <AttributesInput attributes={attributes} /> : <PartitionTypeInput partitionTypes={partitionTypes} /> }
+      </Form.Item>
+    )
+  }
+
+
+  return (
+    <td {...restProps}>
+      {editing ? (
+        editingComponent
+      ) : (
+        children
+      )}
+    </td>
+  );
+};
+
+const ImportActionPartition = (props) => {
+  const { modelerData, onChange, editable, constraint, template, terms, supportedPartitionTypes } = props;
+
+  const [ attributes, setAttributes ] = useState([]);
+  const [ data, setData ] = useState(null);
+
+  const [ form ] = Form.useForm();
+  const [ isEditing, setIsEditing ] = useState(false);
+  
+  //规则改变的时候 数据表为可编辑状态
+  useEffect(() => {
+    setIsEditing(false);
+  }, [constraint, template, modelerData])
+
+  useEffect(() => {
+
+    setAttributes(modelerData.easyDataModelerDataModelAttributes||[]);
+
+    setData(modelerData?.partition);
+
+  }, [modelerData])
+  
+  const onAddClick = () => {
+
+    if (!data) {
+      setData({
+        partitionType: {},
+        keys: [],
+      });
+      form.setFieldsValue({
+        type: {},
+        keys: [],
+      });
+
+      setIsEditing(true);
+    }
+  }
+
+  const edit = (record) => {
+    form.setFieldsValue({type: record.partitionType, keys: record.keys});
+    setIsEditing(true);
+  }
+
+  const remove = (record) => {
+    setData(null);
+    onChange && onChange(null);
+  }
+
+  const cancel = () => {
+    setIsEditing(false);
+    if (!data?.partitionType?.name) {
+      setData(null);
+    }
+  };
+
+  const save = async() => {
+    try {
+      const row = await form.validateFields();
+
+      if (!row.type?.name) {
+        form.setFields([{ name: 'type', errors: ['必须选择分区类型'] }]);
+        return;
+      }
+
+      const _names = [];
+      (row.keys||[]).forEach(item => {
+        if ((item.name||'')!=='') {
+          _names.push(item.name);
+        }
+      })
+
+      if ((_names||[]).length === 0) {
+        form.setFields([{ name: 'keys', errors: ['必须选择字段'] }]);
+        return;
+      }
+
+
+      const newData = {
+        partitionType: row.type,
+        keys: row.keys
+      }
+  
+      onChange && onChange(newData, true);
+
+      setIsEditing(false);
+      
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+
+  const onValuesChange = (changedValues, allValues) => {
+    // console.log('changed values', changedValues);
+    // console.log('all values', allValues);
+  };
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      width: 60,
+      render: (_, __, index) => {
+        return (index+1).toString();
+      }
+    },
+    {
+      title: '分区类型',
+      width: 200,
+      dataIndex: 'type', //注意 这里type改成partitionType会崩溃 暂不清楚是什么问题
+      editable: true,
+      ellipsis: true,
+      render: (text, record, index) => {
+        return (
+          <Tooltip title={text||''}>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(record?.partitionType?.name, terms)}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '分区字段列表',
+      dataIndex: 'keys',
+      editable: true,
+      ellipsis: true,
+      render: (_, record, index) => {
+
+        return (
+          <div>
+          {
+            (record.keys||[]).map((item, index) => {
+              return (
+                <Row key={index}>
+                  <span>字段: </span>
+                  { highlightSearchContentByTerms(item.name||'', terms) }
+                </Row>
+              )
+            })
+          }
+          </div>
+        );
+      }
+    },
+  ];
+
+  const editableColumn = [
+    ...columns,
+    {
+      title: '操作',
+      dataIndex: 'action',
+      width: 180,
+      render: (_, record) => {
+        if (!editable) return null;
+
+        return isEditing ? (
+          <>
+            <Typography.Link className='mr-3' onClick={() => save()}>
+              保存
+            </Typography.Link>
+            <Typography.Link onClick={() => {cancel()}}>
+              取消
+            </Typography.Link>
+            </>
+        ) : (
+          <>
+            <Typography.Link className='mr-3' onClick={() => edit(record)}>
+              编辑
+            </Typography.Link>
+            <Typography.Link className='mr-3' onClick={() => remove(record)}>
+              删除
+            </Typography.Link>
+          </>
+        );
+      },
+    },
+  ]
+
+  const mergedColumns = () => {
+
+    if (editable) {
+
+      return editableColumn.map((col) => {
+        if (!col.editable) {
+          return col;
+        }
+    
+        return {
+          ...col,
+          onCell: (record) => ({
+            record,
+            dataIndex: col.dataIndex,
+            inputType:  (col.dataIndex==='unique') ? 'check' : 'text',
+            colTitle: col.title,
+            editing: isEditing,
+            attributes,
+            partitionTypes: supportedPartitionTypes,
+          }),
+        };
+      });
+    }
+
+    return columns;
+  }
+
+  let disableAdd = false, addTip = '';
+  if (isEditing) {
+    disableAdd = true;
+    addTip = '正在编辑中,不允许新建';
+  } else if (data) {
+    disableAdd = true;
+    addTip = '已存在分区,不允许再新建';
+  }
+
+  return (
+    <div className='model-import-action-index'>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
+        <h2 style={{ marginBottom: 0 }}>数据表分区</h2> 
+        {
+          editable && <Tooltip title={addTip}>
+            <Button onClick={onAddClick} disabled={disableAdd} >新建</Button>
+          </Tooltip>
+        }
+      </div>
+      <div className='mb-3' id="containerId">
+        <Form form={form} component={false} onValuesChange={onValuesChange}>
+          <Table
+            components={{
+              body: {
+                cell: EditableCell,
+                row: null,
+              },
+            }}
+            dataSource={data?[data]:[]}
+            columns={mergedColumns()}
+            size='small'
+            rowClassName="editable-row"
+            pagination={false}
+            sticky
+          />
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default ImportActionPartition;
\ No newline at end of file

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

+import React, { useState, useCallback, useRef, useEffect, useContext } from 'react';
+import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination, Space } from 'antd';
+import { CheckOutlined, PlusOutlined, QuestionCircleOutlined, DeleteOutlined } from '@ant-design/icons';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import update from 'immutability-helper';
+import { useClickAway } from 'ahooks';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
+import ResizeObserver from 'rc-resize-observer';
+import { Resizable } from 'react-resizable';
+
+import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
+import { dispatch, dispatchLatest } from '../../../../model'; 
+import { addEventListenerForSidebar, removeEventListenerForSidebar } from './Help';
+import { AppContext } from '../../../../App';
+import DebounceInput from './DebounceInput';
+import SuggestTable from './SuggestTable';
+import { AttentionSvg, UnAttentionSvg } from './ModelSvg';
+import { EditModelContext } from './ContextManage';
+
+import './ImportActionTable.less';
+
+const { Option } = Select;
+
+const type = `DragableTableBodyRow${generateUUID()}`;
+const perSuggestCount = 5;
+const supportMaxAttributeCountPerPage = 100;
+const MENU_ID = 'model-attribute-menu';
+
+const InputDebounce = DebounceInput(300)(Input);
+
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
+export const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
+
+  const onNameChange = (value) => {
+
+    let currentDatatype = {}; 
+    (datatypes||[]).forEach((datatype, index) => {
+      if (value === datatype.name) {
+        currentDatatype = datatype;
+      }
+    })
+
+    triggerChange({ 
+      name: value,
+      cnName: currentDatatype.cnName,
+      parameterNames: currentDatatype.parameterNames,
+      parameterCnNames: currentDatatype.parameterCnNames,
+      parameterValues: currentDatatype.parameterValues
+    });
+  }
+
+  const onParameterValuesChange = (e, index) => {
+
+    const parameterValue = e.target.value;
+    const reg = /^-?\d*(\.\d*)?$/;
+    if ((!isNaN(parameterValue) && reg.test(parameterValue)) || parameterValue === '') {
+      const newParameterValues = [...(value.parameterValues||[])];
+
+      //默认为0
+      newParameterValues[index] = parameterValue;
+      triggerChange({ parameterValues: newParameterValues });
+    }
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange && onChange({
+      ...value,
+      ...changedValue,
+    });
+  };
+
+  //value有可能为空
+  value = value ? value: {};
+
+  return (
+    <>
+      <Row align='middle'>
+        <Col span={9}>
+          <span>名称:</span>
+        </Col>
+        <Col span={15}>
+          <span onClick={e => e.stopPropagation()}>
+            <Select 
+              onChange={onNameChange} 
+              value={value.name || ''} 
+              placeholder='请选择类型名称'
+            >
+            {
+              (datatypes||[]) && datatypes.map((_datatype, index) => {
+                return (
+                  <Option key={_datatype.name||''}>{_datatype.name||''}</Option>
+                );
+              })
+            }
+            </Select>
+          </span>
+        </Col>
+      </Row> 
+      {
+        (value.parameterCnNames||[]).map((parameterCnName, index) => {
+          //使用InputNumber:当value改变时 InputNumber显示值没改变 但实际值有改变 是ant design的bug 这里使用只能输入数字的Input
+          return (
+            <Row key={index} className='mt-2' align='middle'>
+              <Col span={9}>
+                <span>{`${parameterCnName||''}:`}</span>
+              </Col>
+              <Col span={15}>
+                <Input        
+                  onChange={(e) => {
+                    onParameterValuesChange(e, index);
+                  }}  
+                  value={value.parameterValues[index] || ''} 
+                  style={{ width: '100%' }}
+                  placeholder='请输入一个整数'
+                />
+              </Col>
+            </Row>
+          );
+        })
+      }
+    </>
+  )
+}
+
+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>
+  );
+};
+
+export const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
+
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop(
+    () => ({
+      accept: type,
+      collect: monitor => {
+
+        const { index: dragIndex } = monitor.getItem() || {};
+        if (dragIndex === index) {
+          return {};
+        }
+        return {
+          isOver: monitor.isOver(),
+          dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+        };
+      },
+      drop: item => {
+        if (moveRow) {
+          moveRow(item.index, index);
+        }
+      },
+    }),
+    [index, moveRow],
+  );
+  const [, drag] = useDrag(
+    () => ({
+      type,
+      item: () => {
+        addEventListenerForSidebar("containerId");
+        return { index }; 
+      },
+      end: (_, __) => {
+        removeEventListenerForSidebar();
+      }, 
+      collect: monitor => ({
+        isDragging: monitor.isDragging(),
+      }),
+    }),
+    [index, moveRow],
+  );
+  drop(drag(ref));
+
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
+};
+
+export const ImportActionTable = (props) => {
+  const { modelerData, onChange, editable, supportedDatatypes, constraint, template, validateReports, type = 'model', terms, action, originAction } = props;
+  const [ data, setData ] = useState([]);
+
+  const [ form ] = Form.useForm();
+  const [ editingKey, setEditingKey ] = useState('');
+  const [ loadingSuggest, setLoadingSuggest ] = useState(false);
+  const [ suggests, setSuggests ] = useState([]);
+  const [ suggestHaveMore, setSuggestHaveMore ] = useState(false);
+  const [ suggestOffset, setSuggestOffset ] = useState(1);
+  const [ currentChangedValues, setCurrentChangedValues] = useState({});
+  const [ englishSuggests, setEnglishSuggests ] = useState([]);
+  const [ keywordCondition, setKeywordCondition ] = useState({ keyword: '', needFilter: true });
+  const { keyword, needFilter } = keywordCondition;
+  const [ tableWidth, setTableWidth ] = useState(0);
+
+  const [ filterPageCondition, setFilterPageCondition ] = useState({ pageNum: 1, pageSize: supportMaxAttributeCountPerPage, filterData: [] });
+  const [ filterPageData, setFilterPageData ] = useState([]);
+  const { pageNum, pageSize, filterData } = filterPageCondition;
+  const [ insertIndex, setInsertIndex ] = useState(0);
+  const [ currentItem, setCurrentItem ] = useState(null);
+
+  const { attrIsEditingFunction } = useContext(EditModelContext);
+
+  const moveRowRef = useRef({ data, pageNum, pageSize });
+  const tableRef = useRef(null);
+  const termsRef = useRef(null);
+  const autoTranslateRef = useRef(false);
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      width: 60,
+      fixed: 'left',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      }
+    },
+    {
+      title: '中文名称',
+      width: 200,
+      dataIndex: 'cnName',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      fixed: 'left',
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+          <span>
+          {highlightSearchContentByTerms(text, termsRef.current)}
+          </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '英文名称',
+      width: 200,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      render: (text, record, index) => {
+        return (
+          <Tooltip title={text||''}>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, termsRef.current)}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '类型',
+      width: (editingKey!=='')?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 '';
+      }
+    },
+    {
+      title: 'Not Null',
+      width: 80,
+      dataIndex: 'notNull',
+      editable: (type==='model'?true:false),
+      render: (notNull, record, index) => {
+        if (!notNull) {
+          return '-'; 
+        } else if (notNull) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '主键',
+      width: 50,
+      dataIndex: 'partOfPrimaryKeyLogically',
+      editable: (type==='model'?true:false),
+      render: (partOfPrimaryKeyLogically, record, index) => {
+        if (!partOfPrimaryKeyLogically) {
+          return '-'; 
+        } else if (partOfPrimaryKeyLogically === true) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '外键',
+      width: 50,
+      dataIndex: 'foreignKey',
+      editable: (type==='model'?true:false),
+      render: (foreignKey, record, index) => {
+        if (!foreignKey) {
+          return '-'; 
+        } else if (foreignKey === true) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    // {
+    //   title: '重点关注',
+    //   width: 75,
+    //   dataIndex: 'needAttention',
+    //   editable: (type==='model'?true:false),
+    //   render: (needAttention, record, index) => {
+    //     if (!needAttention) {
+    //       return '-'; 
+    //     } else if (needAttention === true) {
+    //       return (
+    //         <CheckOutlined />
+    //       )
+    //     }
+
+    //     return '';
+    //   }
+    // },
+    {
+      title: '业务含义',
+      dataIndex: 'remark',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      width: 200,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, termsRef.current)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '默认值',
+      dataIndex: 'defaultValue',
+      editable: true,
+      ellipsis: true,
+      width: 100,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, termsRef.current)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '计算规则',
+      dataIndex: 'definition',
+      editable: true,
+      ellipsis: true,
+      width: 200,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, termsRef.current)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '值域',
+      dataIndex: 'valueRange',
+      editable: true,
+      ellipsis: true,
+      width: 100,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, termsRef.current)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+  ];
+
+  const [ columns, setColumns ] = useState(cols);
+
+  useClickAway(() => {
+    save();
+  }, tableRef);
+
+  useEffect(() => {
+    attrIsEditingFunction && attrIsEditingFunction(editingKey!=='');
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ editingKey ])
+
+  //规则改变的时候 数据表为可编辑状态
+  useEffect(() => {
+    setEditingKey('');
+  }, [constraint, template, modelerData])
+
+  useEffect(() => {
+    termsRef.current = terms;
+    setData(modelerData?.easyDataModelerDataModelAttributes||[]);
+
+    moveRowRef.current.data = (modelerData?.easyDataModelerDataModelAttributes||[]);
+
+    let _filterData = (modelerData?.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
+
+    setFilterPageCondition({...filterPageCondition, filterData: _filterData});
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelerData, terms])
+
+  useEffect(() => {
+    if (needFilter) {
+      let _filterData = (modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
+
+      setFilterPageCondition({...filterPageCondition, ...{filterData: _filterData, pageNum: 1} });
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keywordCondition])
+
+  useEffect(() => {
+    moveRowRef.current.pageNum = pageNum;
+    moveRowRef.current.pageSize = pageSize;
+
+    if (filterData.length > supportMaxAttributeCountPerPage) {
+
+      let _filterPageData = paginate(filterData, pageNum, pageSize);
+
+      if ((_filterPageData||[]).length===0 && pageNum > 1) {
+        setFilterPageCondition({...filterPageCondition, pageNum: (pageNum-1)});
+        moveRowRef.current.pageNum = pageNum - 1;
+      } else {
+        setFilterPageData(_filterPageData);
+      }
+    } else {
+      setFilterPageData(filterData);
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterPageCondition])
+
+  useEffect(() => {
+    mergedColumns();
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validateReports, editable, editingKey])
+
+  const isEditing = (record) => record?.iid === editingKey;
+
+  const onAddClick = (event) => {
+
+    event.stopPropagation();  
+
+    save().then(result => {
+      if (result) {
+
+        setKeywordCondition({ keyword: '', needFilter: false });
+
+        const iid = generateUUID();
+        const newData = [...moveRowRef.current.data, {iid}];
+        
+        if (newData.length > supportMaxAttributeCountPerPage) {
+          
+          const totalNum = parseInt(newData.length/supportMaxAttributeCountPerPage) + ((newData.length%supportMaxAttributeCountPerPage===0)?0:1);
+          
+          setFilterPageCondition({...filterPageCondition, ...{ filterData: newData, pageNum: totalNum }});
+        } else {
+          setFilterPageCondition({...filterPageCondition, ...{ filterData: newData}});
+        }
+    
+        setInsertIndex(newData.length-1);
+    
+        edit(newData[newData.length-1], false);
+        setTimeout(() => {
+          document.getElementById(`field-${iid}`)?.scrollIntoView();
+        }, 200)
+      }
+    })
+  }
+
+  const insertToFront = (record) => {
+    save().then(result => {
+      if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
+        let newData = [...moveRowRef.current.data];
+        const index = newData.findIndex((item) => record.iid === item.iid);
+
+        const iid = generateUUID();
+
+        if (index === 0) {
+          newData = [{iid}, ...newData];
+          setInsertIndex(0);
+          edit(newData[0], false);
+        } else {
+          newData.splice(index, 0, {iid});
+          setInsertIndex(index);
+          edit(newData[index], false);
+        }
+
+        const _pageNum = parseInt((index+1)/supportMaxAttributeCountPerPage) + (((index+1)%supportMaxAttributeCountPerPage===0)?0:1);
+
+        setFilterPageCondition({...filterPageCondition, ...{ filterData: newData, pageNum: _pageNum}});
+
+        setTimeout(() => {
+          document.getElementById(`field-${iid}`)?.scrollIntoView();
+        }, 200)
+      }
+    })
+  }
+
+  const insertToBack = (record) => {
+    save().then(result => {
+      if (result) {
+        setKeywordCondition({ keyword: '', needFilter: false });
+
+        const newData = [...moveRowRef.current.data];
+        const index = newData.findIndex((item) => record.iid === item.iid);
+
+        const iid = generateUUID();
+        newData.splice(index+1, 0, {iid});
+
+        const _pageNum = parseInt((index+2)/supportMaxAttributeCountPerPage) + (((index+2)%supportMaxAttributeCountPerPage===0)?0:1);
+
+        setFilterPageCondition({...filterPageCondition, ...{ filterData: newData, pageNum: _pageNum}});
+        
+        setInsertIndex(index+1);
+        edit(newData[index+1], false);
+
+        setTimeout(() => {
+          document.getElementById(`field-${iid}`)?.scrollIntoView();
+        }, 200)
+      }
+    })
+  }
+
+  const editLogic = (record) => {
+    form.resetFields();
+    form.setFieldsValue(record);
+
+    setEditingKey(record?.iid);
+    autoTranslateRef.current = ((record?.name||'')==='');
+
+    if ((record?.cnName||'')!=='') {
+      onValuesChange({ cnName: record?.cnName }, record, 1, record?.iid);
+    } else if ((record?.name||'')!=='') {
+      onValuesChange({ name: record?.name }, record, 1, record?.iid);
+    }
+  }
+
+  const edit = (record, needSave = true) => {
+    if (needSave) {
+      save().then((result) => {
+        if (result) {
+          editLogic(record);
+        }
+      }); 
+    } else {
+      editLogic(record);
+    }
+  };
+
+  const removeLogic = (record) => {
+    const newData = [...moveRowRef.current.data];
+    const index = newData.findIndex((item) => record.iid === item.iid);
+
+    if (index !== -1) {
+      newData.splice(index, 1);
+    }
+
+    onChange && onChange(newData);
+  }
+
+  const remove = (record) => {
+    if (record.iid !== editingKey) {
+      save().then(result => {
+        if (result) {
+          removeLogic(record);
+        }
+      })
+    } else {
+      removeLogic(record);
+    }
+  }
+
+  const preSaveDataModel = (attribute) => {
+    dispatch({
+      type: 'datamodel.preSaveDataModel',
+      payload: { 
+        data: attribute
+      },
+      callback: remoteData => {
+        const newData = [...moveRowRef.current.data];
+        const index = (newData||[]).findIndex((item) => attribute.iid === item.iid);
+    
+        if (index !== -1) {
+          newData.splice(index, 1, remoteData);
+          moveRowRef.current.data = newData;
+          onChange && onChange(newData, false);
+        }
+      },
+    })
+  }
+
+  const save = async() => {
+
+    try {
+
+      if (editingKey!=='') {
+
+        const row = await form.validateFields();
+
+        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;
+          }
+        })
+
+        const newData = [...data];
+    
+        const index = newData.findIndex((item) => editingKey === item.iid);
+    
+        //判断字段名称是否唯一
+        let _index;
+        if (index === -1) {
+          _index = (data||[]).findIndex(item => item.name === row.name);
+        } else {
+          const newDataExcludeSelf = [...data];
+          newDataExcludeSelf.splice(index, 1);  
+          _index = (newDataExcludeSelf||[]).findIndex(item => item.name === row.name);
+        }
+
+        if (_index !== -1) {
+          form.setFields([{ name: 'name', errors: ['字段名称不能重复'] }]);
+          return;
+        }
+
+        let attribute = {};
+        if (index === -1) {
+
+          attribute = {...row, iid: editingKey, modelingTemplateTag: null};
+          newData.splice(insertIndex, 0, attribute);
+          
+        } else {
+          const item = newData[index];
+
+          attribute = { ...item, ...row, modelingTemplateTag: null };
+          newData.splice(index, 1, attribute);
+        }
+
+        moveRowRef.current.data = newData;
+
+        onChange && onChange(newData, true);
+
+        if (!attribute.needAttention) {
+          preSaveDataModel(attribute);
+        }
+
+        setEditingKey('');
+        setSuggests([]);
+        setEnglishSuggests([]);
+      }
+
+      return true;
+      
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+      return false;
+    }
+  };
+
+  const onValuesChange = (changedValues, allValues, offset = 1, iid = editingKey) => {
+    // console.log('changed values', changedValues);
+    // console.log('all values', allValues);
+
+    let ownPrimaryKey = false;
+    if (modelerData?.easyDataModelerPrimaryKey) {
+      ownPrimaryKey = (modelerData.easyDataModelerPrimaryKey.filter(item => item.name===allValues.name).length>0);
+    }
+
+    if (changedValues.hasOwnProperty('cnName') || changedValues.hasOwnProperty('name')) {
+
+      if (offset === 1) {
+        setSuggests([]);
+      }
+
+      const newData = [...data];
+      const index = newData.findIndex((item) => iid === item.iid);
+
+      if (index === -1) {
+        newData.splice(0, 0, { iid, ...allValues});
+      } else if (index !== -1) {
+        const item = newData[index];
+        newData.splice(index, 1, { ...item, ...allValues });
+      }
+
+      setSuggestHaveMore(false);
+      setCurrentChangedValues(changedValues);
+
+      function getSuggest() {
+        setLoadingSuggest(true);
+        dispatchLatest({
+          type: 'datamodel.suggest',
+          payload: {
+            params: {
+              name: allValues.name||'',
+              cnName: allValues.cnName||'',
+              topN: (offset+perSuggestCount-1),
+              offset
+            }
+          },
+          callback: data => {
+            setLoadingSuggest(false);
+
+            if (changedValues.hasOwnProperty('cnName')) {
+  
+              const moreSuggests = (data||[]).length>0?(data[0].suggestions||[]):[];
+              const newSuggests = (offset===1 ? moreSuggests : [...suggests, ...moreSuggests]);
+  
+              if (moreSuggests.length === perSuggestCount) {
+                setSuggestHaveMore(true);
+              }
+  
+              setSuggestOffset(newSuggests.length+1);
+              setSuggests(newSuggests);
+  
+            } else if (changedValues.hasOwnProperty('name')) {
+              const moreSuggests = (data||[]).length>1?(data[1].suggestions||[]):[];
+              const newSuggests = (offset===1 ? moreSuggests : [...suggests, ...moreSuggests]);
+  
+              if (moreSuggests.length === perSuggestCount) {
+                setSuggestHaveMore(true);
+              }
+  
+              setSuggestOffset(newSuggests.length+1);
+              setSuggests(newSuggests);
+            }
+          },
+          error: () => {
+            setLoadingSuggest(false);
+          }
+        })
+      }
+
+      if (changedValues.hasOwnProperty('cnName')) {
+        if (autoTranslateRef.current) {
+          dispatchLatest({
+            type: 'datamodel.translatePhase',
+            payload: {
+              params: {
+                phaseInChinese: changedValues.cnName,
+              }
+            },
+            callback: data => {
+              if ((data?.translated||'') !== '') {
+                form.setFieldsValue({ name: data?.translated||'' });
+              }
+              getSuggest();
+            }
+          })
+        } else {
+          getSuggest();
+        }
+      } else if (changedValues.hasOwnProperty('name')) {
+        autoTranslateRef.current(changedValues.name==='');
+        getSuggest();
+      }
+
+    } else if(changedValues.hasOwnProperty('notNull') ) {
+      if (!changedValues.notNull && ownPrimaryKey) {
+        showMessage('info', '主键不允许为空');
+      }
+    } 
+     
+    if (ownPrimaryKey) {
+      form.setFieldsValue({
+        notNull: true
+      });
+    } 
+
+  };
+
+  const onSuggestChange = (record) => {
+
+    form.resetFields();
+    form.setFieldsValue({ 
+      ...record
+    });
+
+    setSuggests([]);
+  };
+
+  const editableColumn = [
+    ...cols,
+    {
+      title: '操作',
+      dataIndex: 'action',
+      width: (action==='flow')?220: ((originAction==='flow')?90:130),
+      fixed: 'right',
+      render: (_, record) => {
+        return (
+          <AppContext.Consumer>
+          {
+            value => <React.Fragment>
+            {
+              (action==='flow') && <React.Fragment>
+              {
+                record?.isPossibleNewRecommendedDefinition?.possible && <Typography.Link className='mr-3' onClick={(event) => {
+                  event.stopPropagation();  
+                  value?.setGlobalState && value?.setGlobalState({
+                    message: 'data-govern-show-standard-create',
+                    data: {
+                      column: record,
+                      type: record?.isPossibleNewRecommendedDefinition?.type
+                    }
+                  });
+                }}>
+                  加入标准
+                </Typography.Link>
+              }
+              {
+                record?.isPossibleNewTerm?.possible && <Typography.Link className='mr-3' onClick={(event) => {
+                  event.stopPropagation();  
+                  value?.setGlobalState && value?.setGlobalState({
+                    message: 'data-govern-show-standard-create',
+                    data: {
+                      column: record,
+                      type: record?.isPossibleNewTerm?.type
+                    }
+                  })
+                }}>
+                  加入词汇
+                </Typography.Link>
+              }
+              </React.Fragment>
+            }
+            {
+              editable && <React.Fragment> 
+              {
+                <React.Fragment>
+                  {
+                    (originAction!=='flow') && <Tooltip title={record.needAttention ? '取消送审关注': '送审关注'}>
+                      <Button 
+                        className='mr-3' 
+                        size='small'
+                        type='text' 
+                        icon={record.needAttention ? <AttentionSvg style={{ width: 15, height: 15 }} /> : <UnAttentionSvg style={{ width: 15, height: 15 }} />} 
+                        onClick={(event) => { 
+                          event.stopPropagation();
+                          if (record.needAttention === null) {
+                            record.needAttention = true;
+                          } else {
+                            record.needAttention = !record.needAttention;
+                          }
+
+                          const newData = [...moveRowRef.current.data];
+    
+                          const index = newData.findIndex((item) => record.iid === item.iid);
+
+                          if (index !== -1) {
+                            newData.splice(index, 1, {...record});
+
+                            setData(newData);
+                            moveRowRef.current.data = newData;
+                            onChange && onChange(newData, false);
+
+                            if (!record.needAttention) {
+                              preSaveDataModel(record);
+                            }
+                          }
+
+                  
+                        }}
+                      />
+                    </Tooltip>
+                  }
+          
+                  <Button 
+                    className='mr-3' 
+                    size='small'
+                    type='text' 
+                    icon={<PlusOutlined className='default' />} 
+                    onClick={(event) => { 
+                      event.stopPropagation();
+                      insertToFront(record); 
+                    }}
+                  />
+
+                  <Button 
+                    className='mr-3' 
+                    size='small'
+                    type='text' 
+                    icon={<DeleteOutlined style={{ color: 'red' }} />} 
+                    onClick={(event) => { 
+                      event.stopPropagation();
+                      remove(record); 
+                    }}
+                  />
+                </React.Fragment>
+              }
+              </React.Fragment> 
+            }
+            </React.Fragment>
+          }
+          </AppContext.Consumer>
+        )
+      },
+    },
+  ]
+
+  const validateColumn = {
+    title: '规范',
+    dataIndex: 'validate',
+    //小屏幕下隐藏规范, 给编辑多点空间
+    width: (tableWidth<1300 && editable)?0:200,
+    fixed: 'right',
+    render: (text, record, index) => {
+      let shortCauses = []; 
+      let causes = [];
+      (validateReports||[]).forEach((report) => {
+        if (report.type==='DataModelAttribute' && report.iid === record.iid) {
+          (report.reportItems||[]).forEach((item) => {
+            shortCauses.push(item.shortCause||'');
+            causes.push(item.cause||'');
+          })
+        }
+      });
+
+      return (
+        <div className='d-flex' key={index} style={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <div>
+          {
+            shortCauses && shortCauses.map((shortCause, index) => {
+              return (
+                <Tooltip title={shortCause}>
+                  <div className='textOverflow' style={{ width: 130, color: '#f5222d' }} key={index}>
+                    <span>{shortCause||''}</span>
+                  </div>
+                </Tooltip>
+              );
+            })
+          }
+          </div>
+          {
+            (causes||[]).length>0 && <Popover
+              content={
+                <div style={{ maxWidth: 200, maxHeight: 200, wordWrap: 'break-word', overflow: 'auto'  }}>
+                {
+                  causes && causes.map((cause, index) => {
+                    return (
+                      <Typography.Paragraph key={index} >
+                      {cause||''}
+                      </Typography.Paragraph>
+                    )
+                  })
+                }
+                </div>
+              }
+              title="规则详情"
+            >     
+              <a href="#">详情</a>     
+            </Popover>
+          }
+        </div>
+      )
+    }
+  };
+
+  const includeValidateColumn = [
+    ...cols,
+    validateColumn
+  ]
+
+  const includeValidateEditableColumn = [
+    ...editableColumn,
+    validateColumn
+  ]
+
+  const mergedColumns = () => {
+    const hasValidateReports = (validateReports||[]).filter(report => report.type==='DataModelAttribute').length>0;
+
+    if (editable) {
+      let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
+
+      _columns = _columns.map((col) => {
+        if (!col.editable) {
+          return col;
+        }
+    
+        return {
+          ...col,
+          onCell: (record) => ({
+            record,
+            dataIndex: col.dataIndex,
+            inputType:  (col.dataIndex==='notNull' || col.dataIndex==='partOfDistributionKey' || col.dataIndex==='partOfPrimaryKeyLogically' || col.dataIndex==='needAttention' || col.dataIndex==='foreignKey') ? 'check' : 'text',
+            colTitle: col.title,
+            editing: isEditing(record),
+            datatypes: supportedDatatypes,
+            require: col.require
+          }),
+        };
+      });
+
+      setColumns(_columns);
+    } else {
+      let _columns = hasValidateReports ? includeValidateColumn: cols;
+
+      if (action === 'flow') {
+        _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
+      }
+
+      // _columns = _columns.filter((col) => col.dataIndex!=='needAttention');
+
+      setColumns(_columns);
+    }
+  }
+
+  const moveRow = useCallback(
+    (dragIndex, hoverIndex) => {
+
+      const { data, pageNum, pageSize } = moveRowRef.current;
+
+      let realDragIndex = dragIndex;
+      let realHoverIndex = hoverIndex;
+
+      if ((data||[]).length>supportMaxAttributeCountPerPage) {
+        realDragIndex = (pageNum-1)*pageSize + dragIndex;
+        realHoverIndex = (pageNum-1)*pageSize + hoverIndex;
+      }
+
+      const dragRow = data[realDragIndex];
+
+      const newData = update(data, {
+        $splice: [
+          [realDragIndex, 1],
+          [realHoverIndex, 0, dragRow],
+        ],
+      })
+
+      onChange && onChange(newData);
+    },
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    [moveRowRef.current],
+  );
+
+  const onSearchInputChange = (value) => {
+    setEditingKey('');
+
+    setKeywordCondition({ keyword: value||'', needFilter: true });
+  }
+
+  const loadMoreSuggests = (event) => {
+    event.stopPropagation();
+
+    onValuesChange(currentChangedValues, form.getFieldsValue(), suggestOffset);
+  }
+
+  const closeSuggests = (event) => {
+    event.stopPropagation();
+
+    setSuggestHaveMore(false);
+    setSuggests([]);
+    setSuggestOffset(1);
+  }
+
+  const displayMenu = (e) => {
+    show({
+      event: e
+    })
+  }
+
+  const handleItemClick = ({ id, event, props }) => {
+    if (id === 'up') {
+      insertToFront(currentItem);
+    } else if (id === 'down') {
+      insertToBack(currentItem);
+    }
+  }
+
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const resizeColumns = () => {
+    return (
+      columns.map((column, index) => { 
+        return {
+          ...column,
+          onHeaderCell: column => ({
+            width: column.width,
+            onResize: handleResize(index),
+          }),
+        };
+      })
+    );
+  }
+
+  return (
+    <div className='model-import-action-table'>
+      <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <Space>
+          <h2 style={{ marginBottom: 0 }}>数据表结构</h2> 
+          { 
+            editable && <Popover content={<span>
+              新增: 点击操作列的加号按钮在当前字段前新增一个字段<br />
+              修改: 点击字段表格中的一行任意位置进入该字段编辑页面<br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;输入中文名，自动推荐英文名，可选择采用或者手工修改<br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;输入中文名，自动推荐可参考引用的数据标准或者数据字典，可选择采用<br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持拖拽方式调整模型字段顺序<br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点击表格外部任意位置退出字段编辑状态<br />
+              删除: 点击操作列垃圾桶图标删除该字段<br />
+              保存: 页面右下角保存按钮
+            </span>}>
+              <QuestionCircleOutlined className='pointer' /> 
+            </Popover> 
+          }
+        </Space>
+        <Space>
+        { 
+          editable && <Tooltip> 
+            <Button onClick={onAddClick}>新建</Button>
+          </Tooltip>  
+        }
+        <div className='d-flex' style={{ alignItems: 'center' }}>
+          <InputDebounce 
+            placeholder="请输入中文名称或者英文名称" 
+            allowClear 
+            value={keyword}
+            onChange={onSearchInputChange} 
+            style={{ width: inputWidth }}
+          />
+        </div>
+        </Space>
+      </div>
+      <div className='mb-3' id="containerId" ref={tableRef}>
+        <ResizeObserver
+          onResize={({ width }) => {
+            setTableWidth(width);
+          }}
+        >
+          <DndProvider backend={HTML5Backend} >
+            <Form form={form} component={false} onValuesChange={onValuesChange}>
+              <Table
+                components={{
+                  header: {
+                    cell: ResizeableHeaderCell,
+                  },
+                  body: {
+                    cell: EditableCell,
+                    //编辑或者搜索状态下不允许拖动
+                    row: (editable&&editingKey===''&&keyword==='')?DragableBodyRow:null,
+                  },
+                }}
+                rowClassName={(record, index) => {
+                  if (type==='model' && record?.modelingTemplateTag && record?.modelingTemplateTag!=={} && !isEditing(record)) {
+                    return 'editable-row template-highlight-row';
+                  }
+
+                  if (type==='model' && !isEditing(record)) {
+                    if (record?.needAttention) {
+                      return 'editable-row attention-row';
+                    } else if (record?.partOfPrimaryKeyLogically) {
+                      return 'editable-row primary-row';
+                    }
+                  } 
+
+                  return 'editable-row';
+                }}
+                onRow={(record, index) => {
+
+                  let rowParams = {
+                    index,
+                    id: `field-${record.iid}`,
+                  }
+
+                  if (editable) {
+                    rowParams = {...rowParams, onContextMenu: event => {
+                        setCurrentItem(record);
+                        displayMenu(event);
+                      }
+                    };
+
+                    if (!isEditing(record)) {
+                      rowParams = {...rowParams, onClick: (event) => {
+                          event.stopPropagation();
+                          edit(record);
+                        }
+                      }
+
+                      if (keyword.length===0) {
+                        rowParams = {...rowParams, moveRow};
+                      }
+                    }
+                  }
+
+                  return rowParams;
+                }}
+                dataSource={filterPageData||[]}
+                columns={resizeColumns()}
+                size='small'
+                rowKey='iid'
+                pagination={false}
+                sticky
+                scroll={{
+                  x: 1500,
+                  //解决屏幕尺寸窄时,字段不好横向拖动的问题
+                  y: tableWidth>1500?'100%':630,
+                }}
+                expandable={{
+                  columnWidth: 0,
+                  expandedRowRender: record => (
+                    <React.Fragment>
+                    {
+                      editingKey!=='' && <React.Fragment>
+                      {
+                        suggests && suggests.length>0 && (
+                          <SuggestTable suggests={suggests} onSelect={onSuggestChange} />
+                        )
+                      }
+                      </React.Fragment>
+                    }
+                    <div className='flex pt-3' style={{ justifyContent: 'center' }}>
+                      <Tooltip title={!suggestHaveMore?'没有更多推荐字段': ''}>
+                        <Button onClick={loadMoreSuggests} disabled={!suggestHaveMore} loading={loadingSuggest}>加载更多</Button>
+                      </Tooltip>
+                      <Button className='ml-3' onClick={closeSuggests}>收起推荐</Button>
+                    </div> 
+
+                    </React.Fragment>
+                  ),
+                  expandIcon: ({ expanded, onExpand, record }) => {
+                    return null;
+                  },
+                  rowExpandable: record => (editingKey!==''&&((suggests||[]).length>0 || (englishSuggests||[]).length>0)),
+                  expandedRowKeys: [editingKey]
+                }}
+              />
+            </Form>
+          </DndProvider>
+        </ResizeObserver>
+        {
+          (filterData.length > supportMaxAttributeCountPerPage) && <Pagination
+            className="text-center mt-3"
+            showSizeChanger
+            showQuickJumper
+            onChange={(_pageNum, _pageSize) => {
+              setFilterPageCondition({...filterPageCondition, ...{ pageNum: _pageNum, pageSize: _pageSize || supportMaxAttributeCountPerPage }})
+            }}
+            onShowSizeChange={(_pageNum, _pageSize) => {
+              setFilterPageCondition({...filterPageCondition, ...{ pageNum: _pageNum || 1, pageSize: _pageSize }})
+            }}
+            current={pageNum}
+            pageSize={pageSize}
+            defaultCurrent={1}
+            total={(filterData||[]).length}
+            pageSizeOptions={[50, supportMaxAttributeCountPerPage]}
+            showTotal={total => `共 ${(filterData||[]).length} 条`}
+          />
+        }
+
+        <RcMenu id={MENU_ID} >
+          <RcItem id="up" onClick={handleItemClick}>
+            在上方插入行
+          </RcItem>
+          <RcItem id="down" onClick={handleItemClick}>
+            在下方插入行
+          </RcItem>
+        </RcMenu> 
+        
+      </div>
+    </div>
+  );
+};

src/view/Manage/Pdata/Component/ImportActionTable.less

+.model-import-action-table {
+  .yy-table-expanded-row {
+    .yy-radio-wrapper {
+      white-space: normal !important;
+    }
+  }
+
+  .yy-table {
+    .yy-card-body {
+      padding: 0 !important;
+    }
+  }
+
+  .template-highlight-row {
+    .yy-table-cell {
+      background-color: #e7f7ff !important;
+    }
+  }
+
+  .attention-row {
+    .yy-table-cell {
+      background-color: #fff9ed !important;
+    }
+  }
+
+  .primary-row {
+    .yy-table-cell {
+      background-color: #d3ebff !important;
+    }
+  }
+}
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportDDL.jsx

+import React from 'react';
+import { Input } from 'antd';
+
+class ImportDDL extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      inputValue: ''
+    };
+  }
+
+  componentDidUpdate(preProps, preState) {
+    const { visible } = this.props;
+    if (!visible && visible !== preProps.visible) {
+      this.setState({ inputValue: '' });
+    }
+  }
+
+  onInputChange = (e) => {
+    const { onChange } = this.props;
+    this.setState({ inputValue: e.target.value }, () => {
+      onChange && onChange(e.target.value);
+    });
+  }
+
+
+  render() {
+
+    const { inputValue } = this.state;
+
+    const _placeholder = '支持两种方式创建\n方式一: DDL内容复制粘贴\n方式二: 手动输入DDL';
+
+    return (
+      <Input.TextArea 
+        value={inputValue||''}
+        onChange={this.onInputChange} 
+        autoSize={{minRows:4,maxRows:20}} 
+        placeholder={_placeholder}
+      >
+      </Input.TextArea>
+    )
+  }
+}
+
+export default ImportDDL;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportExcel.jsx

+import React from 'react';
+import { Button, Upload, Form, Row, Col } from 'antd';
+import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
+
+class ImportExcel extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      fileList: []
+    };
+  }
+
+  componentDidUpdate(preProps, preState) {
+    const { visible } = this.props;
+    if (!visible && visible !== preProps.visible) {
+      this.setState({ fileList: [] });
+    }
+  }
+
+  downloadTemplate = () => {
+    window.open("/data-govern/docs/DataModel.xlsx");
+  }
+
+  normFile = (e) => {  
+    const { fileList } = this.state;
+    return fileList;
+  };
+
+  render() {
+
+    const { onChange } = this.props;
+    const { fileList } = this.state;
+
+    const uploadProps = {
+      onRemove: file => {
+        const index = fileList.indexOf(file);
+        const newFileList = fileList.slice();
+        newFileList.splice(index, 1);
+
+        this.setState({ fileList: newFileList });
+      },
+      beforeUpload: file => {
+        
+        onChange && onChange([file]);
+        this.setState({ fileList: [file] });
+
+        return false;
+      },
+      accept:".xlsx",
+      fileList: fileList||[]
+    };
+
+    return (
+      <Form.Item 
+        label='文件上传'
+        required={true} 
+      >
+        <Row>
+          <Col span={9}>
+            <Form.Item
+              name='upload'
+              valuePropName="fileList"
+              getValueFromEvent={this.normFile}
+              noStyle
+              rules={[
+                {
+                  required: true,
+                  message: '请选择文件上传',
+                },
+              ]}
+            >
+              <Upload {...uploadProps}>
+                <Button icon={<UploadOutlined />}>
+                  选择文件上传
+                </Button>
+              </Upload>
+            </Form.Item>
+          </Col>
+          <Col span={6}>
+            <Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
+            模板下载
+            </Button>
+          </Col>
+        </Row>
+        
+      </Form.Item>
+    )
+  }
+}
+
+export default ImportExcel;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportExcelCopy.jsx

+import React from 'react';
+import { Input, Row, Col, Descriptions } from 'antd';
+
+class ImportExcelCopy extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      inputValue: '',
+      translateValues: []
+    };
+  }
+
+  componentDidUpdate(preProps, preState) {
+    const { visible } = this.props;
+    if (!visible && visible !== preProps.visible) {
+      this.setState({ inputValue: '', translateValues: [] });
+    }
+  }
+
+  onInputChange = (e) => {
+    const { onChange } = this.props;
+    this.setState({ inputValue: e.target.value }, () => {
+      const _translateValues = e.target.value.replace(/[,,，_ ]/g,'\n').split('\n').filter(value => value!==''&&value!==' ');
+      onChange && onChange(_translateValues);
+      this.setState({ translateValues: _translateValues });
+    });
+  }
+
+
+  render() {
+
+    const { inputValue, translateValues } = this.state;
+
+    const _placeholder = '请在此输入表名、字段中文名，支持以空格、逗号或换行符作为分隔符。如"证券资料表 证券名称 账户代码，证券代码"';
+
+    let _modelName = '', _attrsStr = '';
+    if (translateValues.length>0) {
+      _modelName= translateValues[0];
+    }
+
+    translateValues.forEach((item, index) => {
+      if (index === 0) {
+        _attrsStr = '';
+      } else if (index === 1) {
+        _attrsStr = item;
+      } else {
+        _attrsStr += `,${item}`;
+      }
+    })
+
+    return (
+      <Row gutter={10}>
+        <Col span={14}>
+          <Input.TextArea 
+            value={inputValue||''}
+            onChange={this.onInputChange} 
+            autoSize={{minRows:4,maxRows:20}} 
+            placeholder={_placeholder}
+          >
+          </Input.TextArea>
+        </Col>
+        <Col span={10}>
+          <Descriptions className='excel-copy-descritpion' column={1} size='small' style={{ maxHeight: 450, overflow: 'auto' }}>
+            <Descriptions.Item label='模型名称'>
+            { _modelName }
+            </Descriptions.Item>
+            <Descriptions.Item label='字段名称'>
+            { _attrsStr }
+            </Descriptions.Item>
+          </Descriptions>  
+        </Col>
+      </Row>
+    )
+  }
+}
+
+export default ImportExcelCopy;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportLog.jsx

+import React from 'react';
+import { Table, Space, Tooltip, Button, Pagination, Divider } from 'antd';
+import { ReconciliationOutlined } from '@ant-design/icons';
+
+import { paginate } from '../../../../util';
+
+const columns = [
+  {
+    title: '导入名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '导入方式',
+    dataIndex: 'model',
+  },
+  {
+    title: '开始时间',
+    dataIndex: 'startTime',
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'endTime'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    render: (text,record) => {
+      return (
+        <Space size='small'>
+          <Tooltip placement='bottom' title={'详情'}>
+            <Button icon={<ReconciliationOutlined />} size='small' />
+          </Tooltip>
+        </Space>
+      )
+    }
+  }
+];
+
+const data = [];
+for (let i = 0; i < 46; i++) {
+  data.push({
+    key: i,
+    name: `t_szse_transaction${i}`,
+    model: 'excel导入',
+    startTime: '2020-01-01 00:00:01',
+    endTime: '2020-01-01 00:10:01',
+    status: '成功'
+  });
+}
+
+class ImportLog extends React.Component {
+  
+  constructor() {
+    super();
+    this.state = { 
+      pageNum: 1, 
+      pageSize: 10 
+    };
+  }
+
+  render() {
+    const { pageNum, pageSize } = this.state;
+
+    const _data = paginate(data, pageNum, pageSize);
+
+    return (
+      <>
+        <Divider orientation="left">导入日志</Divider>
+        <Table 
+          columns={columns} 
+          dataSource={_data}
+          pagination={false} 
+          size='small'
+        />
+        <Pagination
+          className="text-center mt-3"
+          showSizeChanger
+          showQuickJumper
+          onChange={(_pageNum, _pageSize) => {
+            this.setState({ pageNum: _pageNum, pageSize: _pageSize || 10 });
+          }}
+          onShowSizeChange={(_pageNum, _pageSize) => {
+            this.setState({ pageNum: _pageNum || 1, pageSize: _pageSize });
+          }}
+          current={pageNum}
+          pageSize={pageSize}
+          defaultCurrent={1}
+          total={(data||[]).length}
+          showTotal={total => `共 ${total} 条`}
+        />
+      </>
+    )
+  }
+}
+
+export default ImportLog;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportMetadata.jsx

+import React from 'react';
+import { Select, Pagination, Input, Table, Row, Col } from "antd"
+
+import { dispatchLatest } from '../../../../model';
+
+const { Option } = Select;
+
+class ImportMetadata extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      systems: [],
+      dbs: [{ value: '', name: '所有数据源' }],
+      schemas: [{ value: '', name: '所有Schema' }],
+      modelPaths: [
+        { value: '', name: '所有类型' },
+        { value: 'Catalog,Database,Schema,HanaView', name: 'HANA视图' },
+        { value: 'Catalog,Database,Schema,Table', name: '数据表' },
+        { value: 'Catalog,Database,Schema,View', name: '数据视图' },
+        { value: 'Catalog,Database,Schema,Function', name: '函数' },
+        { value: 'Catalog,Database,Schema,Procedure', name: '存储过程' },
+      ],
+      dataTables: [],
+      totalDataTables: 0,
+      dataFileds: [],
+      system: '',
+      db: '',
+      schema: '',
+      modelPath: '',
+      keyboard: '',
+      pageNumDataTables: 1,
+      pageSizeDataTables: 20,
+      loadingDataTable: false,
+      loadingDataFiled: false,
+      loadingSystem: false,
+      loadingDb: false,
+      loadingSchema: false,
+      selectedDataTableRowKeys: [],
+      selectedDataFiledRowKeys: [],
+      dataTableColumns: [
+        { title: '名称', dataIndex: 'name', key: 'name' },
+        { title: '中文名称', dataIndex: 'cnName', key: 'cnName' },
+        { title: '描述', dataIndex: 'comment', key: 'comment' },
+      ],
+      dataFiledColumns: [
+        { title: '目标表字段', dataIndex: 'name', key: 'name' },
+      ]
+    };
+  }
+
+  componentDidMount() {
+
+    this.setState({ loadingSystem: true, loadingDb: true }, () => {
+      dispatchLatest({
+        type: 'datamodel.getAllSystemAndDatabase',
+        callback: data => {
+          if (data && data.systems && data.systems.length) {
+            const _system = data.systems[0].scopeId;
+            this.setState({ loadingSystem: false, loadingDb: false, systems: data.systems, system: _system, dbs: data.dbs, db: '', schema: '' }, () => {
+              this.fetchAllDataTable();
+            })
+          } else {
+            this.setState({ loadingSystem: false });
+          } 
+        },
+        error: () => {
+          this.setState({ loadingSystem: false });
+        }
+      })
+    })
+  }
+
+  systemOnChanged = (value) => {
+
+    if (value === '') {
+      this.setState({ 
+        system: value, 
+        dbs: [{ value: '', name: '所有数据源' }],
+        schemas: [{ value: '', name: '所有Schema' }],
+        db: '',
+        schema: ''
+      })
+    } else {
+      
+      this.setState({ loadingDb: true, system: value }, () => {
+        dispatchLatest({
+          type: "datamodel.getAllSystemDatabase",
+          payload: {
+            sysCodedataTables: value
+          },
+          callback: dbs => {
+            this.setState({ loadingDb: false, dbs: dbs||[], db: '', schema: ''  })
+          },
+          erorr: () => {
+            this.setState({ loadingDb: false });
+          }
+        });
+      });
+
+    }
+    
+  }
+
+  dbOnChanged = (value) => {
+
+    if (value === '') {
+      
+      this.setState({ db: value, schemas: [{ value: '', name: '所有Schema' }], schema: '' })
+    
+    } else {
+      
+      this.setState({ loadingSchema: true, db: value }, () => {
+        dispatchLatest({
+          type: "datamodel.getAllScheme",
+          payload: {
+            db: value
+          },
+          callback: schemas => {
+            this.setState({ loadingSchema: false, schemas, schema: '' });
+          },
+          error: () => {
+            this.setState({ loadingSchema: false });
+          }
+        });
+      })
+
+    }
+
+  }
+
+  schemaOnChanged = (value) => {
+    this.setState({ schema: value });
+  }
+
+  modelPathOnChanged = (value) => {
+    this.setState({ modelPath: value });
+  }
+
+  sizeChangeOnDataTable = (pageNum, pageSize=20) => {
+    this.setState({ pageNumDataTables: pageNum, pageSizeDataTables: pageSize });
+  }
+
+  sizeChangeOnDataField = (pageNum, pageSize=20) => {
+    this.setState({ pageNumDataFileds: pageNum, pageSizeDataFileds: pageSize });
+  }
+
+  fetchAllDataTable = () => {
+    const { system, db, schema, modelPath, pageNumDataTables, pageSizeDataTables, keyboard } = this.state;
+
+    let _db = '';
+    if(db !== '' && db.split(',').length > 1) {
+      _db = db.split(',')[1];
+    }
+
+    this.setState({ loadingDataTable: true }, () => {
+      dispatchLatest({
+        type: "datamodel.getAllDataTable",
+        payload: {
+          pageNum: pageNumDataTables,
+          pageSize: pageSizeDataTables,
+          name: keyboard,
+          sysId: system,
+          database: _db,
+          schema,
+          modelPath
+        },
+        callback: data => {
+          this.setState({ loadingDataTable: false, dataTables: (data||[]).content||[], totalDataTables: (data||[]).totalElements||0 })
+        },
+        error: () => {
+          this.setState({ loadingDataTable: false });
+        }
+      });
+    })
+  }
+
+  render() {
+    const { systems, dbs, schemas, modelPaths, system, db, schema, modelPath, pageNumDataTables, pageSizeDataTables, loadingDataTable, loadingDataFiled, loadingSystem, loadingDb, loadingSchema, dataTables, dataFileds, totalDataTables, dataTableColumns, dataFiledColumns  } = this.state;
+
+    const rowDataTableSelection = {
+      type: 'radio',
+      onChange: (selectedRowKeys, selectedRows) => {
+
+        this.setState({ selectedDataTableRowKeys: selectedRowKeys, loadingDataFiled: true }, () => {
+          dispatchLatest({
+            type: "datamodel.getAllFileds",
+            payload: {
+              parentId: selectedRowKeys[0],
+              model:'Column,InterfaceColumn,HanaViewColumn'
+            },
+            callback: data => {
+              this.setState({ loadingDataFiled: false, dataFileds: data||[] })
+            },
+            error: () => {
+              this.setState({ loadingDataFiled: false });
+            }
+          });
+        })
+
+      },
+    };
+
+    const rowDataFiledSelection = {
+      type: 'radio',
+      onChange: (selectedRowKeys, selectedRows) => {
+        this.setState({ selectedDataFiledRowKeys: selectedRowKeys });
+      },
+    };
+
+    return (
+      <>
+      <div style={{paddingTop:10}}>
+        <Select
+          value={system}
+          style={{ width: 146 }}
+          loading={loadingSystem}
+          onChange={this.systemOnChanged}
+        >
+        {
+          systems && systems.map((item, index) => {
+            return <Option key={index} value={item.scopeId}>{item.scopeName||''}</Option>;
+          })
+        }
+        </Select>
+        <Select
+          value={db}
+          onChange={this.dbOnChanged}
+          loading={loadingDb}
+          style={{ width: 150,marginLeft:10 }}
+        >
+        {
+          dbs && dbs.map((item, index) => {
+            return <Option key={index} value={item.value===''?'':(item._id+','+item.name)}>{item.name}</Option>;
+          })
+        }
+        </Select>
+        <Select
+          value={schema}
+          loading={loadingSchema}
+          onChange={this.schemaOnChanged}
+          style={{ width: 150,marginLeft:10 }}
+        >
+        {
+          schemas && schemas.map((item, index) => {
+            return <Option key={index} value={item.value===''?'':item.name}>{item.name}</Option>;
+          })
+        }
+        </Select>
+        <Select
+          value={modelPath}
+          onChange={this.modelPathOnChanged}
+          style={{ width: 150,marginLeft:10 }}
+        >
+        {
+          modelPaths && modelPaths.map((item, index) => {
+            return <Option key={index} value={item.value}>{item.name}</Option>;
+          })
+        }
+        </Select>
+      </div>
+      <div style={{margin:'10px 0'}}>
+        <Input.Search style={{width:180,marginLeft:10}} 
+          onChange={e=>{ this.setState({ keyboard: e.target.value })}}
+          placeholder={"请输入关键字"}
+          enterButton
+          onSearch={()=>{this.fetchAllDataTable()}}
+        />
+      </div>
+      <Row gutter={10}>
+        <Col span={12}>
+          <Table
+            columns={dataTableColumns}
+            rowKey="_id"
+            size="small"
+            loading={loadingDataTable}
+            dataSource={dataTables}
+            pagination={false}
+            rowSelection={rowDataTableSelection}
+          />
+          <Pagination 
+            showTotal={total => `共 ${total} 条`} 
+            showSizeChanger 
+            pageSize={pageSizeDataTables} 
+            pageSizeOptions={['20','60','100']} 
+            current={pageNumDataTables} 
+            onShowSizeChange={this.sizeChangeOnDataTable} 
+            onChange={this.sizeChangeOnDataTable} 
+            total={totalDataTables} 
+            style={{marginTop:10}}
+          />
+        </Col>
+        <Col span={12}>
+          <Table
+            columns={dataFiledColumns}
+            rowKey="_id"
+            size="small"
+            loading={loadingDataFiled}
+            dataSource={dataFileds}
+            pagination={false}
+            rowSelection={rowDataFiledSelection}
+          />
+        </Col>
+      </Row>
+      </>
+    )
+  }
+}
+
+export default ImportMetadata;
\ No newline at end of file

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

+import React, { useState } from 'react';
+import { Modal, Button, Form, Radio, Tooltip } from 'antd';
+
+import ImportWord from './ImportWord';
+import ImportExcel from './ImportExcel';
+import ImportExcelCopy from './ImportExcelCopy';
+import ImportDDL from './ImportDDL';
+
+import { dispatchLatest } from '../../../../model'; 
+import { isSzseEnv } from '../../../../util';
+
+const importModes = [
+  { name: '快速创建', key: 'excel-copy' },
+  { name: '空白创建', key: 'no-condition' },
+  { name: 'Word导入', key: 'word' },
+  { name: 'Excel导入', key: 'excel' },
+  { name: 'DDL导入', key: 'ddl' },
+] 
+
+const ImportModal = (props) => {
+  const { view, catalogId, visible, onCancel, onCancelByWord, onCancelByDDL } = props;
+
+  const [ modeKey, setModeKey ] = useState('excel-copy');
+  const [ hints, setHints ] = useState([]);
+  const [ ddl, setDDL ] = useState('');
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const [ form ] = Form.useForm();
+
+  const onModeChange = (e) => {
+    setModeKey(e.target?.value);
+  }
+
+  const onOk = async() => {
+    try {
+
+      const row = await form.validateFields();
+   
+      if (modeKey==='word') {
+  
+        setConfirmLoading(true);
+        dispatchLatest({
+          type: 'datamodel.importWordGenerateModelDraft',
+          payload: { 
+            params: {
+              catalogId,
+            },
+            fileList: row.upload 
+          },
+          callback: data => {
+            setConfirmLoading(false);
+            reset();
+            onCancelByWord && onCancelByWord(true, data||{});
+          },
+          error: () => {
+            setConfirmLoading(false);
+          }
+        });
+  
+      } else if (modeKey==='excel') {
+  
+        setConfirmLoading(true);
+        dispatchLatest({
+          type: 'datamodel.extractExcelContent',
+          payload: { fileList: row.upload },
+          callback: data => {
+            setConfirmLoading(false);
+            reset();
+            onCancel && onCancel(false, true, data||[]);
+          },
+          error: () => {
+            setConfirmLoading(false);
+          }
+        })
+  
+      } else if (modeKey==='excel-copy') {
+  
+        reset();
+        onCancel && onCancel(false, true, hints||[]);
+
+      } else if (modeKey==='no-condition') {
+        reset();
+        onCancel && onCancel(false, true, []);
+      } else if (modeKey==='ddl') {
+        reset();
+        onCancelByDDL && onCancelByDDL(true, ddl);
+      }
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+
+  }
+
+  const cancel = () => {
+    reset();
+    onCancel && onCancel();
+  }
+
+  const reset = () => {
+    form.resetFields();
+    form.setFieldsValue({mode: 'excel-copy'});
+    setModeKey('excel-copy');
+    setHints([]);
+    setDDL('');
+    setConfirmLoading(false);
+  }
+
+  const onImportExcelCopyChange = (data) => {
+    setHints(data||[]);
+  }
+
+  const onImportDDLChange = (data) => {
+    setDDL(data);
+  }
+
+  const footer = [ 
+    <Button
+      key="0" 
+      onClick={cancel}
+    >
+    取消
+    </Button>,
+    <Button
+      key="1" 
+      type="primary"
+      loading={confirmLoading}
+      onClick={onOk}
+    >
+    确定
+    </Button>,
+  ];
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='新建模型'
+      width={isSzseEnv?540:630}
+      onCancel={cancel}
+      footer={footer}
+    >
+      <Form form={form}>
+        <Form.Item 
+          name='mode'
+          label='新建方式'
+          rules={[
+            {
+              required: true,
+              message: '请选择新建方式',
+            },
+          ]}
+          initialValue={modeKey}
+        >
+          <Radio.Group onChange={onModeChange} value={modeKey}>
+          {
+            importModes.map((item, index) => {
+
+              let title = '';
+              if (item.key==='word'&&(view!=='dir'||(catalogId||'') === '')) {
+                title = '请先选择主题';
+              }
+
+              if (isSzseEnv && item.key === 'ddl') {
+                return <></>;
+              } 
+
+              return (
+                <Tooltip key={index} title={title}>
+                  <Radio 
+                    value={item.key} 
+                    disabled={item.key==='word'&&(view!=='dir'||(catalogId||'') === '')}>
+                    {item.name}
+                  </Radio>
+                </Tooltip>
+              );
+            })
+          }
+          </Radio.Group>
+        </Form.Item>
+        {
+          modeKey==='word' && (
+            <ImportWord {...props} />
+          )
+        }
+        {
+          modeKey==='excel' && (
+            <ImportExcel {...props} />
+          )
+        }
+        {
+          modeKey==='excel-copy' && (
+            <ImportExcelCopy onChange={onImportExcelCopyChange} {...props} />
+          )
+        }
+        {
+          modeKey==='ddl' && (
+            <ImportDDL onChange={onImportDDLChange} />
+          )
+        }
+      </Form>
+    </Modal>
+  )
+}
+
+export default ImportModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportStockWordDrawer.jsx

+import React, { useState, useEffect } from 'react';
+import { Button, Upload, Drawer, Table, Pagination, Form, Tooltip, Typography } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { Resizable } from 'react-resizable';
+
+import { dispatch, dispatchLatest } from '../../../../model';
+import { showMessage, formatDate } from '../../../../util';
+
+const { Text } = Typography;
+
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
+const ImportStockWordModal = (props) => {
+  const { onCancel, onSuccess, visible, catalogId } = props;
+  const [ fileList, setFileList ] = useState([]);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const [ loading, setLoading ] = useState(false);
+  const [ logs, setLogs ] = useState([]);
+  const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
+  const { pageNum, pageSize } = pagination;
+  const [ total, setTotal ] = useState(0);
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+      ellipsis: true,
+    },
+    {
+      title: '导入文件名',
+      dataIndex: 'fileName',
+      width: 200,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return <Tooltip title={text||''}>
+          <Text ellipsis={true}>{text||''}</Text>
+        </Tooltip>
+      }
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      width: 170,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return formatDate(record.startTime);
+      }
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 170,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return formatDate(record.endTime);
+      }
+    },
+    {
+      title: '耗时',
+      dataIndex: 'costTime',
+      width: 100,
+      ellipsis: true,
+      render: (_, record, __) => {
+        return record.costTime?`${Number(record.costTime/1000)}秒`:'';
+      }
+    },
+    {
+      title: '导入人',
+      dataIndex: 'operator',
+      width: 100,
+      ellipsis: true,
+    },
+    {
+      title: '导入状态',
+      dataIndex: 'state',
+      width: 100,
+      ellipsis: true,
+    },
+    {
+      title: '',
+      dataIndex: 'auto',
+    }
+  ]
+
+  const [ columns, setColumns ] = useState(cols);
+
+  useEffect(() => {
+
+    if (visible) {
+      setPagination({ pageNum: 1, pageSize: 20 });
+      getLogs();
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
+  const getLogs = (p = 1, s = 20) => {
+    setLoading(true);
+    dispatch({
+      type: 'datamodel.importWordLogs',
+      payload: {
+        params: {
+          page: p,
+          pageSize: s
+        }
+      },
+      callback: data => {
+        setLoading(false);
+        setTotal(data.totalElements);
+        setLogs(data.content||[]);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onRefreshClick = () => {
+    getLogs();
+  }
+
+  const uploadProps = {
+    onRemove: file => {
+
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+
+      setFileList(newFileList);
+    },
+    beforeUpload: file => {
+
+      setFileList([file]);
+      return false;
+    },
+    fileList: fileList || [],
+    accept: ".doc,.docx",
+  };
+
+  const handleOk = () => {
+
+    if ((fileList || []).length === 0) {
+      showMessage('info', '请先选择Word文件上传');
+      return;
+    }
+
+    setConfirmLoading(true);
+    dispatchLatest({
+      type: 'datamodel.importWordGenerateModel',
+      payload: {
+        params: {
+          catalogId,
+          stateId: ''
+        },
+        fileList
+      },
+      callback: data => {
+        setConfirmLoading(false);
+        setFileList([]);
+        getLogs(pageNum, pageSize);   
+        onSuccess && onSuccess();     
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    setFileList([]);
+  }
+
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const mergedColumns = () => {
+    return (
+      columns.map((column, index) => { 
+        return {
+          ...column,
+          onHeaderCell: column => ({
+            width: column.width,
+            onResize: handleResize(index),
+          }),
+        };
+      })
+    );
+  }
+
+  return (
+    <Drawer 
+      forceRender
+      visible={ visible }
+      title='存量模型导入'
+      width={1000}
+      placement="right"
+      closable={ true }
+      onClose={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+    >
+      <div className='mt-3'>
+        <Form layout='inline'>
+          <Form.Item label='Word上传:'>
+            <Upload style={{ display: 'inline' }} {...uploadProps }>
+              <Button icon={
+                <UploadOutlined />}>
+                选择文件上传
+              </Button>
+            </Upload>
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' onClick={handleOk} loading={confirmLoading}>确定导入</Button>
+          </Form.Item>
+        </Form>
+      </div>
+      <div className='d-flex my-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <h3 style={{ marginBottom: 0 }}>导入日志</h3> 
+        <Button onClick={onRefreshClick}>刷新</Button>
+      </div>
+      <Table
+        className='mt-3'
+        components={{
+          header: {
+            cell: ResizeableHeaderCell,
+          }
+        }}
+        columns={mergedColumns()} 
+        rowKey={'id'}
+        dataSource={logs||[]}
+        pagination={false} 
+        loading={loading}
+        expandable={{
+          expandedRowRender: record => <p style={{ margin: 0 }}>{record.message||''}</p>
+        }}
+        sticky
+      />
+      <Pagination
+        className="text-center mt-3"
+        showSizeChanger
+        showQuickJumper
+        onChange={(_pageNum, _pageSize) => {
+          setPagination({ pageNum: _pageNum||1, pageSize: _pageSize || 20 });
+          getLogs(_pageNum||1, _pageSize||20);
+        }}
+        onShowSizeChange={(_pageNum, _pageSize) => {
+          setPagination({ pageNum: _pageNum || 1, pageSize: _pageSize || 20 });
+          getLogs(_pageNum||1, _pageSize||20);
+        }}
+        current={pageNum}
+        pageSize={pageSize}
+        defaultCurrent={1}
+        total={total}
+        pageSizeOptions={[10,20]}
+        showTotal={total => `共 ${total} 条`}
+      />
+    </Drawer>
+  )
+}
+
+export default ImportStockWordModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/ImportWord.jsx

+import React, { useState, useEffect } from 'react';
+import { Button, Upload, Form } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+const ImportWord = (props) => {
+  const { onChange, visible } = props;
+  const [ fileList, setFileList ] = useState([]);
+
+  useEffect(() => {
+    setFileList([]);
+  }, [visible])
+
+  const normFile = () => {
+    return fileList;
+  }
+
+  const uploadProps = {
+    onRemove: file => {
+
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+
+      onChange && onChange(newFileList);
+
+      setFileList(newFileList);
+    },
+    beforeUpload: file => {
+      
+      setFileList([file]);
+      return false;
+    },
+    fileList: fileList||[],
+    accept:".doc,.docx",
+  };
+
+  return (
+    <Form.Item 
+      name='upload'
+      label='文件上传' 
+      valuePropName="fileList"
+      getValueFromEvent={normFile}
+      rules={[
+        {
+          required: true,
+          message: '请选择文件上传',
+        },
+      ]}
+    >
+      <Upload {...uploadProps}>
+        <Button icon={<UploadOutlined />}>
+          选择文件上传
+        </Button>
+      </Upload>
+    </Form.Item>
+  )
+}
+
+export default ImportWord;
\ No newline at end of file

src/view/Manage/Pdata/Component/ModelSvg.jsx

+export const UnAttentionSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <defs>
+      <style>
+        {
+          '@font-face{font-family:feedback-iconfont;src:url(//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944) format("woff2"),url(//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944) format("woff"),url(//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944) format("truetype")}'
+        }
+      </style>
+    </defs>
+    <path
+      d="M873.813 989.867c-3.413 0-8.533-1.707-11.946-3.414L512 805.547 162.133 986.453c-8.533 3.414-17.066 3.414-25.6-1.706-6.826-5.12-11.946-13.654-11.946-22.187V126.293c0-51.2 40.96-92.16 92.16-92.16h588.8c51.2 0 92.16 40.96 92.16 92.16v837.974c0 8.533-5.12 17.066-11.947 22.186-3.413 1.707-6.827 3.414-11.947 3.414zM512 750.933c3.413 0 8.533 1.707 11.947 3.414L848.213 921.6V126.293c0-22.186-18.773-40.96-40.96-40.96H216.747c-22.187 0-40.96 18.774-40.96 40.96V921.6l324.266-167.253c3.414-1.707 8.534-3.414 11.947-3.414z"
+      fill="#333"
+    />
+    <path
+      d="M605.867 590.507c-6.827 0-13.654-1.707-20.48-5.12L512 546.133l-75.093 39.254c-13.654 8.533-32.427 6.826-44.374-3.414-13.653-10.24-20.48-25.6-17.066-40.96l13.653-81.92-61.44-59.733c-11.947-11.947-15.36-27.307-10.24-42.667s18.773-25.6 34.133-29.013l83.627-11.947 37.547-75.093c6.826-15.36 22.186-23.893 37.546-23.893s30.72 8.533 37.547 23.893l37.547 75.093 83.626 11.947c15.36 1.707 29.014 13.653 34.134 29.013s1.706 32.427-10.24 42.667l-61.44 59.733 13.653 81.92c3.413 15.36-3.413 32.427-17.067 40.96-5.12 5.12-13.653 8.534-22.186 8.534zM512 493.227c6.827 0 13.653 1.706 20.48 5.12l63.147 34.133-11.947-68.267c-1.707-13.653 1.707-27.306 11.947-37.546l51.2-51.2-69.974-10.24c-13.653-1.707-25.6-10.24-32.426-23.894L512 276.48l-30.72 64.853c-6.827 11.947-18.773 20.48-32.427 23.894l-71.68 10.24 51.2 51.2c10.24 10.24 15.36 23.893 11.947 37.546l-11.947 68.267 63.147-34.133c6.827-3.414 13.653-5.12 20.48-5.12z"
+      fill="#333"
+    />
+  </svg>
+)
+
+export const AttentionSvg = (props) => (
+  <svg
+    className="icon"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    width={200}
+    height={200}
+    {...props}
+  >
+    <defs>
+      <style>
+        {
+          '@font-face{font-family:feedback-iconfont;src:url(//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944) format("woff2"),url(//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944) format("woff"),url(//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944) format("truetype")}'
+        }
+      </style>
+    </defs>
+    <path
+      d="M826.027 34.133H197.973c-37.546 0-68.266 30.72-68.266 68.267v887.467L512 791.893l382.293 197.974V102.4c0-37.547-30.72-68.267-68.266-68.267zm-148.48 337.92L612.693 435.2c-3.413 3.413-5.12 10.24-5.12 15.36l15.36 87.04c1.707 13.653-11.946 23.893-23.893 17.067L520.533 512c-5.12-3.413-10.24-3.413-15.36 0l-78.506 42.667c-11.947 6.826-27.307-3.414-23.894-17.067l15.36-87.04c1.707-5.12 0-10.24-5.12-15.36l-64.853-63.147c-10.24-10.24-5.12-27.306 8.533-29.013l88.747-13.653c5.12 0 10.24-3.414 11.947-8.534l39.253-80.213c6.827-11.947 23.893-11.947 30.72 0l39.253 80.213c1.707 5.12 6.827 8.534 11.947 8.534l88.747 13.653c13.653 1.707 18.773 18.773 10.24 29.013z"
+      fill='#c7000b'
+    />
+  </svg>
+)
+
+

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

+import React, { useState, useEffect, useRef, useContext } from "react";
+import { Tooltip, Modal, Pagination, Table, Typography } from 'antd';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import SmoothScroll from 'smooth-scroll';
+import classnames from 'classnames';
+import { Resizable } from 'react-resizable';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
+import ResizeObserver from 'rc-resize-observer';
+import ServiceDetail from './ServiceDetailModal';
+import SampleModal from './SampleModal';
+import ExchangeOwnerModal from './ExchangeOwner';
+
+import { dispatch } from '../../../../model'; 
+import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
+import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
+import { AppContext } from "../../../../App";
+// import Tag from "../../Tag";
+
+import './ModelTable.less';
+import 'react-contexify/dist/ReactContexify.css';
+
+const { Text } = Typography;
+const { Column } = Table;
+
+const ModelNameColumn = (props) => {
+  const { text, record, detailItem } = props;
+  const [ data, setData ] = useState(record);
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+      ellipsis: true,
+    },
+    {
+      title: '字段中文名称',
+      width: 160,
+      dataIndex: 'cnName',
+      editable: true,
+      ellipsis: true,
+    },
+    {
+      title: '字段英文名称',
+      width: 160,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+    },
+  ];
+
+  let _textComponent = <span style={{ color: '#000' }}>{text}</span>;
+  if (data.digest) {
+    _textComponent = <div style={{ width: 500, maxHeight: 300, overflow: 'auto' }}>
+      <Table 
+        dataSource={data.digest.attributeDigests||[]}
+        columns={cols}
+        loading={false}
+        pagination={false}
+        size='small'
+        rowClassName={(record, index) => {
+          if (record?.primaryKey) {
+            return 'primary-row';
+          }
+
+          return '';
+        }}
+      />
+    </div>;
+  }
+
+  return (
+    <Tooltip 
+      title={_textComponent}
+      overlayClassName='tooltip-common'
+      onVisibleChange={(visible) => {
+        if (visible && !record.digest) {
+          dispatch({
+            type: 'pds.getServiceDigest',
+            payload: {
+              id: record.id
+            },
+            callback: _data => {
+              record.digest = _data;
+              setData({...record});
+            }
+          })
+        }
+      }}
+    >
+        <a onClick={()=>{detailItem(record);}}>
+      {text||''}
+      </a>
+    </Tooltip>
+  );
+}
+
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
+const ModelTable = (props) => {
+
+  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user, isOnlyEnding } = props;
+
+  const MENU_ID = (((modelId||'') !== '') ? `model-table-contextmenu-${modelId}` : 'model-table-contextmenu');
+
+  const { show, hideAll } = useContextMenu({
+    id: MENU_ID,
+  });
+  
+  const [ tableWidth, setTableWidth ] = useState(0);
+  const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
+  const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
+  // const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
+  const [ sortRule, setSortRule ] = useState(null); 
+  const [ filterData, setFilterData ] = useState([]);
+  const [ subData, setSubData ] = useState([]);
+  const [ serviceDetailParams, setServiceDetailParams ] = useState({ visible: false, id: '' }) 
+  const [ sampleParams, setSampleParams ] = useState({ visible: false, service: undefined });
+  const [ exchangeOwnerParams, setExchangeOwnerParams ] = useState({ visible: false, id: undefined }); 
+
+  const app = useContext(AppContext);
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+      ellipsis: true,
+    },
+    {
+      title: '服务名称',
+      dataIndex: 'name',
+      width: isSzseEnv?360:160,
+      ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
+      render: (text, record, index) => {
+        return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
+      }
+    },
+    {
+      title: 'URI',
+      dataIndex: 'odata',
+      ellipsis: true,
+      width: 170,
+      render: (text, _, __) => {
+        return (
+          <React.Fragment>
+          {
+            text ? <div className='flex'> 
+              <Tooltip title={text||''} overlayClassName='tooltip-common'>
+                <Text ellipsis={true}>
+                {text||''}
+                </Text>
+              </Tooltip>
+              <Text copyable={{ text }}></Text>
+            </div> : ''
+          }
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: isSzseEnv?420:160,
+      ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <Text ellipsis={true}>{text||''}</Text>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '路径',
+      dataIndex: 'path',
+      width: 120,
+      ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <Text ellipsis={true}>{text||''}</Text>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      width: 100,
+      ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
+      render: (_, record) => {
+
+        let color = '';
+        if (record?.state?.id === '1') {
+          color = '#DE7777';
+        } else if (record?.state?.id === '2') {
+          color = '#779BDE';
+        } else if (record?.state?.id === '4') {
+          color = '#77DEBF';
+        }
+
+        return (
+          <span>
+            <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: color  }}></span>
+            <span>{record?.state?.cnName||''}</span>
+          </span>
+        );
+      }
+    },
+    {
+      title: '管理人',
+      dataIndex: 'editor',
+      width: 100,
+      ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
+    },
+    {
+      title: '是否启动OData',
+      dataIndex: 'supportODataDisable',
+      width: 120,
+      render: (supportODataDisable, _, __) => supportODataDisable?'是':'否'
+    },
+    {
+      title: '版本号',
+      dataIndex: 'modifiedTs',
+      width: 170,
+      ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
+      render: (_,record) => {
+        return `V_${formatDate(record.modifiedTs)}`;
+      }
+    },
+    // {
+    //   title: '标签',
+    //   dataIndex: 'tag',
+    //   width: 200,
+    //   onCell: (record) => ({ 
+    //     onMouseEnter: event => {
+    //       setMouseEnterKey(record.id);
+    //     }, 
+    //     onMouseLeave: event => {
+    //       setMouseEnterKey(null);
+    //     },
+    //   }),
+    //   render: (_,record) => {
+    //     return (
+    //       record.id===mouseEnterKey?<Tag styleType='complex' id={record.id} />:<Tag id={record.id} />
+    //     );
+    //   }
+    // },
+    {
+      title: '服务描述',
+      dataIndex: 'remark',
+      ellipsis: true,
+      sorter: true,
+      sortDirections: ['ascend', 'descend'],
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''} overlayClassName='tooltip-common'>
+            <Text ellipsis={true}>{text||''}</Text>
+          </Tooltip>
+        );
+      }
+    },
+  ];
+
+  const [ columns, setColumns ] = useState([]);
+  // const [ includePathColumns, setIncludePathColumns ] = useState([]);
+  const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
+  const [ currentItem, setCurrentItem ] = useState(null);
+  const { pageNum, pageSize } = pagination;
+  
+  const [modal, contextHolder] = Modal.useModal();
+
+  const anchorId = getQueryParam(AnchorId, props.location?.search);
+  const anchorTimestamp = getQueryParam(AnchorTimestamp, props.location?.search);
+
+  const shouldScrollRef = useRef(false);
+
+  useEffect(() => {
+
+    if ((modelId||'') !== '') {
+      window?.addEventListener("storage", modelEventChange);
+    
+      return () => {
+        window?.removeEventListener("storage", modelEventChange);
+      }
+    } 
+  
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+
+    if ((modelId||'') === '') {
+      onSelect && onSelect([]);
+      
+      if ((keyword||'') === '') {
+        if (offset !== null) {
+          const _pageNum = parseInt(offset/pageSize + ((offset%pageSize===0)?0:1));
+          setPagination({...pagination, pageNum: _pageNum });
+        } else {
+          setPagination({...pagination, pageNum: 1 });
+        }
+      } else {
+        setPagination({...pagination, pageNum: 1 });
+      }
+    } else {
+      getCheckoutDataModel();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ catalogId, keyword, offset, modelState ]);
+
+  useEffect(() => {
+    if ((selectModelerIds||[]).length === 0) {
+      setSelectedRowKeys([]);
+      setSubSelectedRowKeys([]);
+    }
+  }, [selectModelerIds])
+
+  useEffect(() => {
+
+    if ((anchorId||'') !== '') {
+      shouldScrollRef.current = true;
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorTimestamp])
+
+  useEffect(() => {
+    if (shouldScrollRef.current) {
+      SmoothScroll('a[href*="#"]');
+
+      const _id = getQueryParam(AnchorId, props.location.search);
+      var scroll = new SmoothScroll();
+      var anchor = document.querySelector(`#data-model-${_id}`);
+
+      if (anchor) {
+        scroll.animateScroll(anchor);
+        shouldScrollRef.current = false;
+      }
+    }
+  })
+
+  useEffect(() => {
+
+    const newData = [...data];
+    if (sortRule) {
+      if (sortRule.order === 'ascend') {
+        newData.sort((item1, item2) => {
+
+          if (sortRule.field === 'state') {
+            return (item1[sortRule.field]?.cnName||'').localeCompare(item2[sortRule.field]?.cnName||'');
+          } else if (sortRule.field === 'modifiedTs') {
+            return formatDate(item1[sortRule.field]).localeCompare(formatDate(item2[sortRule.field]));
+          }
+
+          return item1[sortRule.field].localeCompare(item2[sortRule.field]);
+        })
+      } else if (sortRule.order === 'descend') {
+        newData.sort((item1, item2) => {
+          if (sortRule.field === 'state') {
+            return (item2[sortRule.field]?.cnName||'').localeCompare(item1[sortRule.field]?.cnName||'');
+          } else if (sortRule.field === 'modifiedTs') {
+            return formatDate(item2[sortRule.field]).localeCompare(formatDate(item1[sortRule.field]));
+          }
+
+          return item2[sortRule.field].localeCompare(item1[sortRule.field]);
+        })
+      } 
+    }
+
+    const _data = paginate(newData||[], pageNum, pageSize);
+
+    setFilterData(_data);
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, pagination, sortRule])
+
+  useEffect(() => {
+    if (tableWidth>0 && columns.length===0) {
+      let newColumns = [];
+
+      let newCols = [...cols];
+      if ((modelId||'') !== '') {
+        newCols = cols.filter(item => item.dataIndex!=='key');
+      }
+
+      newCols.forEach((column, index) => {
+        const newColumn = {...column}; 
+        if (!newColumn.width) {
+          const rowWidth = (newCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97; //展开50 勾选32 滚动条15
+          
+          if (tableWidth - rowWidth > 200) {
+            newColumn.width = tableWidth - rowWidth;        
+          } else {
+            newColumn.width = 200;
+          }
+        }
+
+        newColumns.push(newColumn);
+      });
+
+      // const includePathCols = [...cols];
+      // includePathCols.splice(3, 0, pathColumn);
+
+      // includePathCols.forEach((column, index) => {
+      //   const newColumn = {...column}; 
+      //   if (!newColumn.width) {
+      //     const rowWidth = (includePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
+          
+      //     if (tableWidth - rowWidth > 200) {
+      //       newColumn.width = tableWidth-rowWidth;        
+      //     } else {
+      //       newColumn.width = 200;
+      //     }
+      //   }
+
+      //   newIncludePathColumns.push(newColumn);
+      // });
+
+      setColumns([ ...newColumns, <Column key='auto' />]);
+      // setIncludePathColumns([ ...newIncludePathColumns, <Column key='auto' />]);
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ tableWidth ])
+
+  const modelEventChange = (e) => {
+    if (e.key === 'modelChange') {
+      getCheckoutDataModel();
+    }
+  }
+
+  const getCheckoutDataModel = () => {
+    dispatch({
+      type: 'pds.getCheckoutService',
+      payload: {
+        id: modelPid
+      },
+      callback: data => {
+        setSubData(data?[data]:[]);
+      },
+      error: () => {
+
+      }
+    })
+  }
+
+  // const getDataModel = () => {
+  //   dispatch({
+  //     type: 'datamodel.getDataModel',
+  //     payload: {
+  //       id: modelId
+  //     },
+  //     callback: data => {
+  //       setSubData(data?[data]:[]);
+  //     },
+  //     error: () => {
+
+  //     }
+  //   })
+  // }
+
+  const editItem = (record) => {
+    // onItemAction && onItemAction(record, 'edit');
+    app.editServer?.({ dirId: catalogId, service: record })
+  }
+
+  const detailItem = (record) => {
+    // onItemAction && onItemAction(record, 'detail', getDataModelerRole(user)===DataModelerRoleReader);
+    app.openDetail?.({ service: record })
+    // setServiceDetailParams({ visible: true, id: record.id })
+  }
+
+  const deployAction = (record) => {
+    onAutoCreateTable && onAutoCreateTable(record);
+  }
+
+  const stateAction = (record, action) => {
+    modal.confirm({
+      title: '提示!',
+      content: `您确定要${action.cnName||''}该服务吗?`,
+      onOk: () => {
+        dispatch({
+          type: 'pds.nextState',
+          payload: {
+            pdsDataServiceId: record.id,
+            actionId: action.id
+          },
+          callback: () => {
+            showMessage('success', `服务${action.cnName||''}成功`);
+
+            if ((modelId||'') === '') {
+              onChange && onChange();
+
+              const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
+              if (index !== -1) {
+                const newSelectedRowKeys = [...selectedRowKeys];
+                newSelectedRowKeys.splice(index, 1);
+                setSelectedRowKeys(newSelectedRowKeys);
+                onSelect && onSelect(newSelectedRowKeys);
+              }
+            } else {
+              if (action.id === '2') {
+                onChange && onChange();
+              } else {
+                getCheckoutDataModel();
+              }
+            }
+            
+          }
+        })
+      }
+    });
+  }
+
+  const deleteItem = (record) => {
+
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要删除该服务吗?',
+      onOk: () => {
+        dispatch({
+          type: 'pds.deleteService',
+          payload: {
+            params: {
+              id: record.id
+            }
+          },
+          callback: () => {
+            showMessage('success', '服务删除成功');
+            onChange && onChange();
+
+            if ((modelId||'') ==='') {
+              const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
+              if (index !== -1) {
+                const newSelectedRowKeys = [...selectedRowKeys];
+                newSelectedRowKeys.splice(index, 1);
+                setSelectedRowKeys(newSelectedRowKeys);
+                onSelect && onSelect(newSelectedRowKeys);
+              }
+            }
+            
+          }
+        })
+      }
+    });
+  }
+
+  const historyItem = (record) => {
+    onHistory && onHistory(record.id);
+  }
+
+  const startODataItem = (record) => {
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要启动该服务的OData吗?',
+      onOk: () => {
+        dispatch({
+          type: 'pds.enableOData',
+          payload: {
+            params: {
+              pdsDataServiceId: record.id
+            }
+          },
+          callback: () => {
+            showMessage('success', '启动成功');
+            onChange && onChange();          
+          }
+        })
+      }
+    });
+  }
+
+  const disableODataItem = (record) => {
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要停用该服务的OData吗?',
+      onOk: () => {
+        dispatch({
+          type: 'pds.disableOData',
+          payload: {
+            params: {
+              pdsDataServiceId: record.id
+            }
+          },
+          callback: () => {
+            showMessage('success', '停用成功');
+            onChange && onChange();          
+          }
+        })
+      }
+    });
+  }
+
+  const offlineService = (record) => {
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要下线该服务吗?',
+      onOk: () => {
+        dispatch({
+          type: 'pds.offlineDataService',
+          payload: {
+            params: {
+              id: record.id
+            }
+          },
+          callback: () => {
+            showMessage('success', '申请成功');
+            onChange && onChange();          
+          }
+        })
+      }
+    });
+  }
+
+  const onSelectChange = keys => {
+    setSelectedRowKeys(keys);
+
+    if ((modelId||'') !== '') {
+      onSubSelect && onSubSelect(keys, subData[0].id);
+    } else {
+      onSelect && onSelect([...subSelectedRowKeys, ...keys]);
+    }
+  };
+
+  const onSubSelectChange = (keys, id) => {
+    if ((keys||[]).length === 0) {
+      const index = subSelectedRowKeys.findIndex((rowKey) => rowKey === id);
+      const newSubSelectedRowKeys = [...subSelectedRowKeys];
+      newSubSelectedRowKeys.splice(index, 1);
+      setSubSelectedRowKeys(newSubSelectedRowKeys);
+      onSelect && onSelect([...newSubSelectedRowKeys, ...selectedRowKeys]);
+    } else {
+      const newSubSelectedRowKeys = [...subSelectedRowKeys, id];
+      onSelect && onSelect([...newSubSelectedRowKeys, ...selectedRowKeys]);
+    }
+  }
+
+  const handleResize = index => (e, { size }) => {
+    let nextColumns = [...columns];
+
+    // if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
+    //   nextColumns = [...includePathColumns];
+    // }
+    
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const onTableChange = (pagination, filters, sorter, extra) => {
+    if (sorter) {
+      setSortRule(sorter);
+    }
+  }
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+    hideSelectAll: (modelId||'') !=='',
+  };
+
+  const classes = classnames('model-table', {
+    'model-table-sub': modelId
+  });  
+
+  let expandable = undefined;
+  if (!modelId) {
+    let needExpand = false;
+    (filterData||[]).forEach(record => {
+      if (record?.alreadyCheckedOut) {
+        needExpand = true;
+      }
+    })
+
+    if (needExpand) {
+      expandable = {
+        expandedRowRender: record => <ModelTable
+          view={view} 
+          modelId={record?.checkedOutId}
+          modelPid={record?.id}
+          onSubSelect={onSubSelectChange}
+          {...props} 
+        />,
+        expandIcon: ({ expanded, onExpand, record }) => {
+          if (!record?.alreadyCheckedOut) return null;
+
+          return expanded ? <UpOutlined style={{ fontSize: 10 }} onClick={e => onExpand(record, e)} /> : <DownOutlined style={{ fontSize: 10 }} onClick={e => onExpand(record, e)} />
+        },
+        rowExpandable: record => {
+          return record?.alreadyCheckedOut;
+        }
+      };
+    }
+  } else {
+    expandable = {
+      expandedRowRender: record => <></>,
+      expandIcon: ({ expanded, onExpand, record }) => {
+        return null;
+      },
+      rowExpandable: record => {
+        return false;
+      }
+    }
+  }
+
+  const displayMenu = (e) => {
+    show(e);
+  }
+
+  const handleItemClick = ({ event, props, data, triggerEvent  }) => {
+    const id = event.currentTarget.id;
+
+    if (id === 'edit') {
+      if (currentItem?.editable) {
+        editItem(currentItem);
+      } else if (currentItem?.permitCheckOut) {
+        dispatch({
+          type: 'pds.checkoutService',
+          payload: {
+            params: {
+              id: currentItem?.id
+            }
+          },
+          callback: data => {
+            onChange && onChange(); 
+            editItem(data);         
+          }
+        })
+      }
+    } else if (id === 'delete') {
+      deleteItem(currentItem);
+    } else if (id === 'sample') {
+      setSampleParams({visible: true, service: currentItem})
+    } else if (id === 'history') {
+      historyItem(currentItem);
+    } else if (id === 'copy') {
+      window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(view==='dir')?(catalogId||''):''}&${ModelerId}=${currentItem.id}`);
+    } else if (id === 'createTable') {
+      deployAction(currentItem);
+    } else if (id.indexOf('action') !== -1) {
+      const index = (id.split('-'))[1];
+      const action = currentItem?.state?.supportedActions[index];
+      stateAction(currentItem, action);
+    } else if (id === 'admit') {
+      app.openAdmit?.({ dirId: catalogId, service: currentItem })
+    } else if (id === 'enableOData') {
+      startODataItem(currentItem);
+    } else if (id === 'disableOData') {
+      disableODataItem(currentItem);
+    } else if (id === 'startFlow') {
+      app.applyServer?.({ service: currentItem });
+    } else if (id === 'downloadTds') {
+      window.open(`/api/pdataservice/pdsCURD/genTDS?id=${currentItem?.id}`);
+    } else if (id === 'checkout') {
+      dispatch({
+        type: 'pds.checkoutService',
+        payload: {
+          params: {
+            id: currentItem?.id
+          }
+        },
+        callback: () => {
+          showMessage('success', '检出成功');
+          onChange && onChange();          
+        }
+      })
+    } else if (id === 'smart') {
+      dispatch({
+        type: 'pds.getSmartBiUrl',
+        payload: {
+          url: currentItem?.smartBiWebSpreadSheetEntry
+        },
+        callback: (data) => {
+          window.open(data)
+        }
+      })
+    } else if (id === 'exchangeOwner') {
+      setExchangeOwnerParams({ visible: true, id: currentItem?.id });
+    } else if (id === 'offline') {
+      offlineService(currentItem);
+    }
+  }
+
+  const onServiceDetailClose = () => {
+    setServiceDetailParams({ visible: false, id: '' })
+  }
+
+  const onSampleClose = () => {
+    setSampleParams({ visible: false, service: undefined });
+  }
+
+  const onExchangeOwnerClose = (refresh = false) => {
+    setExchangeOwnerParams({ visible: false, id: undefined });
+
+    refresh && onChange?.();
+  }
+
+  const mergedColumns = () => {
+    let newColumns = [...columns];
+    // if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
+    //   newColumns = [...includePathColumns];
+    // }
+
+    return (
+      newColumns.map((col, index) => ({
+        ...col,
+        onHeaderCell: column => ({
+          width: column.width,
+          onResize: handleResize(index),
+        }),
+      }))
+    );
+  }
+
+  let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
+
+  if (!currentItem?.editable && currentItem?.state?.id!=='4') {
+    disableEdit = true;
+
+    if (currentItem?.state?.id === '2') {
+      editTip = '待发布的服务不允许编辑';
+    }
+  }
+
+  // if (!currentItem?.permitCheckOut && currentItem?.state?.id==='4') {
+  //   disableEdit = true;
+  //   editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
+  //   editMenuTitle = `编辑(${currentItem.holder||''}正在编辑中)`;
+  // }
+
+  if (!currentItem?.deletable) {
+    disableDelete = true;
+
+    if (currentItem?.state?.id === '2') {
+      deleteTip = '待发布的服务不允许删除';
+    } else if (currentItem?.state?.id === '4') {
+      deleteTip = '已发布的服务不允许删除';
+    }
+  }
+
+  return (
+    <div className={classes}>
+      <ResizeObserver
+        onResize={({ width }) => {
+          setTableWidth(width);
+        }}
+      >
+        <Table
+          rowSelection={view!=='grant'?rowSelection:undefined} 
+          components={{
+            header: {
+              cell: ResizeableHeaderCell,
+            }
+          }}
+          columns={mergedColumns()}
+          rowKey={'id'}
+          dataSource={modelId?(subData||[]):(filterData||[])}
+          pagination={false}
+          size={modelId?'small':'default'}
+          rowClassName={(record, index) => 'cursor-contextmenu'}
+          onRow={(record, index) => {
+            return {
+              id: `data-model-${record?.id}`,
+              style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
+              onContextMenu: event => {
+                setCurrentItem(record);
+                displayMenu(event);
+              },
+            }
+          }}
+          scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
+          onChange={onTableChange}
+          expandable={!isOnlyEnding ? expandable : undefined}
+        />
+      </ResizeObserver>
+        {
+          !modelId && (data||[]).length>0 && <Pagination
+            className="text-center mt-3"
+            showSizeChanger
+            showQuickJumper
+            onChange={(_pageNum, _pageSize) => {
+              setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
+            }}
+            onShowSizeChange={(_pageNum, _pageSize) => {
+              setPagination({ pageNum: 1, pageSize: _pageSize });
+            }}
+            current={pageNum}
+            pageSize={pageSize}
+            defaultCurrent={1}
+            total={(data||[]).length}
+            pageSizeOptions={[10,20,50]}
+            showTotal={total => `共 ${total} 条`}
+          />
+        }
+      <RcMenu id={MENU_ID}>
+        {
+          (getDataModelerRole(user)!==DataModelerRoleReader) && view!=='grant' && !isOnlyEnding && <RcItem id="edit" disabled={!currentItem?.editable&&!currentItem?.permitCheckOut} onClick={handleItemClick}>
+            编辑
+          </RcItem>
+        }
+        {
+          // getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && !isOnlyEnding && currentItem?.permitCheckOut && <RcItem id="checkout" onClick={handleItemClick}>
+          // 检出
+          // </RcItem>
+        }
+        {
+          (getDataModelerRole(user)!==DataModelerRoleReader) && view!=='grant'&& !isOnlyEnding && <RcItem id="delete" disabled={!currentItem?.deletable} onClick={handleItemClick}>
+            <Tooltip title={deleteTip}>
+              删除
+            </Tooltip>
+          </RcItem>
+        }
+        <RcItem id="sample" onClick={handleItemClick}>
+          样本数据
+        </RcItem>
+        <RcItem id="history" onClick={handleItemClick}>
+          历史版本
+        </RcItem>
+        {/* {
+          (getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="copy" onClick={handleItemClick}>
+            复制服务
+          </RcItem>
+        } */}
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && (currentItem?.state?.supportedActions||[]).length>0 && currentItem?.state?.supportedActions.map((item, index) => {
+            return (
+              <RcItem id={`action-${index}`} onClick={handleItemClick}>
+              {item.cnName||''}
+              </RcItem>
+            );
+          }) 
+        }
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader&& view!=='grant' && <RcItem id="admit" onClick={handleItemClick} disabled={!currentItem?.grantable}>
+            授权
+          </RcItem>
+        }
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && isOnlyEnding && <RcItem id="startFlow" onClick={handleItemClick} disabled={currentItem?.grantable}>
+          申请
+          </RcItem>
+        }
+        {
+          // getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && currentItem?.supportOffline && <RcItem id="offline" onClick={handleItemClick} >
+          // 下线
+          // </RcItem>
+        }
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && !isOnlyEnding && currentItem?.supportODataEnable && <RcItem id="enableOData" onClick={handleItemClick}>
+          启动OData
+          </RcItem>
+        }
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && !isOnlyEnding && currentItem?.supportODataDisable && <RcItem id="disableOData" onClick={handleItemClick}>
+          停用OData
+          </RcItem>
+        }
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && !isOnlyEnding && currentItem?.supportODataDisable && <RcItem id="downloadTds" onClick={handleItemClick}>
+          下载Tableau tds
+          </RcItem>
+        }
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && currentItem?.supportSmartBIWebSpreadSheet && <RcItem id="smart" onClick={handleItemClick}>
+          跳转至电子表格
+          </RcItem>
+        }
+        {
+          getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && currentItem?.supportChangeOwn && <RcItem id="exchangeOwner" onClick={handleItemClick}>
+          更换管理人
+          </RcItem>
+        }
+        {/* {
+          getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <RcItem id='createTable' onClick={handleItemClick}>
+          建表
+          </RcItem>
+        } */}
+
+      </RcMenu>
+      <ServiceDetail visible={serviceDetailParams.visible} id={serviceDetailParams.id} onClose={onServiceDetailClose} />
+      <SampleModal visible={sampleParams.visible} service={sampleParams.service} onCancel={onSampleClose} />
+      <ExchangeOwnerModal visible={exchangeOwnerParams.visible} id={exchangeOwnerParams.id} onCancel={onExchangeOwnerClose} />
+
+      { contextHolder }
+    </div>
+  );
+}
+
+export default ModelTable;
\ No newline at end of file

src/view/Manage/Pdata/Component/ModelTable.less

+@import '../../../../variables.less';
+.model-table {
+  .yy-pro-table {
+    .yy-card-body {
+      padding: 0 !important;
+    }
+  }
+
+  .yy-divider-vertical {
+    margin: 0 2px !important;
+  }
+}
+
+.model-table-sub {
+  .yy-table {
+    height: auto !important;
+  }
+
+  .yy-table-placeholder {
+    display: none;
+  }
+
+  .yy-table-tbody tr:not(.yy-table-measure-row) td  {
+    padding: 8px 8px !important;
+  }
+}
+
+.model-digest-descritpion {
+  .yy-descriptions-row > td {
+    padding-bottom: 0px !important;
+  }
+}
+
+.excel-copy-descritpion {
+  .yy-descriptions-row > td {
+    padding-bottom: 0px !important;
+  }
+}
\ No newline at end of file

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

+import React, { useState, useEffect, useContext } from "react";
+import { Tooltip, Tree, Modal, Spin, Dropdown, Menu, Button, AutoComplete } from "antd";
+import { PlusOutlined, SwapOutlined, ImportOutlined, UnorderedListOutlined, ReloadOutlined } from '@ant-design/icons';
+import classnames from 'classnames';
+import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
+
+import UpdateTreeItemModal from './UpdateTreeItemModal';
+import { dispatch } from '../../../../model'; 
+import { showMessage, getQueryParam, highlightSearchContentByTerms, getDataModelerRole } from '../../../../util';
+import { AnchorDirId, AnchorId, AnchorTimestamp, DataModelerRoleAdmin } from '../../../../util/constant';
+import { AppContext } from "../../../../App";
+
+import './ModelTree.less';
+import 'react-contexify/dist/ReactContexify.css';
+
+const { Option } = AutoComplete;
+
+const viewModes = [
+  {
+    key: 'dir',
+    name: '目录视角'
+  },
+  {
+    key: 'state',
+    name: '服务状态视角'
+  }
+];
+
+const ModelTree = (props) => {
+
+  const MENU_ID = 'model-tree';
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  const { onSelect, onViewChange, refrence='', importStockModel, keyword, isOnlyEnding = false } = props;
+
+  const { user, env } = useContext(AppContext);
+  const [ loading, setLoading ] = useState(false);
+  const [ treeData, setTreeData ] = useState(null);
+  const [ item, setItem ] = useState(null);
+  const [ prevItem, setPrevItem ] = useState(null);
+  const [ visible, setVisible ] = useState(false);
+  const [ type, setType ] = useState(null);
+  const [ rootId, setRootId ] = useState('');
+  const [ expandedKeys, setExpandedKeys ] = useState([]);
+  const [ autoExpandParent, setAutoExpandParent ] = useState(false);
+  const [ viewSelectedKey, setViewSelectedKey ] = useState(viewModes[0].key);
+  const [ isSetRootId, setIsSetRootId ] = useState(true);
+  const [ domains, setDomains ] = useState([]);
+  const [ domainSelectedKey, setDomainSelectedKey ] = useState('');
+  const [ currentRightClickDir, setCurrentRightClickDir ] = useState({});
+  
+  const [ searchKeyword, setSearchKeyword ] = useState('');
+  const [ dataList, setDataList ] = useState([]);
+  const [options, setOptions] = useState([]);
+
+  const [modal, contextHolder] = Modal.useModal();
+
+  const timestamp = getQueryParam(AnchorTimestamp, props.location?.search||'');
+  const id = getQueryParam(AnchorId, props.location?.search||'');
+  const did = getQueryParam(AnchorDirId, props.location?.search||'');
+
+  // useEffect(() => {
+  //   getShowSyncAndDomains();
+  //   //eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [])
+
+  useEffect(() => {
+    if (refrence === 'recatalog') {
+      getDirTreeData();
+    } else {
+      setViewSelectedKey(viewModes[0].key);
+      onViewChange && onViewChange(viewModes[0].key);
+
+      if ((id||'') !== '') {
+        getDataModelLocationThenGetDirTreeData();
+      } else if ((did||'') !== '') {
+        getDirTreeData(did);
+      } else {
+        getDirTreeData();
+      }  
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timestamp])
+
+  useEffect(() => {
+
+    if (keyword!=='') {
+      if (item && !prevItem) {
+        setPrevItem(item);
+      }
+
+      setItem(null);
+    } else {
+      if (prevItem && !item) {
+        setItem(prevItem);
+        onSelect && onSelect(prevItem?.key||'');
+        setPrevItem(null);
+      }
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ keyword ])
+
+  // const getShowSyncAndDomains = () => {
+  //   dispatch({
+  //     type: 'datamodel.isSetRootDomainId',
+  //     callback: data => {
+  //       if (data === 'false') {
+  //         dispatch({
+  //           type: 'user.getDomains',
+  //           callback: _data => {
+  //             setDomains(_data||[]);
+  //             setIsSetRootId(false);
+  //           }
+  //         });
+  //       } else {
+  //         setIsSetRootId(true);
+  //       }
+  //     }
+  //   });
+  // }
+
+  const getDataModelLocationThenGetDirTreeData = () => {
+    setLoading(true);
+    dispatch({
+      type: 'pds.getDataServiceLocation',
+      payload: {
+        pdsDataServiceId: id,
+        namespace: `${env?.domainId}`
+      },
+      callback: data => {
+        getDirTreeData(data.pdsDataServiceCatalogId||'', data.offset);
+      },
+      error: () => {
+        setLoading(false);
+        getDirTreeData();
+      }
+    });
+  }
+
+  const getDirTreeData = (defaultSelectedId='', offset=null, type='refresh') => {
+
+    setLoading(true);
+    dispatch({
+      type: (type==='refresh')?'pds.refreshCatalog':'pds.loadDataServiceCatalog',
+      callback: data => {
+
+        data.key = data.id||'';
+        data.title = data.name||'';
+        data.children = data.subCatalogs||[];
+
+        let defaultItem = null;
+
+        function recursion(subCatalogs) {
+
+          if ((subCatalogs||[]).length===0) return;
+
+          (subCatalogs||[]).forEach(catalog=> {
+            catalog.key = catalog.id||'';
+            catalog.title = catalog.name||'';
+            catalog.children = catalog.subCatalogs||[];
+
+            if (catalog.id === defaultSelectedId) {
+              defaultItem = catalog;
+            }
+
+            recursion(catalog.subCatalogs);
+          })
+        } 
+
+        recursion(data.subCatalogs);
+        setLoading(false);
+        setTreeData(data.subCatalogs||[]);
+        setRootId(data.id||'');
+
+        const _dataList = [];
+        generateList(data.subCatalogs||[], _dataList);
+        setDataList(_dataList);
+
+        if (defaultItem) {
+          const expandedKeys = _dataList
+            .map(item => {
+              if (item.key.indexOf(defaultSelectedId) > -1) {
+                return getParentKey(item.key, data.subCatalogs||[]);
+              }
+              return null;
+            })
+            .filter((item, i, self) => item && self.indexOf(item) === i);
+
+          setExpandedKeys([...expandedKeys, defaultSelectedId]);
+          setAutoExpandParent(true);
+
+          setItem(defaultItem);
+          onSelect && onSelect(defaultItem.key||'', offset);
+        
+        } else if (refrence === '') {
+          
+          const currentItem = (data.subCatalogs||[]).length>0?data.subCatalogs[0]: null;
+
+          setItem(currentItem);
+          if (currentItem && currentItem.key) {
+            setExpandedKeys([currentItem?.key]);
+          }
+
+          onSelect && onSelect(currentItem?(currentItem.key||''):'');
+          
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const getStateTreeData = () => {
+    setLoading(true);
+    dispatch({
+      type: 'pds.loadStateCatalog',
+      payload: {
+        isOnlyEnding
+      },
+      callback: data => {
+        setLoading(false);
+        let _treeData = data?.subCatalogs||[];
+        _treeData.forEach(item => {
+          item.title = item.cnName;
+          item.key = item.id; 
+        })
+
+        setTreeData(_treeData);
+        setItem(_treeData.length>0?_treeData[0]:{});
+        onSelect && onSelect(_treeData.length>0?_treeData[0].key:'');
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const generateList = (treeData, list, path = null) => {
+    for (let i = 0; i < treeData.length; i++) {
+      const node = treeData[i];
+      const { id, name } = node;
+
+      const currentPath = path ? `${path}/${name}` : name;
+      list.push({ key: id , title: currentPath, value: currentPath });
+      if (node.children) {
+        generateList(node.children, list, currentPath);
+      }
+    }
+  };
+
+  const getParentKey = (key, tree) => {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i];
+      if (node.children) {
+        if (node.children.some(item => item.id === key)) {
+          parentKey = node.id;
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children);
+        }
+      }
+    }
+    return parentKey;
+  };
+
+  const onExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys);
+    setAutoExpandParent(false);
+  };
+
+  const onViewClick = ({ key }) => {
+
+    if (viewSelectedKey &&  viewSelectedKey===key ) return;
+
+    setViewSelectedKey(key);
+    setSearchKeyword('');
+    onViewChange && onViewChange(key);
+
+    if (key === 'dir') {
+      getDirTreeData();
+    } else {
+      getStateTreeData();
+    }
+  }
+
+  // const onSyncMenuClick = ({ key }) => {
+
+  //   setDomainSelectedKey(key);
+  //   dispatch({
+  //     type: 'datamodel.setRootDomainId',
+  //     payload: {
+  //       params: {
+  //         domainId: key
+  //       }
+  //     },
+  //     callback: () => {
+  //       setIsSetRootId(true);
+  //       getDirTreeData('', null, 'load');
+  //     }
+  //   });
+
+  // }
+
+  const onTreeSelect = (keys,data) => {
+
+    if ((keys||[]).length === 0) {
+      return;
+    }
+
+    const _item = {...data.selectedNodes[0]||[]};
+
+    setItem(_item);
+    onSelect && onSelect(_item.key);
+  }
+
+  const add = () => {
+    setVisible(true);
+    setType('add');
+  }
+
+  const update = () => {
+    setVisible(true);
+    setType('update');
+  }
+
+  const refresh = () => {
+    if (viewSelectedKey==='dir') {
+      getDirTreeData(item?.key||'');
+    } else {
+      getStateTreeData(item?.key||'');
+    }
+  }
+
+  const sync = () => {
+    getDirTreeData(item?.key||'', null, 'load');
+  }
+
+  const moveNode = (steps) => {
+    setLoading(true);
+    dispatch({
+      type: 'pds.upDownCatalog',
+      payload: {
+        pdsDataServiceCatalogId: currentRightClickDir.id,
+        steps
+      },
+      callback: () => {
+        showMessage('success', (steps===-1)?'上移目录成功':'下移目录成功');
+        getDirTreeData(item.id);
+      }, 
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const deleteNode = () => {
+    modal.confirm({
+      title: '提示!',
+      content: '删除目录会删除相关的服务,您确定删除吗?',
+      onOk: () => {
+        setLoading(true);
+        dispatch({
+          type: 'pds.deleteCatalog',
+          payload: {
+            params: {
+              pdsDataServiceCatalogId: currentRightClickDir.id
+            }
+          },
+          callback: () => {
+            showMessage('success', '删除目录成功');
+
+            if (item && currentRightClickDir && item.id===currentRightClickDir.id) {
+              getDirTreeData();
+            } else {
+              getDirTreeData(item.id);
+            }
+          }, 
+          error: () => {
+            setLoading(false);
+          }
+        });
+      }
+    });
+
+  }
+
+  const onUpdateTreeItemModalOk = (id, updateItem) => {
+    setVisible(false);
+    getDirTreeData(id);
+  }
+
+  const onUpdateTreeItemModalCancel = () => {
+    setVisible(false);
+  }
+
+  const treeDirectoryChanged = (did) => {
+    let defaultItem = null;
+
+    function recursion(subCatalogs) {
+
+      if ((subCatalogs||[]).length===0) return;
+
+      (subCatalogs||[]).forEach(catalog=> {
+        catalog.key = catalog.id||'';
+        catalog.title = catalog.name||'';
+        catalog.children = catalog.subCatalogs||[];
+
+        if (catalog.id === did) {
+          defaultItem = catalog;
+        }
+
+        recursion(catalog.subCatalogs);
+      })
+    } 
+
+    recursion(treeData||[]);
+
+    if (defaultItem) {
+      const expandedKeys = dataList
+        .map(item => {
+          if (item.key.indexOf(did) > -1) {
+            return getParentKey(item.key, treeData||[]);
+          }
+          return null;
+        })
+        .filter((item, i, self) => item && self.indexOf(item) === i);
+
+      setExpandedKeys([...expandedKeys, did]);
+      setAutoExpandParent(true);
+
+      setItem(defaultItem);
+      onSelect && onSelect(defaultItem.key||'');
+    
+    }
+  }
+
+  const onAutoCompleteSearch = (searchText) => {
+    setOptions(
+      !searchText ? [] : (dataList||[]).filter(item => item.title.indexOf(searchText)!==-1),
+    );
+  };
+
+  const onAutoCompleteChange = (value) => {
+    setSearchKeyword(value);
+  }
+
+  const onAutoCompleteSelect = (value, option) => {
+    const paths = value.split('/');
+    setSearchKeyword(paths[paths.length-1]);
+    treeDirectoryChanged(option.key);
+  };
+
+  const displayMenu = (e) => {
+    show({
+      event: e,
+      position: {
+        x: e.clientX + 30,
+        y: e.clientY - 10
+      }
+    });
+  }
+
+  const exportMenu = (
+    <Menu selectedKeys={[viewSelectedKey]} onClick={onViewClick}>
+    {
+      viewModes && viewModes.map(item => {
+        return (
+          <Menu.Item key={item.key} value={item.key} >
+            <div style={{ textAlign: 'center' }}>
+            {item.name}
+            </div>
+          </Menu.Item>
+        )
+      })
+    }
+    </Menu>
+  );
+
+  // const syncMenu = (
+  //   <Menu selectedKeys={[domainSelectedKey]} onClick={onSyncMenuClick}>
+  //   {
+  //     domains && domains.map(domain => {
+  //       return (
+  //         <Menu.Item key={domain.domainId} value={domain.domainId} >{domain.domainName}</Menu.Item>
+  //       )
+  //     })
+  //   }
+  //   </Menu>
+  // );
+
+  const classes = classnames('model-tree', {
+    'model-tree-recatalog': (refrence === 'recatalog')
+  });  
+
+  return (
+    <div className={classes}>
+    {
+      (refrence==='') && <div
+        className='p-3'
+        style={{
+          display: 'flex',
+          borderBottom: "1px solid #EFEFEF",
+          height: 57,
+          alignItems: 'center',
+          // justifyContent: (viewSelectedKey==='dir' && getDataModelerRole(user)===DataModelerRoleAdmin)?'space-between':'',
+        }}
+      >
+        <Dropdown overlay={exportMenu} placement="bottomLeft">
+          <Tooltip title="视角">
+            <UnorderedListOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
+          </Tooltip>
+        </Dropdown>
+
+        {
+          // (viewSelectedKey==='dir' && getDataModelerRole(user)===DataModelerRoleAdmin && !isOnlyEnding) && ( 
+          //   <Tooltip title="新增目录" className='ml-6'>
+          //     <PlusOutlined className='default' onClick={add} style={{ fontSize:16,cursor:'pointer' }} />
+          //   </Tooltip>
+          // )
+        }     
+        {/* {
+          (viewSelectedKey==='dir' && getDataModelerRole(user)===DataModelerRoleAdmin) && ( 
+            <Tooltip title="存量模型导入" className='ml-2'>
+              <ImportOutlined className='default' onClick={() => { importStockModel && importStockModel() }} style={{ fontSize:16,cursor:'pointer' }} />
+            </Tooltip>
+          )
+        } */}
+
+        <Tooltip title="刷新目录" className='ml-6'>
+          <Button type='text' icon={<ReloadOutlined className='default' />} size='small' onClick={refresh} />
+        </Tooltip>
+
+        {/* {
+          (viewSelectedKey==='dir' && getDataModelerRole(user)===DataModelerRoleAdmin) && !isSetRootId && (
+            <Dropdown overlay={syncMenu} placement="bottomLeft"> 
+              <Tooltip title="同步目录">
+                <SwapOutlined className='default ml-2' style={{ fontSize:16,cursor:'pointer', transform: 'rotate(90deg)', }} />
+              </Tooltip>
+            </Dropdown>
+          )
+        }  */}
+
+        {
+          (viewSelectedKey==='dir' && getDataModelerRole(user)===DataModelerRoleAdmin) && isSetRootId && (
+              <Tooltip title="同步目录" className='ml-6'>
+                <Button type='text' icon={<SwapOutlined className='default' style={{ transform: 'rotate(90deg)' }} />} size='small' onClick={sync} />
+              </Tooltip>
+          )
+        }   
+      </div>
+    }
+      <div className='p-3'>
+        <Spin spinning={loading} >
+          {
+            (viewSelectedKey==='dir') && <AutoComplete
+              allowClear
+              value={searchKeyword}
+              style={{ marginBottom: 10, width: '100%' }}
+              onSelect={onAutoCompleteSelect}
+              onSearch={onAutoCompleteSearch}
+              onChange={onAutoCompleteChange}
+              onClear={() => { setSearchKeyword(''); }}
+            >
+            {
+              (options||[]).map((item, index) => {
+                return (
+                  <Option key={item.key} value={item.value}>
+                    <div style={{ whiteSpace: 'normal' }}>
+                    {highlightSearchContentByTerms(item.title, [searchKeyword])}
+                    </div>
+                  </Option>
+                );
+              })
+            }
+            </AutoComplete>
+          }
+          <Tree 
+            className='tree-contextmenu'
+            onExpand={onExpand}
+            expandedKeys={expandedKeys}
+            autoExpandParent={autoExpandParent}
+            showLine 
+            showIcon={false} 
+            onSelect={onTreeSelect} 
+            treeData={treeData} 
+            selectedKeys={[item?item.key:'']} 
+            titleRender={(nodeData) => {
+              return <span title={nodeData?.remark||''} className='cursor-pointer-contextmenu'>{(nodeData.status===-1)?`${nodeData?.name}_已下线`:nodeData?.name||''}</span>;
+            }}
+            onRightClick={({event, node}) => {
+              if (viewSelectedKey==='dir') {
+                setCurrentRightClickDir(node);
+                displayMenu(event);
+              }
+            }}
+          />      
+        </Spin>
+      </div>
+      <UpdateTreeItemModal 
+        visible={visible} 
+        type={type}
+        item={(type==='add')?item:currentRightClickDir}
+        rootId={rootId}
+        onOk={onUpdateTreeItemModalOk} 
+        onCancel={onUpdateTreeItemModalCancel} 
+        />
+      {
+        (refrence!=='recatalog') && <RcMenu id={MENU_ID}>
+          <RcItem id="edit" onClick={update}>
+            修改目录
+          </RcItem>
+          <RcItem id="up" onClick={() => { moveNode(-1); }}>
+            上移目录
+          </RcItem> 
+          <RcItem id="down" onClick={() => { moveNode(1); }}>
+            下移目录
+          </RcItem> 
+          <RcItem id="delete" onClick={deleteNode}>
+            删除目录
+          </RcItem>
+        </RcMenu> 
+      } 
+      {contextHolder}  
+    </div>
+  );
+}
+
+export default ModelTree;
\ No newline at end of file

src/view/Manage/Pdata/Component/ModelTree.less

+@import '../../../../variables.less';
+.model-tree {
+  .yy-tree-list {
+    height: calc(100vh - @header-height - @breadcrumb-height - 25px - 57px - @pm-3 - 40px) !important;
+    overflow: auto !important;
+  }
+}
+
+.model-tree-recatalog {
+  .yy-tree-list {
+    height: 500px !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file

src/view/Manage/Pdata/Component/ODataConfigModal.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Button, Form, Input } from 'antd';
+import { dispatch } from '../../../../model';
+
+const FC = (props) => {
+  const {visible, service, onCancel} = props;
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (visible) {
+      form?.setFieldsValue({name: service?.odata});
+    }
+  }, [visible])
+
+  const onOk = async() => {
+    try {
+      const row = await form.validateFields();
+      setConfirmLoading(true);
+      dispatch({
+        type: 'pds.enableOData',
+        payload: { 
+          params: {
+            pdsDataServiceId: service?.id,
+            name: row.name,
+          }
+        },
+        callback: data => {
+          setConfirmLoading(false);
+          cancel(true);
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      });
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  }
+
+  const reset = () => {
+    form.resetFields();
+    setConfirmLoading(false);
+  }
+
+  const cancel = (refresh = false) => {
+    reset();
+    onCancel?.(refresh);
+  }
+
+  const footer = [ 
+    <Button
+      key="0" 
+      onClick={() => {cancel()}}
+    >
+    取消
+    </Button>,
+    <Button
+      key="1" 
+      type="primary"
+      loading={confirmLoading}
+      onClick={onOk}
+    >
+    确定
+    </Button>,
+  ];
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title={`启用${service?.name}的OData`}
+      width={540}
+      onCancel={() => {cancel()}}
+      footer={footer}
+    >
+      <Form form={form}>
+        <Form.Item 
+          name='name'
+          label='URI'
+          rules={[
+            {
+              required: true,
+              message: '请输入URI',
+            },
+          ]}
+        >
+          <Input placeholder='请输入URI' />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+export default FC;
\ No newline at end of file

src/view/Manage/Pdata/Component/Offline.jsx

+import React, { useState } from 'react';
+import { Modal, Form, Input } from 'antd';
+import LocalStorage from 'local-storage';
+
+import { dispatchLatest } from '../../../../model';
+import { showMessage, showNotifaction } from '../../../../util';
+
+const FC = (props) => {
+  const { visible, onCancel, ids } = props;
+
+  const [ form ] = Form.useForm();
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 20 },
+    },
+  };
+
+  const handleOk = async () => {
+
+    try {
+      const values = await form.validateFields();
+
+      setConfirmLoading(true);
+
+      dispatchLatest({
+        type: 'pds.offline',
+        payload: {
+          params: {
+            reason: values?.desc
+          },
+          data: ids
+        },
+        callback: () => {
+          reset();
+          
+          showMessage('success', '申请成功') 
+          onCancel && onCancel(true);
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+
+    }
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    form.resetFields();
+  }
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='服务下线'
+      width={520}
+      confirmLoading={confirmLoading}
+      onCancel={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+      onOk={handleOk}
+    >
+    <Form 
+      {...formItemLayout}
+      form={form}
+    >
+      <Form.Item 
+        label="下线原因" 
+        name="desc" 
+        rules={[{ required: true, message: '请填写下线原因' }]}
+      >
+        <Input.TextArea rows={6} />
+      </Form.Item>
+    </Form>
+    </Modal>
+  );
+}
+
+export default FC;
\ No newline at end of file

src/view/Manage/Pdata/Component/RecatalogModal.jsx

+import React, { useState } from "react";
+import { Modal } from "antd";
+
+import { dispatch } from '../../../../model';
+import ModelTree from './ModelTree';
+import { showMessage, showNotifaction } from '../../../../util';
+
+const RecatalogModal = (props) => {
+  
+  const { onCancel, visible, ids } = props;
+  const [ catalogId, setCatalogId ] = useState('');
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const onSelect = (value) => {
+    setCatalogId(value);
+  }
+
+  const onOk = () => {
+    if ((catalogId||'') === '') {
+      showMessage('warn', '请先选择服务目录');
+      return;
+    }
+    
+    setConfirmLoading(true);
+    dispatch({
+      type: 'pds.recatalogService',
+      payload: {
+        params: {
+          pdsDataServiceCatalogId: catalogId,
+          pdsDataServiceIds: ids.join(',')
+        },
+      },
+      callback: message => {
+        setConfirmLoading(false);
+
+        if ((message||'')!=='' && (message||'')!=='ok') {
+          showNotifaction('提示', message, 5);
+        }
+
+        reset();
+        onCancel && onCancel(true);
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    setCatalogId('');
+  }
+
+  return(
+    <div>
+    {
+      visible && <Modal
+        title='变更目录详情'
+        visible={ visible }
+        width={ 400 }
+        confirmLoading={ confirmLoading }
+        onCancel={()=>{ 
+          reset();
+          onCancel && onCancel()
+        }}
+        onOk={ onOk }
+      >
+        <ModelTree
+          refrence='recatalog'
+          onSelect={onSelect} 
+        /> 
+      </Modal>
+    }
+    </div>
+  )
+}
+
+export default RecatalogModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/SampleModal.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Button, Form, Input, Table, Tooltip, Typography } from 'antd';
+import { dispatch } from '../../../../model';
+
+const FC = (props) => {
+  const {visible, service, onCancel} = props;
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(undefined);
+  const [cols, setCols] = useState([]);
+  
+  useEffect(() => {
+    if (visible) {
+      getSample();
+    }
+  }, [visible])
+
+  const getSample = () => {
+    setLoading(true)
+    dispatch({
+      type: 'pds.getSample',
+      payload: { 
+        params: {
+          pdsDataServiceId: service?.id,
+        }
+      },
+      callback: data => {
+        setLoading(false);
+        setData(data?.content||[]);
+
+        const newCols = [];
+        data?.headers?.forEach(item => {
+          if (item) {
+            newCols.push({
+              title: item, 
+              dataIndex: item, 
+              width: 150, 
+              ellipsis: true,
+              render: (value, record) => <Tooltip title={value}>
+                <Typography.Text ellipsis={true}>{value}</Typography.Text>
+              </Tooltip>
+            });
+          }
+        });
+        setCols(newCols);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const cancel = () => {
+    setLoading(false);
+    setData(undefined);
+    onCancel?.();
+  }
+
+  const footer = [ 
+    <Button
+      key="0" 
+      onClick={() => {cancel()}}
+    >
+    取消
+    </Button>,
+  ];
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title={`${service?.name}的样本数据`}
+      width={650}
+      onCancel={() => {cancel()}}
+      footer={footer}
+    >
+      <Table 
+        loading={loading} 
+        columns={cols} 
+        dataSource={data||[]} 
+        size='small'
+        scroll={{ x: 600, y: 300 }}
+        pagination={false}
+      />
+    </Modal>
+  )
+}
+
+export default FC;
\ No newline at end of file

src/view/Manage/Pdata/Component/SelectFilter.jsx

+import React, { useState, useMemo, useEffect } from "react"
+import {Select} from "antd"
+import debounce from 'lodash/debounce';
+
+const {Option} = Select
+
+const FC = ({ value, onChange, data, ...restProps }) => {
+  const [searchValue, setSearchValue] = useState(undefined)
+
+  const debounceFetcher = useMemo(() => {
+    return debounce((value) => {
+      setSearchValue(value);
+    }, 800);
+  }, []);
+
+  const filterData = useMemo(() => {
+    if (searchValue) {
+        return data?.filter(item => item.includes(searchValue));
+    } 
+    
+    return data||[];
+  }, [data, searchValue])  
+
+  const change = (value) => {
+    onChange?.(value)
+  }
+
+  return (
+    <Select 
+      style={{width:'100%'}}
+      showSearch
+      value={value}
+      onChange={change}
+      allowClear
+      filterOption={false}
+      onSearch={debounceFetcher}
+      {...restProps}
+    >
+    {
+      filterData?.map((item, index)=>{
+        return(
+          <Option value={item} key={index}>{item}</Option>
+        )
+      })
+    }
+    </Select>
+  )
+}   
+
+export default FC
\ No newline at end of file

src/view/Manage/Pdata/Component/SelectUsers.jsx

+import React, { useState, useMemo, useEffect } from "react"
+import {Select} from "antd"
+import debounce from 'lodash/debounce';
+
+const {Option} = Select
+
+const SelectUser:React.FC=(props)=>{
+
+    const {value,onChange,users,type,loading} = props
+
+    const [searchValue, setSearchValue] = useState(undefined)
+
+    const debounceFetcher = useMemo(() => {
+        return debounce((value) => {
+            setSearchValue(value);
+        }, 800);
+      }, []);
+
+    const filterUsers = useMemo(() => {
+        if (searchValue) {
+            return users?.filter(item => item.nachn?.includes(searchValue) || item.pernr?.includes(searchValue));
+        } 
+        
+        return users||[];
+    }, [users, searchValue])  
+
+    const change=(value)=>{
+        onChange&&onChange(value)
+    }
+
+    if(type==='edit'){
+        return(
+            <Select 
+                style={{width:'100%'}}
+                showSearch
+                value={value}
+                onChange={change}
+                loading={loading}
+                allowClear
+                filterOption={false}
+                onSearch={debounceFetcher}
+            >
+                {
+                    filterUsers?.map((item)=>{
+                        return(
+                            <Option value={item.pernr} key={item.pernr}>{`${item.nachn}(${item.pernr})`}</Option>
+                        )
+                    })
+                }
+            </Select>
+        )
+    }else if(type==='detail'){
+        try {
+            const user = users?.filter((item)=>(item.pernr===value))
+            return `${user[0].nachn}(${user[0].pernr})`;
+        } catch (error) {
+            return value
+        }
+    }else{
+        return null
+    }
+}   
+
+export default SelectUser
\ No newline at end of file

src/view/Manage/Pdata/Component/ServiceDetail.jsx

+import React, { useState, useMemo, useEffect } from 'react'
+import { Button, Modal, Spin, Popover, Table, Descriptions, Tooltip } from 'antd'
+
+import { dispatch } from '../../../../model'
+import { highlightSearchContentByTerms } from '../../../../util'
+
+const FC = (props) => {
+  const { id, terms } = props
+
+  const [data, setData] = useState()
+  const [loading, setLoading] = useState(false)
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      width: 60,
+      fixed: 'left',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      }
+    },
+    {
+      title: '中文名称',
+      width: 200,
+      dataIndex: 'cnName',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      fixed: 'left',
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+          <span>
+          {highlightSearchContentByTerms(text, terms)}
+          </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '英文名称',
+      width: 200,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      render: (text, record, index) => {
+        return (
+          <Tooltip title={text||''}>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '类型',
+      width: 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 '';
+      }
+    },
+  ]
+
+  useEffect(() => {
+    getService()
+  }, [])
+
+  const getService = () => {
+    setLoading(true)
+
+    dispatch({
+      type: 'pds.getDataService',
+      payload: {
+        id
+      },
+      callback: (data) => {
+        setLoading(false)
+        setData(data||[])
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  return (
+    <Spin spinning={loading}>
+      <h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3>
+      <Descriptions className='mt-3' column={3}>
+        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{highlightSearchContentByTerms(data?.cnName||'', terms)}</Descriptions.Item>
+        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>{highlightSearchContentByTerms(data?.name||'', terms)}</Descriptions.Item>
+        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据内容</div>}>{highlightSearchContentByTerms(data?.remark||'', terms)}</Descriptions.Item>
+      </Descriptions>
+      <h3 className='mr-3' style={{ marginBottom: 0 }}>字段列表</h3>
+      <Table
+        className='mt-3'
+        dataSource={data?.pdsdataServiceAttributes||[]}
+        columns={columns}
+        size='small'
+        rowKey='iid'
+        pagination={false}
+        sticky
+      />
+    </Spin>
+  )
+
+}
+
+export default FC

src/view/Manage/Pdata/Component/ServiceDetailModal.jsx

+import React, { useState, useMemo, useEffect } from 'react'
+import { Button, Modal, Spin, Popover, Table, Descriptions, Tooltip } from 'antd'
+
+import { dispatch } from '../../../../model'
+import { highlightSearchContentByTerms } from '../../../../util'
+import ServiceDetail from './ServiceDetail'
+
+const FC = (props) => {
+  const { visible, id, onClose, terms } = props
+
+  const close = () => {
+    onClose?.()
+  }
+
+  return (
+    <Modal
+      width={1200}
+      visible={visible}
+      destroyOnClose
+      title='服务详情'
+      bodyStyle={{ minHeight: 300 }}
+      footer={<>
+        <Button onClick={close}>取消</Button>
+      </>}
+      onCancel={close}
+    >
+    { visible && <ServiceDetail id={id} terms={terms} /> }
+    </Modal>
+  )
+
+}
+
+export default FC

src/view/Manage/Pdata/Component/StartAuthorize.jsx

+import React, { useState } from 'react';
+import { Modal, Form, Input } from 'antd';
+import LocalStorage from 'local-storage';
+
+import { dispatchLatest } from '../../../../model';
+import { showNotifaction, showMessage } from '../../../../util';
+
+const FC = (props) => {
+  const { visible, onCancel, services } = props;
+
+  const [ form ] = Form.useForm();
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 20 },
+    },
+  };
+
+  const handleOk = async () => {
+
+    try {
+      const values = await form.validateFields();
+
+      setConfirmLoading(true);
+
+      dispatchLatest({
+        type: 'pds.authorize',
+        payload: {
+          params: {
+            reason: values?.desc
+          },
+          data: services
+        },
+        callback: () => {
+          reset();
+          
+          showMessage('success', '授权成功!');
+          onCancel && onCancel(true);
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+
+    }
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    form.resetFields();
+  }
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='服务授权'
+      width={520}
+      confirmLoading={confirmLoading}
+      onCancel={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+      onOk={handleOk}
+    >
+    <Form 
+      {...formItemLayout}
+      form={form}
+    >
+      <Form.Item 
+        label="授权原因" 
+        name="desc" 
+        rules={[{ required: true, message: '请填写授权原因' }]}
+      >
+        <Input.TextArea rows={6} />
+      </Form.Item>
+    </Form>
+    </Modal>
+  );
+}
+
+export default FC;
\ No newline at end of file

src/view/Manage/Pdata/Component/StartFlowModal.jsx

+import React, { useState } from 'react';
+import { Modal, Form, Input } from 'antd';
+import LocalStorage from 'local-storage';
+
+import { dispatchLatest } from '../../../../model';
+import { showNotifaction } from '../../../../util';
+
+const StartFlowModal = (props) => {
+  const { visible, onCancel, ids } = props;
+
+  const [ form ] = Form.useForm();
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 20 },
+    },
+  };
+
+  const handleOk = async () => {
+
+    try {
+      const values = await form.validateFields();
+
+      setConfirmLoading(true);
+
+      dispatchLatest({
+        type: 'user.fetchSessionInfo',
+        callback: session => {
+          dispatchLatest({
+            type: 'datamodel.startFlow',
+            payload: {
+              params: {
+                user: session?.userName,
+                modelIds: ids.join(','),
+                flowDesc: values?.desc
+              }
+            },
+            callback: data => {
+              reset();
+              
+              if ((data||'') !== '') {
+                showNotifaction('送审提示', data, 5);
+              }
+              
+              LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
+              let event = new Event('storage');
+              event.key = 'modelChange';
+              window?.dispatchEvent(event);
+              
+              onCancel && onCancel(true);
+            },
+            error: () => {
+              setConfirmLoading(false);
+            }
+          })
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+
+    }
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    form.resetFields();
+  }
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='模型送审'
+      width={520}
+      confirmLoading={confirmLoading}
+      onCancel={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+      onOk={handleOk}
+    >
+    <Form 
+      {...formItemLayout}
+      form={form}
+    >
+      <Form.Item 
+        label="送审内容" 
+        name="desc" 
+        rules={[{ required: true, message: '请填写送审内容' }]}
+      >
+        <Input.TextArea rows={6} />
+      </Form.Item>
+    </Form>
+    </Modal>
+  );
+}
+
+export default StartFlowModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/StartRelease.jsx

+import React, { useState } from 'react';
+import { Modal, Form, Input } from 'antd';
+import LocalStorage from 'local-storage';
+
+import { dispatchLatest } from '../../../../model';
+import { showMessage, showNotifaction } from '../../../../util';
+
+const FC = (props) => {
+  const { visible, onCancel, ids } = props;
+
+  const [ form ] = Form.useForm();
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 20 },
+    },
+  };
+
+  const handleOk = async () => {
+
+    try {
+      const values = await form.validateFields();
+
+      setConfirmLoading(true);
+
+      dispatchLatest({
+        type: 'pds.release',
+        payload: {
+          params: {
+            reason: values?.desc
+          },
+          data: ids
+        },
+        callback: () => {
+          reset();
+          
+          showMessage('success', '发布成功!') 
+          onCancel && onCancel(true);
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+
+    }
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    form.resetFields();
+  }
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='服务发布'
+      width={520}
+      confirmLoading={confirmLoading}
+      onCancel={() => {
+        reset();
+        onCancel && onCancel();
+      }}
+      onOk={handleOk}
+    >
+    <Form 
+      {...formItemLayout}
+      form={form}
+    >
+      <Form.Item 
+        label="发布原因" 
+        name="desc" 
+        rules={[{ required: true, message: '请填写发布原因' }]}
+      >
+        <Input.TextArea rows={6} />
+      </Form.Item>
+    </Form>
+    </Modal>
+  );
+}
+
+export default FC;
\ No newline at end of file

src/view/Manage/Pdata/Component/SuggestTable.jsx

+import React, { useState } from 'react';
+import { Table, Tooltip } from 'antd';
+import { Resizable } from 'react-resizable';
+import ResizeObserver from 'rc-resize-observer';
+
+import { isSzseEnv } from '../../../../util';
+import { dispatch } from '../../../../model'; 
+
+import './SuggestTable.less';
+
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
+const SourceComponent = (props) => {
+  const { data, onClick, name } = props;
+
+  const moreSourceComponent = <div style={{ maxWidth: 400, maxHeight: 300, overflow: 'auto' }}>
+  {
+    (data||[]).map((source, index) => {
+      return (
+        <div 
+          className='pointer'
+          key={index}
+          style={{
+            textDecoration: 'underline',
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick && onClick(source.sourceId, name);
+          }}
+        >
+        {source.sourcePath||''}
+        </div>
+      );
+    })
+  }
+  </div>;
+
+  return (
+    <Tooltip 
+      title={moreSourceComponent}
+      overlayClassName='tooltip-common'
+    >
+      <a 
+        href='#' 
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick && onClick(data[0].sourceId, name);
+        }}
+      >
+      {
+        (data||[]).length>0 && <span>{data[0].sourcePath||''}</span>
+      }
+      </a>
+    </Tooltip>
+  );
+}
+
+const SuggestTable = (props) => {
+
+  const { suggests, onSelect } = props;
+  const [ tableWidth, setTableWidth ] = useState(0);
+  
+  const cols = [
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: isSzseEnv?360:160,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '英文名称',
+      dataIndex: 'name',
+      width: isSzseEnv?360:160,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '业务含义',
+      dataIndex: 'remark',
+      width: isSzseEnv?360:160,
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>{text||''}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '匹配度',
+      dataIndex: 'score',
+      width: 100,
+      render: (_, record, index) => {
+        return (
+          <React.Fragment>
+            <span style={{ color: '#f50' }}>{`${record.recommendedStats?.score}%`}</span>
+            { index===0 && <span style={{ color: '#f50' }}> 推荐</span> }
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: '使用次数',
+      dataIndex: 'referencesCount',
+      width: 80,
+      ellipsis: true,
+      render: (_, record) => {
+        return (
+          <span>{record.recommendedStats?.referencesCount}</span>
+        );
+      }
+    },
+    {
+      title: '来源',
+      dataIndex: 'source',
+      ellipsis: true,
+      render: (_, record) => {
+        return (
+          <SourceComponent data={record.recommendedStats?.sourceInfos||[]} name={record.name||''} onClick={sourceOnClick} />
+        );
+      }
+    },
+  ];
+
+  const [ columns, setColumns ] = useState(cols);
+
+  const sourceOnClick = (id, name) => {
+    const timestamp = new Date().getTime();
+
+    const tempArray = id.split('=');
+
+    if (tempArray.length>=3) {
+
+      dispatch({
+        type: 'datamodel.getParent',
+        payload: {
+          id
+        },
+        callback: data => {
+          window.open(`/center-home/metadetail?mid=${encodeURIComponent(data._id)}&action=metadetail&type=detail&manager=false&activekey=1&name=${encodeURIComponent(name||'')}`);
+        }
+      })
+    } else {
+      window.open(`/center-home/menu/datastandard?id=${id}&timestamp=${timestamp}`);
+    }
+  }
+
+  const onTableSelect = (record, selected, selectedRows, nativeEvent) => {
+    onSelect && onSelect(record);
+  }
+
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const mergedColumns = () => {
+    return (
+      columns.map((column, index) => { 
+        return {
+          ...column,
+          onHeaderCell: column => ({
+            width: column.width,
+            onResize: handleResize(index),
+          }),
+        };
+      })
+    );
+  }
+
+  const rowSelection = {
+    type: 'radio',
+    onSelect: onTableSelect,
+  };
+
+  return (
+    <div className='suggest-table'>
+      <ResizeObserver
+        onResize={({ width }) => {
+
+          if (tableWidth !== width) {
+            setTableWidth(width);
+            let newColumns = [...cols];
+
+            newColumns.forEach((column, index) => { 
+              if (!column.width) {
+                const rowWidth = (cols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 50;
+                
+                if (width > rowWidth) {
+                  column.width = (width-rowWidth)>200?(width-rowWidth):200;        
+                } else {
+                  column.width = 200;
+                }
+              }
+            });
+
+            setColumns(newColumns);
+          }
+        }}
+      >
+        <Table
+          rowSelection={rowSelection}
+          dataSource={suggests||[]}
+          pagination={false}
+          loading={false}
+          rowKey='iid'
+          rowClassName={(record, index) => {
+            return 'pointer';
+          }}
+          components={{
+            header: {
+              cell: ResizeableHeaderCell,
+            }
+          }}
+          columns={mergedColumns()}
+          onRow={(record, index) => {
+            return {
+              onClick: (e) => {
+                onSelect && onSelect(record);
+              }
+            }
+          }}
+        />
+      </ResizeObserver>
+    </div>
+  );
+}
+
+export default SuggestTable;
\ No newline at end of file

src/view/Manage/Pdata/Component/SuggestTable.less

+.suggest-table {
+  .yy-table {
+    margin: 0 !important;
+    max-height: 300px !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file

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

+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 { item } = this.props;
+    if (item!==preProps.item) {
+      this.radioState();
+    }
+  }
+
+  radioState = () => {
+    const { item } = this.props;
+    this.setState({ radioDisable: item? false: true })
+  }
+
+  render() {
+    const { type, form } = this.props;
+    const { radioDisable } = this.state;
+
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 },
+      },
+    };
+
+    return (
+      <Form 
+        {...formItemLayout}
+        form={form}
+      >
+        {
+          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"
+          rules={[{ required: true, message: '请输入名称!' }]}
+          >
+          <Input />
+        </Form.Item>
+        <Form.Item 
+          label="描述" 
+          name="remark"
+          rules={[{ required: true, message: '请输入描述!' }]}
+          >
+          <Input />
+        </Form.Item>
+        <Form.Item 
+          label="编码" 
+          name="code"
+          >
+          <Input />
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const UpdateTreeItemModal = (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';
+      }
+
+      form.setFields([{ name: 'name', errors: [] }, { name: 'remark', errors: [] }, { name: 'code', errors: [] }]);
+
+      if (type === 'add') {
+        form.setFieldsValue({ action: _action, name: '', remark: '', code: '' });
+      } else {
+        form.setFieldsValue({ action: '', name: item?item.name:'', remark: item?item.remark:'', code: item?.code });
+      }
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
+  const handleOk = async () => {
+
+    setConfirmLoading(true);
+
+    try {
+      const values = await form.validateFields();
+
+      let payload = null;
+      if (type === 'add' && values.action==='root') {
+        payload = {
+          name: values.name||'',
+          remark: values.remark||'',
+          code: values.code||'',
+          parentId: rootId
+        };
+      } else if (type === 'add') {
+        payload = {
+          name: values.name||'',
+          remark: values.remark||'', 
+          code: values.code||'',
+          parentId: item.id
+        };
+      } else {
+        payload = {
+          ...item,
+          name: values.name||'',
+          remark: values.remark||'', 
+          code: values.code||'',
+        }
+      }
+
+      dispatchLatest({
+        type: 'pds.saveCatalog',
+        payload: {
+          data: payload
+        },
+        callback: id => {
+
+          setConfirmLoading(false);
+
+          if (onOk) {
+            onOk(id, payload);
+          }
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      });
+    } catch (errInfo) {
+      setConfirmLoading(false);
+    }
+  }
+
+  return (
+    <Modal 
+      forceRender
+      confirmLoading={confirmLoading}
+      visible={visible}
+      title={type==='add'?"新增目录":"更新目录"}
+      onOk={handleOk}
+      onCancel={() => {
+        setConfirmLoading(false);
+        onCancel && onCancel();
+      }}
+    >
+      <UpdateTreeItemForm form={form} item={item} type={type} />
+    </Modal>
+  );
+}
+
+export default UpdateTreeItemModal;
\ No newline at end of file

src/view/Manage/Pdata/Component/VersionCompare.jsx

+import React, { useEffect, useState, useRef } from 'react';
+import { Form, Select, Spin, Tooltip, Checkbox, Typography } from 'antd';
+
+import { dispatch, dispatchLatest } from '../../../../model'; 
+import { formatVersionDate } from '../../../../util';
+import VersionCompareHeader from './VersionCompareHeader';
+import VersionCompareTable from './VersionCompareTable';
+import VersionCompareIndex from './VersionCompareIndex';
+import FilterColumnAction from './FilterColumnAction';
+
+import './VersionCompare.less';
+
+const { Text, Paragraph } = Typography;
+const { Option } = Select;
+const defaultColumnTitles = ['序号', '中文名称', '英文名称', '类型', '业务含义'];
+
+const VersionCompare = (props) => {
+
+  const { id } = props;
+
+  const [ basicVersion, setBasicVersion ] = useState('');
+  const [ basicVersions, setBasicVersions ] = useState([]);
+  const [ incVersion, setIncVersion ] = useState('');
+  const [ incVersions, setIncVersions ] = useState([]);
+  const [ loading, setLoading ] = useState(false);
+  const [ compareData, setCompareData ] = useState(null);
+  const [ loadingCompare, setLoadingCompare ] = useState(false);
+  const [ onlyShowChange, setOnlyShowChange ] = useState(true);
+  const [ attrFilterColumns, setAttrFilterColumns ] = useState([]);
+  const [ attrSelectedTitles, setAttrSelectedTitles ] = useState(defaultColumnTitles);
+ 
+  const attrColumnsRef = useRef([]);
+
+  useEffect(() => {
+    if ((id||'') !== '') {
+      getVersions();
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ id ])
+
+  const getVersions = () => {
+    setLoading(true);
+    dispatch({
+      type: 'datamodel.getVersions',
+      payload: {
+        params: {
+          id
+        }
+      },
+      callback: data => {
+        setLoading(false);
+        const newData = [];
+        (data||[]).forEach((item, index) => {
+
+          let name = item.name||'';
+          name = name + '_' + formatVersionDate(item.ts);
+          if (index === 0 && item.id !== '-1') {
+            name = name+'(当前版本)';
+          }
+          if (index === 1 && data[0].id === '-1') {
+            name = name+'(当前版本)';
+          }
+
+          newData.push({ id: item.id, name });
+        })
+
+        setBasicVersions(newData);
+
+        if (newData.length >= 2) {
+          const defaultBasicVersion = newData[1].id;
+          const defaultIncVersion = newData[0].id;
+          setBasicVersion(defaultBasicVersion);
+          let index = -1;
+          (newData||[]).forEach((version, i) => {
+            if (version.id === defaultBasicVersion) {
+              index = i;
+            }
+          })
+
+          setIncVersions((newData||[]).slice(0, index));
+          setIncVersion(defaultIncVersion);
+          getCompare(defaultBasicVersion, defaultIncVersion);
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onBasicChange = (value) => {
+    setBasicVersion(value);
+    setIncVersion('');
+
+    let index = -1;
+    (basicVersions||[]).forEach((version, i) => {
+      if (version.id === value) {
+        index = i;
+      }
+    })
+
+    setIncVersions((basicVersions||[]).slice(0, index));
+  }
+
+  const onIncChange = (value) => {
+    setIncVersion(value);
+    getCompare(basicVersion, value);
+  }
+
+  const getCompare = (value1=basicVersion, value2=incVersion, value3=onlyShowChange) => {
+    setLoadingCompare(true);
+    dispatchLatest({
+      type: 'datamodel.compare',
+      payload: {
+        params: {
+          id,
+          versionId1: value1,
+          versionId2: value2,
+          includeSame: !value3
+        }
+      },
+      callback: data => {
+        setLoadingCompare(false);
+        setCompareData(data);
+
+        const newAttrOptionColumns = [];
+        (data?.heads?.columnHead||[]).forEach((item, index) => {
+          newAttrOptionColumns.push({
+            title: item||'',
+            dataIndex: `column${index}`,
+            render: (attrValue, record, index) => {
+    
+              let stateClassName = '';
+              if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
+                stateClassName = 'add';
+              } else if (attrValue?.state === 'DELETE') {
+                stateClassName = 'delete';
+              }
+    
+              return (
+                <Paragraph>
+                  <Tooltip title={attrValue?.value||''}>
+                    <Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Text>
+                  </Tooltip>
+                </Paragraph>
+              );
+            },
+            width: (item==='序号')?60: 150,
+            ellipsis: true,
+            option: true,
+          });
+        })
+
+        const newAttrColumns = [...newAttrOptionColumns, { 
+          title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
+          dataIndex: 'columnFilter',
+          render: (_, record, index) => {
+            return '';
+          },
+          width: 40,
+          ellipsis: true,
+          option: false
+        }];
+
+        attrColumnsRef.current = newAttrColumns;
+
+        const newFilterColumns = newAttrColumns.filter(column => column.option===false || attrSelectedTitles.indexOf(column.title) !== -1);
+
+        setAttrFilterColumns(newFilterColumns);
+      },
+      error: () => {
+        setLoadingCompare(false);
+      }
+    })
+  }
+
+  const onFilterChange = (values) => {
+    const newFilterColumns = attrColumnsRef.current.filter(column => column.option===false || values.indexOf(column.title) !== -1);
+
+    setAttrSelectedTitles(values);
+    setAttrFilterColumns(newFilterColumns);
+  }
+
+  const onOnlyShowChange = (e) => {
+    setOnlyShowChange(e.target.checked);
+    if (basicVersion!=='' && incVersion!=='') {
+      getCompare(basicVersion, incVersion, e.target.checked);
+    }
+  }
+
+  return (
+    <div className='model-version-compare'>
+      <Form layout='inline'>
+        <Form.Item label='基线版本'>
+          <Select loading={loading} value={basicVersion} style={{ width: 300 }} onChange={onBasicChange}  >
+          {
+            (basicVersions||[]).map((version, index) => {
+
+              if (index === 0) {
+                return (
+                  <Option key={index} value={version.id||''} disabled={true}>
+                    <Tooltip title={'最近版本只能在增量版本中被选中'}>
+                    {version.name||''}
+                    </Tooltip>
+                  </Option>
+                )
+              };
+
+              return (
+                <Option key={index} value={version.id||''}>
+                {version.name||''}
+                </Option>
+              );
+
+            })
+          }
+          </Select>
+        </Form.Item>
+        <Form.Item label='增量版本'>
+          <Select value={incVersion} style={{ width: 300 }} disabled={basicVersion===''} onChange={onIncChange}>
+          {
+            (incVersions||[]).map((version, index) => {
+              return (
+                <Option key={index} value={version.id||''}>{version.name||''}</Option>
+              );
+            })
+          }
+          </Select>
+        </Form.Item>
+        <Form.Item>
+          <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>仅显示差异</Checkbox>
+        </Form.Item>
+      </Form>
+
+      <div className='py-5'>    
+        <Spin spinning={loadingCompare} >
+        {
+          compareData && <div className='flex'>
+            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
+              <VersionCompareHeader data={compareData} />
+              <VersionCompareTable data={compareData} columns={attrFilterColumns} />
+              <VersionCompareIndex data={compareData} />
+            </div>
+            <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
+              <VersionCompareHeader data={compareData} direction='right' />
+              <VersionCompareTable data={compareData} columns={attrFilterColumns} direction='right' />
+              <VersionCompareIndex data={compareData} direction='right'/>
+            </div>
+          </div>
+        }
+        </Spin>
+      </div>
+    </div>
+  );
+}
+
+export default VersionCompare;
\ No newline at end of file

src/view/Manage/Pdata/Component/VersionCompare.less

+.model-version-compare {
+  .yy-typography .delete, .delete {
+    color: red !important;
+    text-decoration: line-through !important;
+  }
+
+  .yy-typography .add, .add {
+    color: red !important;
+  }
+}
\ No newline at end of file

src/view/Manage/Pdata/Component/VersionCompareHeader.jsx

+
+import { Typography, Tooltip } from 'antd';
+
+const { Text, Paragraph, Title } = Typography;
+
+const VersionCompareHeader = (props) => {
+
+  const { data, direction = 'left' } = props;
+
+  return (
+    <Typography>
+      <div className='mb-3'>
+        <Paragraph>
+        <Title level={5}>基本信息</Title>
+        </Paragraph>
+      </div>
+      {
+        (data?.heads?.tableHead||[]).map((item, index) => {
+
+          let columnValue = {};
+          if (direction==='left' && (data?.left?.tableValue||[]).length>index) {
+            columnValue = data?.left?.tableValue[index];
+          } else if (direction==='right' && (data?.right?.tableValue||[]).length>index) {
+            columnValue = data?.right?.tableValue[index];
+          }
+
+          let stateClassName = '';
+          if (columnValue?.state==='ADD' || columnValue?.state==='UPDATE') {
+            stateClassName = 'add';
+          } else if (columnValue?.state === 'DELETE') {
+            stateClassName = 'delete';
+          }
+
+          return (
+            <Paragraph>
+              <Tooltip key={index} title={columnValue.value||''}>
+                <Text ellipsis={true}>
+                {item||''}:&nbsp;<Text className={stateClassName}>{columnValue.value||''}</Text>
+                </Text>
+              </Tooltip>
+            </Paragraph>
+          );
+        })
+      }
+    </Typography>
+  );
+}
+
+export default VersionCompareHeader;

src/view/Manage/Pdata/Component/VersionCompareIndex.jsx

+import { useEffect, useState } from 'react';
+import { Typography, Tooltip, Table } from 'antd';
+
+const { Text, Paragraph, Title } = Typography;
+
+const VersionCompareIndex = (props) => {
+
+  const { data, direction = 'left' } = props;
+  const [ columns, setColumns ] = useState([]);
+  const [ tableData, setTableData ] = useState([]);
+
+  useEffect(() => {
+
+    const newColumns = [];
+    (data?.heads?.indexHead||[]).forEach((item, index) => {
+      newColumns.push({
+        title: item||'',
+        dataIndex: `column${index}`,
+        render: (attrValue, record, index) => {
+
+          let stateClassName = '';
+          if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
+            stateClassName = 'add';
+          } else if (attrValue?.state === 'DELETE') {
+            stateClassName = 'delete';
+          }
+
+          return (
+            <Paragraph>
+              <Tooltip title={attrValue?.value||''}>
+                <Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Text>
+              </Tooltip>
+            </Paragraph>
+          );
+        },
+        width: 60,
+        ellipsis: true,
+      });
+    })
+
+    setColumns(newColumns);
+
+    const newTableData = [];
+    let indexValue = [];
+    if (direction==='left') {
+      indexValue = data?.left?.indexValue||[];
+    } else if (direction==='right') {
+      indexValue = data?.right?.indexValue||[];
+    }
+
+    (indexValue||[]).forEach((attrItem) => {
+      let newAttrItem = {};
+      (attrItem||[]).forEach((item, index) => {
+        newAttrItem[`column${index}`] = item;
+      })
+      newTableData.push(newAttrItem);
+    })
+
+    setTableData(newTableData);
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ data ])
+
+  return (
+    <div>
+      <div className='my-3'>
+        <Typography>
+          <Title level={5}>数据表索引</Title>
+        </Typography>
+      </div>
+      <Table
+        columns={columns||[]}
+        dataSource={tableData}
+        pagination={false}
+      />
+    </div>
+  );
+}
+
+export default VersionCompareIndex;
\ No newline at end of file

src/view/Manage/Pdata/Component/VersionCompareTable.jsx

+import { useEffect, useState } from 'react';
+import { Typography, Table } from 'antd';
+
+const { Title } = Typography;
+
+const VersionCompareTable = (props) => {
+
+  const { data, direction = 'left', columns } = props;
+  const [ tableData, setTableData ] = useState([]);
+  
+  useEffect(() => {
+    const newTableData = [];
+    let columnValue = [];
+    if (direction==='left') {
+      columnValue = data?.left?.columnValue||[];
+    } else if (direction==='right') {
+      columnValue = data?.right?.columnValue||[];
+    }
+
+    (columnValue||[]).forEach((attrItem) => {
+      let newAttrItem = {};
+      (attrItem||[]).forEach((item, index) => {
+        newAttrItem[`column${index}`] = item;
+      })
+      newTableData.push(newAttrItem);
+    })
+
+    setTableData(newTableData);
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ data ])
+
+  return (
+    <div>
+      <div className='my-3'>
+        <Typography>
+          <Title level={5}>数据表结构</Title>
+        </Typography>
+      </div>
+      <Table
+        columns={columns||[]}
+        dataSource={tableData}
+        pagination={false}
+      />
+    </div>
+  );
+}
+
+export default VersionCompareTable;
\ No newline at end of file

src/view/Manage/Pdata/Component/VersionHistory.jsx

+import React, { useEffect, useState } from 'react';
+import { Timeline, Spin } from 'antd';
+
+import { dispatch } from '../../../../model'; 
+import { formatVersionHistoryDate } from '../../../../util';
+import { Action, ModelerId, VersionId } from '../../../../util/constant';
+
+const VersionHistory = (props) => {
+
+  const { id } = props;
+  const [ versions, setVersions ] = useState([]);
+  const [ loading, setLoading ] = useState(false);
+
+  useEffect(() => {
+    if ((id||'') !== '') {
+      getVersions();
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ id ])
+
+  const getVersions = () => {
+    setLoading(true);
+    dispatch({
+      type: 'pds.getVersions',
+      payload: {
+        params: {
+          id
+        }
+      },
+      callback: data => {
+        setLoading(false);
+        setVersions(data||[]);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onVersionItemClick = (version) => {
+    // window.open(`/data-govern/data-model-action?${Action}=detail-version&${ModelerId}=${version.dataModelId||''}&${VersionId}=${version.id||''}`);
+  }
+
+  return (
+    <Spin spinning={loading}>
+      <Timeline style={{ padding: 24 }}>
+      {
+        (versions||[]).map((version, index) => {
+          let name = version.name||'';
+          if (index === 0 && version.id !== '-1') {
+            name = name+'(当前版本)';
+          }
+          if (index === 1 && versions[0].id === '-1') {
+            name = name+'(当前版本)';
+          }
+
+          let color = '';
+          if (version.state?.id === '1') {
+            color = '#DE7777';
+          } else if (version.state?.id === '2') {
+            color = '#779BDE';
+          } else if (version.state?.id === '4') {
+            color = '#77DEBF';
+          }
+
+          return <Timeline.Item key={index} color={ color } >
+            <div>
+              <div>
+                <a onClick={()=>{ onVersionItemClick(version); }}>
+                {name}
+                </a>
+              </div>
+              <div className='pt-2'>
+                <span style={{ color }}>{version.state?.cnName||''}</span>
+              </div>
+              <div className='pt-2'>
+                <span>{version.editor||''}</span>
+                <span className='pl-2'>{formatVersionHistoryDate(version.ts)}</span>
+              </div>
+            </div>
+          </Timeline.Item>
+        })
+      }
+      </Timeline>
+    </Spin>
+  );
+}
+
+export default VersionHistory;
\ No newline at end of file

src/view/Manage/Pdata/index.jsx

+import React from 'react';
+import { Button, Space, Spin, Input, Select, Tooltip, Dropdown, Menu } from 'antd';
+import copy from "copy-to-clipboard";  
+import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { ResizableBox } from 'react-resizable';
+import classNames from 'classnames';
+
+import ModelTree from './Component/ModelTree';
+import ModelTable from './Component/ModelTable';
+import ImportModal from './Component/ImportModal';
+import ImportStockWordDrawer from './Component/ImportStockWordDrawer';
+import ExportDDLModal from './Component/ExportDDLModal';
+import ExportOtherModal from './Component/ExportOtherModal';
+import RecatalogModal from './Component/RecatalogModal';
+import HistoryAndVersionDrawer from './Component/HistoryAndVersionDrawer';
+import StartFlowModal from './Component/StartFlowModal';
+import { showMessage, showNotifaction, inputWidth, DeleteTipModal, getDataModelerRole } from '../../../util';
+import { dispatch, dispatchLatestHomepage } from '../../../model'; 
+import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, Holder, DDL, DataModelerRoleReader, ReadOnly } from '../../../util/constant';
+import { AppContext } from '../../../App';
+import DebounceInput from './Component/DebounceInput';
+import ColSettingModal from './Component/ColSettingModal';
+import StartAuthorize from './Component/StartAuthorize';
+import StartRelease from './Component/StartRelease';
+import Offline from './Component/Offline';
+
+import './index.less';
+
+const { Option } = Select;
+
+const InputDebounce = DebounceInput(300)(Input);
+
+class Model extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      importModalVisible: false,
+      importStockWordDrawerVisible: false,
+      exportDDLModalVisible: false,
+      exportOtherModalVisible: false,
+      recatalogModalVisible: false,
+      historyAndVersionDrawerVisible: false,
+      startFlowModalVisible: false,
+      catalogId: '',
+      importModalAction: '',
+      tableData: [],
+      filterTableData: [],
+      loadingTableData: false, 
+      selectModelerIds: [],
+      selectModelerNames: [],
+      keyword: '',
+      hints: [],
+      loadingStates: false,
+      modelStates: [],
+      currentModelState: props.isOnlyEnding?'4_0':'',
+      currentODataState: '0',
+      currentView: '',
+      exportDDLModalReference: 'exportDDL',
+      currentModel: {},
+      offset: null,
+      expandTree: true,
+      showDeleteTip: false,
+      colSettingModalVisible: false,
+      visibleColNames: [],
+      startAuthorizeParams: {
+        visible: false,
+        services: []
+      },
+      startReleaseVisible: false,
+      offlineVisible: false,
+    }
+  }
+  
+  componentDidMount() {
+    this.getModelStates();
+    // this.getPreference();
+
+    window?.addEventListener("storage", this.modelEventChange);
+  }
+
+  componentWillUnmount() {
+    window?.removeEventListener("storage", this.modelEventChange);
+  }
+
+  modelEventChange = (e) => {
+    if (e.key === 'modelChange') {
+      this.onTableChange();
+    }
+  }
+
+  getModelStates = () => {
+    this.setState({ loadingStates: true }, () => {
+      dispatch({
+        type: 'pds.loadStateCatalog',
+        payload: {
+          isOnlyEnding: this.props.isOnlyEnding
+        },
+        callback: data => {
+          this.setState({
+            loadingStates: false,
+            modelStates: this.props.isOnlyEnding ? data?.subCatalogs||[] : [{ name: 'all', id: '', cnName: '所有状态' }, ...(data?.subCatalogs||[])]
+          });
+        },
+        error: () => {
+          this.setState({ loadingStates: false });
+        }
+      });
+    })
+  }
+
+  getPreference = () => {
+    dispatch({
+      type: 'datamodel.getPreference',
+      callback: data => {
+        this.setState();
+        if ((data.cols||'') === '') {
+          this.setState({visibleColNames: []});
+        } else {
+          this.setState({visibleColNames: data.cols.split(',')});
+        }
+      }
+    })
+  }
+
+  onViewChange = (value) => {
+    this.setState({ currentView: value });
+  }
+
+  onModelStateChange = (value) => {
+    this.setState({ currentModelState: value, offset: null }, () => {
+      this.onTableChange();
+    })
+  }
+
+  onODataStateChange = (value) => {
+    this.setState({ currentODataState: value, offset: null }, () => {
+      this.onTableChange();
+    })
+  }
+
+  onTreeSelect = (key, offset=null) => {
+
+    this.setState({ catalogId: key, keyword: '', offset, currentModelState: this.state.currentModelState }, () => {
+      if (!key || key==='') {
+        this.setState({ tableData: [], filterTableData: [] });
+      } else {
+        this.onTableChange();
+      }
+    });
+  }
+
+  onTableChange = () => {
+    const { currentView, catalogId, keyword, currentModelState, currentODataState } = this.state;
+
+    this.setState({ loadingTableData: true }, () => {
+      if (keyword === '') {
+        if (currentView === 'dir') {
+
+          const params = {
+            pdsDataServiceCatalogId: catalogId,
+            namespace: `${this.props.app?.env?.domainId}`,
+            isExcludeOtherOwner: !this.props.isOnlyEnding
+          };
+
+          if (currentModelState !== '') {
+            params.stateId = currentModelState;
+          }
+
+          dispatchLatestHomepage({
+            type: 'pds.getServices',
+            payload: params,
+            callback: data => {
+
+              const filterData = data.pdsdataServices?.filter(service => {
+                if (currentODataState === '0') return true;
+                if (currentODataState === '1') return service.supportODataDisable;
+                if (currentODataState === '2') return !service.supportODataDisable;
+
+                return false;
+              })
+
+              this.setState({ loadingTableData: false, tableData: data.pdsdataServices||[], filterTableData: filterData });
+            },
+            error: () => {
+              this.setState({ loadingTableData: false });
+            }
+          })
+        } else {
+          dispatchLatestHomepage({
+            type: 'pds.getStateServices',
+            payload: {
+              pdsDataServiceStateCatalogId: catalogId,
+              namespace: `${this.props.app?.env?.domainId}`,
+              isExcludeOtherOwner: !this.props.isOnlyEnding
+            },
+            callback: data => {
+              const filterData = data.pdsdataServices?.filter(service => {
+                if (currentODataState === '0') return true;
+                if (currentODataState === '1') return service.supportODataDisable;
+                if (currentODataState === '2') return !service.supportODataDisable;
+
+                return false;
+              })
+
+              this.setState({ loadingTableData: false, tableData: data.pdsdataServices||[], filterTableData: filterData });
+            },
+            error: () => {
+              this.setState({ loadingTableData: false });
+            }
+          })
+        }
+      } else {
+
+        const params = {
+          term: keyword,
+          namespace: `${this.props.app?.env?.domainId}`,
+          isExcludeOtherOwner: !this.props.isOnlyEnding
+        };
+
+        if (currentModelState !== '') {
+          params.stateId = currentModelState;
+        }
+
+        dispatchLatestHomepage({
+          type: 'pds.searchService',
+          payload: params,
+          callback: data => {
+            const filterData = data?.filter(service => {
+              if (currentODataState === '0') return true;
+              if (currentODataState === '1') return service.supportODataDisable;
+              if (currentODataState === '2') return !service.supportODataDisable;
+
+              return false;
+            })
+
+            this.setState({ loadingTableData: false, tableData: data||[], filterTableData: filterData });
+          },
+          error: () => {
+            this.setState({ loadingTableData: false });
+          }
+        })
+      }
+      
+    })
+  }
+
+  onTableSelect = (ids) => {
+    this.setState({ selectModelerIds: ids });
+  }
+
+  onTableItemAction = (record, action, readOnly=false) => {
+    this.setState({ importModalAction: action, modelerId: record.id }, () => {
+      const { catalogId, importModalAction, modelerId } = this.state;
+
+      window.open(`/data-govern/data-model-action?${Action}=${importModalAction}&${CatalogId}=${catalogId}&${ModelerId}=${modelerId}&${PermitCheckOut}=${record.permitCheckOut||false}&${Editable}=${record.editable||false}&${StateId}=${record.state?.id||''}&${Holder}=${record.holder||''}&${ReadOnly}=${readOnly}`);
+    });
+  }
+
+  onHistory = (id) => {
+    this.setState({ historyAndVersionDrawerVisible: true, modelerId: id });
+  }
+
+  onSearchInputChange = (value) => {
+    this.setState({ keyword: value||'', catalogId: '' }, () => {
+      if (value !== '') {
+        this.onTableChange();
+      }
+    });
+  }
+
+  onImportUnconditionBtnClick = () => {
+    const { catalogId, currentView } = this.state;
+
+    window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}`);
+  }
+
+  onExportDDLBtnClick = () => {
+    const { selectModelerIds, tableData } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择服务');
+      return;
+    }
+
+    //服务名称在导出ddl的时候有使用
+    const _selectModelerNames = [];
+
+    (selectModelerIds||[]).forEach(id => {
+
+      (tableData||[]).forEach(item => {
+        if (item.id === id) {
+          _selectModelerNames.push(item.name||'');
+        }
+      });
+
+    });
+
+    this.setState({ exportDDLModalVisible: true, selectModelerNames: _selectModelerNames, exportDDLModalReference: 'exportDDL' });
+  }
+
+  onExportOtherBtnClick = () => {
+    this.setState({ exportOtherModalVisible: true });
+  }
+
+  startFlow = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择服务');
+      return;
+    }
+
+    this.setState({ startFlowModalVisible: true });
+  }
+
+  onRecatalogBtnClick = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择服务');
+      return;
+    }
+
+    this.setState({ recatalogModalVisible: true });
+  }
+
+  onAuthorizeBtnClick = () => {
+    const { selectModelerIds, tableData } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择服务');
+      return;
+    }
+
+    const services = (tableData||[]).filter(item => selectModelerIds.indexOf(item.id) !== -1);
+    this.setState({ startAuthorizeParams: {
+      visible: true,
+      services
+    }})
+  }
+
+  onReleaseBtnClick = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择服务');
+      return;
+    }
+
+    this.setState({ startReleaseVisible: true })
+  }
+
+  onOfflineBtnClick = () => {
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择服务');
+      return;
+    }
+
+    this.setState({ offlineVisible: true })
+  }
+
+  onBatchDeleteBtnClick = () => {
+
+    const { selectModelerIds } = this.state;
+    if ((selectModelerIds||[]).length === 0) {
+      showMessage('info', '请先选择服务');
+      return;
+    }
+
+    this.setState({ showDeleteTip: true });
+  }
+
+  onVisibleColSettingClick = () => {
+    this.setState({colSettingModalVisible: true});
+  }
+
+  onAutoCreateTable = (item) => {
+
+    this.setState({ exportDDLModalVisible: true, selectModelerNames: [item.name||''], exportDDLModalReference: 'createTable', currentModel: item });
+  }
+
+  onImportExcelVisibleChange = (visible = false, hint = null) => {
+    this.setState({ importExcelVisible: visible });
+  }
+
+  onImportModalCancel = (refresh = false, confirm = false, hints = []) => {
+    const { catalogId, currentView } = this.state;
+
+    this.setState({ importModalVisible: false }, () => {
+      refresh && this.onTableChange();
+
+      if (confirm) {
+        if ((hints||[]).length > 0) {
+          setTimeout(() => {
+            window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}&${Hints}=${encodeURIComponent((hints||[]).join(','))}`);
+          }, 1000);
+        } else {
+          setTimeout(() => {
+            window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}`);
+          }, 1000);
+        }
+      }
+    });
+  }
+
+  onImportModalCancelByWord = (refresh = false, wordData = {}) => {
+    const { catalogId } = this.state;
+
+    this.setState({ importModalVisible: false }, () => {
+      refresh && this.onTableChange();
+
+      if (wordData && ((wordData.msg||'')!=='')) {
+        showNotifaction('提示', wordData.msg);
+      }
+  
+      if (wordData && (wordData.content||[]).length > 0) {
+        if ((wordData.content||[]).length > 5) {
+          showMessage('info', '最多只能同时编辑5条信息');
+        }
+  
+        setTimeout(() => {
+  
+          wordData.content.slice(0, 5).forEach(data => {
+            window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${catalogId}&${ModelerData}=${encodeURIComponent(JSON.stringify(data))}`, '_blank');
+          })
+  
+        }, 2000);
+  
+      }
+    });
+  }
+
+  onImportModalCancelByDDL = (confirm = false, ddl = '') => {
+    const { catalogId } = this.state;
+
+    this.setState({ importModalVisible: false }, () => {
+  
+      if (confirm && (ddl||'') !== '') {
+
+        setTimeout(() => {
+          window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${catalogId}&${DDL}=${encodeURIComponent(ddl)}`, '_blank');
+        }, 1000);
+  
+      }
+    });
+  }
+
+  onImportStockWordDrawerCancel = () => {
+    this.setState({ importStockWordDrawerVisible: false });
+  }
+
+  onImportStockWordSuccess = () => {
+    this.onTableChange();
+  }
+
+  onExportDDLModalCancel = () => {
+    this.setState({ exportDDLModalVisible: false });
+  }
+
+  onExportOtherModalCancel = (key='') => {
+    const { selectModelerIds } = this.state;
+
+    this.setState({ exportOtherModalVisible: false }, () => {
+      if (key === 'ddl') {
+        this.onExportDDLBtnClick();
+      } else if (key === 'erwin') {
+        dispatch({
+          type: 'datamodel.exportERWinString',
+          payload: {
+            ids: selectModelerIds.join(','),
+          },
+          callback: data => {
+            copy(JSON.stringify(data));
+            showNotifaction('提示', 'Erwin信息已成功复制到剪贴板', 5);
+          }
+        });
+      } else if (key === 'excel') {
+        window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${selectModelerIds.join(',')}`);
+      } else if (key === 'word') {
+        window.open(`/api/datamodeler/easyDataModelerExport/word/template?ids=${selectModelerIds.join(',')}`);
+      }
+    });
+  }
+
+  onRecatalogModalCancel = (refresh = false) => {
+    this.setState({ recatalogModalVisible: false });
+    if (refresh) {
+      this.setState({ selectModelerIds: [] }, () => {
+        this.onTableChange();
+      });
+    }
+  }
+
+  onStartAuthorizeCancel = (refresh = false) => {
+    this.setState({ startAuthorizeParams: {
+      visible: false,
+      services: []
+    }});
+    if (refresh) {
+      this.setState({ selectModelerIds: [] }, () => {
+        this.onTableChange();
+      });
+    }
+  }
+
+  onStartReleaseCancel = (refresh = false) => {
+    this.setState({ startReleaseVisible: false });
+    if (refresh) {
+      this.setState({ selectModelerIds: [] }, () => {
+        this.onTableChange();
+      });
+    }
+  }
+
+  onOfflineCancel = (refresh = false) => {
+    this.setState({ offlineVisible: false });
+    if (refresh) {
+      this.setState({ selectModelerIds: [] }, () => {
+        this.onTableChange();
+      });
+    }
+  }
+
+  onHistoryAndVersionDrawerCancel = () => {
+    this.setState({ historyAndVersionDrawerVisible: false });
+  }
+
+  onStartFlowModalCancel = (refresh) => {
+    this.setState({ startFlowModalVisible: false });
+
+    if (refresh) {
+      this.onTableChange();
+      this.setState({ selectModelerIds: [] });
+    }
+  }
+
+  importStockModel = () => {
+    const { catalogId } = this.state;
+
+    if ((catalogId||'') === '') {
+      showMessage('info', '请先选择服务目录');
+      return;
+    }
+
+    this.setState({ importStockWordDrawerVisible: true });
+  }
+
+  treeToggleClick = () => {
+    this.setState({ expandTree: !this.state.expandTree });
+  }
+
+  onDeleteTipModalCancel = (refresh=false) => {
+    const { selectModelerIds } = this.state;
+
+    this.setState({ showDeleteTip: false });
+    if (refresh) {
+      dispatch({
+        type: 'datamodel.deleteDataModels',
+        payload: {
+          params: {
+            easyDataModelerDataModelIds: selectModelerIds.join(',')
+          }
+        },
+        callback: (tip) => {
+          this.onTableChange();
+          this.setState({ selectModelerIds: [] });
+          if ((tip||'')!=='') {
+            showNotifaction('提示', tip, 5);
+          }
+        }
+      })
+    }
+  }
+
+  onColSettingModalCancel = (refresh = false) => {
+    this.setState({ colSettingModalVisible: false }, () => {
+      if (refresh) {
+        this.getPreference();
+      }
+    });
+  }
+
+  render() {
+    const { app, isOnlyEnding } = this.props;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, exportOtherModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree, showDeleteTip, colSettingModalVisible, visibleColNames, currentODataState } = this.state;
+
+    const classes = classNames('data-model', {
+      'data-model-collapse': !expandTree
+    });  
+
+    let disableStartFlow = false, startFlowTip = '';
+    if ((currentView==='dir'&&currentModelState==='2')||(currentView!=='dir'&&catalogId==='2')) {
+      disableStartFlow = true;
+      startFlowTip = '只有草稿状态下的服务才能送审';
+    } else if ((selectModelerIds||[]).length===0) {
+      disableStartFlow = true;
+      startFlowTip = '请先选择服务';
+    }
+
+    return (
+      <div className={classes}>
+        <ResizableBox 
+          className='left' 
+          width={230} 
+          height={Infinity}
+          axis='x'
+          minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
+        >
+          <ModelTree onViewChange={this.onViewChange} onSelect={this.onTreeSelect} importStockModel={this.importStockModel} keyword={keyword} {...this.props} />
+        </ResizableBox>
+        <div className='tree-toggle-wrap'>
+          <div className='tree-toggle' onClick={this.treeToggleClick}>
+          { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
+          </div>
+        </div>
+        <div className='right'>
+          <div
+            className='d-flex p-3'
+            style={{
+              borderBottom: '1px solid #EFEFEF',
+              justifyContent: 'space-between',
+              alignItems: 'center'
+            }}
+          > 
+            <Space>
+            {
+              currentView==='dir' && (getDataModelerRole(app?.user)!==DataModelerRoleReader) && !isOnlyEnding && <React.Fragment>
+                <Space>
+                  <Dropdown 
+                    overlay={
+                      <Menu>
+                        <Menu.Item onClick={() => {
+                          app?.editServer?.({ dirId: catalogId, type: 'drag' }); 
+                        }}>拖拉创建服务</Menu.Item>
+                        <Menu.Item onClick={() => { 
+                          app?.editServer?.({ dirId: catalogId, type: 'sql' });
+                        }}>自定义sql创建服务</Menu.Item>
+                      </Menu>
+                    } 
+                    placement="bottomLeft"
+                    trigger={['click']}
+                  >
+                    <Button>新建</Button>
+                  </Dropdown>
+                </Space>
+
+                {/* <Space>
+                <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
+                    <Button onClick={this.onExportOtherBtnClick} disabled={(selectModelerIds||[]).length===0}>导出</Button>
+                  </Tooltip>
+                </Space> */}
+
+                {/* <Space>
+                  <Tooltip title={startFlowTip}>
+                    <Button onClick={this.startFlow} disabled={disableStartFlow}>送审</Button>
+                  </Tooltip>
+                </Space> */}
+
+                <Space>
+                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
+                    <Button onClick={this.onRecatalogBtnClick} disabled={(selectModelerIds||[]).length===0}>变更目录</Button>
+                  </Tooltip>
+                </Space>
+
+                {/* <Space>
+                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
+                    <Button onClick={this.onAuthorizeBtnClick} disabled={(selectModelerIds||[]).length===0}>授权</Button>
+                  </Tooltip>
+                </Space> */}
+
+                <Space>
+                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
+                    <Button onClick={this.onReleaseBtnClick} disabled={(selectModelerIds||[]).length===0}>发布</Button>
+                  </Tooltip>
+                </Space>
+              
+                {/* <Space>
+                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
+                    <Button onClick={this.onBatchDeleteBtnClick} disabled={(selectModelerIds||[]).length===0}>删除</Button>
+                  </Tooltip>
+                </Space> */}
+                {/* <Space>
+                  <Button onClick={this.onVisibleColSettingClick}>可见列设置</Button>
+                </Space> */}
+                </React.Fragment>
+            }
+            {
+              currentView==='dir' && (getDataModelerRole(app?.user)!==DataModelerRoleReader) && isOnlyEnding && 
+                  <Tooltip title={(selectModelerIds||[]).length===0?'请先选择服务':''}>
+                    <Button onClick={this.onOfflineBtnClick} disabled={(selectModelerIds||[]).length===0}>下线</Button>
+                  </Tooltip>
+            }
+            </Space>
+
+            <Space> 
+              {
+                (currentView==='dir'||keyword!=='') && <Space>
+                  <span>发布状态:</span>
+                  <Select 
+                    style={{ width: 120 }} 
+                    onChange={(value) => {
+                      this.onModelStateChange(value);
+                    }}
+                    loading={loadingStates}
+                    value={loadingStates? '': currentModelState}
+                  >
+                  {
+                    (modelStates||[]).map(item => {
+                      return (
+                        <Option key={item.id} value={item.id}>{item.cnName||''}</Option>
+                      );
+                    })
+                  }
+                  </Select>
+                </Space>
+              }     
+              <Space>
+                <span>OData状态:</span>
+                <Select 
+                  style={{ width: 120 }} 
+                  onChange={(value) => {
+                    this.onODataStateChange(value);
+                  }}
+                  value={currentODataState}
+                >
+                  <Option value='0'>所有状态</Option>
+                  <Option value='1'>已启动</Option>
+                  <Option value='2'>未启动</Option>
+                </Select>
+              </Space>
+              <Space>
+                <InputDebounce 
+                  placeholder="通过服务名称全文搜索" 
+                  allowClear 
+                  value={keyword}
+                  onChange={(value) => { this.onSearchInputChange(value); }} 
+                  style={{ width: inputWidth, marginLeft: 'auto' }}
+                />
+              </Space>
+
+            </Space>
+
+          </div>
+          <div className='p-3'>
+          <Spin spinning={loadingTableData}>
+            <ModelTable 
+              loading={loadingTableData}
+              user={app?.user} 
+              isOnlyEnding={isOnlyEnding}
+              catalogId={catalogId} 
+              view={currentView}
+              data={filterTableData} 
+              modelState={currentModelState}
+              offset={offset}
+              keyword={keyword}
+              selectModelerIds={selectModelerIds}
+              visibleColNames={visibleColNames}
+              onChange={this.onTableChange} 
+              onSelect={this.onTableSelect} 
+              onItemAction={this.onTableItemAction} 
+              onAutoCreateTable={this.onAutoCreateTable}
+              onHistory={this.onHistory}
+              {...this.props} />
+          </Spin> 
+          </div>
+        </div>
+
+
+        <RecatalogModal
+          visible={recatalogModalVisible}
+          ids={selectModelerIds}
+          onCancel={this.onRecatalogModalCancel}
+        />
+        
+        <HistoryAndVersionDrawer
+          id={modelerId}
+          visible={historyAndVersionDrawerVisible}
+          onCancel={this.onHistoryAndVersionDrawerCancel}
+        />
+
+        <StartAuthorize 
+          visible={this.state.startAuthorizeParams.visible}
+          services={this.state.startAuthorizeParams.services}
+          onCancel={this.onStartAuthorizeCancel}
+        />
+
+        <StartRelease
+          visible={this.state.startReleaseVisible}
+          ids={selectModelerIds}
+          onCancel={this.onStartReleaseCancel}
+        />
+
+        <Offline
+          visible={this.state.offlineVisible}
+          ids={selectModelerIds}
+          onCancel={this.onOfflineCancel}
+        />
+      </div>
+    );
+  }
+
+}
+
+const WrapModel = (props) => {
+  return (
+    <AppContext.Consumer>
+    {
+      value => <Model app={value} {...props} />
+    }  
+    </AppContext.Consumer>
+  )
+}
+
+export default WrapModel;

src/view/Manage/Pdata/index.less

+.data-model {
+  display: flex;
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+
+  .left {
+    flex: 0 0 auto;
+    border-right: 1px solid #EFEFEF;
+    overflow: hidden;
+  }
+
+  .tree-toggle-wrap {
+    position: relative;
+    width: 20px;
+    height: 100%;
+  
+    .tree-toggle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 0;
+      right: 0;
+      background: #f2f5fc;
+      position: absolute;
+      top: calc(50% - 40px);
+      width: 12px;
+      height: 80px;
+      border-radius: 0 12px 12px 0;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .right {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+.data-model-collapse {
+  .left {
+    width: 0 !important;
+  }
+}
\ No newline at end of file

src/view/Manage/index.jsx

@@ -9,6 +9,7 @@ import DatasourceManage from './DatasourceManage';
 import Map from './Map';
 import Model from './Model';
 import ModelConfig from './ModelConfig';
+import DataService from './Pdata';
 import AssetManage from './AssetManage';
 import AssetResourceBrowse from './AssetResourceBrowse';
 import AssetBrowse from './AssetBrowse';
@@ -30,6 +31,7 @@ class Manage extends Component {
             session && session.userId ? (
               <Switch>
                 <Route path={`${match.path}/datasource-manage`} component={DatasourceManage} />
+                <Route path={`${match.path}/data-service`} component={DataService} />
                 <Route path={`${match.path}/data-model`} component={Model} />
                 <Route path={`${match.path}/model-config`} component={ModelConfig} />
                 <Route path={`${match.path}/asset-map`} component={Map} />