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