Skip to content

S
szse
Commit 9cd1c070 by zhaochengxiang
Options

模型tab页取消，改单页滚动，基本信息显示必填部分，其他收缩可下拉查看 提Bug

parent c495655d
Showing with 97 additions and 133 deletions
src/view/Manage/Model/Component/EditModel.less
......@@ -23,7 +23,7 @@
}
.edit-container-card {
padding: 20px 20px 0;
padding: 20px;
background: #fff;
}
......
src/view/Manage/Model/Component/ImportAction.jsx
......@@ -437,102 +437,48 @@ const ImportAction = (props) => {
return (
<Spin spinning={loading}>
<Tabs activeKey={tabKey} onChange={onTabChange}>
<TabPane tab='基本信息' key='1'>
<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}
/>
</TabPane>
<TabPane
tab={
<span>
<span>数据表结构</span>
{
(action!=='detail'&&action!=='flow'&&action!=='detail-version') && (
<Popover content='表格可以通过拖拽来排序'>
<QuestionCircleOutlined className='ml-1 pointer' />
</Popover>
)
}
</span>
}
key='2'
>
<ImportActionTable
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedDatatypes={supportedDatatypes}
onChange={onTableChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
action={action}
terms={terms}
/>
</TabPane>
<TabPane
tab={
<span>
<span>数据表索引</span>
{
(action!=='detail'&&action!=='flow'&&action!=='detail-version') && (
<Popover content='表格可以通过拖拽来排序'>
<QuestionCircleOutlined className='ml-1 pointer' />
</Popover>
)
}
</span>
}
key='3'
>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
</TabPane>
<TabPane
tab='数据表分区'
key='4'
>
<ImportActionPartition
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedPartitionTypes={supportedPartitionTypes}
onChange={onPartitionChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
</TabPane>
</Tabs>
{
action!=='detail'&&action!=='flow'&&action!=='detail-version'&&(
<React.Fragment>
<Divider style={{ margin: 0 }} />
<div className='flex' style={{ justifyContent: 'flex-end', height: 64, alignItems: 'center' }}>
<Space size='small'>
<Button type='primary' onClick={prevStep} disabled={tabKey==='1'} danger>上一步</Button>
<Button type='primary' onClick={nextStep} disabled={tabKey==='4'} danger>下一步</Button>
</Space>
</div>
</React.Fragment>
)
}
<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}
/>
<ImportActionTable
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedDatatypes={supportedDatatypes}
onChange={onTableChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
action={action}
terms={terms}
/>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
<ImportActionPartition
modelerData={modelerData||{}}
constraint={constraint}
template={template}
validateReports={validateReports}
supportedPartitionTypes={supportedPartitionTypes}
onChange={onPartitionChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
terms={terms}
/>
</Spin>
);
};
......
src/view/Manage/Model/Component/ImportActionHeader.jsx
import React, { useState, useEffect } from 'react';
import { Form, Input, Row, Col, Descriptions, Select, AutoComplete } from 'antd';
import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Checkbox } from 'antd';
import { highlightSearchContentByTerms } from '../../../../util';
import { dispatchLatest } from '../../../../model';
......@@ -57,6 +57,7 @@ const ImportActionHeader = (props) => {
const [ options, setOptions ] = useState([]);
const [ autoTranslate, setAutoTranslate ] = useState(false);
const [ onlyShowRequireChange, setOnlyShowRequireChange ] = useState(true);
useEffect(() => {
......@@ -168,8 +169,21 @@ const ImportActionHeader = (props) => {
}
}
const onOnlyShowRequireChange = (e) => {
setOnlyShowRequireChange(e.target.checked);
}
return (
<div className='model-import-action-header'>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<h2>基本信息</h2>
<Checkbox onChange={onOnlyShowRequireChange} defaultChecked={onlyShowRequireChange} value={onlyShowRequireChange}>仅显示必填项</Checkbox>
</div>
{
editable ? (
<Form
......@@ -198,8 +212,6 @@ const ImportActionHeader = (props) => {
<AutoComplete options={options} onSearch={onSearch} style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
<Row >
<Col span={8}>
<Form.Item
label="规范"
......@@ -214,11 +226,24 @@ const ImportActionHeader = (props) => {
/>
</Form.Item>
</Col>
</Row>
<Row >
<Col span={8}>
<Form.Item
label="数据内容"
name="remark"
labelAlign="left"
rules={[{ required: true, message: '请输入数据内容!' }]}
>
<TextArea row={4} style={{ width: 300 }} />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="生成表类型"
name="easyDataModelerModelingTemplate"
labelAlign="left"
hidden={onlyShowRequireChange}
rules={[{ required: false, message: '请选择生成表类型!' }]}
>
<TemplateSelect
......@@ -228,17 +253,18 @@ const ImportActionHeader = (props) => {
/>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
label="数据表类型"
name="tableType"
labelAlign="left"
hidden={onlyShowRequireChange}
>
<Input style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
<Row hidden={onlyShowRequireChange}>
<Col span={8}>
<Form.Item
label="数据平台"
......@@ -248,13 +274,12 @@ const ImportActionHeader = (props) => {
<Input style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
label="数据情况"
name="dataCircumstances"
labelAlign="left"
hidden={onlyShowRequireChange}
>
<Input style={{ width: 300 }} />
</Form.Item>
......@@ -269,7 +294,7 @@ const ImportActionHeader = (props) => {
</Form.Item>
</Col>
</Row>
<Row>
<Row hidden={onlyShowRequireChange}>
<Col span={8}>
<Form.Item
label="分区键"
......@@ -288,8 +313,6 @@ const ImportActionHeader = (props) => {
<Input style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
label="类主键"
......@@ -299,6 +322,8 @@ const ImportActionHeader = (props) => {
<Input style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
<Row hidden={onlyShowRequireChange}>
<Col span={8}>
<Form.Item
label="加载方式"
......@@ -308,8 +333,6 @@ const ImportActionHeader = (props) => {
<Input style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
label="更新时间"
......@@ -329,21 +352,9 @@ const ImportActionHeader = (props) => {
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
label="数据内容"
name="remark"
labelAlign="left"
rules={[{ required: true, message: '请输入数据内容!' }]}
>
<TextArea row={4} style={{ width: 300 }} />
</Form.Item>
</Col>
</Row>
</Form>
) : (
<Descriptions column={2}>
<Descriptions column={3}>
<Descriptions.Item label="中文名称">{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item>
<Descriptions.Item label="英文名称">
{
......@@ -362,18 +373,22 @@ const ImportActionHeader = (props) => {
}
</Descriptions.Item>
<Descriptions.Item label="规范">{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}</Descriptions.Item>
<Descriptions.Item label="生成表类型">{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item>
<Descriptions.Item label="数据表类型">{highlightSearchContentByTerms(modelerData.tableType||'', terms)}</Descriptions.Item>
<Descriptions.Item label="数据平台">{highlightSearchContentByTerms(modelerData.dataResidence||'', terms)}</Descriptions.Item>
<Descriptions.Item label="数据情况">{highlightSearchContentByTerms(modelerData.dataCircumstances||'', terms)}</Descriptions.Item>
<Descriptions.Item label="分布键">{highlightSearchContentByTerms(modelerData.distributionKeysDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="分区键">{highlightSearchContentByTerms(modelerData.partitionsDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="主键">{highlightSearchContentByTerms(modelerData.primaryKeysDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="类主键">{highlightSearchContentByTerms(modelerData.semiPrimaryKeysDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="加载方式">{highlightSearchContentByTerms(modelerData.dataLoadingStrategy||'', terms)}</Descriptions.Item>
<Descriptions.Item label="更新时间">{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item>
<Descriptions.Item label="维护历史">{highlightSearchContentByTerms(modelerData.maintenanceRecords||'', terms)}</Descriptions.Item>
<Descriptions.Item label="数据内容">{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
{
!onlyShowRequireChange && <React.Fragment>
<Descriptions.Item label="生成表类型">{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item>
<Descriptions.Item label="数据表类型">{highlightSearchContentByTerms(modelerData.tableType||'', terms)}</Descriptions.Item>
<Descriptions.Item label="数据平台">{highlightSearchContentByTerms(modelerData.dataResidence||'', terms)}</Descriptions.Item>
<Descriptions.Item label="数据情况">{highlightSearchContentByTerms(modelerData.dataCircumstances||'', terms)}</Descriptions.Item>
<Descriptions.Item label="分布键">{highlightSearchContentByTerms(modelerData.distributionKeysDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="分区键">{highlightSearchContentByTerms(modelerData.partitionsDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="主键">{highlightSearchContentByTerms(modelerData.primaryKeysDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="类主键">{highlightSearchContentByTerms(modelerData.semiPrimaryKeysDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label="加载方式">{highlightSearchContentByTerms(modelerData.dataLoadingStrategy||'', terms)}</Descriptions.Item>
<Descriptions.Item label="更新时间">{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item>
<Descriptions.Item label="维护历史">{highlightSearchContentByTerms(modelerData.maintenanceRecords||'', terms)}</Descriptions.Item>
</React.Fragment>
}
</Descriptions>
)
}
......
src/view/Manage/Model/Component/ImportActionIndex.jsx
......@@ -650,6 +650,7 @@ const ImportActionIndex = (props) => {
return (
<div className='model-import-action-index'>
<h2>数据表结构</h2>
<div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
{
editable && <Tooltip title={addTip}>
......
src/view/Manage/Model/Component/ImportActionPartition.jsx
......@@ -405,6 +405,7 @@ const ImportActionPartition = (props) => {
return (
<div className='model-import-action-index'>
<h2>数据表分区</h2>
{
editable && <div className='d-flex mb-3'>
<Tooltip title={addTip}>
......
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -957,6 +957,7 @@ const ImportActionTable = (props) => {
return (
<div className='model-import-action-table'>
<h2>数据表结构</h2>
<div className='d-flex mb-3' style={{ justifyContent: editable?'space-between':'flex-end' }}>
{
editable && <Tooltip title={addTip}>
......
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