feat: 添加自定义字段功能，完善中

src/components/ColumnTypes/ColumnType.tsx

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { GoalProColumn } from '@/components/ResourceEditor';
+import { DatabaseType } from '@/components/ColumnTypes/database';
+
+export interface ColumnType {
+  value: string;
+  label: string;
+  displayRender?: (
+    dom: ReactNode,
+    item: any,
+    index: number,
+    params: Record<string, any>,
+  ) => ReactNode;
+  formRender?: (col: GoalProColumn, params: Record<string, any>) => ReactNode;
+  params?: GoalProColumn[];
+}
+
+export const InputTypes: ColumnType[] = [
+  DatabaseType,
+  { value: 'password', label: '密码输入框' },
+  { value: 'money', label: '金额输入框' },
+  { value: 'textarea', label: '文本域' },
+  { value: 'date', label: '日期' },
+  { value: 'dateTime', label: '日期时间' },
+  { value: 'dateWeek', label: '周' },
+  { value: 'dateMonth', label: '月' },
+  { value: 'dateQuarter', label: '季度输入' },
+  { value: 'dateYear', label: '年份输入' },
+  { value: 'dateRange', label: '日期区间' },
+  { value: 'dateTimeRange', label: '日期时间区间' },
+  { value: 'time', label: '时间' },
+  { value: 'timeRange', label: '时间区间' },
+  { value: 'text', label: '文本框' },
+  { value: 'select', label: '下拉框' },
+  { value: 'treeSelect', label: '树形下拉框' },
+  { value: 'checkbox', label: '多选框' },
+  { value: 'rate', label: '星级组件' },
+  { value: 'radio', label: '单选框' },
+  { value: 'radioButton', label: '按钮单选框' },
+  { value: 'progress', label: '进度条' },
+  { value: 'percent', label: '百分比组件' },
+  { value: 'digit', label: '数字输入框' },
+  { value: 'second', label: '秒格式化' },
+  { value: 'avatar', label: '头像' },
+  { value: 'code', label: '代码框' },
+  { value: 'switch', label: '开关' },
+  { value: 'fromNow', label: '相对于当前时间' },
+  { value: 'image', label: '图片' },
+  { value: 'jsonCode', label: '代码框，但是带了 json 格式化' },
+  { value: 'color', label: '颜色选择器' },
+  { value: 'cascader', label: '级联选择器' },
+  { value: 'segmented', label: '分段器' },
+  { value: 'group', label: '分组' },
+  { value: 'formList', label: '表单列表' },
+  { value: 'formSet', label: '表单集合' },
+  { value: 'divider', label: '分割线' },
+  { value: 'dependency', label: '依赖项' },
+];
+
+export const Types = {
+  database: {} as ColumnType,
+};

src/components/ColumnTypes/database.tsx

@@ -0,0 +1,11 @@
+import { ColumnType } from '@/components/ColumnTypes/ColumnType';
+import { ProFormSelect } from '@ant-design/pro-components';
+
+export const DatabaseType: ColumnType = {
+  value: 'database',
+  label: '数据库',
+  displayRender: () => '数据库 xxx',
+  formRender: (col) => {
+    return <ProFormSelect options={[]} label={col.title} name={col.dataIndex} />;
+  },
+};

src/components/ResourceEditor.tsx

@@ -1,10 +1,12 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { Modal } from 'antd';
 import { ProColumns, ProForm, ProFormInstance, ProFormText } from '@ant-design/pro-components';
