From 5aad2bae76e1555df380890e9eeaf41b9a42ab90 Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 26 Aug 2021 22:17:49 +0800 Subject: [PATCH] feat: improve code --- .../src/components/schema-renderer/index.tsx | 11 +- .../database-field/interfaces/chinaRegion.ts | 5 +- .../database-field/interfaces/createdBy.ts | 7 +- .../database-field/interfaces/updatedBy.ts | 7 +- packages/client/src/schemas/select/index.tsx | 47 +++--- packages/client/src/schemas/table/index.tsx | 142 +++++++++--------- packages/client/src/schemas/table/style.less | 6 + 7 files changed, 128 insertions(+), 97 deletions(-) diff --git a/packages/client/src/components/schema-renderer/index.tsx b/packages/client/src/components/schema-renderer/index.tsx index 41143940c..5eb2fc796 100644 --- 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, }, diff --git a/packages/client/src/schemas/database-field/interfaces/chinaRegion.ts b/packages/client/src/schemas/database-field/interfaces/chinaRegion.ts index b9c8ef8f0..558f48795 100644 --- 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', }, diff --git a/packages/client/src/schemas/database-field/interfaces/createdBy.ts b/packages/client/src/schemas/database-field/interfaces/createdBy.ts index 0917510bb..b9355980b 100644 --- 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', diff --git a/packages/client/src/schemas/database-field/interfaces/updatedBy.ts b/packages/client/src/schemas/database-field/interfaces/updatedBy.ts index 9dfa463f2..d65db82b4 100644 --- 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', diff --git a/packages/client/src/schemas/select/index.tsx b/packages/client/src/schemas/select/index.tsx index 7ac83ed23..7c74908e3 100644 --- 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 > {/* */} - + { + return s['x-component'] === 'Select.Options'; }} - > - { - return s['x-component'] === 'Select.Options'; - }} - /> - + /> + {/* */} @@ -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 ( - { return s['x-component'] === 'Select.OptionTag'; }} - /> + /> */} ); })} diff --git a/packages/client/src/schemas/table/index.tsx b/packages/client/src/schemas/table/index.tsx index e6690b3ab..b9e9b481e 100644 --- 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: , - dataIndex: 'operation', - ...columnProps, - render: (_: any, record: any) => { - const index = findIndex( - field.value, - (item) => item[rowKey] === record[rowKey], - ); - return ( -
- - - -
- ); - }, - }; + 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 ; } + let uiSchema = collectionField?.uiSchema as Schema; + if (uiSchema?.['x-component'] === 'Upload.Attachment') { + uiSchema = cloneDeepWith(uiSchema); + set(uiSchema, 'x-component-props.size', 'small'); + } return ( - + + }) + } + name={ctx.index} + onlyRenderProperties + /> + ); }); @@ -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, diff --git a/packages/client/src/schemas/table/style.less b/packages/client/src/schemas/table/style.less index ef989e93e..918f9d7bc 100644 --- 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; +} \ No newline at end of file