Skip to content

S
szse
Commit 2799b217 by zhaochengxiang
Options

bug fix

parent 7cdb5e99
Showing with 233 additions and 218 deletions
src/view/Manage/Model/Component/ImportActionHeader.jsx
import React, { useState, useEffect, useMemo, useRef } from 'react'; import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider, Tooltip, Checkbox, Space } from 'antd'; import { Form, Input, Row, Col, Select, AutoComplete, Button, Divider, Tooltip, Checkbox, Space } from 'antd';
import { DownOutlined, UpOutlined, ExclamationCircleFilled, WarningFilled } from '@ant-design/icons'; import { DownOutlined, UpOutlined, ExclamationCircleFilled, WarningFilled } from '@ant-design/icons';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import classnames from 'classnames';
import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util'; import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util';
import { dispatch, dispatchLatest } from '../../../../model'; import { dispatch, dispatchLatest } from '../../../../model';
import Rule from '../../ModelConfig/Component/rule-readonly'; import Rule from '../../ModelConfig/Component/rule-readonly';
import DebounceInput from './DebounceInput'; import DebounceInput from './DebounceInput';
import DataQuality, { DataQualityFeignTagList } from '../../../QianKun/data-quality'
import './ImportActionHeader.less'; import './ImportActionHeader.less';
...@@ -151,8 +152,8 @@ const ImportActionHeader = (props) => { ...@@ -151,8 +152,8 @@ const ImportActionHeader = (props) => {
}, [editable, modelerData]) }, [editable, modelerData])
const marginBottom = useMemo(() => { const marginBottom = useMemo(() => {
return 15 return editable ? 15 : 10
}, []) }, [editable])
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
...@@ -262,120 +263,131 @@ const ImportActionHeader = (props) => { ...@@ -262,120 +263,131 @@ const ImportActionHeader = (props) => {
} }
return ( return (
<div className='model-import-action-header'> <div className={classnames('model-import-action-header', editable?'':'model-import-action-header-readolny')}>
<div className='model-import-action-basic mb-3'> <div className='model-import-action-basic mb-3'>
<h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3> <h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3>
</div> </div>
{ <Form form={form} {...formItemLayout}
editable ? ( onValuesChange={onValuesChange}
<Form >
form={form} <Row gutter={10}>
{...formItemLayout} <Col xs={24} sm={24} lg={12} xl={8}>
onValuesChange={onValuesChange} <Form.Item
> label={<ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} />}
<Row gutter={10}> name="cnName"
<Col xs={24} sm={24} lg={12} xl={8}> rules={[{ required: true, message: '请输入中文名称!' }]}
<Form.Item style={{ marginBottom }}
label={<ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} />} >
name="cnName" {
rules={[{ required: true, message: '请输入中文名称!' }]} editable ? <InputDebounce /> : <span>
style={{ marginBottom }} {highlightSearchContentByTerms(modelerData?.cnName, terms)}
> </span>
<InputDebounce /> }
</Form.Item> </Form.Item>
</Col> </Col>
<Col xs={24} sm={24} lg={12} xl={8}> <Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item <Form.Item
label={<ItemTitle name='name' cnName='英文名称' validateReports={validateReports} />} label={<ItemTitle name='name' cnName='英文名称' validateReports={validateReports} />}
name="name" name="name"
rules={[{ required: true, message: '请输入英文名称!' }]} rules={[{ required: true, message: '请输入英文名称!' }]}
style={{ marginBottom }} style={{ marginBottom }}
> >
<AutoComplete {
options={options} editable ? <AutoComplete options={options} onSearch={onSearch} /> : <span>{highlightSearchContentByTerms(modelerData?.name, terms)}</span>
onSearch={onSearch} }
/> </Form.Item>
</Form.Item> </Col>
</Col> <Col xs={24} sm={24} lg={12} xl={8}>
<Col xs={24} sm={24} lg={12} xl={8}> <Form.Item
<Form.Item label={<ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} />}
label={<ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} />} name="remark"
name="remark" rules={[{ required: true, message: '请输入数据内容!' }]}
rules={[{ required: true, message: '请输入数据内容!' }]} style={{ marginBottom }}
style={{ marginBottom }} >
> {
<TextArea rows={1} placeholder='描述数据表包含的业务数据，包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表，可以说明加载的源接口信息。' /> editable ? <TextArea rows={1} placeholder='描述数据表包含的业务数据，包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表，可以说明加载的源接口信息。' /> : <span>{highlightSearchContentByTerms(modelerData?.remark, terms)}</span>
</Form.Item> }
</Col> </Form.Item>
<Col xs={24} sm={24} lg={12} xl={8}> </Col>
<Form.Item <Col xs={24} sm={24} lg={12} xl={8}>
label="技术主键" <Form.Item
name="easyDataModelerPrimaryKey" label="技术主键"
style={{ marginBottom }} name="easyDataModelerPrimaryKey"
> style={{ marginBottom }}
<AttributesSelect modelerData={modelerData} mode='tags' /> >
</Form.Item> {
</Col> editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span>{highlightSearchContentByTerms(primaryDescription, terms)}</span>
<Col xs={24} sm={24} lg={12} xl={8}> }
<Form.Item </Form.Item>
label="数据平台" </Col>
name="dataResidence" <Col xs={24} sm={24} lg={12} xl={8}>
style={{ marginBottom }} <Form.Item
> label="数据平台"
<Input placeholder='描述数据表落地的数据平台及数据库' /> name="dataResidence"
</Form.Item> style={{ marginBottom }}
</Col> >
<Col xs={24} sm={24} lg={12} xl={8}> {
<Form.Item editable ? <Input placeholder='描述数据表落地的数据平台及数据库' /> : <span>{highlightSearchContentByTerms(modelerData?.dataResidence, terms)}</span>
label="规范" }
name="easyDataModelerModelingConstraint" </Form.Item>
rules={[{ required: true, message: '请选择规范!' }]} </Col>
style={{ marginBottom }} <Col xs={24} sm={24} lg={12} xl={8}>
> <Form.Item
<ConstraintSelect label="规范"
constraints={constraints} name="easyDataModelerModelingConstraint"
onChange={onConstraintChange} rules={[{ required: true, message: '请选择规范!' }]}
onDetail={() => { style={{ marginBottom }}
setRuleParams({ visible: true }) >
}} {
/> editable ? <ConstraintSelect
</Form.Item> constraints={constraints}
</Col> onChange={onConstraintChange}
<Col xs={24} sm={24} lg={12} xl={8}> onDetail={() => {
<Form.Item setRuleParams({ visible: true })
label="数据表类型" }}
name="tableType" /> : <Space>
rules={[{ required: true, message: '请选择数据表类型!' }]} {modelerData?.easyDataModelerModelingConstraint?.cnName}
style={{ marginBottom }} <a onClick={() => {
> setRuleParams({ visible: true })
<TemplateSelect }}>查看</a>
modelerData={modelerData} </Space>
templates={templates} }
onChange={onTemplateChange} </Form.Item>
/> </Col>
</Form.Item> <Col xs={24} sm={24} lg={12} xl={8}>
</Col> <Form.Item
</Row> label="数据表类型"
</Form> name="tableType"
) : ( rules={[{ required: true, message: '请选择数据表类型!' }]}
<Descriptions column={3}> style={{ marginBottom }}
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='cnName' cnName='中文名称' validateReports={validateReports} /></div>} >{highlightSearchContentByTerms(modelerData.cnName||'', terms)}</Descriptions.Item> >
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='name' cnName='英文名称' validateReports={validateReports} /></div>}>{highlightSearchContentByTerms(modelerData.name||'', terms)}</Descriptions.Item> {
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}><ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} /></div>}>{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item> editable ? <TemplateSelect
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>技术主键</div>} >{highlightSearchContentByTerms(primaryDescription||'', terms)}</Descriptions.Item> modelerData={modelerData}
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据平台</div>} >{highlightSearchContentByTerms(modelerData.dataResidence||'', terms)}</Descriptions.Item> templates={templates}
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }} >规范</div>} > onChange={onTemplateChange}
<Space> /> : <span>{modelerData?.tableType}</span>
{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''} }
<a onClick={() => { </Form.Item>
setRuleParams({ visible: true }) </Col>
}}>查看</a> {
</Space> modelerData?.id && modelerData?.state?.id === '4' && <Col xs={24} sm={24} lg={12} xl={8}>
</Descriptions.Item> <Form.Item
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据表类型</div>} >{modelerData.tableType}</Descriptions.Item> label="标签"
</Descriptions> style={{ marginBottom }}
) >
} <DataQuality
type={DataQualityFeignTagList}
data={{
type: 'model',
id: modelerData?.id,
}}
/>
</Form.Item>
</Col>
}
</Row>
</Form>
<div className='model-import-action-technical mb-3' style={{ <div className='model-import-action-technical mb-3' style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
...@@ -391,107 +403,105 @@ const ImportActionHeader = (props) => { ...@@ -391,107 +403,105 @@ const ImportActionHeader = (props) => {
} }
</div> </div>
{ {
!isCollapse && <React.Fragment> !isCollapse && <Form
{ form={form}
editable ? ( {...formItemLayout}
<Form onValuesChange={onValuesChange}
form={form} >
{...formItemLayout} <Row gutter={10}>
onValuesChange={onValuesChange} <Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="分布键"
name="easyDataModelerDistributionKey"
style={{ marginBottom }}
> >
<Row gutter={10}> {
<Col xs={24} sm={24} lg={12} xl={8}> editable ? <AttributesSelect modelerData={modelerData} /> : <span>{highlightSearchContentByTerms(distributionDescription, terms)}</span>
<Form.Item }
label="分布键" </Form.Item>
name="easyDataModelerDistributionKey" </Col>
style={{ marginBottom }} <Col xs={24} sm={24} lg={12} xl={8}>
> <Form.Item
<AttributesSelect modelerData={modelerData} /> label="分区键"
</Form.Item> name="partition"
</Col> style={{ marginBottom }}
<Col xs={24} sm={24} lg={12} xl={8}> >
<Form.Item {
label="分区键" editable ? <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> : <span>{highlightSearchContentByTerms(partitionsDescription, terms)}</span>
name="partition" }
style={{ marginBottom }} </Form.Item>
> </Col>
<PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> <Col xs={24} sm={24} lg={12} xl={8}>
</Form.Item> <Form.Item
</Col> label="类主键"
<Col xs={24} sm={24} lg={12} xl={8}> name="easyDataModelerSemiPrimaryKey"
<Form.Item style={{ marginBottom }}
label="类主键" >
name="easyDataModelerSemiPrimaryKey" {
style={{ marginBottom }} editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span>{highlightSearchContentByTerms(semiPrimaryDescription, terms)}</span>
> }
<AttributesSelect modelerData={modelerData} mode='tags' /> </Form.Item>
</Form.Item> </Col>
</Col> <Col xs={24} sm={24} lg={12} xl={8}>
<Col xs={24} sm={24} lg={12} xl={8}> <Form.Item
<Form.Item label="数据情况"
label="数据情况" name="dataCircumstances"
name="dataCircumstances" style={{ marginBottom }}
style={{ marginBottom }} >
> {
<Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' /> editable ? <Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' /> : <span>{highlightSearchContentByTerms(modelerData?.dataCircumstances, terms)}</span>
</Form.Item> }
</Col> </Form.Item>
<Col xs={24} sm={24} lg={12} xl={8}> </Col>
<Form.Item <Col xs={24} sm={24} lg={12} xl={8}>
label="更新时间" <Form.Item
name="dataUpdatingTiming" label="更新时间"
style={{ marginBottom }} name="dataUpdatingTiming"
> style={{ marginBottom }}
<UpdateSelect placeholder='描述数据表的更新时间点'/> >
</Form.Item> {
</Col> editable ? <UpdateSelect placeholder='描述数据表的更新时间点'/> : <div>{highlightSearchContentByTerms(modelerData?.dataUpdatingTiming, terms)}</div>
<Col xs={24} sm={24} lg={12} xl={8}> }
<Form.Item </Form.Item>
label="数据类型" </Col>
name="dataType" <Col xs={24} sm={24} lg={12} xl={8}>
tooltip={dataTypeRemark} <Form.Item
style={{ marginBottom }} label="数据类型"
> name="dataType"
<Select allowClear placeholder='请选择数据类型'> tooltip={dataTypeRemark}
{ style={{ marginBottom }}
dataTypeList?.map((item, index) => <Option key={index} value={item}> >
{item} {
</Option>) editable ? <Select allowClear placeholder='请选择数据类型'>
} {
</Select> dataTypeList?.map((item, index) => <Option key={index} value={item}>
</Form.Item> {item}
</Col> </Option>)
<Col xs={24} sm={24} lg={12} xl={8}> }
<Form.Item </Select> : <span>{highlightSearchContentByTerms(modelerData?.dataType, terms)}</span>
label="绑定加载范围" }
name="bindingLoadRange" </Form.Item>
tooltip={bindingLoadRemark} </Col>
style={{ marginBottom }} <Col xs={24} sm={24} lg={12} xl={8}>
> <Form.Item
<Select allowClear placeholder='请选择绑定加载范围'> label="绑定加载范围"
{ name="bindingLoadRange"
bindingLoadRangeList?.map((item, index) => <Option key={index} value={item}> tooltip={bindingLoadRemark}
{item} style={{ marginBottom }}
</Option>) >
} {
</Select> editable ? <Select allowClear placeholder='请选择绑定加载范围'>
</Form.Item> {
</Col> bindingLoadRangeList?.map((item, index) => <Option key={index} value={item}>
</Row> {item}
</Form> </Option>)
) : ( }
<Descriptions column={3}> </Select> : <span>{highlightSearchContentByTerms(modelerData?.bindingLoadRang, terms)}</span>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>分布键</div>} >{highlightSearchContentByTerms(distributionDescription||'', terms)}</Descriptions.Item> }
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>分区键</div>} >{highlightSearchContentByTerms(partitionsDescription||'', terms)}</Descriptions.Item> </Form.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>类主键</div>} >{highlightSearchContentByTerms(semiPrimaryDescription||'', terms)}</Descriptions.Item> </Col>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据情况</div>} >{highlightSearchContentByTerms(modelerData.dataCircumstances||'', terms)}</Descriptions.Item> </Row>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>更新时间</div>} >{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item> </Form>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据类型</div>} >{highlightSearchContentByTerms(modelerData.dataType||'', terms)}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>绑定加载范围</div>} >{highlightSearchContentByTerms(modelerData.bindingLoadRange||'', terms)}</Descriptions.Item>
</Descriptions>
)
}
</React.Fragment>
} }
<Rule <Rule
{...ruleParams} {...ruleParams}
......
src/view/Manage/Model/Component/ImportActionHeader.less
.model-import-action-header { .model-import-action-header-readolny {
.yy-descriptions-row > th, .yy-descriptions-row > td { .yy-form-item-label > label {
padding-bottom: 15px; height: auto;
}
.yy-form-item-control-input {
min-height: 0;
} }
} }
\ No newline at end of file
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