Merge branch 'main' of github.com:nocobase/nocobase

This commit is contained in:
katherinehhh 2023-08-22 09:37:22 +08:00
commit 9d33da0437
22 changed files with 906 additions and 893 deletions

View File

@ -10,7 +10,7 @@ process.env.DID_YOU_KNOW = 'none';
const pluginPrefix = (process.env.PLUGIN_PACKAGE_PREFIX || '').split(',').filter((item) => !item.includes('preset')); // 因为现在 preset 是直接引入的,所以不能忽略,如果以后 preset 也是动态插件的形式引入,那么这里可以去掉 const pluginPrefix = (process.env.PLUGIN_PACKAGE_PREFIX || '').split(',').filter((item) => !item.includes('preset')); // 因为现在 preset 是直接引入的,所以不能忽略,如果以后 preset 也是动态插件的形式引入,那么这里可以去掉
const pluginDirs = 'packages/plugins/,packages/samples/'.split(',').map((item) => path.join(process.cwd(), item)); const pluginDirs = 'packages/plugins/,packages/samples/'.split(',').map((item) => path.join(process.cwd(), item));
const outputPluginPath = path.join(__dirname, 'src', '.plugins', 'index.ts'); const outputPluginPath = path.join(__dirname, 'src', '.plugins');
const indexGenerator = new IndexGenerator(outputPluginPath, pluginDirs); const indexGenerator = new IndexGenerator(outputPluginPath, pluginDirs);
indexGenerator.generate(); indexGenerator.generate();

View File

@ -1,13 +1,13 @@
import { Application } from '@nocobase/client'; import { Application } from '@nocobase/client';
import { NocoBaseClientPresetPlugin } from '@nocobase/preset-nocobase/client'; import { NocoBaseClientPresetPlugin } from '@nocobase/preset-nocobase/client';
import devPlugins from '../.plugins/index'; import devDynamicImport from '../.plugins/index';
export const app = new Application({ export const app = new Application({
apiClient: { apiClient: {
baseURL: process.env.API_BASE_URL, baseURL: process.env.API_BASE_URL,
}, },
plugins: [NocoBaseClientPresetPlugin], plugins: [NocoBaseClientPresetPlugin],
devPlugins, devDynamicImport,
}); });
export default app.getRootComponent(); export default app.getRootComponent();

View File

