+
+
+ {/*
*/}
-
-
{
- const source = values.find((item) => item.id === active?.id);
- const target = values.find((item) => item.id === over?.id);
- if (source && target) {
- const fromIndex = values.findIndex(
- (item) => item.id === active?.id,
- );
- const toIndex = values.findIndex((item) => item.id === over?.id);
- // setValues((items) => {
- // const fromIndex = items.findIndex(
- // (item) => item.id === active?.id,
- // );
- // const toIndex = items.findIndex(
- // (item) => item.id === over?.id,
- // );
- // return arrayMove(items, fromIndex, toIndex);
- // });
- field.move(fromIndex, toIndex);
- }
- }}
- onDragOver={({ active, over }) => {
- if (!over) {
- return;
- }
- if (active?.id === over?.id) {
- return;
- }
- const source = values.find((item) => item.id === active?.id);
- if (source && over?.data?.current?.type === 'column') {
- source.type = over.id;
- return;
- }
- console.log('active.id', active.id, over?.data?.current);
- const target = values.find((item) => item.id === over?.id);
- if (source && target) {
- if (source.type !== target.type) {
- source.type = target.type;
- }
- }
- }}
- >
- aaa
+
+
+
{
+ const source = values.find((item) => item.id === active?.id);
+ const target = values.find((item) => item.id === over?.id);
+ if (source && target) {
+ const fromIndex = values.findIndex(
+ (item) => item.id === active?.id,
+ );
+ const toIndex = values.findIndex(
+ (item) => item.id === over?.id,
+ );
+ // setValues((items) => {
+ // const fromIndex = items.findIndex(
+ // (item) => item.id === active?.id,
+ // );
+ // const toIndex = items.findIndex(
+ // (item) => item.id === over?.id,
+ // );
+ // return arrayMove(items, fromIndex, toIndex);
+ // });
+ field.move(fromIndex, toIndex);
+ }
+ }}
+ onDragOver={({ active, over }) => {
+ if (!over) {
+ return;
+ }
+ if (active?.id === over?.id) {
+ return;
+ }
+ const source = values.find((item) => item.id === active?.id);
+ if (source && over?.data?.current?.type === 'column') {
+ source[groupName] = over.id;
+ return;
+ }
+ console.log('active.id', active.id, over?.data?.current);
+ const target = values.find((item) => item.id === over?.id);
+ if (source && target) {
+ if (source[groupName] !== target[groupName]) {
+ source[groupName] = target[groupName];
+ }
+ }
+ }}
+ >
+ aaa
-
- {columns.map((column) => (
- ({
+ ...column,
+ id: column.value,
+ })) || []
+ }
>
- {column.title}
-
- {column.items.map((item) => {
- const index = values.findIndex(
- (value) => value.id === item.id,
- );
- return (
- (
+
+
+
+ {column.label}
+
+
-
-
-
-
- );
- })}
-
- }
- onClick={() => {
- field.push({
- id: uid(),
- type: column.id,
- title: uid(),
- });
- }}
+ {column.items.map((item) => {
+ const index = values.findIndex(
+ (value) => value.id === item.id,
+ );
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+ {/* }
+ onClick={() => {
+ field.push({
+ id: uid(),
+ title: uid(),
+ [groupName]: column.value,
+ });
+ }}
+ >
+ 添加卡片
+ */}
+
+
+ ))}
+
- 添加卡片
-
-
- ))}
-
-
+ {/*
*/}
+ 添加列表
+
+
+
-
);
});
+export const Kanban: any = observer((props: any) => {
+ return (
+
+
+
+ );
+});
+
+Kanban.useCreateAction = () => {
+ const { service, resource, props } = useKanban();
+ const column = useContext(KanbanColumnContext);
+ const groupName = props.groupName;
+ const form = useForm();
+ return {
+ async run() {
+ await resource.create({
+ ...form.values,
+ [groupName]: column.value,
+ });
+ await form.reset();
+ return service.refresh();
+ },
+ };
+};
+
+Kanban.useUpdateAction = () => {
+ const { service, resource, props } = useKanban();
+ const ctx = useContext(KanbanCardContext);
+ const form = useForm();
+ return {
+ async run() {
+ await resource.save(form.values, {
+ resourceKey: ctx.record.id,
+ });
+ await service.refresh();
+ },
+ };
+};
+
+Kanban.useResource = ({ onSuccess }) => {
+ const { props } = useKanban();
+ const { collection } = useCollectionContext();
+ const ctx = useContext(KanbanCardContext);
+ const resource = Resource.make({
+ resourceName: collection?.name || props.collectionName,
+ resourceKey: ctx?.record?.id,
+ });
+ console.log(
+ 'collection?.name || props.collectionName',
+ collection?.name || props.collectionName,
+ );
+ const service = useRequest(
+ (params?: any) => {
+ return Promise.resolve(ctx.record);
+ },
+ {
+ // formatResult: (result) => result?.data,
+ onSuccess,
+ refreshDeps: [ctx?.record],
+ // manual,
+ },
+ );
+ return { resource, service, initialValues: service.data, ...service };
+};
+
Kanban.Card = observer((props) => {
const [visible, setVisible] = useState(false);
const { index, viewSchema } = useContext(KanbanCardContext);
+ const { DesignableBar } = useDesignable();
+ const { children, ...others } = props;
return (
- <>
+
{
setVisible(true);
}}
bordered={false}
+ {...others}
>
- {props.children}
+ {children}
+
- {
- setVisible(false);
- }}
- >
-
-
-
+
+
);
});
-Kanban.Card.View = observer((props) => {
- return
{props.children}
;
-});
-
+Kanban.Card.View = Action.Drawer;
+Kanban.Card.AddNew = Action;
Kanban.DesignableBar = DesignableBar;
+Kanban.Card.DesignableBar = CardDesignableBar;
diff --git a/packages/client/src/schemas/kanban/style.less b/packages/client/src/schemas/kanban/style.less
index e17a966c6..5e1905c05 100644
--- a/packages/client/src/schemas/kanban/style.less
+++ b/packages/client/src/schemas/kanban/style.less
@@ -1,9 +1,38 @@
.column {
position: relative;
- width: 25vw;
+ width: 300px;
background: #f9f9f9;
- margin: 0 12px;
+ margin-right: 24px;
padding: 24px;
+ &.add-column {
+ padding: 0;
+ margin-right: 0;
+ background: rgba(241, 139, 98, 0.05);
+ cursor: pointer;
+ color: #F18B62;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ .add-column-plus {
+ position: relative;
+ &::before {
+ position: absolute;
+ width: 1px;
+ height: 50px;
+ background: #F18B62;
+ }
+ &::after {
+ position: absolute;
+ width: 50px;
+ height: 1px;
+ background: #F18B62;
+ }
+ }
+ &:hover {
+ background: rgba(241, 139, 98, 0.1);
+ }
+ }
}
.column-title {
@@ -14,7 +43,12 @@
.kanban {
display: flex;
- margin: 0 -12px;
+ margin: 0;
+ overflow: auto;
+}
+
+.kanban-container {
+ display: flex;
}
.item {
@@ -31,4 +65,42 @@
position: absolute;
top: 0;
right: 0;
-}
\ No newline at end of file
+}
+
+.kanban .ant-card-body {
+ position: relative;
+ &:hover {
+ > .designable-bar {
+ display: block;
+ }
+ }
+ > .designable-bar {
+ pointer-events: none;
+ display: none;
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ left: -1px;
+ bottom: -1px;
+ border-radius: 2px;
+ background: none !important;
+ border: 2px solid rgba(241, 139, 98, 0.3) !important;
+ &.active {
+ display: block;
+ }
+ .designable-bar-actions {
+ pointer-events: all;
+ position: absolute;
+ right: 0;
+ line-height: 1rem;
+ background-color: #1890ff;
+ color: #fff;
+ z-index: 10;
+ padding: 0 3px;
+ .anticon {
+ font-size: 10px;
+ }
+ }
+ }
+}
+