ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: improve code

Browse Source
This commit is contained in:
chenos 2021-08-26 22:17:49 +08:00
parent 0ef730d7e4
commit 5aad2bae76
7 changed files with 128 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/client/src/components/schema-renderer/index.tsx
View File

@ -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,
},

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

@ -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',
},

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

@ -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',

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

@ -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',

17
packages/client/src/schemas/select/index.tsx
View File

@ -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 (
<>
@ -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>
);
})}

104
packages/client/src/schemas/table/index.tsx
View File

@ -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,7 +1823,13 @@ 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 (
<div className={`field-interface-${collectionField?.interface}`}>
<RecursionField
schema={
!collectionField
@ -1859,7 +1838,7 @@ Table.Cell = observer((props: any) => {
type: 'void',
properties: {
[collectionField.name]: {
...collectionField.uiSchema,
...uiSchema,
title: undefined,
'x-read-pretty': true,
'x-decorator-props': {
@ -1873,6 +1852,7 @@ Table.Cell = observer((props: any) => {
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,

6
packages/client/src/schemas/table/style.less
View File

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