Skip to content

S
szse
Commit 837b3fbe by zhaochengxiang
Options

模型编辑详情

parent b57146c3
Showing with 261 additions and 130 deletions
src/util/axios.js
......@@ -85,8 +85,9 @@ export const SetSource = function (source) {
}
const callback = resp => {
if (resp.status === 401) {
showMessage('warn', "session过期,请重新登录!");
showMessage('warn', 'session过期,请重新登录!');
//外网
window.location.href="/center-home/view/login"
//内网
......@@ -94,7 +95,11 @@ const callback = resp => {
return null;
}
else if (resp.status !== 200) {
throw resp.data
if (resp && resp.data && resp.data.ApiError && resp.data.ApiError.cnMessage) {
showMessage('warn', resp.data.ApiError.cnMessage||'');
}
return null;
}
return resp.data || resp;
......
src/view/Manage/Model/Component/ImportAction.jsx
......@@ -10,7 +10,7 @@ import { dispatchLatest, dispatch } from '../../../../model';
const { Option } = Select;
const ImportAction = (props) => {
const { action, hints, onChange, form } = props;
const { action, hints, onChange, form, modelerId } = props;
const [ constraints, setConstraints ] = useState([]);
const [ constraint, setConstraint ] = useState({});
......@@ -25,16 +25,23 @@ const ImportAction = (props) => {
if (mountRef.current) {
mountRef.current = false;
dispatchLatest({
type: 'datamodel.getAllConstraints',
callback: data => {
setConstraints(data||[]);
setConstraint((data||[]).length>0?data[0]:{});
getDraft((data||[]).length>0?data[0]:{}, hints);
}
})
if (action === 'detail') {
getCurrentDataModel();
} else {
dispatchLatest({
type: 'datamodel.getAllConstraints',
callback: data => {
setConstraints(data||[]);
if (action === 'add') {
setConstraint((data||[]).length>0?data[0]:{});
getDraft((data||[]).length>0?data[0]:{}, hints);
} else if(action === 'edit') {
getCurrentDataModel();
}
}
})
}
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
......@@ -60,6 +67,28 @@ const ImportAction = (props) => {
})
}
const getCurrentDataModel = () => {
dispatchLatest({
type: 'datamodel.getDataModel',
payload: {
id: modelerId||''
},
callback: data => {
setModelerData(data||{});
onChange && onChange(data||{});
getSupportedDatatypes();
if (action === 'edit') {
form.setFieldsValue({
cnName: data.cnName||'',
name: data.name||'',
remark: data.remark||'',
});
}
}
})
}
const onConstraintChange = (value) => {
let currentConstraint = null, _hints = [];
......@@ -96,17 +125,19 @@ const ImportAction = (props) => {
return (
<>
<div className='d-flex mb-3'>
<Select value={constraint.id?constraint.id:''} style={{ marginLeft: 'auto' }} onChange={onConstraintChange}>
{
(constraints||[]).map((constraint, index) => {
return (
<Option key={index} value={constraint.id}>{ constraint.cnName||'' }</Option>
)
})
}
</Select>
</div>
{
action!=='detail' && <div className='d-flex mb-3'>
<Select value={constraint.id?constraint.id:null} placeholder='请选择规则' style={{ marginLeft: 'auto', minWidth: 100 }} onChange={onConstraintChange}>
{
(constraints||[]).map((constraint, index) => {
return (
<Option key={index} value={constraint.id}>{ constraint.cnName||'' }</Option>
)
})
}
</Select>
</div>
}
<ImportActionHeader
form={form}
editable={action!=='detail'}
......
src/view/Manage/Model/Component/ImportActionHeader.jsx
import React from 'react';
import { Form, Input, Row, Col } from 'antd';
import { Form, Input, Row, Col, Descriptions } from 'antd';
const ImportActionHeader = (props) => {
const { editable, modelerData, form } = props;
const { editable, form, modelerData } = props;
const formItemLayout = {
labelCol: {
......@@ -16,52 +16,54 @@ const ImportActionHeader = (props) => {
};
return (
<Form
form={form}
{...formItemLayout}
name="basic"
initialValues={{
cnName: modelerData.cnName||'',
name: modelerData.name||'',
remark: modelerData.remark||'',
}}
>
<Row gutter={10}>
<Col span={12}>
<Form.Item
label="中文名称"
name="cnName"
labelAlign="left"
rules={[{ required: true, message: '请输入中文名称!' }]}
>
<Input disabled={!editable} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="英文名称"
name="name"
labelAlign="left"
rules={[{ required: true, message: '请输入英文名称!' }]}
>
<Input disabled={!editable} />
</Form.Item>
</Col>
</Row>
<Row gutter={10}>
<Col span={12}>
<Form.Item
label="描述"
name="remark"
labelAlign="left"
disabled={!editable}
rules={[{ required: true, message: '请输入描述!' }]}
>
<Input disabled={!editable} />
</Form.Item>
</Col>
</Row>
</Form>
editable ? (
<Form
form={form}
{...formItemLayout}
>
<Row gutter={10}>
<Col span={12}>
<Form.Item
label="中文名称"
name="cnName"
labelAlign="left"
rules={[{ required: true, message: '请输入中文名称!' }]}
>
<Input disabled={!editable} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="英文名称"
name="name"
labelAlign="left"
rules={[{ required: true, message: '请输入英文名称!' }]}
>
<Input disabled={!editable} />
</Form.Item>
</Col>
</Row>
<Row gutter={10}>
<Col span={12}>
<Form.Item
label="描述"
name="remark"
labelAlign="left"
disabled={!editable}
rules={[{ required: true, message: '请输入描述!' }]}
>
<Input disabled={!editable} />
</Form.Item>
</Col>
</Row>
</Form>
) : (
<Descriptions>
<Descriptions.Item label="中文名称">{modelerData.cnName||''}</Descriptions.Item>
<Descriptions.Item label="英文名称">{modelerData.name||''}</Descriptions.Item>
<Descriptions.Item label="描述">{modelerData.remark||''}</Descriptions.Item>
</Descriptions>
)
)
}
......
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -367,6 +367,10 @@ const ImportActionTable = (props) => {
dataIndex: 'remark',
editable: true,
},
];
const editableColumn = [
...columns,
{
title: '操作',
dataIndex: 'action',
......@@ -394,25 +398,49 @@ const ImportActionTable = (props) => {
);
},
},
];
]
const mergedColumns = columns.map((col) => {
if (!col.editable) {
return col;
const mergedColumns = () => {
if (editable) {
return editableColumn.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
inputType: 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record),
datatypes: supportedDatatypes,
}),
};
});
}
return {
...col,
onCell: (record) => ({
record,
inputType: 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record),
datatypes: supportedDatatypes,
}),
};
});
return columns;
}
// const mergedColumns = columns.map((col) => {
// if (!col.editable) {
// return col;
// }
// return {
// ...col,
// onCell: (record) => ({
// record,
// inputType: 'text',
// dataIndex: col.dataIndex,
// title: col.title,
// editing: isEditing(record),
// datatypes: supportedDatatypes,
// }),
// };
// });
const moveRow = useCallback(
(dragIndex, hoverIndex) => {
......@@ -458,7 +486,7 @@ const ImportActionTable = (props) => {
}
}}
dataSource={data||[]}
columns={mergedColumns}
columns={mergedColumns()}
size='small'
rowKey='iid'
rowClassName="editable-row"
......
src/view/Manage/Model/Component/ImportModal.jsx
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { Modal, Radio, Button, Form } from 'antd';
// import ImportLog from './ImportLog';
......@@ -28,7 +28,7 @@ const modes = [
]
const ImportModal = (props) => {
const { catalogId, visible, onCancel, action } = props;
const { catalogId, visible, onCancel, action, modelerId } = props;
const [ step, setStep ] = useState(0);
const [ radioValue, setRadioValue ] = useState('');
const [ excelFiles, setExcelFiles ] = useState([]);
......@@ -38,6 +38,18 @@ const ImportModal = (props) => {
const [form] = Form.useForm();
useEffect(() => {
if (visible) {
if (action === 'add') {
setStep(0);
} else {
setStep(2);
}
}
}, [visible, catalogId, action])
const onRadioChange = e => {
setRadioValue(e.target.value);
};
......@@ -81,6 +93,11 @@ const ImportModal = (props) => {
setStep(step+1);
}
const cancel = () => {
reset();
onCancel && onCancel(true);
}
const save = async () => {
try {
const row = await form.validateFields();
......@@ -138,12 +155,78 @@ const ImportModal = (props) => {
}
let title = '';
if (step === 0) {
title = '创建方式';
} else if (step === 1 && radioValue===0) {
title = 'excel导入';
} else if (step === 2 && radioValue===0) {
title = '模型创建-excel导入';
if (action === 'add') {
if (step === 0) {
title = '创建方式';
} else if (step === 1 && radioValue===0) {
title = 'excel导入';
} else if (step === 2 && radioValue===0) {
title = '模型创建-excel导入';
}
} else if (action === 'edit') {
title = '模型编辑';
} else if (action === 'detail') {
title = '模型详情';
}
let footer = null;
if (action === 'add') {
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>
];
} else if (action === 'edit') {
footer = [
<Button
key="1"
type="primary"
onClick={cancel}
>
取消
</Button>,
<Button
key="2"
type="primary"
loading={confirmLoading}
onClick={save}
>
保存
</Button>
];
} else if (action === 'detail') {
footer = [
<Button
key="1"
type="primary"
onClick={cancel}
>
取消
</Button>
];
}
return (
......@@ -158,34 +241,7 @@ const ImportModal = (props) => {
reset();
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>
]}
footer={footer}
>
<>
{
......@@ -220,7 +276,7 @@ const ImportModal = (props) => {
step===1 && radioValue===4 && <></>
}
{
step===2 && <ImportAction hints={hints} onChange={onActionChange} action={action} form={form} />
step===2 && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} />
}
</>
</Modal>
......
src/view/Manage/Model/Component/ModelTable.jsx
......@@ -8,7 +8,7 @@ import './ModelTable.less';
const ModelTable = (props) => {
const { data, onChange, loading } = props;
const { data, onChange, loading, onItemAction } = props;
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [modal, contextHolder] = Modal.useModal();
......@@ -33,7 +33,7 @@ const ModelTable = (props) => {
return (
<Space size='small'>
<Tooltip placement='bottom' title={'修改'}>
<Button icon={<EditOutlined />} size='small' />
<Button icon={<EditOutlined />} size='small' onClick={() => { editItem(record); }} />
</Tooltip>
<Tooltip placement='bottom' title={'详情'}>
<Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailItem(record); }} />
......@@ -50,8 +50,12 @@ const ModelTable = (props) => {
}
];
const editItem = (record) => {
onItemAction && onItemAction(record.id||'', 'edit');
}
const detailItem = (record) => {
onItemAction && onItemAction(record.id||'', 'detail');
}
const deleteItem = (record) => {
......
src/view/Manage/Model/index.jsx
......@@ -48,6 +48,10 @@ class Model extends React.Component {
})
}
onTableItemAction = (id, action) => {
this.setState({ importModalVisible: true, importModalAction: action, modelerId: id });
}
onImportBtnClick = () => {
const { catalogId } = this.state;
if (!catalogId || catalogId==='') {
......@@ -72,7 +76,7 @@ class Model extends React.Component {
}
render() {
const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData } = this.state;
const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData, modelerId } = this.state;
return (
<div style={{ backgroundColor: '#ECEEF3', height: '100%' }}>
......@@ -96,7 +100,7 @@ class Model extends React.Component {
<Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
</div>
<div className='p-3'>
<ModelTable loading={loadingTableData} data={tableData} onChange={this.onTableChange} />
<ModelTable loading={loadingTableData} data={tableData} onChange={this.onTableChange} onItemAction={this.onTableItemAction} />
</div>
</div>
</Col>
......@@ -107,6 +111,7 @@ class Model extends React.Component {
action={importModalAction}
onCancel={this.onImportModalCancel}
catalogId={catalogId}
modelerId={modelerId}
/>
<ExportModal
......
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