Skip to content

S
szse
Commit 81b1ba61 by zhaochengxiang
Options

模型基本信息调整

parent 20762b73
Showing with 181 additions and 112 deletions
src/view/Manage/DataMaster/Define/Component/UpdateBasicInfo.jsx
...@@ -37,7 +37,7 @@ const UpdateBasicInfo = (props) => { ...@@ -37,7 +37,7 @@ const UpdateBasicInfo = (props) => {
</Col> </Col>
<Col xs={24} sm={24} lg={12}> <Col xs={24} sm={24} lg={12}>
<Form.Item label='模版描述' name='comment'> <Form.Item label='模版描述' name='comment'>
<TextArea row={4} /> <TextArea rows={4} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
......
src/view/Manage/Model/Component/ImportActionHeader.jsx
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useMemo } from 'react';
import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider } from 'antd'; import { Form, Input, Row, Col, Descriptions, Select, AutoComplete, Button, Divider, Tooltip } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons'; import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { highlightSearchContentByTerms, generateUUID } from '../../../../util'; import { highlightSearchContentByTerms, generateUUID } from '../../../../util';
...@@ -42,6 +42,24 @@ const updateOptions = [ ...@@ -42,6 +42,24 @@ const updateOptions = [
'作业提交', '作业提交',
'脚本加载', '脚本加载',
]; ];
const tableTypeOptions = [
{ title: '实时表', remark: '实时加载的数据表' },
{ title: '手工配置表', remark: '手工维护的配置表、定义表、类别表、对照表等' },
{ title: '配置参数表', remark: '自动更新的配置表、定义表、类别表、对照表等' },
{ title: '原始数据表', remark: '经过规范化处理的与贴源数据类似的数据表' },
{ title: '基础数据表', remark: '按照特定业务主体进行融合的基础数据' },
{ title: '明细数据表', remark: '系统内不可细分的数据表，一般用于业务流水类的数据' },
{ title: '汇总统计表', remark: '基于常用共性的维度组合的数据表' },
{ title: '集市表', remark: '数仓提供的、面向特定应用领域组织的数据表，通常是大宽表' },
{ title: '分析表', remark: '面向应用的标签、画像、关系图谱表' },
{ title: '应用表', remark: '应用平台自身产生、使用和通过应用平台维护的数据' },
];
const etlTableTypeData = {
full: ['chain', 'daily', 'current', 'chain,current', 'daily,current', 'chain,daily,current'],
change: ['chain', 'current', 'chain,current', 'daily,current', 'chain,daily,current'],
};
const etlTableTypeRemark = '描述ETL框架中目标表的数据类型';
const etlLoadRemark = '描述ETL框架绑定加载列表，如chain、daily、current等';
const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => { const ConstraintSelect = ({ value = {}, constraints = [], onChange, ...restProps }) => {
...@@ -186,10 +204,10 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang ...@@ -186,10 +204,10 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
return ( return (
<Row gutter={10}> <Row gutter={10}>
<Col span={8}> <Col span={10}>
<Select <Select
onChange={onPartitionTypeChange} onChange={onPartitionTypeChange}
value={value?.partitionType?.name || ''} value={value?.partitionType?.name}
placeholder='请选择分区类型' placeholder='请选择分区类型'
allowClear={true} allowClear={true}
> >
...@@ -202,7 +220,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang ...@@ -202,7 +220,7 @@ const PartitionSelect = ({ value = {}, modelerData, partitionTypes = [], onChang
} }
</Select> </Select>
</Col> </Col>
<Col span={16}> <Col span={14}>
<Select <Select
onChange={(value) => { onAttributeChange && onAttributeChange(value) }} onChange={(value) => { onAttributeChange && onAttributeChange(value) }}
value={attributeIds} value={attributeIds}
...@@ -251,7 +269,7 @@ const LoadSelect = ({ value = '', onChange, ...restProps }) => { ...@@ -251,7 +269,7 @@ const LoadSelect = ({ value = '', onChange, ...restProps }) => {
tokenSeparators={['/', ' ']} tokenSeparators={['/', ' ']}
onChange={(value) => { onLoadChange && onLoadChange(value) }} onChange={(value) => { onLoadChange && onLoadChange(value) }}
value={loadNames} value={loadNames}
placeholder='请选择选择或者手动输入加载方式' placeholder='请选择或者手动输入加载方式'
allowClear={true} allowClear={true}
> >
{ {
...@@ -292,8 +310,8 @@ const UpdateSelect = ({ value = '', onChange, ...restProps }) => { ...@@ -292,8 +310,8 @@ const UpdateSelect = ({ value = '', onChange, ...restProps }) => {
tokenSeparators={['/', ' ']} tokenSeparators={['/', ' ']}
onChange={(value) => { onUpdateChange && onUpdateChange(value) }} onChange={(value) => { onUpdateChange && onUpdateChange(value) }}
value={updateNames} value={updateNames}
placeholder='请选择选择或者手动输入更新时间'
allowClear={true} allowClear={true}
{...restProps}
> >
{ {
updateOptions.map((item, index) => { updateOptions.map((item, index) => {
...@@ -351,6 +369,86 @@ const ImportActionHeader = (props) => { ...@@ -351,6 +369,86 @@ const ImportActionHeader = (props) => {
//eslint-disable-next-line react-hooks/exhaustive-deps //eslint-disable-next-line react-hooks/exhaustive-deps
}, [modelerData]) }, [modelerData])
useEffect(() => {
if ((maintenanceRecords||[]).length>0) {
let maintenanceDescription = '';
maintenanceRecords.forEach((record, index) => {
if (index !== 0) {
maintenanceDescription += '/';
}
maintenanceDescription += record;
})
form?.setFieldsValue({ maintenanceRecords: maintenanceDescription });
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [maintenanceRecords, editable])
//分布
const distributionDescription = useMemo(() => {
let newDistributionDescription = ''
if (!editable && modelerData) {
if (modelerData?.easyDataModelerDistributionKey) {
(modelerData?.easyDataModelerDistributionKey||[]).forEach((item, index) => {
if (index > 0) {
newDistributionDescription += ',';
}
newDistributionDescription += item.name||'';
});
}
}
return newDistributionDescription;
}, [editable, modelerData])
//主键
const primaryDescription = useMemo(() => {
let newPrimaryDescription = ''
if (modelerData?.easyDataModelerPrimaryKey) {
(modelerData?.easyDataModelerPrimaryKey||[]).forEach((item, index) => {
if (index > 0) {
newPrimaryDescription += ',';
}
newPrimaryDescription += item.name||'';
})
}
return newPrimaryDescription;
}, [editable, modelerData])
//分区
const partitionsDescription = useMemo(() => {
let newPartitionsDescription = ''
if (modelerData?.partition?.keys) {
(modelerData?.partition?.keys||[]).forEach((item, index) => {
if (index > 0) {
newPartitionsDescription += ',';
}
newPartitionsDescription += item.name||'';
})
}
if (modelerData?.partition?.partitionType?.cnName) {
newPartitionsDescription += '/' + modelerData?.partition?.partitionType?.cnName||'';
}
return newPartitionsDescription;
}, [editable, modelerData])
//类主键
const semiPrimaryDescription = useMemo(() => {
let newSemiPrimaryDescription = ''
if (modelerData?.easyDataModelerSemiPrimaryKey) {
(modelerData?.easyDataModelerSemiPrimaryKey||[]).forEach((item, index) => {
if (index > 0) {
newSemiPrimaryDescription += ',';
}
newSemiPrimaryDescription += item.name||'';
})
}
return newSemiPrimaryDescription;
}, [editable, modelerData])
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
...@@ -448,70 +546,6 @@ const ImportActionHeader = (props) => { ...@@ -448,70 +546,6 @@ const ImportActionHeader = (props) => {
setOnlyShowRequireChange(!onlyShowRequireChange); setOnlyShowRequireChange(!onlyShowRequireChange);
} }
let distributionDescription = '', primaryDescription = '', partitionsDescription = '', semiPrimaryDescription = '', maintenanceDescription = '';
if (!editable && modelerData) {
//分布
if (modelerData?.easyDataModelerDistributionKey) {
(modelerData?.easyDataModelerDistributionKey||[]).forEach((item, index) => {
if (index > 0) {
distributionDescription += ',';
}
distributionDescription += item.name||'';
});
}
//主键
if (modelerData?.easyDataModelerPrimaryKey) {
(modelerData?.easyDataModelerPrimaryKey||[]).forEach((item, index) => {
if (index > 0) {
primaryDescription += ',';
}
primaryDescription += item.name||'';
})
}
//分区
if (modelerData?.partition?.keys) {
(modelerData?.partition?.keys||[]).forEach((item, index) => {
if (index > 0) {
partitionsDescription += ',';
}
partitionsDescription += item.name||'';
})
}
if (modelerData?.partition?.partitionType?.cnName) {
partitionsDescription += '/' + modelerData?.partition?.partitionType?.cnName||'';
}
//类主键
if (modelerData?.easyDataModelerSemiPrimaryKey) {
(modelerData?.easyDataModelerSemiPrimaryKey||[]).forEach((item, index) => {
if (index > 0) {
semiPrimaryDescription += ',';
}
semiPrimaryDescription += item.name||'';
})
}
}
if ((maintenanceRecords||[]).length>0) {
maintenanceRecords.forEach((record, index) => {
if (index !== 0) {
maintenanceDescription += '/';
}
maintenanceDescription += record;
})
form?.setFieldsValue({ maintenanceRecords: maintenanceDescription });
}
return ( return (
<div className='model-import-action-header'> <div className='model-import-action-header'>
<div <div
...@@ -571,15 +605,27 @@ const ImportActionHeader = (props) => { ...@@ -571,15 +605,27 @@ const ImportActionHeader = (props) => {
rules={[{ required: true, message: '请输入数据内容!' }]} rules={[{ required: true, message: '请输入数据内容!' }]}
style={{ marginBottom: 15 }} style={{ marginBottom: 15 }}
> >
<TextArea row={4} /> <TextArea rows={4} placeholder='描述数据表包含的业务数据，包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表，可以说明加载的源接口信息。' />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> <Col xs={24} sm={24} lg={12} xl={8}>
{ <Form.Item
!onlyShowRequireChange && <Divider style={{ margin: '0 0 15px' }} /> label="数据表类型"
} name="tableType"
{ rules={[{ required: true, message: '请选择数据表类型!' }]}
!onlyShowRequireChange && <Row gutter={10}> >
<Select allowClear placeholder='请选择数据表类型'>
{
tableTypeOptions.map((item, index) => <Option key={index} value={item.title}>
<Tooltip title={item.remark}>
{item.title}
</Tooltip>
</Option>)
}
</Select>
</Form.Item>
</Col>
<Row gutter={10}>
{/* <Col xs={24} sm={24} lg={12} xl={8}> {/* <Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item <Form.Item
label="生成表类型" label="生成表类型"
...@@ -594,10 +640,10 @@ const ImportActionHeader = (props) => { ...@@ -594,10 +640,10 @@ const ImportActionHeader = (props) => {
</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="tableType" name="easyDataModelerPrimaryKey"
> >
<Input /> <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}>
...@@ -605,7 +651,7 @@ const ImportActionHeader = (props) => { ...@@ -605,7 +651,7 @@ const ImportActionHeader = (props) => {
label="数据平台" label="数据平台"
name="dataResidence" name="dataResidence"
> >
<Input disabled={true} /> <Input disabled={true} placeholder='描述数据表落地的数据平台及数据库' />
</Form.Item> </Form.Item>
</Col> </Col>
<Col xs={24} sm={24} lg={12} xl={8}> <Col xs={24} sm={24} lg={12} xl={8}>
...@@ -613,7 +659,7 @@ const ImportActionHeader = (props) => { ...@@ -613,7 +659,7 @@ const ImportActionHeader = (props) => {
label="数据情况" label="数据情况"
name="dataCircumstances" name="dataCircumstances"
> >
<Input /> <Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' />
</Form.Item> </Form.Item>
</Col> </Col>
<Col xs={24} sm={24} lg={12} xl={8}> <Col xs={24} sm={24} lg={12} xl={8}>
...@@ -624,6 +670,29 @@ const ImportActionHeader = (props) => { ...@@ -624,6 +670,29 @@ const ImportActionHeader = (props) => {
<AttributesSelect modelerData={modelerData} /> <AttributesSelect modelerData={modelerData} />
</Form.Item> </Form.Item>
</Col> </Col>
{/* <Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="数据类型"
name=""
tooltip={etlTableTypeRemark}
>
<Select allowClear placeholder='请选择数据类型'>
{
Object.keys(etlTableTypeData).map((item, index) => <Option key={index} value={item}>
{item}
</Option>)
}
</Select>
</Form.Item>
</Col> */}
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="更新时间"
name="dataUpdatingTiming"
>
<UpdateSelect placeholder='描述数据表的更新时间点'/>
</Form.Item>
</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="分区键"
...@@ -632,12 +701,27 @@ const ImportActionHeader = (props) => { ...@@ -632,12 +701,27 @@ const ImportActionHeader = (props) => {
<PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} />
</Form.Item> </Form.Item>
</Col> </Col>
{/* <Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="绑定加载范围"
name=""
tooltip={etlLoadRemark}
>
<Select allowClear placeholder='请选择绑定加载范围'>
{
// Object.keys(etlTableTypeData).map((item, index) => <Option key={index} value={item}>
// {item}
// </Option>)
}
</Select>
</Form.Item>
</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="easyDataModelerPrimaryKey" name="maintenanceRecords"
> >
<AttributesSelect modelerData={modelerData} mode='tags' /> <TextArea rows={3} disabled={true} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col xs={24} sm={24} lg={12} xl={8}> <Col xs={24} sm={24} lg={12} xl={8}>
...@@ -656,24 +740,8 @@ const ImportActionHeader = (props) => { ...@@ -656,24 +740,8 @@ const ImportActionHeader = (props) => {
<LoadSelect /> <LoadSelect />
</Form.Item> </Form.Item>
</Col> </Col>
<Col xs={24} sm={24} lg={12} xl={8}> </Row>
<Form.Item </Row>
label="更新时间"
name="dataUpdatingTiming"
>
<UpdateSelect />
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="维护历史"
name="maintenanceRecords"
>
<TextArea rows={3} disabled={true} />
</Form.Item>
</Col>
</Row>
}
</Form> </Form>
) : ( ) : (
<React.Fragment> <React.Fragment>
...@@ -697,6 +765,7 @@ const ImportActionHeader = (props) => { ...@@ -697,6 +765,7 @@ const ImportActionHeader = (props) => {
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>规范</div>} >{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}</Descriptions.Item> <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>规范</div>} >{modelerData.easyDataModelerModelingConstraint?(modelerData.easyDataModelerModelingConstraint.cnName||''):''}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据内容</div>}>{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item> <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据内容</div>}>{highlightSearchContentByTerms(modelerData.remark||'', terms)}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据表类型</div>} >{highlightSearchContentByTerms(modelerData.tableType||'', terms)}</Descriptions.Item>
</Descriptions> </Descriptions>
{ {
!onlyShowRequireChange && <Divider style={{ margin: '0 0 15px' }} /> !onlyShowRequireChange && <Divider style={{ margin: '0 0 15px' }} />
...@@ -704,15 +773,14 @@ const ImportActionHeader = (props) => { ...@@ -704,15 +773,14 @@ const ImportActionHeader = (props) => {
{ {
!onlyShowRequireChange && <Descriptions column={3}> !onlyShowRequireChange && <Descriptions column={3}>
{/* <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>生成表类型</div>} >{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item> */} {/* <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>生成表类型</div>} >{modelerData.easyDataModelerModelingTemplate?(modelerData.easyDataModelerModelingTemplate.cnName||''):''}</Descriptions.Item> */}
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据表类型</div>} >{highlightSearchContentByTerms(modelerData.tableType||'', 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>} >{highlightSearchContentByTerms(modelerData.dataResidence||'', 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.dataCircumstances||'', terms)}</Descriptions.Item>
<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(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>} ></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(semiPrimaryDescription||'', terms)}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>加载方式</div>} >{highlightSearchContentByTerms(modelerData.dataLoadingStrategy||'', 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.dataUpdatingTiming||'', 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>} ></Descriptions.Item> */}
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>维护历史</div>} > <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>维护历史</div>} >
<div> <div>
{ {
...@@ -722,6 +790,8 @@ const ImportActionHeader = (props) => { ...@@ -722,6 +790,8 @@ const ImportActionHeader = (props) => {
} }
</div> </div>
</Descriptions.Item> </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.dataLoadingStrategy||'', terms)}</Descriptions.Item>
</Descriptions> </Descriptions>
} }
</React.Fragment> </React.Fragment>
......
src/view/Manage/Model/Component/ImportActionTable.jsx
...@@ -196,7 +196,6 @@ export const EditableCell = ({ ...@@ -196,7 +196,6 @@ export const EditableCell = ({
); );
} }
return ( return (
<td {...restProps}> <td {...restProps}>
{editing ? ( {editing ? (
......
src/view/Manage/ModelConfig/Component/TemplateActionHeader.jsx
...@@ -53,7 +53,7 @@ const TemplateActionHeader = (props) => { ...@@ -53,7 +53,7 @@ const TemplateActionHeader = (props) => {
labelAlign="left" labelAlign="left"
rules={[{ required: true, message: '请输入描述!' }]} rules={[{ required: true, message: '请输入描述!' }]}
> >
<TextArea row={4} /> <TextArea rows={4} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
......
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