Skip to content

S
szse
Commit 0caf1f2f by zhaochengxiang
Options

模型增删

parent 1da09032
Showing with 259 additions and 259 deletions
src/view/Manage/Model/Component/ImportAction.jsx
......@@ -8,7 +8,7 @@ import ImportActionTable from './ImportActionTable';
import { dispatchLatest, dispatch } from '../../../../model';
const ImportAction = (props) => {
const { action, hints, onChange } = props;
const { action, hints, onChange, form } = props;
const [ constraints, setConstraints ] = useState([]);
const [ modelerData, setModelerData ] = useState({});
......@@ -70,7 +70,11 @@ const ImportAction = (props) => {
return (
<>
{ <ImportActionHeader editable={action!=='detail'} /> }
<ImportActionHeader
form={form}
editable={action!=='detail'}
modelerData={modelerData||{}}
/>
{
action!=='detail' && <Alert
message="表格可以通过拖拽来排序"
......
src/view/Manage/Model/Component/ImportActionHeader.jsx
......@@ -2,31 +2,47 @@ import React from 'react';
import { Form, Input, Row, Col } from 'antd';
const ImportActionHeader = (props) => {
const { editable } = props;
const { editable, modelerData, form } = props;
return (
<Form
// {...layout}
form={form}
name="basic"
initialValues={{
cnName: modelerData.cnName||'',
name: modelerData.name||'',
remark: modelerData.remark||'',
}}
>
<Row gutter={10}>
<Col span={12}>
<Form.Item
label="模型名称"
label="中文名称"
name="cnName"
rules={[{ required: true, message: '请输入中文名称!' }]}
>
<Input disabled={!editable} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="英文名称"
name="name"
rules={[{ required: true, message: '请输入模型名称!' }]}
rules={[{ required: true, message: '请输入英文名称!' }]}
>
<Input disabled={editable} />
<Input disabled={!editable} />
</Form.Item>
</Col>
</Row>
<Row gutter={10}>
<Col span={12}>
<Form.Item
label="模型描述"
name="desc"
disabled={editable}
rules={[{ required: true, message: '请输入模型描述!' }]}
label="描述"
name="remark"
disabled={!editable}
rules={[{ required: true, message: '请输入描述!' }]}
>
<Input disabled={editable} />
<Input disabled={!editable} />
</Form.Item>
</Col>
</Row>
......
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -69,8 +69,8 @@ const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
return (
<InputNumber
key={index}
onChange={(e) => {
onParameterValuesChange(e.target.value, index);
onChange={(value) => {
onParameterValuesChange(value, index);
}}
value={parameterValues[index]} />
);
......@@ -129,7 +129,7 @@ const EditableCell = ({
},
]}
>
<DatatypeInput datatypes={datatypes} />
<DatatypeInput datatypes={datatypes} />
</Form.Item>
)
}
......@@ -319,7 +319,7 @@ const ImportActionTable = (props) => {
dataIndex: 'datatype',
editable: true,
render: (datatype, record, index) => {
return datatype.name||'';
return datatype?(datatype.name||''):'';
}
},
{
......
src/view/Manage/Model/Component/ImportModal.jsx
import React from 'react';
import { Modal, Radio, Button } from 'antd';
import React, { useState } from 'react';
import { Modal, Radio, Button, Form } from 'antd';
import ImportLog from './ImportLog';
import ImportExcel from './ImportExcel';
......@@ -26,67 +26,60 @@ const modes = [
}
]
class ImportModal extends React.Component {
constructor() {
super();
this.state = {
step: 0,
radioValue: '',
excelFiles: [],
hints: [],
modelerData: {},
confirmLoading: false,
}
}
const ImportModal = (props) => {
const { catalogId, visible, onCancel, action } = props;
const [ step, setStep ] = useState(0);
const [ radioValue, setRadioValue ] = useState('');
const [ excelFiles, setExcelFiles ] = useState([]);
const [ hints, setHints ] = useState([]);
const [ modelerData, setModelerData ] = useState({});
const [ confirmLoading, setConfirmLoading ] = useState(false);
onRadioChange = e => {
this.setState({
radioValue: e.target.value
});
const [form] = Form.useForm();
const onRadioChange = e => {
setRadioValue(e.target.value);
};
prev = () => {
this.setState({
step: (this.state.step-1)
})
const prev = () => {
setStep(step-1);
}
next = () => {
const { step, radioValue, excelFiles } = this.state;
const next = () => {
if (step===1 && radioValue===0) {
if ((excelFiles||[]).length === 0) {
} else {
this.setState({ confirmLoading: true }, () => {
dispatchLatest({
type: 'datamodel.extractExcelContent',
payload: { fileList: excelFiles },
callback: data => {
this.setState({ confirmLoading: false, hints: data||[], step: (step+1) });
}
})
setConfirmLoading(true);
dispatchLatest({
type: 'datamodel.extractExcelContent',
payload: { fileList: excelFiles },
callback: data => {
setConfirmLoading(false);
setHints(data||[]);
setStep(step+1);
}
})
}
return;
}
this.setState({
step: (step+1)
})
setStep(step+1);
}
save = () => {
const { catalogId, onCancel } = this.props;
const { modelerData } = this.state;
const save = async () => {
try {
const row = await form.validateFields();
this.setState({ confirmLoading: true }, () => {
const newModelerData = {...modelerData, ...row};
setConfirmLoading(true);
dispatchLatest({
type: 'datamodel.saveDataModel',
payload: {
data: modelerData
data: newModelerData
},
callback: mid => {
dispatchLatest({
......@@ -98,107 +91,114 @@ class ImportModal extends React.Component {
}
},
callback: () => {
this.setState({ confirmLoading: false });
onCancel && onCancel();
setConfirmLoading(false);
onCancel && onCancel(true);
}
})
}
})
})
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
}
onActionChange = (data) => {
this.setState({ modelerData: data });
const onActionChange = (data) => {
setModelerData(data);
}
onImportExcelChange = (files) => {
this.setState({ excelFiles: files||[] });
const onImportExcelChange = (files) => {
setExcelFiles(files||[]);
}
render() {
const { visible, onCancel } = this.props;
const { radioValue, step, confirmLoading, hints } = this.state;
return (
<Modal
visible={visible}
title={"导入方式"}
width={1000}
maskClosable={false}
destroyOnClose
onCancel={() => {
this.setState({ step: 0 }, () => {
onCancel && onCancel();
})
}}
footer={[
<Button
key="0"
type="primary"
style={{ display: (step!==0)?'':'none' }}
onClick={this.prev}
>
上一步
</Button>,
<Button
key="1"
type="primary"
loading={confirmLoading}
style={{ display: (step<2)?'':'none' }}
onClick={this.next}
>
下一步
</Button>,
<Button
key="2"
type="primary"
loading={confirmLoading}
style={{ display: (step===2)?'':'none' }}
onClick={this.save}
>
保存
</Button>
]}
>
<>
{
step===0 && <>
<Radio.Group onChange={this.onRadioChange}>
{
modes && modes.map((mode, index) => {
return (
<Radio key={index} value={index}>
{ mode.title||'' }
</Radio>
);
})
}
</Radio.Group>
<ImportLog />
</>
}
{
step===1 && radioValue===0 && <ImportExcel onChange={this.onImportExcelChange} />
}
{
step===1 && radioValue===1 && <></>
}
{
step===1 && radioValue===2 && <></>
}
{
step===1 && radioValue===3 && <ImportMetadata />
}
{
step===1 && radioValue===4 && <></>
}
{
step===2 && <ImportAction hints={hints} onChange={this.onActionChange} />
}
</>
</Modal>
)
let title = '';
if (step === 0) {
title = '创建方式';
} else if (step === 1 && radioValue===0) {
title = 'excel导入';
} else if (step === 2 && radioValue===0) {
title = '模型创建-excel导入';
}
return (
<Modal
visible={visible}
title={title}
width={1000}
maskClosable={false}
destroyOnClose
onCancel={() => {
setStep(0);
onCancel && onCancel();
}}
footer={[
<Button
key="0"
type="primary"
style={{ display: (step!==0)?'':'none' }}
onClick={prev}
>
上一步
</Button>,
<Button
key="1"
type="primary"
loading={confirmLoading}
style={{ display: (step<2)?'':'none' }}
onClick={next}
>
下一步
</Button>,
<Button
key="2"
type="primary"
loading={confirmLoading}
style={{ display: (step===2)?'':'none' }}
onClick={save}
>
保存
</Button>
]}
>
<>
{
step===0 && <>
<Radio.Group onChange={onRadioChange}>
{
modes && modes.map((mode, index) => {
return (
<Radio key={index} value={index}>
{ mode.title||'' }
</Radio>
);
})
}
</Radio.Group>
{/* <ImportLog /> */}
</>
}
{
step===1 && radioValue===0 && <ImportExcel onChange={onImportExcelChange} />
}
{
step===1 && radioValue===1 && <></>
}
{
step===1 && radioValue===2 && <></>
}
{
step===1 && radioValue===3 && <ImportMetadata />
}
{
step===1 && radioValue===4 && <></>
}
{
step===2 && <ImportAction hints={hints} onChange={onActionChange} action={action} form={form} />
}
</>
</Modal>
)
}
export default ImportModal;
\ No newline at end of file
src/view/Manage/Model/Component/ModelTable.jsx
import React from "react";
import { Table, Pagination, Space, Button, Tooltip } from 'antd';
import React, { useState } from "react";
import { Table, Space, Button, Tooltip, message } from 'antd';
import { EditOutlined, CheckOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import { paginate } from '../../../../util';
import { dispatchLatest } from '../../../../model';
const columns = [
{
title: '模型名称',
dataIndex: 'name',
},
{
title: '中文名称',
dataIndex: 'cnName',
},
{
title: '模型描述',
dataIndex: 'remark',
},
{
title: '状态',
dataIndex: 'status'
},
{
title: '更新时间',
dataIndex: 'updateTime'
},
{
title: '操作',
key: 'action',
render: (text,record) => {
return (
<Space size='small'>
<Tooltip placement='bottom' title={'修改'}>
<Button icon={<EditOutlined />} size='small' />
</Tooltip>
<Tooltip placement='bottom' title={'详情'}>
<Button icon={<ReconciliationOutlined />} size='small' />
</Tooltip>
<Tooltip placement='bottom' title={'提交审核'}>
<Button icon={<CheckOutlined />} size='small' />
</Tooltip>
<Tooltip placement='bottom' title={'删除'}>
<Button icon={<DeleteOutlined />} size='small' />
</Tooltip>
</Space>
)
}
}
];
const ModelTable = (props) => {
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `t_szse_transaction${i}`,
cnName: '所内交易表',
remark: '测试',
status: '未通过',
updateTime: '2021-03-22'
});
}
const { data, onChange } = props;
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
class ModelTable extends React.Component {
const columns = [
{
title: '模型名称',
dataIndex: 'name',
},
{
title: '中文名称',
dataIndex: 'cnName',
},
{
title: '模型描述',
dataIndex: 'remark',
},
{
title: '操作',
key: 'action',
render: (text,record) => {
return (
<Space size='small'>
<Tooltip placement='bottom' title={'修改'}>
<Button icon={<EditOutlined />} size='small' />
</Tooltip>
<Tooltip placement='bottom' title={'详情'}>
<Button icon={<ReconciliationOutlined />} size='small' />
</Tooltip>
<Tooltip placement='bottom' title={'提交审核'}>
<Button icon={<CheckOutlined />} size='small' />
</Tooltip>
<Tooltip placement='bottom' title={'删除'}>
<Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteItem(record); }} />
</Tooltip>
</Space>
)
}
}
];
constructor() {
super();
this.state = {
selectedRowKeys: null,
pageNum: 1,
pageSize: 10
};
const deleteItem = (record) => {
dispatchLatest({
type: 'datamodel.deleteDataModel',
payload: {
params: {
id: record.id
}
},
callback: () => {
message.success('模型删除成功');
onChange && onChange();
}
})
}
onSelectChange = selectedRowKeys => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
const onSelectChange = keys => {
setSelectedRowKeys(keys);
};
render() {
const { selectedRowKeys, pageNum, pageSize } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const _data = paginate(data, pageNum, pageSize);
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
return (
<>
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={_data}
pagination={false}
/>
<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} 条`}
/>
</>
);
}
return (
<>
<Table
rowSelection={rowSelection}
columns={columns}
rowKey={'id'}
dataSource={data}
pagination={false}
/>
</>
);
}
export default ModelTable;
\ No newline at end of file
src/view/Manage/Model/index.jsx
......@@ -16,32 +16,42 @@ class Model extends React.Component {
importModalVisible: false,
exportModalVisible: false,
catalogId: '',
importModalAction: '',
tableData: []
}
}
onTreeSelect = (key) => {
this.setState({ catalogId: key });
this.setState({ catalogId: key }, () => {
this.onTableChange();
});
}
onTableChange = () => {
const { catalogId } = this.state;
dispatchLatest({
type: 'datamodel.getCurrentDataModelCatalog',
payload: {
easyDataModelerCatalogId: key
easyDataModelerCatalogId: catalogId
},
callback: data => {
console.log('data model', data);
this.setState({ tableData: data.easyDataModelerDataModels||[] });
}
})
}
onImportBtnClick = () => {
this.setState({ importModalVisible: true });
this.setState({ importModalVisible: true, importModalAction: 'add' });
}
onExportBtnClick = () => {
this.setState({ exportModalVisible: true });
}
onImportModalCancel = () => {
onImportModalCancel = (refresh = false) => {
this.setState({ importModalVisible: false });
refresh && this.onTableChange();
}
onExportModalCancel = () => {
......@@ -49,7 +59,7 @@ class Model extends React.Component {
}
render() {
const { importModalVisible, exportModalVisible, catalogId } = this.state;
const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData } = this.state;
return (
<div style={{ backgroundColor: '#fff', height: '100%' }}>
......@@ -71,13 +81,14 @@ class Model extends React.Component {
<Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
</div>
<div className='p-3'>
<ModelTable />
<ModelTable data={tableData} onChange={this.onTableChange} />
</div>
</Col>
</Row>
<ImportModal
visible={importModalVisible}
action={importModalAction}
onCancel={this.onImportModalCancel}
catalogId={catalogId}
/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment