Commit ebc0a272 by zhaochengxiang

全文检索模型详情

parent 1659edc4
......@@ -88,6 +88,7 @@ export class App extends React.Component {
modelerId={id}
action='detail'
terms={terms}
reference='full-search'
/>
</AppContext.Provider>
);
......
......@@ -88,7 +88,7 @@ const callback = resp => {
if (resp.status === 401) {
showMessage('warn', 'session过期,请重新登录!');
window.location.href = isSzseEnv?"/api/auth/login":"/center-home/view/login"
window.location.href = isSzseEnv?`/api/auth/login?redirectURL=${encodeURIComponent(window.location.href)}`:"/center-home/view/login"
return null;
}
......
......@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
import { Spin, Tabs, Anchor, Affix, Button } from 'antd';
import LocalStorage from 'local-storage';
import { Subject } from 'rxjs';
import classnames from 'classnames';
import ImportActionHeader from './ImportActionHeader';
import { ImportActionTable } from './ImportActionTable';
......@@ -18,7 +19,7 @@ import './ImportAction.less'
export const importActionSubject = new Subject()
const ImportAction = React.forwardRef((props, ref) => {
const { action, hints, onChange, form, modelerId, terms, ddl, roughModelerData, versionId, permitCheckOut, catalogId, branchId, approvalModelId, approvalId } = props;
const { action, hints, onChange, form, modelerId, terms, ddl, roughModelerData, versionId, permitCheckOut, catalogId, branchId, approvalModelId, approvalId, reference = '' } = props;
const [ constraints, setConstraints ] = useState([]);
const [ constraint, setConstraint ] = useState({});
......@@ -623,29 +624,31 @@ const ImportAction = React.forwardRef((props, ref) => {
{
(action==='detail' && ((modelerData||{}).optionList||[]).findIndex(item => item.enabled && item.name==='查看') === -1) ? <div style={{ padding: '10px 20px', height: 60 }}>
{loading?'':'暂无权限'}
</div> : <div className='import-action'>
<Tabs activeKey={activeValue} centered onChange={(val) => {
setActiveValue(val);
var targetElement = container?.querySelector(`.${val}`); // 找到目标元素
if (targetElement) {
importActionSubject.next({ type: 'expand', key: val, action })
setTimeout(() => {
animating.current = true;
targetElement.scrollIntoView();
}, 100)
}
}}>
<Tabs.TabPane tab='基本信息' key="model-import-action-basic" />
<Tabs.TabPane tab='技术信息' key="model-import-action-technical" />
<Tabs.TabPane tab='数据表结构' key="model-import-action-table" />
<Tabs.TabPane tab='数据表索引' key="model-import-action-index" />
<Tabs.TabPane tab='管理信息' key="model-import-action-manage" />
<Tabs.TabPane tab='关联对象' key="model-import-action-relation" />
{
modelerData?.id && <Tabs.TabPane tab='模型评论' key="model-import-action-comment" />
}
</Tabs>
<div ref={setContainer} style={{ height: action==='edit-inherite-modal'?'60vh':'calc(100vh - 44px - 64px - 66px)', overflow: 'auto' }}>
</div> : <div className={classnames('import-action', reference==='full-search'?'import-action-fullsearch':'')}>
{
reference !== 'full-search' && <Tabs activeKey={activeValue} centered onChange={(val) => {
setActiveValue(val);
var targetElement = container?.querySelector(`.${val}`); // 找到目标元素
if (targetElement) {
importActionSubject.next({ type: 'expand', key: val, action })
setTimeout(() => {
animating.current = true;
targetElement.scrollIntoView();
}, 100)
}
}}>
<Tabs.TabPane tab='基本信息' key="model-import-action-basic" />
<Tabs.TabPane tab='技术信息' key="model-import-action-technical" />
<Tabs.TabPane tab='数据表结构' key="model-import-action-table" />
<Tabs.TabPane tab='数据表索引' key="model-import-action-index" />
<Tabs.TabPane tab='管理信息' key="model-import-action-manage" />
<Tabs.TabPane tab='关联对象' key="model-import-action-relation" />
{
modelerData?.id && <Tabs.TabPane tab='模型评论' key="model-import-action-comment" />
}
</Tabs>
}
<div ref={setContainer} style={{ height: action==='edit-inherite-modal'?'60vh':(reference!=='full-search'?'calc(100vh - 44px - 64px - 66px)': '100%'), overflow: 'auto' }}>
<ImportActionHeader
form={form}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'}
......@@ -659,6 +662,7 @@ const ImportAction = React.forwardRef((props, ref) => {
terms={terms}
supportedPartitionTypes={supportedPartitionTypes}
action={action}
reference={reference}
/>
<ImportActionTable
modelerData={modelerData||{}}
......@@ -672,31 +676,35 @@ const ImportAction = React.forwardRef((props, ref) => {
originAction={getQueryParam(Action, props?.location?.search)}
terms={terms}
/>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
types={supportedIndextypes}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'}
terms={terms}
action={action}
/>
<ImportActionManage
form={form}
modelerData={modelerData||{}}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'}
action={action}
/>
<ImportActionRelation
modelerData={modelerData} action={action}
/>
{
modelerData?.id && <ImportActionComment
modelerData={modelerData}
action={action}
/>
reference !== 'full-search' && <React.Fragment>
<ImportActionIndex
modelerData={modelerData||{}}
constraint={constraint}
template={template}
types={supportedIndextypes}
validateReports={validateReports}
onChange={onIndexChange}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'}
terms={terms}
action={action}
/>
<ImportActionManage
form={form}
modelerData={modelerData||{}}
editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'}
action={action}
/>
<ImportActionRelation
modelerData={modelerData} action={action}
/>
{
modelerData?.id && <ImportActionComment
modelerData={modelerData}
action={action}
/>
}
</React.Fragment>
}
</div>
</div>
......
......@@ -8,4 +8,44 @@
width: 80%;
justify-content: space-between;
}
.model-import-action-basic,
.model-import-action-technical,
.model-import-action-table,
.model-import-action-index,
.model-import-action-manage,
.model-import-action-relation,
.model-import-action-comment {
background-color: #FFF;
padding: 20px;
}
.model-import-action-technical,
.model-import-action-table,
.model-import-action-index,
.model-import-action-manage,
.model-import-action-relation,
.model-import-action-comment {
margin-top: 7px;
}
}
.import-action-fullsearch {
.model-import-action-basic,
.model-import-action-technical,
.model-import-action-table,
.model-import-action-index,
.model-import-action-manage,
.model-import-action-relation,
.model-import-action-comment {
padding: 0 20px;
}
.model-import-action-technical,
.model-import-action-table,
.model-import-action-index,
.model-import-action-manage,
.model-import-action-relation,
.model-import-action-comment {
margin-top: 0px;
}
}
\ No newline at end of file
......@@ -50,7 +50,7 @@ const dataTypeRemark = '描述ETL框架中目标表的数据类型';
const bindingLoadRemark = '描述ETL框架绑定加载列表,如chain、daily、current等';
const ImportActionHeader = (props) => {
const { editable, form, modelerData, constraints, templates, onConstraintChange, onTemplateChange, validateReports, onChange, terms, supportedPartitionTypes, action } = props;
const { editable, form, modelerData, constraints, templates, onConstraintChange, onTemplateChange, validateReports, onChange, terms, supportedPartitionTypes, action, reference } = props;
const [ options, setOptions ] = useState([]);
......@@ -311,13 +311,28 @@ const ImportActionHeader = (props) => {
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label={<ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} />}
name="remark"
rules={[{ required: true, message: '请输入数据内容!' }]}
label="规范"
name="easyDataModelerModelingConstraint"
rules={[{ required: true, message: '请选择规范!' }]}
style={{ marginBottom }}
>
{
editable ? <TextArea rows={1} placeholder='描述数据表包含的业务数据,包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表,可以说明加载的源接口信息。' /> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.remark, terms)}</span>
editable ? <ConstraintSelect
constraints={constraints}
onChange={onConstraintChange}
onDetail={() => {
setRuleParams({ visible: true })
}}
/> : <div className='flex' style={{ alignItems: 'flex-start' }}>
<div className='word-wrap mr-2'>
{modelerData?.easyDataModelerModelingConstraint?.cnName}
</div>
<div style={{ flex: 1, minWidth: 30 }}>
<a onClick={() => {
setRuleParams({ visible: true })
}}>查看</a>
</div>
</div>
}
</Form.Item>
</Col>
......@@ -345,28 +360,13 @@ const ImportActionHeader = (props) => {
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="规范"
name="easyDataModelerModelingConstraint"
rules={[{ required: true, message: '请选择规范!' }]}
label={<ItemTitle name='remark' cnName='数据内容' validateReports={validateReports} />}
name="remark"
rules={[{ required: true, message: '请输入数据内容!' }]}
style={{ marginBottom }}
>
{
editable ? <ConstraintSelect
constraints={constraints}
onChange={onConstraintChange}
onDetail={() => {
setRuleParams({ visible: true })
}}
/> : <div className='flex' style={{ alignItems: 'flex-start' }}>
<div className='word-wrap mr-2'>
{modelerData?.easyDataModelerModelingConstraint?.cnName}
</div>
<div style={{ flex: 1, minWidth: 30 }}>
<a onClick={() => {
setRuleParams({ visible: true })
}}>查看</a>
</div>
</div>
editable ? <TextArea rows={1} placeholder='描述数据表包含的业务数据,包括数据内容业务描述、表的适用范围、数据粒度、数据统计口径、数据来源等。对于原始数据表,可以说明加载的源接口信息。' /> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.remark, terms)}</span>
}
</Form.Item>
</Col>
......@@ -405,120 +405,122 @@ const ImportActionHeader = (props) => {
</Row>
</Form>
</div>
<div className='model-import-action-technical'>
<Space>
<h3 style={{ width: 120, marginBottom: 0 }}>技术信息</h3>
{
reference !== 'full-search' && <div className='model-import-action-technical'>
<Space>
<h3 style={{ width: 120, marginBottom: 0 }}>技术信息</h3>
{
isCollapse ? <Button type='primary' size='small' onClick={() => {
setCollapse(!isCollapse)
}}>展开<DownOutlined /></Button> : <Button type='primary' size='small' onClick={() => {
setCollapse(!isCollapse)
}}>收起<UpOutlined /></Button>
}
</Space>
{
isCollapse ? <Button type='primary' size='small' onClick={() => {
setCollapse(!isCollapse)
}}>展开<DownOutlined /></Button> : <Button type='primary' size='small' onClick={() => {
setCollapse(!isCollapse)
}}>收起<UpOutlined /></Button>
}
</Space>
{
!isCollapse && <Form
className='mt-3'
form={form}
{...formItemLayout}
onValuesChange={onValuesChange}
>
<Row gutter={10}>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="分布键"
name="easyDataModelerDistributionKey"
style={{ marginBottom }}
>
{
editable ? <AttributesSelect modelerData={modelerData} /> : <span className='word-wrap'>{highlightSearchContentByTerms(distributionDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="分区键"
name="partition"
style={{ marginBottom }}
>
{
editable ? <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> : <span className='word-wrap'>{highlightSearchContentByTerms(partitionsDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="类主键"
name="easyDataModelerSemiPrimaryKey"
style={{ marginBottom }}
>
{
editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span className='word-wrap'>{highlightSearchContentByTerms(semiPrimaryDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="数据情况"
name="dataCircumstances"
style={{ marginBottom }}
>
{
editable ? <Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' /> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.dataCircumstances, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="更新时间"
name="dataUpdatingTiming"
style={{ marginBottom }}
>
{
editable ? <UpdateSelect placeholder='描述数据表的更新时间点'/> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.dataUpdatingTiming, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="数据类型"
name="dataType"
tooltip={dataTypeRemark}
style={{ marginBottom }}
>
{
editable ? <Select allowClear placeholder='请选择数据类型'>
!isCollapse && <Form
className='mt-3'
form={form}
{...formItemLayout}
onValuesChange={onValuesChange}
>
<Row gutter={10}>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="分布键"
name="easyDataModelerDistributionKey"
style={{ marginBottom }}
>
{
dataTypeList?.map((item, index) => <Option key={index} value={item}>
{item}
</Option>)
editable ? <AttributesSelect modelerData={modelerData} /> : <span className='word-wrap'>{highlightSearchContentByTerms(distributionDescription, terms)}</span>
}
</Select> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.dataType, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="绑定加载范围"
name="bindingLoadRange"
tooltip={bindingLoadRemark}
style={{ marginBottom }}
>
{
editable ? <Select allowClear placeholder='请选择绑定加载范围'>
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="分区键"
name="partition"
style={{ marginBottom }}
>
{
bindingLoadRangeList?.map((item, index) => <Option key={index} value={item}>
{item}
</Option>)
editable ? <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} /> : <span className='word-wrap'>{highlightSearchContentByTerms(partitionsDescription, terms)}</span>
}
</Select> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.bindingLoadRange, terms)}</span>
}
</Form.Item>
</Col>
</Row>
</Form>
}
</div>
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="类主键"
name="easyDataModelerSemiPrimaryKey"
style={{ marginBottom }}
>
{
editable ? <AttributesSelect modelerData={modelerData} mode='tags' /> : <span className='word-wrap'>{highlightSearchContentByTerms(semiPrimaryDescription, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="数据情况"
name="dataCircumstances"
style={{ marginBottom }}
>
{
editable ? <Input placeholder='描述数据表中数据的更新频率、每日增量情况、数据量级和历史数据' /> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.dataCircumstances, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="更新时间"
name="dataUpdatingTiming"
style={{ marginBottom }}
>
{
editable ? <UpdateSelect placeholder='描述数据表的更新时间点'/> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.dataUpdatingTiming, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="数据类型"
name="dataType"
tooltip={dataTypeRemark}
style={{ marginBottom }}
>
{
editable ? <Select allowClear placeholder='请选择数据类型'>
{
dataTypeList?.map((item, index) => <Option key={index} value={item}>
{item}
</Option>)
}
</Select> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.dataType, terms)}</span>
}
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12} xl={8}>
<Form.Item
label="绑定加载范围"
name="bindingLoadRange"
tooltip={bindingLoadRemark}
style={{ marginBottom }}
>
{
editable ? <Select allowClear placeholder='请选择绑定加载范围'>
{
bindingLoadRangeList?.map((item, index) => <Option key={index} value={item}>
{item}
</Option>)
}
</Select> : <span className='word-wrap'>{highlightSearchContentByTerms(modelerData?.bindingLoadRange, terms)}</span>
}
</Form.Item>
</Col>
</Row>
</Form>
}
</div>
}
<Rule
{...ruleParams}
onCancel={() => {
......
......@@ -8,26 +8,6 @@
}
}
.model-import-action-basic,
.model-import-action-technical,
.model-import-action-table,
.model-import-action-index,
.model-import-action-manage,
.model-import-action-relation,
.model-import-action-comment {
background-color: #FFF;
padding: 20px;
}
.model-import-action-technical,
.model-import-action-table,
.model-import-action-index,
.model-import-action-manage,
.model-import-action-relation,
.model-import-action-comment {
margin-top: 7px;
}
.edit-template .model-import-action-table {
padding: 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