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>
2022-06-09 12:25:09 +08:00 · 2022-06-09 12:25:09 +08:00 · 1b45f5366c
commit 1b45f5366c
parent 8583af232d
7 changed files with 74 additions and 87 deletions
--- a/packages/core/client/src/collection-manager/Configuration/ConfigurationTable.tsx
+++ b/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>
--- a/packages/core/client/src/collection-manager/Configuration/components/index.tsx
+++ b/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>
  );
 });
--- a/packages/core/client/src/collection-manager/interfaces/m2m.tsx
+++ b/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: 'One to many', value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
+        { 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 }}',
                },
              },
--- a/packages/core/client/src/collection-manager/interfaces/m2o.tsx
+++ b/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: 'One to many', value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
+        { 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 }}',
                },
              },
--- a/packages/core/client/src/collection-manager/interfaces/o2m.tsx
+++ b/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: 'One to many', value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
+        { 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 }}',
                },
              },
            },
--- a/packages/core/client/src/collection-manager/interfaces/o2o.tsx
+++ b/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: 'One to many', value: 'hasMany' },
-        { label: 'Many to one', value: 'belongsTo' },
-        { label: 'Many to many', value: 'belongsToMany' },
+        { label: "{{t('One to one')}}", value: 'hasOne' },
+        { label: "{{t('One to many')}}", value: 'hasMany' },
+        { label: "{{t('Many to one')}}", value: 'belongsTo' },
+        { 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 }}',
                },
              },
--- a/packages/core/client/src/locale/zh_CN.ts
+++ b/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": "添加筛选分组",