feat: improve code

packages/client/src/components/schema-renderer/index.tsx

@@ -93,7 +93,10 @@ export const useAsyncDataSource = (service: any) => (field: any) => {
   );
 };
 
-export const loadChinaRegionDataSource = async (field) => {
+export const loadChinaRegionDataSource = async (field: ArrayField) => {
+  if (field.readPretty) {
+    return [];
+  }
   const maxLevel = field.componentProps.maxLevel || 3;
   const resource = Resource.make('china_regions');
   const { data } = await resource.list({
@@ -141,6 +144,11 @@ export const loadChinaRegionData = (
     });
 };
 
+const useChinaRegionFieldValue = (field: ArrayField) => {
+  field.value = field?.value?.sort((a, b) => a.level - b.level);
+  console.log('useChinaRegionFieldValue', field.value);
+}
+
 export const SchemaField = createSchemaField({
   scope: {
     Table,
@@ -148,6 +156,7 @@ export const SchemaField = createSchemaField({
     Kanban,
     useAsyncDataSource,
     ChinaRegion: {
+      useFieldValue: useChinaRegionFieldValue,
       loadData: loadChinaRegionData,
       loadDataSource: loadChinaRegionDataSource,
     },

packages/client/src/schemas/database-field/interfaces/chinaRegion.ts

@@ -27,7 +27,10 @@ export const chinaRegion: FieldOptions = {
           children: 'children',
         },
       },
-      'x-reactions': ['{{useAsyncDataSource(ChinaRegion.loadDataSource)}}'],
+      'x-reactions': [
+        '{{ChinaRegion.useFieldValue}}',
+        '{{useAsyncDataSource(ChinaRegion.loadDataSource)}}',
+      ],
       'x-decorator': 'FormItem',
       'x-designable-bar': 'Cascader.DesignableBar',
     },

packages/client/src/schemas/database-field/interfaces/createdBy.ts

@@ -17,7 +17,12 @@ export const createdBy: FieldOptions = {
       type: 'object',
       title: '创建人',
       'x-component': 'Select.Drawer',
-      'x-component-props': {},
+      'x-component-props': {
+        fieldNames: {
+          value: 'id',
+          label: 'nickname',
+        },
+      },
       'x-decorator': 'FormItem',
       'x-read-pretty': true,
       'x-designable-bar': 'Select.Drawer.DesignableBar',

packages/client/src/schemas/database-field/interfaces/updatedBy.ts

@@ -16,7 +16,12 @@ export const updatedBy: FieldOptions = {
       type: 'object',
       title: '最后修改人',
       'x-component': 'Select.Drawer',
-      'x-component-props': {},
+      'x-component-props': {
+        fieldNames: {
+          value: 'id',
+          label: 'nickname',
+        },
+      },
       'x-decorator': 'FormItem',
       'x-read-pretty': true,
       'x-designable-bar': 'Select.Drawer.DesignableBar',

packages/client/src/schemas/select/index.tsx

@@ -198,7 +198,11 @@ Select.Object = connect(
   ),
   mapReadPretty(
     observer((props: any) => {
-      const { value, fieldNames = { label: 'label', color: 'color' }, ...others } = props;
+      const {
+        value,
+        fieldNames = { label: 'label', color: 'color' },
+        ...others
+      } = props;
       if (!value) {
         return null;
       }
@@ -286,9 +290,9 @@ Select.Drawer = connect(
       }
     };
 
-    const selectedKeys = toArr(optionValue).map(item => item.value);
+    const selectedKeys = toArr(optionValue).map((item) => item.value);
 
-    console.log({ selectedKeys })
+    console.log({ selectedKeys });
 
     return (
       <>
@@ -320,22 +324,22 @@ Select.Drawer = connect(
           destroyOnClose
         >
           {/* <SelectedRowKeysContext.Provider value={selectedKeys}> */}
-            <SelectContext.Provider
+          <SelectContext.Provider
-              value={{
+            value={{
-                onChange(selectValue) {
+              onChange(selectValue) {
-                  onFieldChange(selectValue);
+                onFieldChange(selectValue);
-                  setVisible(false);
+                setVisible(false);
-                },
+              },
+            }}
+          >
+            <RecursionField
+              onlyRenderProperties
+              schema={schema}
+              filterProperties={(s) => {
+                return s['x-component'] === 'Select.Options';
               }}
-            >
+            />
-              <RecursionField
+          </SelectContext.Provider>
-                onlyRenderProperties
-                schema={schema}
-                filterProperties={(s) => {
-                  return s['x-component'] === 'Select.Options';
-                }}
-              />
-            </SelectContext.Provider>
           {/* </SelectedRowKeysContext.Provider> */}
         </Drawer>
       </>
@@ -365,7 +369,7 @@ Select.Drawer = connect(
       const { fieldNames = { label: 'label' }, ...others } = props;
       const value = field.value || field.initialValue;
       const schema = useFieldSchema();
-      console.log({ field, value });
+      console.log({ fieldNames, field, value });
       if (!value) {
         return null;
       }
@@ -375,13 +379,14 @@ Select.Drawer = connect(
           {values.map((data, index) => {
             return (
               <OptionTagContext.Provider value={{ index, data, fieldNames }}>
-                <RecursionField
+                {data[fieldNames.label]}
+                {/* <RecursionField
                   schema={schema}
                   onlyRenderProperties
                   filterProperties={(s) => {
                     return s['x-component'] === 'Select.OptionTag';
                   }}
-                />
+                /> */}
               </OptionTagContext.Provider>
             );
           })}

packages/client/src/schemas/table/index.tsx

@@ -7,7 +7,7 @@ import {
   useForm,
 } from '@formily/react';
 import { Modal, Pagination, Popover, Table as AntdTable } from 'antd';
-import { cloneDeep, findIndex, forIn, range, set } from 'lodash';
+import { cloneDeep, cloneDeepWith, findIndex, forIn, range, set } from 'lodash';
 import React, { Fragment, useEffect, useState } from 'react';
 import { useContext } from 'react';
 import { createContext } from 'react';
@@ -310,54 +310,26 @@ export function isColumnComponent(component: string) {
   return ['Table.Operation', 'Table.Column'].includes(component);
 }
 
-const useTableOperation = () => {
+const useCollectionFields = (schema: Schema) => {
-  const {
+  const columns = schema.reduceProperties((columns, current) => {
-    field,
+    if (isColumn(current)) {
-    schema,
+      if (current['x-hidden']) {
-    props: { rowKey },
+        return columns;
-  } = useTable();
-  const findActionDropdown = (schema: Schema) => {
-    return schema.reduceProperties((s, current) => {
-      if (current['x-component'] === 'Action.Dropdown') {
-        return current;
       }
-      const action = findActionDropdown(current);
+      if (current['x-display'] && current['x-display'] !== 'visible') {
-      if (action) {
+        return columns;
-        return action;
       }
-      return s;
+      return [...columns, current];
-    }, new Schema({}));
-  };
-  const operationSchema = schema.reduceProperties((s, current) => {
-    if (isOperationColumn(current)) {
-      return current;
     }
-    return s;
+    return [...columns];
-  }, new Schema({}));
+  }, []);
-  const dropdownSchema = findActionDropdown(operationSchema);
+
-  const columnProps = operationSchema?.['x-component-props'] || {};
+  return columns
-  return {
+    .map((column) => {
-    title: <Table.Operation path={getSchemaPath(dropdownSchema)} />,
+      const columnProps = column['x-component-props'] || {};
-    dataIndex: 'operation',
+      return columnProps.fieldName;
-    ...columnProps,
+    })
-    render: (_: any, record: any) => {
+    .filter(Boolean);
-      const index = findIndex(
-        field.value,
-        (item) => item[rowKey] === record[rowKey],
-      );
-      return (
-        <div className={'nb-table-column'}>
-          <TableRowContext.Provider value={{ index, record }}>
-            <RecursionField
-              schema={operationSchema}
-              name={index}
-              onlyRenderProperties
-            />
-          </TableRowContext.Provider>
-        </div>
-      );
-    },
-  };
 };
 
 const useTableColumns = () => {
@@ -370,8 +342,6 @@ const useTableColumns = () => {
 
   const { getField } = useCollectionContext();
 
-  // const operation = useTableOperation();
-
   const columnSchemas = schema.reduceProperties((columns, current) => {
     if (isColumn(current)) {
       if (current['x-hidden']) {
@@ -723,6 +693,8 @@ const TableProvider = (props: any) => {
   const { resource } = useResource();
   const { sortableField } = useCollectionContext();
   const dragSort = props.dragSort;
+  const collectionFields = useCollectionFields(schema);
+  console.log({ collectionFields });
   const getDefaultParams = () => {
     const defaultParams = { ...pagination };
     if (dragSort) {
@@ -730,9 +702,10 @@ const TableProvider = (props: any) => {
     } else {
       defaultParams['sort'] = (props.defaultSort || []).join(',');
     }
-    if (props.defaultAppends) {
+    defaultParams['defaultAppends'] = [
-      defaultParams['defaultAppends'] = props.defaultAppends;
+      ...(props.defaultAppends || []),
-    }
+      ...collectionFields,
+    ];
     if (props.defaultFilter) {
       defaultParams['defaultFilter'] = props.defaultFilter;
     }
@@ -1850,29 +1823,36 @@ Table.Cell = observer((props: any) => {
   if (schema['x-component'] === 'Table.Operation') {
     return <Table.Operation.Cell {...props} />;
   }
+  let uiSchema = collectionField?.uiSchema as Schema;
+  if (uiSchema?.['x-component'] === 'Upload.Attachment') {
+    uiSchema = cloneDeepWith(uiSchema);
+    set(uiSchema, 'x-component-props.size', 'small');
+  }
   return (
-    <RecursionField
+    <div className={`field-interface-${collectionField?.interface}`}>
-      schema={
+      <RecursionField
-        !collectionField
+        schema={
-          ? schema
+          !collectionField
-          : new Schema({
+            ? schema
-              type: 'void',
+            : new Schema({
-              properties: {
+                type: 'void',
-                [collectionField.name]: {
+                properties: {
-                  ...collectionField.uiSchema,
+                  [collectionField.name]: {
-                  title: undefined,
+                    ...uiSchema,
-                  'x-read-pretty': true,
+                    title: undefined,
-                  'x-decorator-props': {
+                    'x-read-pretty': true,
-                    feedbackLayout: 'popover',
+                    'x-decorator-props': {
+                      feedbackLayout: 'popover',
+                    },
+                    'x-decorator': 'FormilyFormItem',
                   },
-                  'x-decorator': 'FormilyFormItem',
                 },
-              },
+              })
-            })
+        }
-      }
+        name={ctx.index}
-      name={ctx.index}
+        onlyRenderProperties
-      onlyRenderProperties
+      />
-    />
+    </div>
   );
 });
 
@@ -2279,14 +2259,32 @@ Table.useResource = ({ onSuccess, manual = true }) => {
     resourceName: collection?.name || props.collectionName,
     resourceKey: ctx.record[props.rowKey],
   });
+  const { schema } = useDesignable();
+  const fieldFields = (schema: Schema) => {
+    const names = [];
+    schema.reduceProperties((buf, current) => {
+      if (current['x-component'] === 'Form.Field') {
+        const fieldName = current['x-component-props']?.['fieldName'];
+        if (fieldName) {
+          buf.push(fieldName);
+        }
+      } else {
+        const fieldNames = fieldFields(current);
+        buf.push(...fieldNames);
+      }
+      return buf;
+    }, names);
+    return names;
+  };
   console.log(
     'collection?.name || props.collectionName',
     collection?.name || props.collectionName,
+    // fieldFields(schema),
   );
   const service = useRequest(
     (params?: any) => {
       console.log('Table.useResource', params);
-      return resource.get(params);
+      return resource.get({ ...params, appends: fieldFields(schema) });
     },
     {
       formatResult: (result) => result?.data,

packages/client/src/schemas/table/style.less

@@ -231,3 +231,9 @@ td.nb-table-operation {
   align-items: center;
   justify-content: space-between;
 }
+
+
+.field-interface-attachment {
+  margin-top: -13px;
+  margin-bottom: -13px;
+}