Skip to content

S
szse
Commit 2799b217 by zhaochengxiang
Options

bug fix

parent 7cdb5e99
Showing with 84 additions and 69 deletions
src/view/Manage/Model/Component/ImportActionHeader.jsx
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 { Subject } from 'rxjs';
import classnames from 'classnames';
import { highlightSearchContentByTerms, generateUUID, IsArr } from '../../../../util';
import { dispatch, dispatchLatest } from '../../../../model';
import Rule from '../../ModelConfig/Component/rule-readonly';
import DebounceInput from './DebounceInput';
import DataQuality, { DataQualityFeignTagList } from '../../../QianKun/data-quality'
import './ImportActionHeader.less';
......@@ -151,8 +152,8 @@ const ImportActionHeader = (props) => {
}, [editable, modelerData])
const marginBottom = useMemo(() => {
return 15
}, [])
return editable ? 15 : 10
}, [editable])
const formItemLayout = {
labelCol: {
......@@ -262,15 +263,11 @@ const ImportActionHeader = (props) => {
}
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'>
<h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3>
</div>
{
editable ? (
<Form
form={form}
{...formItemLayout}
<Form form={form} {...formItemLayout}
onValuesChange={onValuesChange}
>
<Row gutter={10}>
......@@ -281,7 +278,11 @@ const ImportActionHeader = (props) => {
rules={[{ required: true, message: '请输入中文名称!' }]}
style={{ marginBottom }}
>
<InputDebounce />
{
editable ? <InputDebounce /> : <span>
{highlightSearchContentByTerms(modelerData?.cnName, terms)}
</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -291,10 +292,9 @@ const ImportActionHeader = (props) => {
rules={[{ required: true, message: '请输入英文名称!' }]}
style={{ marginBottom }}
>
<AutoComplete
options={options}
onSearch={onSearch}
/>
{
editable ? <AutoComplete options={options} onSearch={onSearch} /> : <span>{highlightSearchContentByTerms(modelerData?.name, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -304,7 +304,9 @@ const ImportActionHeader = (props) => {
rules={[{ required: true, message: '请输入数据内容!' }]}
style={{ marginBottom }}
>
<TextArea rows={1} placeholder='描述数据表包含的业务数据，包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表，可以说明加载的源接口信息。' />
{
editable ? <TextArea rows={1} placeholder='描述数据表包含的业务数据，包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表，可以说明加载的源接口信息。' /> : <span>{highlightSearchContentByTerms(modelerData?.remark, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -313,7 +315,9 @@ const ImportActionHeader = (props) => {
name="easyDataModelerPrimaryKey"
style={{ marginBottom }}
>
<AttributesSelect modelerData={modelerData} mode='tags' />
{
editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span>{highlightSearchContentByTerms(primaryDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -322,7 +326,9 @@ const ImportActionHeader = (props) => {
name="dataResidence"
style={{ marginBottom }}
>
<Input placeholder='描述数据表落地的数据平台及数据库' />
{
editable ? <Input placeholder='描述数据表落地的数据平台及数据库' /> : <span>{highlightSearchContentByTerms(modelerData?.dataResidence, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -332,13 +338,20 @@ const ImportActionHeader = (props) => {
rules={[{ required: true, message: '请选择规范!' }]}
style={{ marginBottom }}
>
<ConstraintSelect
{
editable ? <ConstraintSelect
constraints={constraints}
onChange={onConstraintChange}
onDetail={() => {
setRuleParams({ visible: true })
}}
/>
/> : <Space>
{modelerData?.easyDataModelerModelingConstraint?.cnName}
<a onClick={() => {
setRuleParams({ visible: true })
}}>查看</a>
</Space>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -348,34 +361,33 @@ const ImportActionHeader = (props) => {
rules={[{ required: true, message: '请选择数据表类型!' }]}
style={{ marginBottom }}
>
<TemplateSelect
{
editable ? <TemplateSelect
modelerData={modelerData}
templates={templates}
onChange={onTemplateChange}
/> : <span>{modelerData?.tableType}</span>
}
</Form.Item>
</Col>
{
modelerData?.id && modelerData?.state?.id === '4' && <Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="标签"
style={{ marginBottom }}
>
<DataQuality
type={DataQualityFeignTagList}
data={{
type: 'model',
id: modelerData?.id,
}}
/>
</Form.Item>
</Col>
}
</Row>
</Form>
) : (
<Descriptions column={3}>
<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>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>技术主键</div>} >{highlightSearchContentByTerms(primaryDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据平台</div>} >{highlightSearchContentByTerms(modelerData.dataResidence||'', terms)}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }} >规范</div>} >
<Space>
{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}
<a onClick={() => {
setRuleParams({ visible: true })
}}>查看</a>
</Space>
</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据表类型</div>} >{modelerData.tableType}</Descriptions.Item>
</Descriptions>
)
}
<div className='model-import-action-technical mb-3' style={{
display: 'flex',
alignItems: 'center',
......@@ -391,10 +403,7 @@ const ImportActionHeader = (props) => {
}
</div>
{
!isCollapse && <React.Fragment>
{
editable ? (
<Form
!isCollapse && <Form
form={form}
{...formItemLayout}
onValuesChange={onValuesChange}
......@@ -406,7 +415,9 @@ const ImportActionHeader = (props) => {
name="easyDataModelerDistributionKey"
style={{ marginBottom }}
>
<AttributesSelect modelerData={modelerData} />
{
editable ? <AttributesSelect modelerData={modelerData} /> : <span>{highlightSearchContentByTerms(distributionDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -415,7 +426,9 @@ const ImportActionHeader = (props) => {
name="partition"
style={{ marginBottom }}
>
<PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} />
{
editable ? <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> : <span>{highlightSearchContentByTerms(partitionsDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -424,7 +437,9 @@ const ImportActionHeader = (props) => {
name="easyDataModelerSemiPrimaryKey"
style={{ marginBottom }}
>
<AttributesSelect modelerData={modelerData} mode='tags' />
{
editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span>{highlightSearchContentByTerms(semiPrimaryDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -433,7 +448,9 @@ const ImportActionHeader = (props) => {
name="dataCircumstances"
style={{ marginBottom }}
>
<Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' />
{
editable ? <Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' /> : <span>{highlightSearchContentByTerms(modelerData?.dataCircumstances, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -442,7 +459,9 @@ const ImportActionHeader = (props) => {
name="dataUpdatingTiming"
style={{ marginBottom }}
>
<UpdateSelect placeholder='描述数据表的更新时间点'/>
{
editable ? <UpdateSelect placeholder='描述数据表的更新时间点'/> : <div>{highlightSearchContentByTerms(modelerData?.dataUpdatingTiming, terms)}</div>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -452,13 +471,15 @@ const ImportActionHeader = (props) => {
tooltip={dataTypeRemark}
style={{ marginBottom }}
>
<Select allowClear placeholder='请选择数据类型'>
{
editable ? <Select allowClear placeholder='请选择数据类型'>
{
dataTypeList?.map((item, index) => <Option key={index} value={item}>
{item}
</Option>)
}
</Select>
</Select> : <span>{highlightSearchContentByTerms(modelerData?.dataType, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
......@@ -468,30 +489,19 @@ const ImportActionHeader = (props) => {
tooltip={bindingLoadRemark}
style={{ marginBottom }}
>
<Select allowClear placeholder='请选择绑定加载范围'>
{
editable ? <Select allowClear placeholder='请选择绑定加载范围'>
{
bindingLoadRangeList?.map((item, index) => <Option key={index} value={item}>
{item}
</Option>)
}
</Select>
</Select> : <span>{highlightSearchContentByTerms(modelerData?.bindingLoadRang, terms)}</span>
}
</Form.Item>
</Col>
</Row>
</Form>
) : (
<Descriptions column={3}>
<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>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>类主键</div>} >{highlightSearchContentByTerms(semiPrimaryDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据情况</div>} >{highlightSearchContentByTerms(modelerData.dataCircumstances||'', terms)}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>更新时间</div>} >{highlightSearchContentByTerms(modelerData.dataUpdatingTiming||'', terms)}</Descriptions.Item>
<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
{...ruleParams}
......
src/view/Manage/Model/Component/ImportActionHeader.less
.model-import-action-header {
.yy-descriptions-row > th, .yy-descriptions-row > td {
padding-bottom: 15px;
.model-import-action-header-readolny {
.yy-form-item-label > label {
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