feat: change FK to input component (#488)

* feat: change FK to input component

* feat: change FK to input component

* fix: compile label

Co-authored-by: chenos <chenlinxh@gmail.com>

packages/core/client/src/collection-manager/Configuration/ConfigurationTable.tsx

@@ -152,9 +152,10 @@ const useBulkDestroySubField = () => {
   };
 };
 
+// 获取当前字段列表
 const useCurrentFields = () => {
   const record = useRecord();
-
+  // 仅当当前字段为子表单时，从DataSourceContext中获取已配置的字段列表
   if (record.__parent && record.__parent.interface === 'subTable') {
     const ctx = useContext(DataSourceContext);
     return ctx.dataSource;
@@ -165,6 +166,10 @@ const useCurrentFields = () => {
   return fields;
 }
 
+const useNewId = (prefix) => {
+  return `${prefix || ''}${uid()}`;
+}
+
 export const ConfigurationTable = () => {
   const { collections = [] } = useCollectionManager();
   const compile = useCompile();
@@ -190,6 +195,7 @@ export const ConfigurationTable = () => {
           useAsyncDataSource,
           loadCollections,
           useCurrentFields,
+          useNewId,
         }}
       />
     </div>

packages/core/client/src/collection-manager/Configuration/components/index.tsx

@@ -3,6 +3,7 @@ import { observer, useField, useForm } from '@formily/react';
 import { Select } from 'antd';
 import React from 'react';
 import { useRecord } from '../../../record-provider';
+import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
 export const SourceForeignKey = observer(() => {
@@ -79,9 +80,10 @@ export const SourceCollection = observer(() => {
   const record = useRecord();
   const { getCollection } = useCollectionManager();
   const collection = record?.collectionName ? getCollection(record.collectionName) : record;
+  const compile = useCompile();
   return (
     <div>
-      <Select disabled value={collection.name} options={[{ value: collection.name, label: collection.title }]} />
+      <Select disabled value={collection.name} options={[{ value: collection.name, label: compile(collection.title) }]} />
     </div>
   );
 });

packages/core/client/src/collection-manager/interfaces/m2m.tsx

@@ -84,10 +84,10 @@ export const m2m: IField = {
       'x-decorator': 'FormItem',
       'x-component': 'Select',
       enum: [
-        { label: 'One to one', value: 'hasOne' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
-        { label: 'One to many', value: 'hasMany' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('Many to many')}}", value: 'belongsToMany' },
       ],
     },
     grid: {
@@ -118,9 +118,9 @@ export const m2m: IField = {
                 through: {
                   type: 'string',
                   title: '{{t("Through collection")}}',
+                  'x-decorator': 'FormItem',
                   'x-disabled': '{{ !createOnly }}',
                   'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
-                  'x-decorator': 'FormItem',
                   'x-component': 'Select',
                   'x-component-props': {
                     allowClear: true,
@@ -170,8 +170,12 @@ export const m2m: IField = {
                 foreignKey: {
                   type: 'string',
                   title: '{{t("Foreign key 1")}}',
+                  required: true,
+                  default: '{{ useNewId("f_") }}',
+                  description:
+        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
-                  'x-component': 'ThroughForeignKey',
+                  'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
                 },
               },
@@ -179,7 +183,9 @@ export const m2m: IField = {
             col23: {
               type: 'void',
               'x-component': 'Grid.Col',
-              properties: {},
+              properties: {
+
+              },
             },
           },
         },
@@ -199,8 +205,12 @@ export const m2m: IField = {
                 otherKey: {
                   type: 'string',
                   title: '{{t("Foreign key 2")}}',
+                  required: true,
+                  default: '{{ useNewId("f_") }}',
+                  description:
+        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
-                  'x-component': 'ThroughForeignKey',
+                  'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
                 },
               },

packages/core/client/src/collection-manager/interfaces/m2o.tsx

@@ -1,5 +1,4 @@
 import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
 import { cloneDeep } from 'lodash';
 import { recordPickerSelector, recordPickerViewer } from './properties';
 import { IField } from './types';
@@ -55,25 +54,6 @@ export const m2o: IField = {
       };
     }
   },
-  initialize: (values: any) => {
-    if (values.type === 'belongsToMany') {
-      if (!values.through) {
-        values.through = `t_${uid()}`;
-      }
-      if (!values.foreignKey) {
-        values.foreignKey = `f_${uid()}`;
-      }
-      if (!values.otherKey) {
-        values.otherKey = `f_${uid()}`;
-      }
-      if (!values.sourceKey) {
-        values.sourceKey = 'id';
-      }
-      if (!values.targetKey) {
-        values.targetKey = 'id';
-      }
-    }
-  },
   properties: {
     'uiSchema.title': {
       type: 'string',
@@ -100,10 +80,10 @@ export const m2o: IField = {
       'x-decorator': 'FormItem',
       'x-component': 'Select',
       enum: [
-        { label: 'One to one', value: 'hasOne' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
-        { label: 'One to many', value: 'hasMany' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('Many to many')}}", value: 'belongsToMany' },
       ],
     },
     grid: {
@@ -155,8 +135,12 @@ export const m2o: IField = {
                 foreignKey: {
                   type: 'string',
                   title: '{{t("Foreign key")}}',
+                  required: true,
+                  default: '{{ useNewId("f_") }}',
+                  description:
+        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
-                  'x-component': 'SourceForeignKey',
+                  'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
                 },
               },

packages/core/client/src/collection-manager/interfaces/o2m.tsx

@@ -1,5 +1,4 @@
 import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
 import { cloneDeep } from 'lodash';
 import { recordPickerSelector, recordPickerViewer } from './properties';
 import { IField } from './types';
@@ -17,6 +16,8 @@ export const o2m: IField = {
     uiSchema: {
       // title,
       'x-component': 'RecordPicker',
+      // type: 'void',
+      // 'x-component': 'TableField',
       'x-component-props': {
         // mode: 'tags',
         multiple: true,
@@ -35,7 +36,7 @@ export const o2m: IField = {
         'x-component': 'RecordPicker',
         'x-component-props': {
           // mode: 'tags',
-          multiple: true,
+          multiple: false,
           fieldNames: {
             label: 'id',
             value: 'id',
@@ -55,25 +56,6 @@ export const o2m: IField = {
       };
     }
   },
-  initialize: (values: any) => {
-    if (values.type === 'belongsToMany') {
-      if (!values.through) {
-        values.through = `t_${uid()}`;
-      }
-      if (!values.foreignKey) {
-        values.foreignKey = `f_${uid()}`;
-      }
-      if (!values.otherKey) {
-        values.otherKey = `f_${uid()}`;
-      }
-      if (!values.sourceKey) {
-        values.sourceKey = 'id';
-      }
-      if (!values.targetKey) {
-        values.targetKey = 'id';
-      }
-    }
-  },
   properties: {
     'uiSchema.title': {
       type: 'string',
@@ -100,10 +82,10 @@ export const o2m: IField = {
       'x-decorator': 'FormItem',
       'x-component': 'Select',
       enum: [
-        { label: 'One to one', value: 'hasOne' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
-        { label: 'One to many', value: 'hasMany' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('Many to many')}}", value: 'belongsToMany' },
       ],
     },
     grid: {
@@ -168,8 +150,13 @@ export const o2m: IField = {
                 foreignKey: {
                   type: 'string',
                   title: '{{t("Foreign key")}}',
+                  required: true,
+                  default: '{{ useNewId("f_") }}',
+                  description:
+        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
-                  'x-component': 'TargetForeignKey',
+                  'x-component': 'Input',
+                  'x-disabled': '{{ !createOnly }}',
                 },
               },
             },

packages/core/client/src/collection-manager/interfaces/o2o.tsx

@@ -1,5 +1,4 @@
 import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
 import { cloneDeep } from 'lodash';
 import { recordPickerSelector, recordPickerViewer } from './properties';
 import { IField } from './types';
@@ -29,13 +28,14 @@ export const o2o: IField = {
     reverseField: {
       interface: 'm2o',
       type: 'belongsTo',
+      title: '{{t("One to one")}}',
       // name,
       uiSchema: {
         // title,
         'x-component': 'RecordPicker',
         'x-component-props': {
           // mode: 'tags',
-          multiple: true,
+          multiple: false,
           fieldNames: {
             label: 'id',
             value: 'id',
@@ -55,25 +55,6 @@ export const o2o: IField = {
       };
     }
   },
-  initialize: (values: any) => {
-    if (values.type === 'belongsToMany') {
-      if (!values.through) {
-        values.through = `t_${uid()}`;
-      }
-      if (!values.foreignKey) {
-        values.foreignKey = `f_${uid()}`;
-      }
-      if (!values.otherKey) {
-        values.otherKey = `f_${uid()}`;
-      }
-      if (!values.sourceKey) {
-        values.sourceKey = 'id';
-      }
-      if (!values.targetKey) {
-        values.targetKey = 'id';
-      }
-    }
-  },
   properties: {
     'uiSchema.title': {
       type: 'string',
@@ -100,10 +81,10 @@ export const o2o: IField = {
       'x-decorator': 'FormItem',
       'x-component': 'Select',
       enum: [
-        { label: 'One to one', value: 'hasOne' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
-        { label: 'One to many', value: 'hasMany' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('Many to many')}}", value: 'belongsToMany' },
       ],
     },
     grid: {
@@ -167,8 +148,12 @@ export const o2o: IField = {
                 foreignKey: {
                   type: 'string',
                   title: '{{t("Foreign key")}}',
+                  required: true,
+                  default: '{{ useNewId("f_") }}',
+                  description:
+        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
-                  'x-component': 'TargetForeignKey',
+                  'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
                 },
               },

packages/core/client/src/locale/zh_CN.ts

@@ -156,6 +156,19 @@ export default {
   "Time format": "时间格式",
   "12 hour": "12 小时制",
   "24 hour": "24 小时制",
+  "Relationship type": "关联类型",
+  "Source collection": "源数据表",
+  "Source key": "源数据表字段标识",
+  "Target collection": "目标数据表",
+  "Through collection": "中间数据表",
+  "Target key": "目标数据表字段标识",
+  "Foreign key": "外键",
+  "One to one": "一对一",
+  "One to many": "一对多",
+  "Many to one": "多对一",
+  "Many to many": "多对多",
+  "Foreign key 1": "外键1",
+  "Foreign key 2": "外键2",
 
   "Add filter": "添加筛选条件",
   "Add filter group": "添加筛选分组",