增加模版配置

src/model/datamodel.js

@@ -77,6 +77,18 @@ export function* getAllConstraintsAndTemplates() {
   return { constraints, templates }; 
 }
 
+export function* getAllTemplates() {
+  return yield call(datamodelerService.templates);
+}
+
+export function* getTemplate(payload) {
+  return yield call(datamodelerService.getTemplate, payload);
+}
+
+export function* saveTemplate(payload) {
+  return yield call(datamodelerService.saveTemplate, payload);
+}
+
 //获取初稿
 export function* getDraft(payload) {
   return yield call(datamodelerService.draft, payload);

src/service/datamodeler.js

@@ -33,7 +33,15 @@ export function constraints() {
 
 //模版
 export function templates() {
-  return GetJSON("/datamodeler/easyDataModelerConstraint/templates");
+  return GetJSON("/datamodeler/easyDataModelerTemplateCURD/getAllDataModelTemplates");
+}
+
+export function getTemplate(payload) {
+  return PostJSON("/datamodeler/easyDataModelerTemplateCURD/getDataModelTemplate", payload);
+}
+
+export function saveTemplate(payload) {
+  return PostJSON("/datamodeler/easyDataModelerTemplateCURD/saveDataModelTemplate", payload);
 }
 
 //创建初稿

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

+import React, { useState, useEffect } from 'react';
+
+import TemplateActionHeader from './TemplateActionHeader'; 
+import ImportActionTable from './ImportActionTable';
+
+import { dispatchLatest, dispatch } from '../../../../model'; 
+
+const TemplateAction = (props) => {
+  const { action, onChange, form, id } = props;
+
+  const [ templateData, setTemplateData ] = useState(null);
+  const [ supportedDatatypes, setSupportedDatatypes ] = useState([]);
+
+  useEffect(() =>{
+
+    //初始化form状态
+    if (action==='add'||action==='edit') {
+      form.setFieldsValue({ 
+        cnName: '',
+        name: '',
+        remark: '',
+      });
+    }
+    if (action === 'add') {
+      getSupportedDatatypes();
+    } else if ((action === 'edit'||action === 'detail') && id ) {
+      getCurrentTemplate();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [action, id ]);
+
+  const getCurrentTemplate = () => {
+    dispatchLatest({
+      type: 'datamodel.getTemplate',
+      payload: {
+        params: {
+          id 
+        }
+      },
+      callback: data => {
+        setTemplateData(data||{});
+        onChange && onChange(data||{});
+        getSupportedDatatypes();
+        
+        if (action === 'edit') {
+          form.setFieldsValue({ 
+            cnName: data.cnName||'',
+            name: data.name||'',
+            remark: data.remark||'',
+          });
+        }
+      }
+    })
+  }
+
+  const getSupportedDatatypes = () => {
+    dispatch({
+      type: 'datamodel.getSupportedDatatypes',
+      callback: data => {
+        setSupportedDatatypes(data||[]);
+      }
+    });
+  }
+
+  //模版不需要对字段进行校验
+  const onTableChange = (data) => { 
+
+    let newTemplateData = {...templateData, ...{easyDataModelerDataModelAttributes: data}};
+    
+    setTemplateData(newTemplateData);
+    onChange && onChange(newTemplateData);
+
+  }
+
+  return (
+    <>
+      <TemplateActionHeader 
+        form={form}
+        editable={action!=='detail'} 
+        templateData={templateData||{}}
+      /> 
+      <ImportActionTable 
+        modelerData={templateData||{}}
+        supportedDatatypes={supportedDatatypes} 
+        onChange={onTableChange} 
+        editable={action!=='detail'} 
+      />
+    </>
+  );
+};
+
+export default TemplateAction;
\ No newline at end of file

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

+import React from 'react';
+import { Form, Input, Row, Col, Descriptions } from 'antd';
+
+const TemplateActionHeader = (props) => {
+  const { editable, form, templateData } = props;
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 5 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 19 },
+    },
+  };
+
+  return (
+    editable ? (
+      <Form
+        form={form}
+        {...formItemLayout}
+      >
+        <Row gutter={10}>
+          <Col span={12}>
+            <Form.Item
+              label="中文名称"
+              name="cnName"
+              labelAlign="left"
+              rules={[{ required: true, message: '请输入中文名称!' }]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="英文名称"
+              name="name"
+              labelAlign="left"
+              rules={[{ required: true, message: '请输入英文名称!' }]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={10}>
+          <Col span={12}>
+            <Form.Item
+              label="描述"
+              name="remark"
+              labelAlign="left"
+              rules={[{ required: true, message: '请输入描述!' }]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form> 
+    ) : (
+      <Descriptions>
+        <Descriptions.Item label="中文名称">{templateData.cnName||''}</Descriptions.Item>
+        <Descriptions.Item label="英文名称">{templateData.name||''}</Descriptions.Item>
+        <Descriptions.Item label="描述">{templateData.remark||''}</Descriptions.Item>
+      </Descriptions>
+    ) 
+  )
+}
+
+export default TemplateActionHeader;
\ No newline at end of file

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

+import React, { useEffect, useState } from 'react';
+import { Table, Space, Button, Tooltip, Modal, Form } from 'antd';
+import { EditOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
+
+import TemplateAction from './TemplateAction';
+import { dispatch, dispatchLatest } from '../../../../model';
+
+import './TemplateCURDModal.less';
+
+const TemplateCURDModal = (props) => {
+
+  const { visible, onCancel } = props;
+  const [ templates, setTemplates ] = useState([]);
+  const [ loading, setLoading ] = useState(false);
+  const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
+  const [ action, setAction ] = useState('');
+  const [ currentTemplate, setCurrentTemplate ] = useState('');
+  const [ step, setStep ] = useState(0);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const [modal, contextHolder] = Modal.useModal();
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+
+    if (visible) {
+      getTemplates();
+    }
+
+  }, [ visible ])
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+    },
+    {
+      title: '模版名称',
+      dataIndex: 'name',
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      width: 180,
+      ellipsis: true,
+    },
+    {
+      title: '模版描述',
+      dataIndex: 'remark',
+      ellipsis: true,
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'modifiedTs',
+      width: 120,
+      ellipsis: true,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+
+      render: (text,record) => {
+        return (
+          <Space size='small'>
+            <Tooltip placement='bottom' title={'修改'}>
+              <Button icon={<EditOutlined />} size='small' onClick={() => { editItem(record); }} />
+            </Tooltip>
+            <Tooltip placement='bottom' title={'详情'}>
+              <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailItem(record); }} />
+            </Tooltip>
+            <Tooltip placement='bottom' title={'删除'}>
+              <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteItem(record); }} />
+            </Tooltip>
+          </Space>
+        )
+      }
+    }
+  ];
+
+  const getTemplates = () => {
+    setLoading(true);
+    dispatch({
+      type: 'datamodel.getAllTemplates',
+      callback: data => {
+        setTemplates(data||[]);
+        setLoading(false);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const editItem = (record) => {
+    setStep(1);
+    setAction('edit');
+    setCurrentTemplate(record);
+  }
+
+  const detailItem = (record) => {
+    setStep(1);
+    setAction('detail');
+    setCurrentTemplate(record);
+  }
+
+  const deleteItem = (record) => {
+
+  }
+
+  const onAddClick = () => {
+    setStep(1);
+    setAction('add');
+  }
+
+  const cancel = () => {
+    reset();
+    onCancel && onCancel(false);
+  }
+
+  const reset = () => {
+    setStep(0);
+    setCurrentTemplate({});
+    setConfirmLoading(false);
+  }
+
+  const onSelectChange = keys => {
+    setSelectedRowKeys(keys);
+  };
+
+  const onActionChange = (data) => {
+    setCurrentTemplate(data);
+  }
+
+  const prev = () => {
+    setStep(step-1);
+  }
+
+  const save = async () => {
+    try {
+      const row = await form.validateFields();
+
+      const newTemplateData = {...currentTemplate, ...row};
+
+      setConfirmLoading(true);
+      dispatchLatest({
+        type: 'datamodel.saveTemplate',
+        payload: { 
+          data: newTemplateData
+        },
+        callback: () => {
+          setConfirmLoading(false);
+          reset();
+          onCancel && onCancel(true);
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+
+  }
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+
+  let title = '';
+  if (step === 0) {
+    title = '模版配置';
+  } 
+  if (step === 1) {
+    if (action === 'add') {
+      title = '新增模版';
+    } else if (action === 'edit') {
+      title = '模版编辑';
+    } else if (action === 'detail') {
+      title = '模版详情';
+    }
+  }
+
+  let footer = null;
+
+  if (step === 0) {
+    footer = [
+      <Button
+        key="0" 
+        onClick={cancel}
+      >
+      取消
+      </Button>,
+    ]
+  } else if (step === 1) {
+    if (action === 'detail') {
+      footer = [
+        <Button
+          key="0" 
+          onClick={prev}
+        >
+        返回
+        </Button>,
+      ]
+    } else {
+      footer = [
+        <Button
+          key="0" 
+          onClick={prev}
+        >
+        返回
+        </Button>,
+        <Button
+          key="1" 
+          type="primary"
+          loading={confirmLoading}
+          onClick={save}
+        >
+        保存
+        </Button>
+      ]
+    }
+  }
+
+  return (
+    <Modal 
+      forceRender
+      className='template-curd-modal'
+      visible={visible}
+      title={title}
+      width={1300}
+      maskClosable={false}
+      onCancel={cancel}
+      footer={footer}
+    >
+    {
+      step === 0 && <> 
+        <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
+          <Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} >新增模版</Button>
+        </div>
+        <Table
+          loading={loading}
+          rowSelection={rowSelection} 
+          columns={columns} 
+          rowKey={'id'}
+          dataSource={templates||[]}
+          pagination={false} 
+        />
+      </>
+    }
+    {
+      step === 1 && <TemplateAction 
+        onChange={onActionChange} 
+        action={action} 
+        id={currentTemplate.id} 
+        form={form}
+      />
+    }
+    { contextHolder }
+    </Modal>
+  );
+}
+
+export default TemplateCURDModal;
\ No newline at end of file

src/view/Manage/Model/Component/TemplateCURDModal.less

+.template-curd-modal {
+  .yy-table {
+    max-height: 600px !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -4,6 +4,7 @@ import copy from "copy-to-clipboard";
 
 import ModelTree from './Component/ModelTree';
 import ModelTable from './Component/ModelTable';
+import TemplateCURDModal from './Component/TemplateCURDModal';
 import ImportModal from './Component/ImportModal';
 import ExportDDLModal from './Component/ExportDDLModal';
 import { showMessage, showNotifaction } from '../../../util';
@@ -14,6 +15,7 @@ class Model extends React.Component {
   constructor() {
     super();
     this.state = {
+      templateCURDModalVisible: false,
       importModalVisible: false,
       exportDDLModalVisible: false,
       catalogId: '',
@@ -74,6 +76,10 @@ class Model extends React.Component {
     });
   }
 
+  onTemplateCURDClick = () => {
+    this.setState({ templateCURDModalVisible: true });
+  }
+
   setFilterData = () => {
     const { keyword, tableData } = this.state;
 
@@ -171,6 +177,11 @@ class Model extends React.Component {
     this.setState({ importExcelVisible: visible });
   }
 
+  onTemplateCURDModalCancel = (refresh = false) => {
+    this.setState({ templateCURDModalVisible: false });
+    refresh && this.onTableChange();
+  }
+
   onImportModalCancel = (refresh = false) => {
     this.setState({ importModalVisible: false });
     refresh && this.onTableChange();
@@ -181,7 +192,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible } = this.state;
+    const { importModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible, templateCURDModalVisible } = this.state;
 
     return (
       <div style={{ backgroundColor: '#ECEEF3' }}>
@@ -210,6 +221,9 @@ class Model extends React.Component {
                     style={{ width: 240, marginLeft: 'auto' }}
                   />
                 </Space>
+                <Space>
+                  <Button type="primary" onClick={this.onTemplateCURDClick}>字段追加配置</Button>
+                </Space>
               </div>
               <div
                 className='d-flex p-3'
@@ -223,7 +237,7 @@ class Model extends React.Component {
                   <Button type="primary" onClick={this.onImportExcelBtnClick}>Excel导入</Button>
                   <Button type="primary" onClick={this.onImportExcelCopyBtnClick}>Excel复制粘贴</Button>
                 </Space>  
-                <Space className='ml-5'>
+                <Space>
                   <span>模型导出:</span>
                   <Button type="primary" onClick={this.onExportDDLBtnClick}>导出DDL</Button>
                   <Button type="primary" onClick={this.onExportErwinBtnClick}loading={exportErwinLoading}>导出Erwin</Button>
@@ -238,6 +252,11 @@ class Model extends React.Component {
           </Col>
         </Row>
 
+        <TemplateCURDModal 
+          visible={templateCURDModalVisible} 
+          onCancel={this.onTemplateCURDModalCancel}
+        />
+
         <ImportModal 
           visible={importModalVisible} 
           action={importModalAction}