mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 12:26:22 +00:00
refactor(graph-collection-manager): update antv-x6 to 2.x (#2466)
* refactor: update antv-x6 to 2.x * refactor: code improve * refactor: code improve * refactor: code improve * refactor: code improve * refactor: code improve * refactor: code improve
This commit is contained in:
parent
f70d17c5cd
commit
ccf8b651ff
@ -55,6 +55,9 @@ const getSchema = (schema: IField, record: any, compile, getContainer): ISchema
|
|||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
|
'x-component-props': {
|
||||||
|
getContainer: '{{ getContainer }}',
|
||||||
|
},
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues(options) {
|
useValues(options) {
|
||||||
|
@ -29,6 +29,9 @@ const getSchema = (schema: IField, record: any, compile, getContainer): ISchema
|
|||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
|
'x-component-props': {
|
||||||
|
getContainer: '{{ getContainer }}',
|
||||||
|
},
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues(options) {
|
useValues(options) {
|
||||||
|
@ -10,7 +10,11 @@ export const CollectionCategory = observer(
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{value.map((item) => {
|
{value.map((item) => {
|
||||||
return <Tag color={item.color}>{compile(item?.name)}</Tag>;
|
return (
|
||||||
|
<Tag key={item.name} color={item.color}>
|
||||||
|
{compile(item?.name)}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -9,8 +9,14 @@
|
|||||||
"main": "./dist/server/index.js",
|
"main": "./dist/server/index.js",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@ant-design/icons": "5.x",
|
"@ant-design/icons": "5.x",
|
||||||
"@antv/x6": "^1.9.0",
|
"@antv/x6": "^2.0.0",
|
||||||
"@antv/x6-react-shape": "^1.6.2",
|
"@antv/x6-plugin-minimap": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-scroller": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-selection": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-snapline": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-dnd": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-export": "^2.0.0",
|
||||||
|
"@antv/x6-react-shape": "^2.0.0",
|
||||||
"@formily/react": "2.x",
|
"@formily/react": "2.x",
|
||||||
"@formily/reactive": "2.x",
|
"@formily/reactive": "2.x",
|
||||||
"@formily/shared": "2.x",
|
"@formily/shared": "2.x",
|
||||||
|
@ -5,9 +5,6 @@ import { useGCMTranslation } from './utils';
|
|||||||
|
|
||||||
export const GraphCollectionProvider = React.memo((props) => {
|
export const GraphCollectionProvider = React.memo((props) => {
|
||||||
const ctx = useContext(PluginManagerContext);
|
const ctx = useContext(PluginManagerContext);
|
||||||
// i18n.addResources('en-US', 'graphPositions', enUS);
|
|
||||||
// i18n.addResources('ja-JP', 'graphPositions', jaJP);
|
|
||||||
// i18n.addResources('zh-CN', 'graphPositions', zhCN);
|
|
||||||
const { t } = useGCMTranslation();
|
const { t } = useGCMTranslation();
|
||||||
const items = useContext(SettingsCenterContext);
|
const items = useContext(SettingsCenterContext);
|
||||||
|
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,7 @@ import {
|
|||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
import { error } from '@nocobase/utils/client';
|
import { error } from '@nocobase/utils/client';
|
||||||
import { Select, message } from 'antd';
|
import { Select, message } from 'antd';
|
||||||
import { lodash } from '@nocobase/utils/client'
|
import { lodash } from '@nocobase/utils/client';
|
||||||
import React, { useContext, useEffect } from 'react';
|
import React, { useContext, useEffect } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { GraphCollectionContext } from './components/CollectionNodeProvder';
|
import { GraphCollectionContext } from './components/CollectionNodeProvder';
|
||||||
|
@ -1,32 +1,21 @@
|
|||||||
import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
|
import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
|
||||||
import '@antv/x6-react-shape';
|
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
|
import { css } from '@emotion/css';
|
||||||
import {
|
import {
|
||||||
Action,
|
|
||||||
Checkbox,
|
|
||||||
CollectionCategroriesContext,
|
CollectionCategroriesContext,
|
||||||
CollectionField,
|
|
||||||
CollectionProvider,
|
CollectionProvider,
|
||||||
Form,
|
|
||||||
FormItem,
|
|
||||||
Formula,
|
|
||||||
Grid,
|
|
||||||
Input,
|
|
||||||
InputNumber,
|
|
||||||
Radio,
|
|
||||||
ResourceActionProvider,
|
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
SchemaComponentProvider,
|
SchemaComponentProvider,
|
||||||
Select,
|
Select,
|
||||||
collection,
|
collection,
|
||||||
css,
|
|
||||||
useCollectionManager,
|
useCollectionManager,
|
||||||
useCompile,
|
useCompile,
|
||||||
useCurrentAppInfo,
|
useCurrentAppInfo,
|
||||||
useRecord,
|
useRecord,
|
||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
import lodash from 'lodash';
|
import lodash from 'lodash';
|
||||||
import { Badge, Dropdown, Popover, Tag } from 'antd';
|
import { SchemaOptionsContext } from '@formily/react';
|
||||||
|
import { Badge, Popover, Tag } from 'antd';
|
||||||
import React, { useContext, useRef, useState } from 'react';
|
import React, { useContext, useRef, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
useAsyncDataSource,
|
useAsyncDataSource,
|
||||||
@ -46,12 +35,306 @@ import { FieldSummary } from './FieldSummary';
|
|||||||
import { OverrideFieldAction } from './OverrideFieldAction';
|
import { OverrideFieldAction } from './OverrideFieldAction';
|
||||||
import { ViewFieldAction } from './ViewFieldAction';
|
import { ViewFieldAction } from './ViewFieldAction';
|
||||||
|
|
||||||
|
const OperationButton: any = React.memo((props: any) => {
|
||||||
|
const { property, loadCollections, collectionData, setTargetNode, node, handelOpenPorts, title, name } = props;
|
||||||
|
const isInheritField = !(property.collectionName !== name);
|
||||||
|
const options = useContext(SchemaOptionsContext);
|
||||||
|
const {
|
||||||
|
data: { database },
|
||||||
|
} = useCurrentAppInfo();
|
||||||
|
const useNewId = (prefix) => {
|
||||||
|
return `${prefix || ''}${uid()}`;
|
||||||
|
};
|
||||||
|
// 获取当前字段列表
|
||||||
|
const useCurrentFields = () => {
|
||||||
|
const record = useRecord();
|
||||||
|
const { getCollectionFields } = useCollectionManager();
|
||||||
|
const fields = getCollectionFields(record.collectionName || record.name) as any[];
|
||||||
|
return fields;
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="field-operator">
|
||||||
|
<SchemaComponentProvider
|
||||||
|
components={{
|
||||||
|
Select: (props) => <Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />,
|
||||||
|
FieldSummary,
|
||||||
|
AddFieldAction,
|
||||||
|
OverrideFieldAction,
|
||||||
|
ViewFieldAction,
|
||||||
|
EditFieldAction,
|
||||||
|
...options.components,
|
||||||
|
}}
|
||||||
|
scope={{
|
||||||
|
useAsyncDataSource,
|
||||||
|
loadCollections,
|
||||||
|
useCancelAction,
|
||||||
|
useNewId,
|
||||||
|
useCurrentFields,
|
||||||
|
useValuesFromRecord,
|
||||||
|
useUpdateCollectionActionAndRefreshCM,
|
||||||
|
isInheritField,
|
||||||
|
...options.scope,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CollectionNodeProvder
|
||||||
|
record={collectionData.current}
|
||||||
|
setTargetNode={setTargetNode}
|
||||||
|
node={node}
|
||||||
|
handelOpenPorts={() => handelOpenPorts(true)}
|
||||||
|
>
|
||||||
|
<SchemaComponent
|
||||||
|
scope={useCancelAction}
|
||||||
|
schema={{
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
create: {
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'create',
|
||||||
|
'x-component': 'AddFieldAction',
|
||||||
|
'x-visible': '{{isInheritField}}',
|
||||||
|
'x-component-props': {
|
||||||
|
item: {
|
||||||
|
...property,
|
||||||
|
title,
|
||||||
|
},
|
||||||
|
database,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
update: {
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'update',
|
||||||
|
'x-component': 'EditFieldAction',
|
||||||
|
'x-visible': '{{isInheritField}}',
|
||||||
|
'x-component-props': {
|
||||||
|
item: {
|
||||||
|
...property,
|
||||||
|
title,
|
||||||
|
__parent: collectionData.current,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
delete: {
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'destroy',
|
||||||
|
'x-component': 'Action',
|
||||||
|
'x-visible': '{{isInheritField}}',
|
||||||
|
'x-component-props': {
|
||||||
|
component: DeleteOutlined,
|
||||||
|
icon: 'DeleteOutlined',
|
||||||
|
className: 'btn-del',
|
||||||
|
confirm: {
|
||||||
|
title: "{{t('Delete record')}}",
|
||||||
|
getContainer: getPopupContainer,
|
||||||
|
collectionConten: "{{t('Are you sure you want to delete it?')}}",
|
||||||
|
},
|
||||||
|
useAction: () =>
|
||||||
|
useDestroyFieldActionAndRefreshCM({
|
||||||
|
collectionName: property.collectionName,
|
||||||
|
name: property.name,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
override: {
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'create',
|
||||||
|
'x-visible': '{{!isInheritField}}',
|
||||||
|
'x-component': 'OverrideFieldAction',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: 'ReconciliationOutlined',
|
||||||
|
item: {
|
||||||
|
...property,
|
||||||
|
title,
|
||||||
|
__parent: collectionData.current,
|
||||||
|
targetCollection: name,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
view: {
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'view',
|
||||||
|
'x-visible': '{{!isInheritField}}',
|
||||||
|
'x-component': 'ViewFieldAction',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: 'ReconciliationOutlined',
|
||||||
|
item: {
|
||||||
|
...property,
|
||||||
|
title,
|
||||||
|
__parent: collectionData.current,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</CollectionNodeProvder>
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const PopoverContent = React.memo((props: any) => {
|
||||||
|
const { property, node, ...other } = props;
|
||||||
|
const {
|
||||||
|
store: {
|
||||||
|
data: { title, name, sourcePort, associated, targetPort },
|
||||||
|
},
|
||||||
|
} = node;
|
||||||
|
const compile = useCompile();
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { getInterface } = useCollectionManager();
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
const CollectionConten = React.useCallback((data) => {
|
||||||
|
const { type, name, primaryKey, allowNull, autoIncrement } = data;
|
||||||
|
return (
|
||||||
|
<div className={styles.collectionPopoverClass}>
|
||||||
|
<div className="field-content">
|
||||||
|
<div>
|
||||||
|
<span>name</span>: <span className="field-type">{name}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>type</span>: <span className="field-type">{type}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
{primaryKey && <Tag color="green">PRIMARY</Tag>}
|
||||||
|
{allowNull && <Tag color="geekblue">ALLOWNULL</Tag>}
|
||||||
|
{autoIncrement && <Tag color="purple">AUTOINCREMENT</Tag>}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
const operatioBtnProps = {
|
||||||
|
title,
|
||||||
|
name,
|
||||||
|
node,
|
||||||
|
...other,
|
||||||
|
};
|
||||||
|
const typeColor = (v) => {
|
||||||
|
if (v.isForeignKey || v.primaryKey || v.interface === 'id') {
|
||||||
|
return 'red';
|
||||||
|
} else if (['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(v.interface)) {
|
||||||
|
return 'orange';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Popover
|
||||||
|
content={CollectionConten(property)}
|
||||||
|
getPopupContainer={getPopupContainer}
|
||||||
|
mouseLeaveDelay={0}
|
||||||
|
zIndex={100}
|
||||||
|
title={
|
||||||
|
<div>
|
||||||
|
{compile(property.uiSchema?.title)}
|
||||||
|
<span style={{ color: '#ffa940', float: 'right' }}>{compile(getInterface(property.interface)?.title)}</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
key={property.id}
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="body-item"
|
||||||
|
key={property.id}
|
||||||
|
id={property.id}
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setIsHovered(true);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
>
|
||||||
|
<div className="name">
|
||||||
|
<Badge color={typeColor(property)} />
|
||||||
|
{compile(property.uiSchema?.title)}
|
||||||
|
</div>
|
||||||
|
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
|
||||||
|
{isHovered && <OperationButton property={property} {...operatioBtnProps} />}
|
||||||
|
</div>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
|
||||||
|
const {
|
||||||
|
store: {
|
||||||
|
data: { item, ports, data },
|
||||||
|
},
|
||||||
|
} = node;
|
||||||
|
const [collapse, setCollapse] = useState(false);
|
||||||
|
const { t } = useGCMTranslation();
|
||||||
|
const portsData = lodash.groupBy(ports.items, (v) => {
|
||||||
|
if (
|
||||||
|
v.isForeignKey ||
|
||||||
|
v.primaryKey ||
|
||||||
|
['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
|
||||||
|
) {
|
||||||
|
return 'initPorts';
|
||||||
|
} else {
|
||||||
|
return 'morePorts';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const handelOpenPorts = (isCollapse?) => {
|
||||||
|
targetGraph.getCellById(item.name)?.toFront();
|
||||||
|
setCollapse(isCollapse);
|
||||||
|
const collapseNodes = targetGraph.collapseNodes || [];
|
||||||
|
collapseNodes.push({
|
||||||
|
[item.name]: isCollapse,
|
||||||
|
});
|
||||||
|
targetGraph.collapseNodes = collapseNodes;
|
||||||
|
targetGraph.getCellById(item.name).setData({ collapse: true });
|
||||||
|
};
|
||||||
|
const isCollapse = collapse && data?.collapse;
|
||||||
|
const popoverProps = {
|
||||||
|
collectionData,
|
||||||
|
setTargetNode,
|
||||||
|
loadCollections,
|
||||||
|
handelOpenPorts,
|
||||||
|
node,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="body">
|
||||||
|
{portsData['initPorts']?.map((property) => {
|
||||||
|
return property.uiSchema && <PopoverContent {...popoverProps} property={property} key={property.id} />;
|
||||||
|
})}
|
||||||
|
<div className="morePorts">
|
||||||
|
{isCollapse &&
|
||||||
|
portsData['morePorts']?.map((property) => {
|
||||||
|
return property.uiSchema && <PopoverContent {...popoverProps} property={property} key={property.id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
className={css`
|
||||||
|
display: block;
|
||||||
|
color: #958f8f;
|
||||||
|
padding: 10px 5px;
|
||||||
|
&:hover {
|
||||||
|
color: rgb(99 90 88);
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
onClick={() => handelOpenPorts(!isCollapse)}
|
||||||
|
>
|
||||||
|
{isCollapse
|
||||||
|
? [
|
||||||
|
<UpOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
|
||||||
|
<span key="associate">{t('Association Fields')}</span>,
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
<DownOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
|
||||||
|
<span key="all">{t('All Fields')}</span>,
|
||||||
|
]}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
const Entity: React.FC<{
|
const Entity: React.FC<{
|
||||||
node?: Node | any;
|
node?: Node | any;
|
||||||
setTargetNode: Function | any;
|
setTargetNode: Function | any;
|
||||||
targetGraph: any;
|
targetGraph: any;
|
||||||
}> = (props) => {
|
}> = (props) => {
|
||||||
const { styles } = useStyles();
|
const { styles } = useStyles();
|
||||||
|
const options = useContext(SchemaOptionsContext);
|
||||||
const { node, setTargetNode, targetGraph } = props;
|
const { node, setTargetNode, targetGraph } = props;
|
||||||
const {
|
const {
|
||||||
store: {
|
store: {
|
||||||
@ -118,20 +401,12 @@ const Entity: React.FC<{
|
|||||||
loadCollections,
|
loadCollections,
|
||||||
loadCategories,
|
loadCategories,
|
||||||
useAsyncDataSource,
|
useAsyncDataSource,
|
||||||
Action,
|
|
||||||
DeleteOutlined,
|
|
||||||
enableInherits: database?.dialect === 'postgres',
|
enableInherits: database?.dialect === 'postgres',
|
||||||
}}
|
}}
|
||||||
components={{
|
components={{
|
||||||
Action,
|
|
||||||
EditOutlined,
|
EditOutlined,
|
||||||
FormItem,
|
|
||||||
CollectionField,
|
|
||||||
Input,
|
|
||||||
Form,
|
|
||||||
Select,
|
|
||||||
EditCollectionAction,
|
EditCollectionAction,
|
||||||
Checkbox,
|
...options.components,
|
||||||
}}
|
}}
|
||||||
schema={{
|
schema={{
|
||||||
type: 'object',
|
type: 'object',
|
||||||
@ -171,328 +446,9 @@ const Entity: React.FC<{
|
|||||||
</SchemaComponentProvider>
|
</SchemaComponentProvider>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<PortsCom {...portsProps} />
|
<PortsCom {...portsProps} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
|
|
||||||
const {
|
|
||||||
store: {
|
|
||||||
data: { title, name, item, ports, data, sourcePort, associated, targetPort },
|
|
||||||
},
|
|
||||||
} = node;
|
|
||||||
const [collapse, setCollapse] = useState(false);
|
|
||||||
const { t } = useGCMTranslation();
|
|
||||||
const compile = useCompile();
|
|
||||||
const { styles } = useStyles();
|
|
||||||
const {
|
|
||||||
data: { database },
|
|
||||||
} = useCurrentAppInfo();
|
|
||||||
const portsData = lodash.groupBy(ports.items, (v) => {
|
|
||||||
if (
|
|
||||||
v.isForeignKey ||
|
|
||||||
v.primaryKey ||
|
|
||||||
['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
|
|
||||||
) {
|
|
||||||
return 'initPorts';
|
|
||||||
} else {
|
|
||||||
return 'morePorts';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const useNewId = (prefix) => {
|
|
||||||
return `${prefix || ''}${uid()}`;
|
|
||||||
};
|
|
||||||
const CollectionConten = (data) => {
|
|
||||||
const { type, name, primaryKey, allowNull, autoIncrement } = data;
|
|
||||||
return (
|
|
||||||
<div className={styles.collectionPopoverClass}>
|
|
||||||
<div className="field-content">
|
|
||||||
<div>
|
|
||||||
<span>name</span>: <span className="field-type">{name}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>type</span>: <span className="field-type">{type}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
{primaryKey && <Tag color="green">PRIMARY</Tag>}
|
|
||||||
{allowNull && <Tag color="geekblue">ALLOWNULL</Tag>}
|
|
||||||
{autoIncrement && <Tag color="purple">AUTOINCREMENT</Tag>}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const typeColor = (v) => {
|
|
||||||
if (v.isForeignKey || v.primaryKey || v.interface === 'id') {
|
|
||||||
return 'red';
|
|
||||||
} else if (['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(v.interface)) {
|
|
||||||
return 'orange';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const OperationButton = ({ property }) => {
|
|
||||||
const isInheritField = !(property.collectionName !== name);
|
|
||||||
return (
|
|
||||||
<div className="field-operator">
|
|
||||||
<SchemaComponentProvider
|
|
||||||
components={{
|
|
||||||
FormItem,
|
|
||||||
CollectionField,
|
|
||||||
Input,
|
|
||||||
Form,
|
|
||||||
ResourceActionProvider,
|
|
||||||
Select: (props) => (
|
|
||||||
<Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
|
|
||||||
),
|
|
||||||
Checkbox,
|
|
||||||
Radio,
|
|
||||||
InputNumber,
|
|
||||||
Grid,
|
|
||||||
FieldSummary,
|
|
||||||
Action,
|
|
||||||
EditOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
AddFieldAction,
|
|
||||||
OverrideFieldAction,
|
|
||||||
ViewFieldAction,
|
|
||||||
Dropdown,
|
|
||||||
Formula,
|
|
||||||
}}
|
|
||||||
scope={{
|
|
||||||
useAsyncDataSource,
|
|
||||||
loadCollections,
|
|
||||||
useCancelAction,
|
|
||||||
useNewId,
|
|
||||||
useCurrentFields,
|
|
||||||
useValuesFromRecord,
|
|
||||||
useUpdateCollectionActionAndRefreshCM,
|
|
||||||
isInheritField,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CollectionNodeProvder
|
|
||||||
record={collectionData.current}
|
|
||||||
setTargetNode={setTargetNode}
|
|
||||||
node={node}
|
|
||||||
handelOpenPorts={() => handelOpenPorts(true)}
|
|
||||||
>
|
|
||||||
<SchemaComponent
|
|
||||||
scope={useCancelAction}
|
|
||||||
schema={{
|
|
||||||
type: 'object',
|
|
||||||
properties: {
|
|
||||||
create: {
|
|
||||||
type: 'void',
|
|
||||||
'x-action': 'create',
|
|
||||||
'x-component': 'AddFieldAction',
|
|
||||||
'x-visible': '{{isInheritField}}',
|
|
||||||
'x-component-props': {
|
|
||||||
item: {
|
|
||||||
...property,
|
|
||||||
title,
|
|
||||||
},
|
|
||||||
database,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
update: {
|
|
||||||
type: 'void',
|
|
||||||
'x-action': 'update',
|
|
||||||
'x-component': EditFieldAction,
|
|
||||||
'x-visible': '{{isInheritField}}',
|
|
||||||
'x-component-props': {
|
|
||||||
item: {
|
|
||||||
...property,
|
|
||||||
title,
|
|
||||||
__parent: collectionData.current,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
delete: {
|
|
||||||
type: 'void',
|
|
||||||
'x-action': 'destroy',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-visible': '{{isInheritField}}',
|
|
||||||
'x-component-props': {
|
|
||||||
component: DeleteOutlined,
|
|
||||||
icon: 'DeleteOutlined',
|
|
||||||
className: 'btn-del',
|
|
||||||
confirm: {
|
|
||||||
title: "{{t('Delete record')}}",
|
|
||||||
getContainer: getPopupContainer,
|
|
||||||
collectionConten: "{{t('Are you sure you want to delete it?')}}",
|
|
||||||
},
|
|
||||||
useAction: () =>
|
|
||||||
useDestroyFieldActionAndRefreshCM({
|
|
||||||
collectionName: property.collectionName,
|
|
||||||
name: property.name,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
override: {
|
|
||||||
type: 'void',
|
|
||||||
'x-action': 'create',
|
|
||||||
'x-visible': '{{!isInheritField}}',
|
|
||||||
'x-component': 'OverrideFieldAction',
|
|
||||||
'x-component-props': {
|
|
||||||
icon: 'ReconciliationOutlined',
|
|
||||||
item: {
|
|
||||||
...property,
|
|
||||||
title,
|
|
||||||
__parent: collectionData.current,
|
|
||||||
targetCollection: name,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
view: {
|
|
||||||
type: 'void',
|
|
||||||
'x-action': 'view',
|
|
||||||
'x-visible': '{{!isInheritField}}',
|
|
||||||
'x-component': 'ViewFieldAction',
|
|
||||||
'x-component-props': {
|
|
||||||
icon: 'ReconciliationOutlined',
|
|
||||||
item: {
|
|
||||||
...property,
|
|
||||||
title,
|
|
||||||
__parent: collectionData.current,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CollectionNodeProvder>
|
|
||||||
</SchemaComponentProvider>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const { getInterface } = useCollectionManager();
|
|
||||||
// 获取当前字段列表
|
|
||||||
const useCurrentFields = () => {
|
|
||||||
const record = useRecord();
|
|
||||||
const { getCollectionFields } = useCollectionManager();
|
|
||||||
const fields = getCollectionFields(record.collectionName || record.name) as any[];
|
|
||||||
return fields;
|
|
||||||
};
|
|
||||||
const handelOpenPorts = (isCollapse?) => {
|
|
||||||
targetGraph.getCellById(item.name)?.toFront();
|
|
||||||
setCollapse(isCollapse);
|
|
||||||
const collapseNodes = targetGraph.collapseNodes || [];
|
|
||||||
collapseNodes.push({
|
|
||||||
[item.name]: isCollapse,
|
|
||||||
});
|
|
||||||
targetGraph.collapseNodes = collapseNodes;
|
|
||||||
targetGraph.getCellById(item.name).setData({ collapse: true });
|
|
||||||
};
|
|
||||||
const isCollapse = collapse && data?.collapse;
|
|
||||||
return (
|
|
||||||
<div className="body">
|
|
||||||
{portsData['initPorts']?.map((property) => {
|
|
||||||
return (
|
|
||||||
property.uiSchema && (
|
|
||||||
<Popover
|
|
||||||
content={CollectionConten(property)}
|
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
mouseLeaveDelay={0}
|
|
||||||
zIndex={100}
|
|
||||||
title={
|
|
||||||
<div>
|
|
||||||
{compile(property.uiSchema?.title)}
|
|
||||||
<span style={{ color: '#ffa940', float: 'right' }}>
|
|
||||||
{compile(getInterface(property.interface)?.title)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
key={property.id}
|
|
||||||
placement="right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="body-item"
|
|
||||||
key={property.id}
|
|
||||||
id={property.id}
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="name">
|
|
||||||
<Badge color={typeColor(property)} />
|
|
||||||
{compile(property.uiSchema?.title)}
|
|
||||||
</div>
|
|
||||||
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
|
|
||||||
<OperationButton property={property} />
|
|
||||||
</div>
|
|
||||||
</Popover>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<div className="morePorts">
|
|
||||||
{isCollapse &&
|
|
||||||
portsData['morePorts']?.map((property) => {
|
|
||||||
return (
|
|
||||||
property.uiSchema && (
|
|
||||||
<Popover
|
|
||||||
content={CollectionConten(property)}
|
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
mouseLeaveDelay={0}
|
|
||||||
zIndex={100}
|
|
||||||
title={
|
|
||||||
<div>
|
|
||||||
{compile(property.uiSchema?.title)}
|
|
||||||
<span style={{ color: '#ffa940', float: 'right' }}>
|
|
||||||
{compile(getInterface(property.interface)?.title)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
key={property.id}
|
|
||||||
placement="right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="body-item"
|
|
||||||
key={property.id}
|
|
||||||
id={property.id}
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
targetPort || sourcePort === property.id || associated?.includes(property.name)
|
|
||||||
? '#e6f7ff'
|
|
||||||
: null,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="name">
|
|
||||||
<Badge color="green" />
|
|
||||||
{compile(property.uiSchema?.title)}
|
|
||||||
</div>
|
|
||||||
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
|
|
||||||
<OperationButton property={property} />
|
|
||||||
</div>
|
|
||||||
</Popover>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
className={css`
|
|
||||||
display: block;
|
|
||||||
color: #958f8f;
|
|
||||||
padding: 10px 5px;
|
|
||||||
&:hover {
|
|
||||||
color: rgb(99 90 88);
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
onClick={() => handelOpenPorts(!isCollapse)}
|
|
||||||
>
|
|
||||||
{isCollapse
|
|
||||||
? [
|
|
||||||
<UpOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
|
|
||||||
<span key="associate">{t('Association Fields')}</span>,
|
|
||||||
]
|
|
||||||
: [
|
|
||||||
<DownOutlined style={{ margin: '0px 8px 0px 5px' }} key="icon" />,
|
|
||||||
<span key="all">{t('All Fields')}</span>,
|
|
||||||
]}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Entity;
|
export default Entity;
|
||||||
|
@ -85,12 +85,12 @@ export const formatData = (data) => {
|
|||||||
name: item.name,
|
name: item.name,
|
||||||
title: item.title,
|
title: item.title,
|
||||||
width: 250,
|
width: 250,
|
||||||
// height: 40 * portsData.initPorts?.length||40,
|
// height: 40 * portsData.initPorts?.length || 40,
|
||||||
ports: [...(portsData.initPorts || []), ...(portsData.morePorts || [])],
|
ports: [...(portsData.initPorts || []), ...(portsData.morePorts || [])],
|
||||||
item: item,
|
item: item,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
const edges = formatEdgeData(edgeData, targetTablekeys, tableData);
|
const edges = formatRelationEdgeData(edgeData, targetTablekeys, tableData);
|
||||||
const inheritEdges = formatInheritEdgeData(data);
|
const inheritEdges = formatInheritEdgeData(data);
|
||||||
return { nodesData: tableData, edgesData: edges, inheritEdges };
|
return { nodesData: tableData, edgesData: edges, inheritEdges };
|
||||||
};
|
};
|
||||||
@ -119,7 +119,6 @@ export const formatInheritEdgeData = (collections) => {
|
|||||||
textVerticalAnchor: 'middle',
|
textVerticalAnchor: 'middle',
|
||||||
stroke: '#ddd',
|
stroke: '#ddd',
|
||||||
sourceMarker: null,
|
sourceMarker: null,
|
||||||
// targetMarker: null,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
router: {
|
router: {
|
||||||
@ -185,7 +184,10 @@ export const formatInheritEdgeData = (collections) => {
|
|||||||
cell: k,
|
cell: k,
|
||||||
connectionPoint: 'rect',
|
connectionPoint: 'rect',
|
||||||
},
|
},
|
||||||
connector: 'rounded',
|
connector: {
|
||||||
|
name: 'normal',
|
||||||
|
zIndex: 1000,
|
||||||
|
},
|
||||||
connectionType: 'inherited',
|
connectionType: 'inherited',
|
||||||
...commonAttrs,
|
...commonAttrs,
|
||||||
});
|
});
|
||||||
@ -195,7 +197,7 @@ export const formatInheritEdgeData = (collections) => {
|
|||||||
return inheritEdges;
|
return inheritEdges;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatEdgeData = (data, targetTables, tableData) => {
|
const formatRelationEdgeData = (data, targetTables, tableData) => {
|
||||||
const edges = [];
|
const edges = [];
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
if (targetTables.includes(data[i].target)) {
|
if (targetTables.includes(data[i].target)) {
|
||||||
@ -314,6 +316,10 @@ const formatEdgeData = (data, targetTables, tableData) => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
connector: {
|
||||||
|
name: 'normal',
|
||||||
|
zIndex: 1000,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
const isuniq = (id) => {
|
const isuniq = (id) => {
|
||||||
const targetEdge = edges.find((v) => v.id === id);
|
const targetEdge = edges.find((v) => v.id === id);
|
||||||
|
Loading…
Reference in New Issue
Block a user