refactor: table column field model

packages/core/client/src/flow/models/TableColumnModel.tsx

@@ -79,7 +79,12 @@ export class TableColumnModel extends FieldFlowModel {
   getComponentProps() {
     return this.props.componentProps;
   }
-
+  setDataSource(dataSource) {
+    this.setProps('componentProps', { ...(this.props.componentProps || {}), dataSource });
+  }
+  getDataSource() {
+    return this.props.componentProps.dataSource || [];
+  }
   renderQuickEditButton(record) {
     return (
       <Tooltip title="快速编辑">
@@ -208,6 +213,9 @@ TableColumnModel.registerFlow({
         ctx.model.fieldPath = params.fieldPath;
         ctx.model.setProps('dataIndex', field.name);
         ctx.model.setComponentProps(field.getComponentProps());
+        if (field.enum.length) {
+          ctx.model.setDataSource(field.enum);
+        }
       },
     },
     editColumTitle: {

packages/core/client/src/flow/models/table/fields/AssociationSelectFieldModel/index.tsx

@@ -119,7 +119,6 @@ export class AssociationSelectReadPrettyFieldModel extends TableColumnModel {
     'createdBy',
   ];
   render() {
-    console.log(this);
     return (value, record, index) => {
       return (
         <>
@@ -138,6 +137,24 @@ export class AssociationSelectReadPrettyFieldModel extends TableColumnModel {
   }
 }
 
+// //附加关系数据
+// AssociationSelectReadPrettyFieldModel.registerFlow({
+//   key: 'appendsAssociationFields',
+//   auto: true,
+//   sort: 100,
+//   steps: {
+//     step1: {
+//       handler(ctx) {
+//         const resource = ctx.model.parent.resource;
+//         const { name } = ctx.model.field.options;
+//         resource.addAppends(name);
+//         console.log(ctx.model.parent.resource, name);
+//         resource.refresh();
+//       },
+//     },
+//   },
+// });
+
 //标题字段设置 todo 复用
 AssociationSelectReadPrettyFieldModel.registerFlow({
   key: 'fieldNames',

packages/core/client/src/flow/models/table/fields/CheckboxFieldMode.tsx

@@ -0,0 +1,40 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { FC } from 'react';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Checkbox } from 'antd';
+import { TableColumnModel } from '../../TableColumnModel';
+
+interface CheckboxReadPrettyProps {
+  showUnchecked?: boolean;
+  value?: boolean;
+}
+
+const ReadPretty: FC<CheckboxReadPrettyProps> = (props) => {
+  if (props.value) {
+    return <CheckOutlined style={{ color: '#52c41a' }} />;
+  }
+  return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : <Checkbox disabled />;
+};
+
+export class CheckboxFieldMode extends TableColumnModel {
+  public static readonly supportedFieldInterfaces = ['checkbox'];
+
+  render() {
+    return (value, record, index) => {
+      return (
+        <>
+          {<ReadPretty value={value} {...this.getComponentProps()} />}
+          {this.renderQuickEditButton(record)}
+        </>
+      );
+    };
+  }
+}

packages/core/client/src/flow/models/table/fields/NumberFieldModel.tsx

@@ -15,7 +15,7 @@ import { TableColumnModel } from '../../TableColumnModel';
 import { InputNumberReadPretty } from '../components/InputNumberReadPretty';
 
 export class NumberReadPrettyFieldModel extends TableColumnModel {
-  public static readonly supportedFieldInterfaces = ['number'];
+  public static readonly supportedFieldInterfaces = ['number', 'integer'];
   render() {
     return (value, record, index) => {
       return (

packages/core/client/src/flow/models/table/fields/RadioGroupFieldModel.tsx

@@ -0,0 +1,46 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { FC } from 'react';
+import { Tag } from 'antd';
+import { TableColumnModel } from '../../TableColumnModel';
+
+const ReadPretty: FC<any> = (props) => {
+  const { value, dataSource } = props;
+
+  if (!value) {
+    return;
+  }
+  return (
+    <div>
+      {dataSource
+        .filter((option) => option.value == value)
+        .map((option, key) => (
+          <Tag key={key} color={option.color} icon={option.icon}>
+            {option.label}
+          </Tag>
+        ))}
+    </div>
+  );
+};
+
+export class RadioGroupReadPrettyFieldModel extends TableColumnModel {
+  public static readonly supportedFieldInterfaces = ['radioGroup'];
+
+  render() {
+    return (value, record, index) => {
+      return (
+        <>
+          {<ReadPretty value={value} {...this.getComponentProps()} />}
+          {this.renderQuickEditButton(record)}
+        </>
+      );
+    };
+  }
+}

packages/core/client/src/flow/models/table/fields/SelectFieldModel.tsx

@@ -12,31 +12,24 @@ import { Tag } from 'antd';
 import { TableColumnModel } from '../../TableColumnModel';
 import { getCurrentOptions } from '../utils/utils';
 
+const fieldNames = {
+  label: 'label',
+  value: 'value',
+  color: 'color',
+  icon: 'icon',
+};
 export class SelectReadPrettyFieldModel extends TableColumnModel {
   public static readonly supportedFieldInterfaces = ['select', 'multipleSelect'];
-  dataSource;
-  fieldNames: { label: string; value: string; color?: string; icon?: any };
 
-  setDataSource(dataSource) {
-    this.dataSource = dataSource;
-  }
-  getDataSource() {
-    return this.dataSource;
-  }
-  setFieldNames(fieldNames) {
-    this.fieldNames = fieldNames;
-  }
-  getFieldNames() {
-    return this.fieldNames;
-  }
   render() {
     return (value, record, index) => {
-      const currentOptions = getCurrentOptions(value, this.dataSource, this.fieldNames);
+      const { dataSource } = this.getComponentProps();
+      const currentOptions = getCurrentOptions(value, dataSource, fieldNames);
       const content =
         value &&
         currentOptions.map((option, index) => (
-          <Tag key={index} color={option[this.fieldNames.color]} icon={option.icon}>
-            {option[this.fieldNames.label]}
+          <Tag key={index} color={option[fieldNames.color]} icon={option.icon}>
+            {option[fieldNames.label]}
           </Tag>
         ));
       return (
@@ -48,22 +41,3 @@ export class SelectReadPrettyFieldModel extends TableColumnModel {
     };
   }
 }
-
-SelectReadPrettyFieldModel.registerFlow({
-  key: 'options',
-  auto: true,
-  sort: 100,
-  steps: {
-    step1: {
-      handler(ctx, params) {
-        ctx.model.setDataSource(ctx.model.field.enum);
-        ctx.model.setFieldNames({
-          label: 'label',
-          value: 'value',
-          color: 'color',
-          icon: 'icon',
-        });
-      },
-    },
-  },
-});

packages/core/client/src/flow/models/table/fields/index.tsx

@@ -11,3 +11,5 @@ export * from './SelectFieldModel';
 export * from './NumberFieldModel';
 export * from './PercentFieldModel';
 export * from './AssociationSelectFieldModel';
+export * from './CheckboxFieldMode';
+export * from './RadioGroupFieldModel';