From 99635025a8ea18de247eeab73317cb3c4690d992 Mon Sep 17 00:00:00 2001 From: chenos Date: Mon, 23 Aug 2021 09:51:19 +0800 Subject: [PATCH] feat: improve code --- .../src/schemas/form/Field.DesignableBar.tsx | 4 +- packages/client/src/schemas/form/index.tsx | 2 +- .../src/schemas/kanban/CardDesignableBar.tsx | 5 +- .../src/schemas/kanban/DesignableBar.tsx | 46 +++++- .../src/schemas/kanban/FieldDesignableBar.tsx | 151 ++++++++++++++++++ packages/client/src/schemas/kanban/index.tsx | 83 +++++++++- 6 files changed, 278 insertions(+), 13 deletions(-) create mode 100644 packages/client/src/schemas/kanban/FieldDesignableBar.tsx diff --git a/packages/client/src/schemas/form/Field.DesignableBar.tsx b/packages/client/src/schemas/form/Field.DesignableBar.tsx index f90b0d403..a17a3451f 100644 --- a/packages/client/src/schemas/form/Field.DesignableBar.tsx +++ b/packages/client/src/schemas/form/Field.DesignableBar.tsx @@ -183,9 +183,7 @@ export const FieldDesignableBar = observer((props) => { console.log({ schema, removed, fieldName }); const last = removed.pop(); displayed.remove(fieldName); - if (isGridRowOrCol(last)) { - await removeSchema(last); - } + await removeSchema(last); }} > 移除 diff --git a/packages/client/src/schemas/form/index.tsx b/packages/client/src/schemas/form/index.tsx index bfe605a65..e8ee260b5 100644 --- a/packages/client/src/schemas/form/index.tsx +++ b/packages/client/src/schemas/form/index.tsx @@ -205,7 +205,7 @@ Form.Field = observer((props: any) => { Form.Field.Item = observer((props) => { return ( - {props.children} + {props.children} ); }); diff --git a/packages/client/src/schemas/kanban/CardDesignableBar.tsx b/packages/client/src/schemas/kanban/CardDesignableBar.tsx index 97197813c..0652c73ae 100644 --- a/packages/client/src/schemas/kanban/CardDesignableBar.tsx +++ b/packages/client/src/schemas/kanban/CardDesignableBar.tsx @@ -91,7 +91,10 @@ export const CardDesignableBar = observer((props) => { name: uid(), type: 'void', 'x-decorator': 'Form.Field.Item', - // 'x-designable-bar': 'Form.Field.DesignableBar', + 'x-decorator-props': { + draggable: false, + }, + 'x-designable-bar': 'Kanban.FieldDesignableBar', 'x-component': 'Form.Field', 'x-component-props': { fieldName: field.name, diff --git a/packages/client/src/schemas/kanban/DesignableBar.tsx b/packages/client/src/schemas/kanban/DesignableBar.tsx index 6bfe3a400..9229d490d 100644 --- a/packages/client/src/schemas/kanban/DesignableBar.tsx +++ b/packages/client/src/schemas/kanban/DesignableBar.tsx @@ -12,12 +12,12 @@ import { useForm, RecursionField, } from '@formily/react'; -import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../'; +import { useSchemaPath, SchemaField, useDesignable, removeSchema, updateSchema } 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 { FormDialog, FormLayout } from '@formily/antd'; import './style.less'; import AddNew from '../add-new'; import { DraggableBlockContext } from '../../components/drag-and-drop'; @@ -29,6 +29,7 @@ import { getSchemaPath } from '../../components/schema-renderer'; import { useCollection, useCollectionContext } from '../../constate'; import { useTable } from '../table'; import { DragHandle } from '../../components/Sortable'; +import { fieldsToFilterColumns } from '../calendar'; export const DesignableBar = observer((props) => { const field = useField(); @@ -37,7 +38,7 @@ export const DesignableBar = observer((props) => { const { dragRef } = useContext(DraggableBlockContext); const { props: tableProps } = useTable(); const collectionName = field.componentProps?.collectionName || tableProps?.collectionName; - const { collection } = useCollection({ collectionName }); + const { collection, fields } = useCollection({ collectionName }); return (
{collection?.title || collection?.name}
@@ -66,7 +67,44 @@ export const DesignableBar = observer((props) => { > 编辑表单配置 */} - {/* */} + { + const { defaultFilter } = await FormDialog( + '设置筛选范围', + () => { + return ( + + + + ); + }, + ).open({ + initialValues: { + defaultFilter: + field?.componentProps?.defaultFilter || {}, + }, + }); + schema['x-component-props']['defaultFilter'] = + defaultFilter; + field.componentProps.defaultFilter = defaultFilter; + await updateSchema(schema); + }} + > + 设置筛选范围 + + { diff --git a/packages/client/src/schemas/kanban/FieldDesignableBar.tsx b/packages/client/src/schemas/kanban/FieldDesignableBar.tsx new file mode 100644 index 000000000..c6306ef8d --- /dev/null +++ b/packages/client/src/schemas/kanban/FieldDesignableBar.tsx @@ -0,0 +1,151 @@ +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, + updateSchema, +} from '../'; +import get from 'lodash/get'; +import { Button, Dropdown, Menu, Space, Switch } from 'antd'; +import { MenuOutlined, DragOutlined } from '@ant-design/icons'; +import cls from 'classnames'; +import { FormDialog, 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'; +import { RandomNameContext } from '../form'; +import { useCollectionContext, useDisplayedMapContext } from '../../constate'; +import SwitchMenuItem from '../../components/SwitchMenuItem'; +import { DragHandle } from '../../components/Sortable'; + +export const FieldDesignableBar = observer((props) => { + const field = useField(); + const { schema, deepRemove } = useDesignable(); + const [visible, setVisible] = useState(false); + const { dragRef } = useContext(DraggableBlockContext); + const randomName = useContext(RandomNameContext); + const displayed = useDisplayedMapContext(); + const fieldName = schema['x-component-props']?.['fieldName']; + const { getField } = useCollectionContext(); + + const collectionField = getField(fieldName); + + console.log({ collectionField }); + + const realField = field + .query(field.address.concat(randomName, fieldName)) + .take(); + + return ( +
+ { + e.stopPropagation(); + }} + className={cls('designable-bar-actions', { active: visible })} + > + + {/* + */} + { + setVisible(visible); + }} + overlay={ + + { + const values = await FormDialog('修改字段名称', () => { + return ( + + + + ); + }).open({ + initialValues: { + fieldName: collectionField?.uiSchema?.title, + title: schema['title'], + }, + }); + const title = values.title || null; + field + .query(field.address.concat(randomName, fieldName)) + .take((f) => { + f.title = title || collectionField?.uiSchema?.title; + }); + schema['title'] = title; + await updateSchema({ + key: schema['key'], + title, + }); + }} + > + 修改字段名称 + + + { + const removed = deepRemove(); + const fieldName = + schema['x-component-props']?.['fieldName']; + console.log({ schema, removed, fieldName }); + const last = removed.pop(); + displayed.remove(fieldName); + await removeSchema(last); + }} + > + 移除 + + + } + > + + + + +
+ ); +}); diff --git a/packages/client/src/schemas/kanban/index.tsx b/packages/client/src/schemas/kanban/index.tsx index 3d634fea2..357d2799e 100644 --- a/packages/client/src/schemas/kanban/index.tsx +++ b/packages/client/src/schemas/kanban/index.tsx @@ -21,7 +21,7 @@ import { } from '@formily/react'; import { Card, Spin, Tag } from 'antd'; import { groupBy } from 'lodash'; -import React, { createContext, useContext, useRef } from 'react'; +import React, { createContext, useContext, useEffect, useRef } from 'react'; import { useState } from 'react'; import { CSS } from '@dnd-kit/utilities'; import cls from 'classnames'; @@ -34,6 +34,8 @@ import { CardDesignableBar } from './CardDesignableBar'; import { VisibleContext } from '../../context'; import { DesignableBar } from './DesignableBar'; import { useDesignable } from '../../components/schema-renderer'; +import { Form } from '../form'; +import { FieldDesignableBar } from './FieldDesignableBar'; function Droppable(props) { const { id, data, ...others } = props; @@ -169,6 +171,7 @@ const InternalKanban = observer((props: any) => { return resource.list({ ...params, perPage: -1, + sort: 'sort', }); }, { @@ -176,10 +179,15 @@ const InternalKanban = observer((props: any) => { onSuccess(data) { field.setValue(data); }, - // manual: true, + manual: true, // refreshDeps: [props.fieldNames], }, ); + useEffect(() => { + service.run({ + defaultFilter: props?.defaultFilter, + }); + }, [props.defaultFilter]); const { schema } = useDesignable(); const [schemas, setSchemas] = useState(() => { const schemas = new Map(); @@ -198,6 +206,8 @@ const InternalKanban = observer((props: any) => { return schemas; }); const addNewCardSchema = schemas.get('Kanban.Card.AddNew'); + const [dragOverlayContent, setDragOverlayContent] = useState(''); + const [lastId, setLastId] = useState(null); console.log('field.value', schemas); return ( { > { + const el = event?.active?.data?.current?.nodeRef + ?.current as HTMLElement; + setDragOverlayContent(el?.outerHTML); + }} onDragMove={({ active, over }) => { const overId = over?.id; const activeId = active?.id; @@ -223,6 +238,7 @@ const InternalKanban = observer((props: any) => { const len = groups?.[overId]?.length; if (len > 0) { const last = groups?.[overId]?.[len - 1]; + setLastId(last.id); const activeIndex = field.value.findIndex( (item) => item.id === activeId, ); @@ -252,13 +268,33 @@ const InternalKanban = observer((props: any) => { } } }} - onDragEnd={({ active, over }) => { + onDragEnd={async ({ active, over }) => { + console.log('onDragEnd', { lastId, active, over }); const overId = over?.id; const activeId = active?.id; if (!overId || !activeId) { return; } if (overId === activeId) { + const overColumnId = over?.data?.current?.columnId; + await resource.save( + { + [groupField.name]: overColumnId, + }, + { + resourceKey: activeId, + }, + ); + await resource.sort({ + resourceKey: activeId, + field: 'sort', + target: lastId + ? { + id: lastId, + } + : {}, + }); + setLastId(null); return; } const overType = over?.data?.current?.type; @@ -278,11 +314,49 @@ const InternalKanban = observer((props: any) => { (item) => item.id === overId, ); field.move(activeIndex, overIndex); + await resource.save( + { + [groupField.name]: overColumnId, + }, + { + resourceKey: activeId, + }, + ); + await resource.sort({ + resourceKey: activeId, + field: 'sort', + target: { + id: overId, + }, + }); + } else { + await resource.save( + { + [groupField.name]: overId, + }, + { + resourceKey: activeId, + }, + ); + await resource.sort({ + resourceKey: activeId, + field: 'sort', + target: lastId + ? { + id: lastId, + } + : {}, + }); + setLastId(null); } }} > -
aaa
+ {/*
aaa
*/} +