@ -24,6 +24,7 @@ declare global {
} }
} }
export type DevDynamicImport = (packageName: string) => Promise<{ default: typeof Plugin }>;
export type ComponentAndProps<T = any> = [ComponentType, T]; export type ComponentAndProps<T = any> = [ComponentType, T];
export interface ApplicationOptions { export interface ApplicationOptions {
apiClient?: APIClientOptions; apiClient?: APIClientOptions;
@ -33,7 +34,7 @@ export interface ApplicationOptions {
components?: Record<string, ComponentType>; components?: Record<string, ComponentType>;
scopes?: Record<string, any>; scopes?: Record<string, any>;
router?: RouterOptions; router?: RouterOptions;
devPlugins?: Record<string, Promise<{ default: typeof Plugin }>>; devDynamicImport?: DevDynamicImport;
} }
export class Application { export class Application {
@ -44,12 +45,12 @@ export class Application {
public apiClient: APIClient; public apiClient: APIClient;
public components: Record<string, ComponentType> = { ...defaultAppComponents }; public components: Record<string, ComponentType> = { ...defaultAppComponents };
public pm: PluginManager; public pm: PluginManager;
public devPlugins: Record<string, Promise<{ default: typeof Plugin }>> = {}; public devDynamicImport: DevDynamicImport;
public requirejs: RequireJS; public requirejs: RequireJS;
constructor(protected options: ApplicationOptions = {}) { constructor(protected options: ApplicationOptions = {}) {
this.initRequireJs(); this.initRequireJs();
this.devPlugins = options.devPlugins || {}; this.devDynamicImport = options.devDynamicImport;
this.scopes = merge(this.scopes, options.scopes); this.scopes = merge(this.scopes, options.scopes);
this.components = merge(this.components, options.components); this.components = merge(this.components, options.components);
this.apiClient = new APIClient(options.apiClient); this.apiClient = new APIClient(options.apiClient);

View File

@ -17,7 +17,10 @@ export class PluginManager {
protected pluginsAliases: Record<string, Plugin> = {}; protected pluginsAliases: Record<string, Plugin> = {};
private initPlugins: Promise<void>; private initPlugins: Promise<void>;
constructor(protected _plugins: PluginType[], protected app: Application) { constructor(
protected _plugins: PluginType[],
protected app: Application,
) {
this.app = app; this.app = app;
this.initPlugins = this.init(_plugins); this.initPlugins = this.init(_plugins);
} }
@ -43,7 +46,7 @@ export class PluginManager {
requirejs: this.app.requirejs, requirejs: this.app.requirejs,
pluginData: pluginList, pluginData: pluginList,
baseURL: this.app.apiClient.axios?.defaults?.baseURL, baseURL: this.app.apiClient.axios?.defaults?.baseURL,
devPlugins: this.app.devPlugins, devDynamicImport: this.app.devDynamicImport,
}); });
for await (const plugin of plugins) { for await (const plugin of plugins) {
await this.add(plugin); await this.add(plugin);

View File

@ -1,6 +1,7 @@
import type { Plugin } from '../Plugin'; import type { Plugin } from '../Plugin';
import type { PluginData } from '../PluginManager'; import type { PluginData } from '../PluginManager';
import type { RequireJS } from './requirejs'; import type { RequireJS } from './requirejs';
import type { DevDynamicImport } from '../Application';
export function defineDevPlugins(plugins: Record<string, typeof Plugin>) { export function defineDevPlugins(plugins: Record<string, typeof Plugin>) {
Object.entries(plugins).forEach(([name, plugin]) => { Object.entries(plugins).forEach(([name, plugin]) => {
@ -44,11 +45,11 @@ interface GetPluginsOption {
requirejs: RequireJS; requirejs: RequireJS;
pluginData: PluginData[]; pluginData: PluginData[];
baseURL?: string; baseURL?: string;
devPlugins?: Record<string, Promise<{ default: typeof Plugin }>>; devDynamicImport?: DevDynamicImport;
} }
export async function getPlugins(options: GetPluginsOption): Promise<Array<typeof Plugin>> { export async function getPlugins(options: GetPluginsOption): Promise<Array<typeof Plugin>> {
const { requirejs, pluginData, baseURL, devPlugins = {} } = options; const { requirejs, pluginData, baseURL, devDynamicImport } = options;
if (pluginData.length === 0) return []; if (pluginData.length === 0) return [];
@ -57,16 +58,18 @@ export async function getPlugins(options: GetPluginsOption): Promise<Array<typeo
const resolveDevPlugins: Record<string, typeof Plugin> = {}; const resolveDevPlugins: Record<string, typeof Plugin> = {};
const pluginPackageNames = pluginData.map((item) => item.packageName); const pluginPackageNames = pluginData.map((item) => item.packageName);
for await (const packageName of pluginPackageNames) { if (devDynamicImport) {
if (devPlugins[packageName]) { for await (const packageName of pluginPackageNames) {
const plugin = await devPlugins[packageName]; const plugin = await devDynamicImport(packageName);
plugins.push(plugin.default); if (plugin) {
resolveDevPlugins[packageName] = plugin.default; plugins.push(plugin.default);
resolveDevPlugins[packageName] = plugin.default;
}
} }
defineDevPlugins(resolveDevPlugins);
} }
defineDevPlugins(resolveDevPlugins);
const remotePlugins = pluginData.filter((item) => !devPlugins[item.packageName]); const remotePlugins = pluginData.filter((item) => !resolveDevPlugins[item.packageName]);
if (remotePlugins.length === 0) { if (remotePlugins.length === 0) {
return plugins; return plugins;

View File

@ -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) {

View File

@ -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) {

View File

@ -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>
);
})} })}
</> </>
); );

View File

@ -132,9 +132,6 @@ export const view: ICollectionTemplate = {
schema: { schema: {
'x-component-props': '{{$form.values}}', //任意层次属性都支持表达式 'x-component-props': '{{$form.values}}', //任意层次属性都支持表达式
}, },
state: {
visible: `{{$deps[1]?.length > 0}}`,
},
}, },
}, },
}, },

View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { ArrayCollapse, ArrayItems, FormLayout, FormItem as Item } from '@formily/antd-v5'; import { ArrayCollapse, FormLayout, FormItem as Item } from '@formily/antd-v5';
import { Field } from '@formily/core'; import { Field } from '@formily/core';
import { ISchema, observer, useField, useFieldSchema } from '@formily/react'; import { ISchema, observer, useField, useFieldSchema } from '@formily/react';
import { Select } from 'antd'; import { Select } from 'antd';
@ -70,6 +70,7 @@ export const FormItem: any = observer(
const variablesCtx = useVariablesCtx(); const variablesCtx = useVariablesCtx();
const { getCollectionJoinField } = useCollectionManager(); const { getCollectionJoinField } = useCollectionManager();
const collectionField = getCollectionJoinField(schema['x-collection-field']); const collectionField = getCollectionJoinField(schema['x-collection-field']);
useEffect(() => { useEffect(() => {
if (ctx?.block === 'form') { if (ctx?.block === 'form') {
ctx.field.data = ctx.field.data || {}; ctx.field.data = ctx.field.data || {};
@ -88,7 +89,10 @@ export const FormItem: any = observer(
let iniValues = []; let iniValues = [];
contextData?.map((v) => { contextData?.map((v) => {
const data = parseVariables(schema.default, { $context: v }); const data = parseVariables(schema.default, { $context: v });
iniValues = iniValues.concat(data); iniValues = iniValues.concat(data).map((v) => {
delete v[collectionField.through];
return v;
});
}); });
const data = _.uniqBy(iniValues, 'id'); const data = _.uniqBy(iniValues, 'id');
field.setInitialValue?.(data.length > 0 ? data : [{}]); field.setInitialValue?.(data.length > 0 ? data : [{}]);

View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { ArrayCollapse, ArrayItems, FormItem, FormLayout, Input } from '@formily/antd-v5'; import { ArrayCollapse, ArrayItems, FormItem, FormLayout, Input } from '@formily/antd-v5';
import { createForm, Field, GeneralField } from '@formily/core'; import { Field, GeneralField, createForm } from '@formily/core';
import { ISchema, Schema, SchemaOptionsContext, useField, useFieldSchema, useForm } from '@formily/react'; import { ISchema, Schema, SchemaOptionsContext, useField, useFieldSchema, useForm } from '@formily/react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { error } from '@nocobase/utils/client'; import { error } from '@nocobase/utils/client';
@ -21,33 +21,34 @@ import {
} from 'antd'; } from 'antd';
import _, { cloneDeep } from 'lodash'; import _, { cloneDeep } from 'lodash';
import React, { import React, {
createContext,
ReactNode, ReactNode,
createContext,
useCallback, useCallback,
useContext, useContext,
useMemo, useMemo,
useState,
// @ts-ignore // @ts-ignore
useTransition as useReactTransition, useTransition as useReactTransition,
useState,
} from 'react'; } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import {
ActionContextProvider,
APIClientProvider, APIClientProvider,
ActionContextProvider,
CollectionFieldOptions, CollectionFieldOptions,
CollectionManagerContext, CollectionManagerContext,
CollectionProvider, CollectionProvider,
createDesignable,
Designable, Designable,
findFormBlock,
FormDialog, FormDialog,
FormProvider, FormProvider,
RemoteSchemaComponent, RemoteSchemaComponent,
SchemaComponent, SchemaComponent,
SchemaComponentContext, SchemaComponentContext,
SchemaComponentOptions, SchemaComponentOptions,
createDesignable,
findFormBlock,
useAPIClient, useAPIClient,
useActionContext,
useBlockRequestContext, useBlockRequestContext,
useCollection, useCollection,
useCollectionManager, useCollectionManager,
@ -57,7 +58,6 @@ import {
useGlobalTheme, useGlobalTheme,
useLinkageCollectionFilterOptions, useLinkageCollectionFilterOptions,
useSortFields, useSortFields,
useActionContext,
} from '..'; } from '..';
import { useTableBlockContext } from '../block-provider'; import { useTableBlockContext } from '../block-provider';
import { findFilterTargets, updateFilterTargets } from '../block-provider/hooks'; import { findFilterTargets, updateFilterTargets } from '../block-provider/hooks';
@ -1678,9 +1678,19 @@ SchemaSettings.SortingRule = function SortRuleConfigure(props) {
// 是否显示默认值配置项 // 是否显示默认值配置项
export const isShowDefaultValue = (collectionField: CollectionFieldOptions, getInterface) => { export const isShowDefaultValue = (collectionField: CollectionFieldOptions, getInterface) => {
return ( return (
!['o2o', 'oho', 'obo', 'o2m', 'attachment', 'expression', 'point', 'lineString', 'circle', 'polygon'].includes( ![
collectionField?.interface, 'o2o',
) && !isSystemField(collectionField, getInterface) 'oho',
'obo',
'o2m',
'attachment',
'expression',
'point',
'lineString',
'circle',
'polygon',
'sequence',
].includes(collectionField?.interface) && !isSystemField(collectionField, getInterface)
); );
}; };

View File

@ -708,6 +708,7 @@ export class Database extends EventEmitter implements AsyncEmitter {
console.log('Connection has been established successfully.'); console.log('Connection has been established successfully.');
return true; return true;
} catch (error) { } catch (error) {
console.log(`Unable to connect to the database: ${error.message}`);
if (count >= (retry as number)) { if (count >= (retry as number)) {
throw new Error('Connection failed, please check your database connection credentials and try again.'); throw new Error('Connection failed, please check your database connection credentials and try again.');
} }

View File

@ -105,70 +105,101 @@ class IndexGenerator {
this.pluginsPath = pluginsPath; this.pluginsPath = pluginsPath;
} }
get indexPath() {
return path.join(this.outputPath, 'index.ts');
}
get packageMapPath() {
return path.join(this.outputPath, 'packageMap.json');
}
get packagesPath() {
return path.join(this.outputPath, 'packages');
}
generate() { generate() {
this.generatePluginIndex(); this.generatePluginContent();
if (process.env.NODE_ENV === 'production') return; if (process.env.NODE_ENV === 'production') return;
this.pluginsPath.forEach((pluginPath) => { this.pluginsPath.forEach((pluginPath) => {
if (!fs.existsSync(pluginPath)) { if (!fs.existsSync(pluginPath)) {
return; return;
} }
fs.watch(pluginPath, { recursive: false }, () => { fs.watch(pluginPath, { recursive: false }, () => {
this.generatePluginIndex(); this.generatePluginContent();
}); });
}); });
} }
generatePluginIndex() { get indexContent() {
if (!fs.existsSync(this.outputPath)) { return `// @ts-nocheck
fs.mkdirSync(path.dirname(this.outputPath), { recursive: true }); import packageMap from './packageMap.json';
fs.writeFileSync(this.outputPath, 'export default {}');
function devDynamicImport(packageName: string): Promise<any> {
const fileName = packageMap[packageName];
if (!fileName) {
return Promise.resolve(null);
}
return import(\`./packages/\${fileName}\`)
}
export default devDynamicImport;`;
}
get emptyIndexContent() {
return `
export default function devDynamicImport(packageName: string): Promise<any> {
return Promise.resolve(null);
}`;
}
generatePluginContent() {
if (fs.existsSync(this.outputPath)) {
fs.rmdirSync(this.outputPath, { recursive: true, force: true });
} }
fs.mkdirSync(this.outputPath);
const validPluginPaths = this.pluginsPath.filter((pluginPath) => fs.existsSync(pluginPath)); const validPluginPaths = this.pluginsPath.filter((pluginPath) => fs.existsSync(pluginPath));
if (!validPluginPaths.length) { if (!validPluginPaths.length || process.env.NODE_ENV === 'production') {
fs.writeFileSync(this.indexPath, this.emptyIndexContent);
return; return;
} }
if (process.env.NODE_ENV === 'production') {
fs.writeFileSync(this.outputPath, 'export default {}');
return;
}
const pluginInfo = validPluginPaths.map((pluginPath) => this.getContent(pluginPath));
const importContent = pluginInfo.map(({ indexContent }) => indexContent).join('\n');
const exportContent = pluginInfo.map(({ exportContent }) => exportContent).join('\n');
const fileContent = `${importContent}\n\nexport default {\n${exportContent}\n}`; const pluginInfos = validPluginPaths.map((pluginPath) => this.getContent(pluginPath)).flat();
fs.writeFileSync(this.outputPath, fileContent); // index.ts
fs.writeFileSync(this.indexPath, this.indexContent);
// packageMap.json
const packageMapContent = pluginInfos.reduce((memo, item) => {
memo[item.packageJsonName] = item.pluginFileName + '.ts';
return memo;
}, {});
fs.writeFileSync(this.packageMapPath, JSON.stringify(packageMapContent, null, 2));
// packages
fs.mkdirSync(this.packagesPath, { recursive: true });
pluginInfos.forEach((item) => {
const pluginPackagePath = path.join(this.packagesPath, item.pluginFileName + '.ts');
fs.writeFileSync(pluginPackagePath, item.exportStatement);
});
} }
getContent(pluginPath) { getContent(pluginPath) {
const pluginFolders = fs.readdirSync(pluginPath); const pluginFolders = fs.readdirSync(pluginPath);
const pluginImports = pluginFolders const pluginInfos = pluginFolders
.filter((folder) => { .filter((folder) => {
const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json'); const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json');
const pluginSrcClientPath = path.join(pluginPath, folder, 'src', 'client'); const pluginSrcClientPath = path.join(pluginPath, folder, 'src', 'client');
return fs.existsSync(pluginPackageJsonPath) && fs.existsSync(pluginSrcClientPath); return fs.existsSync(pluginPackageJsonPath) && fs.existsSync(pluginSrcClientPath);
}) })
.map((folder, index) => { .map((folder) => {
const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json'); const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json');
const pluginPackageJson = require(pluginPackageJsonPath); const pluginPackageJson = require(pluginPackageJsonPath);
const pluginSrcClientPath = path const pluginSrcClientPath = path
.relative(path.dirname(this.outputPath), path.join(pluginPath, folder, 'src', 'client')) .relative(this.packagesPath, path.join(pluginPath, folder, 'src', 'client'))
.replaceAll('\\', '/'); .replaceAll('\\', '/');
const pluginName = `${folder.replaceAll('-', '_')}${index}`; const pluginFileName = `${path.basename(pluginPath)}_${folder.replaceAll('-', '_')}`;
const importStatement = `const ${pluginName} = import('${pluginSrcClientPath}');`; const exportStatement = `export { default } from '${pluginSrcClientPath}';`;
return { importStatement, pluginName, packageJsonName: pluginPackageJson.name }; return { exportStatement, pluginFileName, packageJsonName: pluginPackageJson.name };
}); });
const indexContent = pluginImports.map(({ importStatement }) => importStatement).join('\n'); return pluginInfos;
const exportContent = pluginImports
.map(({ pluginName, packageJsonName }) => ` "${packageJsonName}": ${pluginName},`)
.join('\n');
return {
indexContent,
exportContent,
};
} }
} }

View File

@ -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",

View File

@ -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);

View File

@ -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';

View File

@ -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;

View File

@ -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);

View File

@ -20,8 +20,9 @@ import { BaseTypeSets, defaultFieldNames, nodesOptions, triggerOptions } from '.
function matchToManyField(field, appends): boolean { function matchToManyField(field, appends): boolean {
const fieldPrefix = `${field.name}.`; const fieldPrefix = `${field.name}.`;
return ( return (
['hasMany', 'belongsToMany'].includes(field.type) && (['hasOne', 'belongsTo'].includes(field.type) &&
(appends ? appends.includes(field.name) || appends.some((item) => item.startsWith(fieldPrefix)) : true) (appends ? appends.includes(field.name) || appends.some((item) => item.startsWith(fieldPrefix)) : true)) ||
['hasMany', 'belongsToMany'].includes(field.type)
); );
} }

View File

@ -265,6 +265,8 @@ export function JobButton() {
border: 2px solid #d9d9d9; border: 2px solid #d9d9d9;
border-radius: 50%; border-radius: 50%;
cursor: not-allowed; cursor: not-allowed;
width: 24px;
height: 24px;
`, `,
)} )}
/> />

View File

@ -165,28 +165,25 @@ function getNextAppends(field, appends: string[]) {
function filterTypedFields({ fields, types, appends, compile, getCollectionFields }) { function filterTypedFields({ fields, types, appends, compile, getCollectionFields }) {
return fields.filter((field) => { return fields.filter((field) => {
const match = types?.length ? types.some((type) => matchFieldType(field, type, appends)) : true; if (types?.length) {
return types.some((type) => matchFieldType(field, type, appends));
}
if (isAssociationField(field)) { if (isAssociationField(field)) {
const nextAppends = getNextAppends(field, appends); const nextAppends = getNextAppends(field, appends);
const included = appends.includes(field.name); const included = appends.includes(field.name);
if (match) { return (
return included; (nextAppends.length || included) &&
} else { filterTypedFields({
return ( fields: getNormalizedFields(field.target, { compile, getCollectionFields }),
(nextAppends.length || included) && types,
filterTypedFields({ // depth: depth - 1,
fields: getNormalizedFields(field.target, { compile, getCollectionFields }), appends: nextAppends,
types, compile,
// depth: depth - 1, getCollectionFields,
appends: nextAppends, }).length
compile, );
getCollectionFields,
}).length
);
}
} else {
return match;
} }
return true;
}); });
} }