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