feat: improve code

This commit is contained in:
chenos 2021-08-08 12:06:33 +08:00
parent 1ab7d544b3
commit 85c052ba59
6 changed files with 219 additions and 32 deletions

View File

@ -63,7 +63,9 @@ export class Resource {
if (!resourceKey) { if (!resourceKey) {
return Promise.resolve({ data: {} }); return Promise.resolve({ data: {} });
} }
return request(`${resourceName}:get/${resourceKey}`); return request(`${resourceName}:get/${resourceKey}`, {
params: options,
});
} }
create(values: any) { create(values: any) {

View File

@ -109,14 +109,14 @@ Action.Modal = observer((props: any) => {
const { run: runCancel } = useCancelAction(); const { run: runCancel } = useCancelAction();
const isFormDecorator = schema['x-decorator'] === 'Form'; const isFormDecorator = schema['x-decorator'] === 'Form';
const field = useField(); const field = useField();
console.log('Action.Modal.field', field); console.log('Action.Modal.field', schema['x-read-pretty']);
return ( return (
<Modal <Modal
title={schema.title} title={schema.title}
destroyOnClose destroyOnClose
maskClosable maskClosable
footer={ footer={
isFormDecorator isFormDecorator && !schema['x-read-pretty']
? [ ? [
<Button <Button
onClick={async () => { onClick={async () => {
@ -171,6 +171,7 @@ Action.Drawer = observer((props: any) => {
const { run: runOk } = useOkAction(); const { run: runOk } = useOkAction();
const { run: runCancel } = useCancelAction(); const { run: runCancel } = useCancelAction();
const isFormDecorator = schema['x-decorator'] === 'Form'; const isFormDecorator = schema['x-decorator'] === 'Form';
console.log('Action.Modal.field', schema['x-read-pretty']);
return ( return (
<Drawer <Drawer
width={'50%'} width={'50%'}
@ -178,7 +179,8 @@ Action.Drawer = observer((props: any) => {
maskClosable maskClosable
destroyOnClose destroyOnClose
footer={ footer={
isFormDecorator && ( isFormDecorator &&
!schema['x-read-pretty'] && (
<Space style={{ float: 'right' }}> <Space style={{ float: 'right' }}>
<Button <Button
onClick={async (e) => { onClick={async (e) => {

View File

@ -389,6 +389,7 @@ function generateCardItemSchema(component) {
name: 'table', name: 'table',
'x-decorator': 'CardItem', 'x-decorator': 'CardItem',
'x-component': 'Table', 'x-component': 'Table',
'x-designable-bar': 'Table.SimpleDesignableBar',
default: [], default: [],
'x-component-props': { 'x-component-props': {
useResource: '{{ Table.useActionLogsResource }}', useResource: '{{ Table.useActionLogsResource }}',
@ -452,32 +453,86 @@ function generateCardItemSchema(component) {
[uid()]: { [uid()]: {
type: 'void', type: 'void',
title: '查看', title: '查看',
'x-read-pretty': true,
'x-decorator': 'Form',
'x-decorator-props': {
useResource: '{{ Table.useActionLogDetailsResource }}',
},
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
'x-component-props': { 'x-component-props': {
bodyStyle: { // bodyStyle: {
background: '#f0f2f5', // background: '#f0f2f5',
// paddingTop: 0, // // paddingTop: 0,
}, // },
}, },
properties: { properties: {
[uid()]: { created_at: {
type: 'void', type: 'string',
'x-component': 'Tabs', title: '创建时间',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-read-pretty': true,
'x-component-props': { 'x-component-props': {
singleton: true, format: 'YYYY-MM-DD HH:mm:ss',
}, },
properties: { },
[uid()]: { type: {
type: 'void', type: 'string',
title: '详情', title: '操作类型',
'x-component': 'Tabs.TabPane', 'x-decorator': 'FormItem',
'x-component-props': {}, 'x-component': 'Select',
properties: { 'x-read-pretty': true,
[uid()]: { enum: [
type: 'void', { label: '新增数据', value: 'create' },
'x-component': 'Grid', { label: '更新数据', value: 'update' },
{ label: '删除数据', value: 'destroy' },
],
},
changes: {
type: 'array',
title: '数据变动',
'x-decorator': 'FormItem',
'x-component': 'ArrayTable',
'x-component-props': { 'x-component-props': {
// addNewComponent: 'AddNew.PaneItem', pagination: false,
// scroll: { x: '100%' },
},
items: {
type: 'object',
properties: {
column1: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { title: '字段名称' },
properties: {
'field.uiSchema.title': {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
column3: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { title: '操作前' },
properties: {
before: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Values',
},
},
},
column4: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { title: '操作后' },
properties: {
after: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Values',
}, },
}, },
}, },

View File

@ -59,15 +59,15 @@ export const DesignableBar = observer((props) => {
}} }}
overlay={ overlay={
<Menu> <Menu>
<Menu.Item {/* <Menu.Item
key={'update'} key={'update'}
onClick={() => { onClick={() => {
field.readPretty = true; field.readPretty = true;
}} }}
> >
</Menu.Item> </Menu.Item> */}
<Menu.Divider /> {/* <Menu.Divider /> */}
<Menu.Item <Menu.Item
key={'delete'} key={'delete'}
onClick={async () => { onClick={async () => {
@ -79,7 +79,7 @@ export const DesignableBar = observer((props) => {
} }
}} }}
> >
</Menu.Item> </Menu.Item>
</Menu> </Menu>
} }

View File

@ -0,0 +1,93 @@
import React, { useContext, useMemo, useRef, useState } from 'react';
import { createForm } from '@formily/core';
import {
SchemaOptionsContext,
Schema,
useFieldSchema,
observer,
SchemaExpressionScopeContext,
FormProvider,
ISchema,
useField,
useForm,
RecursionField,
} from '@formily/react';
import {
useSchemaPath,
SchemaField,
useDesignable,
removeSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormLayout } from '@formily/antd';
import './style.less';
import AddNew from '../add-new';
import { DraggableBlockContext } from '../../components/drag-and-drop';
import { isGridRowOrCol } from '../grid';
import constate from 'constate';
import { useEffect } from 'react';
import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer';
export const SimpleDesignableBar = observer((props) => {
const field = useField();
const { designable, schema, refresh, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
if (!designable) {
return null;
}
return (
<div className={cls('designable-bar', { active: visible })}>
<span
onClick={(e) => {
e.stopPropagation();
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space size={'small'}>
<AddNew.CardItem defaultAction={'insertAfter'} ghost />
{dragRef && <DragOutlined ref={dragRef} />}
<Dropdown
trigger={['click']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
{/* <Menu.Item
key={'update'}
onClick={() => {
field.readPretty = true;
}}
>
</Menu.Item> */}
{/* <Menu.Divider /> */}
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
}}
>
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
});

View File

@ -72,6 +72,7 @@ import flatten from 'flat';
import IconPicker from '../../components/icon-picker'; import IconPicker from '../../components/icon-picker';
import { DescriptionsContext } from '../form'; import { DescriptionsContext } from '../form';
import { VisibleContext } from '../../context'; import { VisibleContext } from '../../context';
import { SimpleDesignableBar } from './SimpleDesignableBar';
export interface ITableContext { export interface ITableContext {
props: any; props: any;
@ -361,7 +362,7 @@ const useTableColumns = () => {
}), }),
); );
if (designable && schema['x-designable-bar']) { if (designable && schema['x-designable-bar'] !== 'Table.SimpleDesignableBar') {
columns.push({ columns.push({
title: <AddColumn />, title: <AddColumn />,
dataIndex: 'addnew', dataIndex: 'addnew',
@ -1386,7 +1387,6 @@ Table.Filter.DesignableBar = () => {
Table.Operation = observer((props: any) => { Table.Operation = observer((props: any) => {
const { designable, schema } = useDesignable(); const { designable, schema } = useDesignable();
const [visible, setVisible] = useState(false);
return ( return (
<div className={'nb-table-column'}> <div className={'nb-table-column'}>
@ -1410,6 +1410,9 @@ Table.Operation.Cell = observer((props: any) => {
Table.Operation.DesignableBar = (props) => { Table.Operation.DesignableBar = (props) => {
const { schema, remove, refresh, appendChild } = useDesignable(props.path); const { schema, remove, refresh, appendChild } = useDesignable(props.path);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
if (!schema['x-designable-bar']) {
return null;
}
const map = new Map(); const map = new Map();
schema.mapProperties((s) => { schema.mapProperties((s) => {
if (!s['x-action-type']) { if (!s['x-action-type']) {
@ -2015,25 +2018,56 @@ Table.DesignableBar = observer((props) => {
); );
}); });
Table.useResource = ({ onSuccess }) => { Table.useResource = ({ onSuccess, manual = true }) => {
const { props } = useTable(); const { props } = useTable();
const { collection } = useCollectionContext(); const { collection } = useCollectionContext();
const ctx = useContext(TableRowContext); const ctx = useContext(TableRowContext);
const resource = Resource.make({ const resource = Resource.make({
resourceName: collection.name, resourceName: collection?.name || props.collectionName,
resourceKey: ctx.record[props.rowKey], resourceKey: ctx.record[props.rowKey],
}); });
console.log('collection?.name || props.collectionName', collection?.name || props.collectionName)
const service = useRequest( const service = useRequest(
(params?: any) => { (params?: any) => {
console.log('Table.useResource', params); console.log('Table.useResource', params);
return resource.get(params); return resource.get(params);
}, },
{
formatResult: (result) => result?.data,
onSuccess,
manual,
},
);
return { resource, service, initialValues: service.data, ...service };
};
Table.useActionLogDetailsResource = ({ onSuccess }) => {
const { props } = useTable();
const { collection } = useCollectionContext();
const ctx = useContext(TableRowContext);
const resource = Resource.make({
resourceName: 'action_logs',
resourceKey: ctx.record[props.rowKey],
});
const service = useRequest(
(params?: any) => {
console.log('Table.useResource', params);
return resource.get({...params, 'fields[appends]': 'changes'});
},
{ {
formatResult: (result) => result?.data, formatResult: (result) => result?.data,
onSuccess, onSuccess,
manual: true, manual: true,
}, },
); );
const [visible] = useContext(VisibleContext);
useEffect(() => {
if (visible) {
service.run({});
}
}, [visible]);
return { resource, service, initialValues: service.data, ...service }; return { resource, service, initialValues: service.data, ...service };
}; };
@ -2051,3 +2085,4 @@ Table.useTableUpdateAction = useTableUpdateAction;
Table.useTableDestroyAction = useTableDestroyAction; Table.useTableDestroyAction = useTableDestroyAction;
Table.useTableIndex = useTableIndex; Table.useTableIndex = useTableIndex;
Table.useTableRowRecord = useTableRowRecord; Table.useTableRowRecord = useTableRowRecord;
Table.SimpleDesignableBar = SimpleDesignableBar;