feat: improve code

2021-08-26 22:17:49 +08:00 · 2021-08-26 22:17:49 +08:00 · 5aad2bae76
commit 5aad2bae76
parent 0ef730d7e4
7 changed files with 128 additions and 97 deletions
--- a/packages/client/src/components/schema-renderer/index.tsx
+++ b/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,
    },
--- a/packages/client/src/schemas/database-field/interfaces/chinaRegion.ts
+++ b/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',
    },
--- a/packages/client/src/schemas/database-field/interfaces/createdBy.ts
+++ b/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',
--- a/packages/client/src/schemas/database-field/interfaces/updatedBy.ts
+++ b/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',
--- a/packages/client/src/schemas/select/index.tsx
+++ b/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
-              value={{
-                onChange(selectValue) {
-                  onFieldChange(selectValue);
-                  setVisible(false);
-                },
+          <SelectContext.Provider
+            value={{
+              onChange(selectValue) {
+                onFieldChange(selectValue);
+                setVisible(false);
+              },
+            }}
+          >
+            <RecursionField
+              onlyRenderProperties
+              schema={schema}
+              filterProperties={(s) => {
+                return s['x-component'] === 'Select.Options';
              }}
-            >
-              <RecursionField
-                onlyRenderProperties
-                schema={schema}
-                filterProperties={(s) => {
-                  return s['x-component'] === 'Select.Options';
-                }}
-              />
-            </SelectContext.Provider>
+            />
+          </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>
            );
          })}
--- a/packages/client/src/schemas/table/index.tsx
+++ b/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 {
-    field,
-    schema,
-    props: { rowKey },
-  } = useTable();
-  const findActionDropdown = (schema: Schema) => {
-    return schema.reduceProperties((s, current) => {
-      if (current['x-component'] === 'Action.Dropdown') {
-        return current;
+const useCollectionFields = (schema: Schema) => {
+  const columns = schema.reduceProperties((columns, current) => {
+    if (isColumn(current)) {
+      if (current['x-hidden']) {
+        return columns;
      }
-      const action = findActionDropdown(current);
-      if (action) {
-        return action;
+      if (current['x-display'] && current['x-display'] !== 'visible') {
+        return columns;
      }
-      return s;
-    }, new Schema({}));
-  };
-  const operationSchema = schema.reduceProperties((s, current) => {
-    if (isOperationColumn(current)) {
-      return current;
+      return [...columns, current];
    }
-    return s;
-  }, new Schema({}));
-  const dropdownSchema = findActionDropdown(operationSchema);
-  const columnProps = operationSchema?.['x-component-props'] || {};
-  return {
-    title: <Table.Operation path={getSchemaPath(dropdownSchema)} />,
-    dataIndex: 'operation',
-    ...columnProps,
-    render: (_: any, record: any) => {
-      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>
-      );
-    },
-  };
+    return [...columns];
+  }, []);
+
+  return columns
+    .map((column) => {
+      const columnProps = column['x-component-props'] || {};
+      return columnProps.fieldName;
+    })
+    .filter(Boolean);
 };

 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'] = props.defaultAppends;
-    }
+    defaultParams['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
-      schema={
-        !collectionField
-          ? schema
-          : new Schema({
-              type: 'void',
-              properties: {
-                [collectionField.name]: {
-                  ...collectionField.uiSchema,
-                  title: undefined,
-                  'x-read-pretty': true,
-                  'x-decorator-props': {
-                    feedbackLayout: 'popover',
+    <div className={`field-interface-${collectionField?.interface}`}>
+      <RecursionField
+        schema={
+          !collectionField
+            ? schema
+            : new Schema({
+                type: 'void',
+                properties: {
+                  [collectionField.name]: {
+                    ...uiSchema,
+                    title: undefined,
+                    'x-read-pretty': true,
+                    'x-decorator-props': {
+                      feedbackLayout: 'popover',
+                    },
+                    'x-decorator': 'FormilyFormItem',
                  },
-                  'x-decorator': 'FormilyFormItem',
                },
-              },
-            })
-      }
-      name={ctx.index}
-      onlyRenderProperties
-    />
+              })
+        }
+        name={ctx.index}
+        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,
--- a/packages/client/src/schemas/table/style.less
+++ b/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;
+}