feat: improve code
This commit is contained in:
parent
1ab7d544b3
commit
85c052ba59
@ -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) {
|
||||||
|
@ -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) => {
|
||||||
|
@ -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',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
}
|
}
|
||||||
|
93
packages/client/src/schemas/table/SimpleDesignableBar.tsx
Normal file
93
packages/client/src/schemas/table/SimpleDesignableBar.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
});
|
@ -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;
|
Loading…
Reference in New Issue
Block a user