+import { InputTypes } from '@/components/ColumnTypes/ColumnType';
 
 export type GoalProColumn = ProColumns & {
-  title: string;
-  rules: any[];
+  title?: string;
+  rules?: any[];
+  valueTypeParams?: Record<string, any>;
 };
 
 export type ResourceEditorProps = {
@@ -49,8 +51,11 @@ const ResourceEditor = forwardRef<ResourceEditorAction | undefined, ResourceEdit
           }}
         >
           {columns.map((col, index) => {
-            if (col.hideInForm) return undefined;
-            return (
+            if (col.hideInForm || col.dataIndex.length === 0) return undefined;
+            const type = InputTypes.find((type) => col.valueType === type.value);
+            return type?.formRender ? (
+              type?.formRender(col, col.valueTypeParams || {})
+            ) : (
               <ProFormText key={index} label={col.title} rules={col.rules} name={col.dataIndex} />
             );
           })}

src/pages/Resource/List.tsx

@@ -4,13 +4,15 @@ import { request, useRequest } from '@@/plugin-request';
 import { useParams } from '@@/exports';
 import { Button, Dropdown, Modal } from 'antd';
 import ResourceEditor, { GoalProColumn, ResourceEditorAction } from '@/components/ResourceEditor';
+import { InputTypes } from '@/components/ColumnTypes/ColumnType';
 
-type ResourceMeta = ProTableProps<any, any> & {
+type ResourceMeta = {
   actions: string[];
   headerTitle?: string;
   subTitle?: string;
   columns?: GoalProColumn[];
-} & Record<string, any>;
+} & ProTableProps<any, any> &
+  Record<string, any>;
 
 export default () => {
   const routeParams = useParams();
@@ -35,6 +37,14 @@ export default () => {
   const columns = meta?.columns
     ?.filter((item) => !item.hideInTable)
     .map((item) => {
+      const type = InputTypes.find((type) => item.valueType === type.value);
+      if (type?.displayRender) {
+        item.render = (text, data, index) => {
+          return type?.displayRender
+            ? type.displayRender(text, data, index, item.valueTypeParams || {})
+            : text;
+        };
+      }
       return item;
     });
   const actionsEditorText = { edit: '编辑', delete: '删除' };

src/pages/Setup/index.tsx

@@ -6,6 +6,7 @@ import {
   ProFormDependency,
   ProFormDigit,
   ProFormGroup,
+  ProFormItem,
   ProFormList,
   ProFormSelect,
   ProFormSwitch,
@@ -15,9 +16,9 @@ import {
 import React, { useEffect, useRef, useState } from 'react';
 import { request, useRequest } from '@@/plugin-request';
 import { useParams } from '@@/exports';
-import { InputTypes } from '@/services/ant-design-pro/api';
 import { Button, message } from 'antd';
 import classNames from 'classnames';
+import { InputTypes } from '@/components/ColumnTypes/ColumnType';
 
 export default () => {
   const routeParams: ProTableProps<any, any> = useParams();
@@ -123,7 +124,7 @@ export default () => {
                   tooltip="类似这样的字段上方的提示信息"
                 />
                 <ProFormSwitch name="copyable" label="可复制" />
-                <ProFormSwitch name="search" label="可搜索" initialValue={true} />
+                <ProFormSwitch name="search" label="可搜索" />
 
                 <ProFormDependency name={['search']}>
                   {({ search }) => {
@@ -148,40 +149,42 @@ export default () => {
                   </ProFormGroup>
                 </ProFormList>
 
-                <ProFormDependency name={['*']}>
-                  {(args, args2) => {
-                    console.log('args', args, args2);
-                    return (
-                      args && (
-                        <Button.Group>
-                          {args.columns.length > 1 && (
+                <ProFormItem label="排序">
+                  <ProFormDependency name={['*']}>
+                    {(args, args2) => {
+                      console.log('args', args, args2);
+                      return (
+                        args && (
+                          <Button.Group>
+                            {args.columns.length > 1 && (
+                              <Button
+                                onClick={() =>
+                                  formListRef?.current?.move(
+                                    args.columns.length - 1,
+                                    args.columns.length - 2,
+                                  )
+                                }
+                              >
+                                上移
+                              </Button>
+                            )}
+
                             <Button
                               onClick={() =>
                                 formListRef?.current?.move(
                                   args.columns.length - 1,
-                                  args.columns.length - 2,
+                                  args.columns.length,
                                 )
                               }
                             >
-                              上移
+                              下移
                             </Button>
-                          )}
-
-                          <Button
-                            onClick={() =>
-                              formListRef?.current?.move(
-                                args.columns.length - 1,
-                                args.columns.length,
-                              )
-                            }
-                          >
-                            下移
-                          </Button>
-                        </Button.Group>
-                      )
-                    );
-                  }}
-                </ProFormDependency>
+                          </Button.Group>
+                        )
+                      );
+                    }}
+                  </ProFormDependency>
+                </ProFormItem>
               </ProFormGroup>
             </ProFormList>
           </ProForm>

src/services/ant-design-pro/api.ts

@@ -3,47 +3,6 @@
 import { request } from '@umijs/max';
 import { MenuDataItem } from '@umijs/route-utils';
 
-export const InputTypes = [
-  { value: 'password', label: '密码输入框' },
-  { value: 'money', label: '金额输入框' },
-  { value: 'textarea', label: '文本域' },
-  { value: 'date', label: '日期' },
-  { value: 'dateTime', label: '日期时间' },
-  { value: 'dateWeek', label: '周' },
-  { value: 'dateMonth', label: '月' },
-  { value: 'dateQuarter', label: '季度输入' },
-  { value: 'dateYear', label: '年份输入' },
-  { value: 'dateRange', label: '日期区间' },
-  { value: 'dateTimeRange', label: '日期时间区间' },
-  { value: 'time', label: '时间' },
-  { value: 'timeRange', label: '时间区间' },
-  { value: 'text', label: '文本框' },
-  { label: '下拉框', value: 'select' },
-  { label: '树形下拉框', value: 'treeSelect' },
-  { label: '多选框', value: 'checkbox' },
-  { label: '星级组件', value: 'rate' },
-  { label: '单选框', value: 'radio' },
-  { label: '按钮单选框', value: 'radioButton' },
-  { label: '进度条', value: 'progress' },
-  { label: '百分比组件', value: 'percent' },
-  { label: '数字输入框', value: 'digit' },
-  { label: '秒格式化', value: 'second' },
-  { label: '头像', value: 'avatar' },
-  { label: '代码框', value: 'code' },
-  { label: '开关', value: 'switch' },
-  { label: '相对于当前时间', value: 'fromNow' },
-  { label: '图片', value: 'image' },
-  { label: '代码框，但是带了 json 格式化', value: 'jsonCode' },
-  { label: '颜色选择器', value: 'color' },
-  { label: '级联选择器', value: 'cascader' },
-  { label: '分段器', value: 'segmented' },
-  { label: '分组', value: 'group' },
-  { label: '表单列表', value: 'formList' },
-  { label: '表单集合', value: 'formSet' },
-  { label: '分割线', value: 'divider' },
-  { label: '依赖项', value: 'dependency' },
-];
-
 /** 获取当前的用户 GET /api/currentUser */
 export async function currentUser(options?: { [key: string]: any }) {
   return request<{