feat: improve code
This commit is contained in:
		
							parent
							
								
									ac4c8f031d
								
							
						
					
					
						commit
						46873d5b1e
					
				@ -1,5 +1,5 @@
 | 
			
		||||
import { uid } from '@formily/shared';
 | 
			
		||||
import { defaultProps } from './properties';
 | 
			
		||||
import { defaultProps, operators } from './properties';
 | 
			
		||||
import { IField } from './types';
 | 
			
		||||
 | 
			
		||||
export const attachment: IField = {
 | 
			
		||||
@ -50,13 +50,23 @@ export const attachment: IField = {
 | 
			
		||||
  },
 | 
			
		||||
  filterable: {
 | 
			
		||||
    children: [
 | 
			
		||||
      {
 | 
			
		||||
        name: 'id',
 | 
			
		||||
        title: '{{t("Exists")}}',
 | 
			
		||||
        operators: [
 | 
			
		||||
          { label: '{{t("exists")}}', value: '$exists', noValue: true },
 | 
			
		||||
          { label: '{{t("not exists")}}', value: '$notExists', noValue: true },
 | 
			
		||||
        ],
 | 
			
		||||
        schema: {
 | 
			
		||||
          title: '{{t("Exists")}}',
 | 
			
		||||
          type: 'string',
 | 
			
		||||
          'x-component': 'Input',
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        name: 'filename',
 | 
			
		||||
        title: '{{t("Filename")}}',
 | 
			
		||||
        operators: [
 | 
			
		||||
          { label: 'empty', value: '$empty' },
 | 
			
		||||
          { label: 'notEmpty', value: '$notEmpty' },
 | 
			
		||||
        ],
 | 
			
		||||
        operators: operators.string,
 | 
			
		||||
        schema: {
 | 
			
		||||
          title: '{{t("Filename")}}',
 | 
			
		||||
          type: 'string',
 | 
			
		||||
 | 
			
		||||
@ -71,5 +71,20 @@ export const linkTo: IField = {
 | 
			
		||||
  },
 | 
			
		||||
  filterable: {
 | 
			
		||||
    nested: true,
 | 
			
		||||
    children: [
 | 
			
		||||
      {
 | 
			
		||||
        name: 'id',
 | 
			
		||||
        title: '{{t("Exists")}}',
 | 
			
		||||
        operators: [
 | 
			
		||||
          { label: '{{t("exists")}}', value: '$exists', noValue: true },
 | 
			
		||||
          { label: '{{t("not exists")}}', value: '$notExists', noValue: true },
 | 
			
		||||
        ],
 | 
			
		||||
        schema: {
 | 
			
		||||
          title: '{{t("Exists")}}',
 | 
			
		||||
          type: 'string',
 | 
			
		||||
          'x-component': 'Input',
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
    ],
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -6,3 +6,87 @@ group:
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
# Kanban <Badge>待定</Badge>
 | 
			
		||||
 | 
			
		||||
## 参数说明
 | 
			
		||||
 | 
			
		||||
- dataSource 数据源
 | 
			
		||||
- groupField 分组字段,dataSource 以哪个字段作为分组
 | 
			
		||||
- useDataSource,动态数据源
 | 
			
		||||
- useGroupField,动态的分组字段
 | 
			
		||||
 | 
			
		||||
## 示例
 | 
			
		||||
 | 
			
		||||
### 静态数据
 | 
			
		||||
 | 
			
		||||
```ts
 | 
			
		||||
{
 | 
			
		||||
  'x-component': 'Kanban',
 | 
			
		||||
  'x-component-props': {
 | 
			
		||||
    dataSource: [],
 | 
			
		||||
    groupField: {
 | 
			
		||||
      name: 'status',
 | 
			
		||||
      enum: [
 | 
			
		||||
        { label: '进行中', value: 'running' }
 | 
			
		||||
        { label: '已完成', value: 'done',  }
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### 动态数据
 | 
			
		||||
 | 
			
		||||
```ts
 | 
			
		||||
{
 | 
			
		||||
  'x-component': 'Kanban',
 | 
			
		||||
  'x-component-props': {
 | 
			
		||||
    useDataSource: (options) => {
 | 
			
		||||
      // 与表格、日历类似
 | 
			
		||||
      return useRequest(() => Promise.resolve({ data: [] }), options);
 | 
			
		||||
    },
 | 
			
		||||
    useGroupField: () => {
 | 
			
		||||
      // 从上下文获取
 | 
			
		||||
      return {
 | 
			
		||||
        name: 'status',
 | 
			
		||||
        enum: [
 | 
			
		||||
          { label: '进行中', value: 'running' }
 | 
			
		||||
          { label: '已完成', value: 'done',  }
 | 
			
		||||
        ],
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### 特殊节点
 | 
			
		||||
 | 
			
		||||
- Kanban.Card 卡片的 schema
 | 
			
		||||
- Kanban.CardViewer 卡片点击打开的详情
 | 
			
		||||
- Kanban.CardAdder 添加卡片的按钮
 | 
			
		||||
 | 
			
		||||
```ts
 | 
			
		||||
{
 | 
			
		||||
  'x-component': 'Kanban',
 | 
			
		||||
  'x-component-props': {
 | 
			
		||||
    dataSource: [],
 | 
			
		||||
    groupField: {
 | 
			
		||||
      name: 'status',
 | 
			
		||||
      enum: [
 | 
			
		||||
        { label: '进行中', value: 'running' }
 | 
			
		||||
        { label: '已完成', value: 'done',  }
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  properties: {
 | 
			
		||||
    card: {
 | 
			
		||||
      'x-component': 'Kanban.Card',
 | 
			
		||||
    },
 | 
			
		||||
    viewer: {
 | 
			
		||||
      'x-component': 'Kanban.CardViewer',
 | 
			
		||||
    },
 | 
			
		||||
    adder: {
 | 
			
		||||
      'x-component': 'Kanban.CardAdder',
 | 
			
		||||
    },
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@ -58,27 +58,31 @@ const createSchema = (collectionName, { title, start, end }) => {
 | 
			
		||||
                  useValues: '{{ cm.useValuesFromRecord }}',
 | 
			
		||||
                },
 | 
			
		||||
                'x-component': 'Action.Drawer',
 | 
			
		||||
                title: '{{ t("Edit record") }}',
 | 
			
		||||
                'x-component-props': {
 | 
			
		||||
                  className: 'nb-action-popup',
 | 
			
		||||
                },
 | 
			
		||||
                title: '{{ t("View record") }}',
 | 
			
		||||
                properties: {
 | 
			
		||||
                  grid: {
 | 
			
		||||
                  tabs: {
 | 
			
		||||
                    type: 'void',
 | 
			
		||||
                    'x-component': 'Grid',
 | 
			
		||||
                    'x-initializer': 'GridFormItemInitializers',
 | 
			
		||||
                    properties: {},
 | 
			
		||||
                  },
 | 
			
		||||
                  footer: {
 | 
			
		||||
                    type: 'void',
 | 
			
		||||
                    'x-component': 'Action.Drawer.Footer',
 | 
			
		||||
                    'x-component': 'Tabs',
 | 
			
		||||
                    'x-component-props': {},
 | 
			
		||||
                    'x-initializer': 'TabPaneInitializers',
 | 
			
		||||
                    properties: {
 | 
			
		||||
                      actions: {
 | 
			
		||||
                      tab1: {
 | 
			
		||||
                        type: 'void',
 | 
			
		||||
                        'x-initializer': 'PopupFormActionInitializers',
 | 
			
		||||
                        'x-decorator': 'DndContext',
 | 
			
		||||
                        'x-component': 'ActionBar',
 | 
			
		||||
                        'x-component-props': {
 | 
			
		||||
                          layout: 'one-column',
 | 
			
		||||
                        title: '详情',
 | 
			
		||||
                        'x-component': 'Tabs.TabPane',
 | 
			
		||||
                        'x-designer': 'Tabs.Designer',
 | 
			
		||||
                        'x-component-props': {},
 | 
			
		||||
                        properties: {
 | 
			
		||||
                          grid: {
 | 
			
		||||
                            type: 'void',
 | 
			
		||||
                            'x-component': 'Grid',
 | 
			
		||||
                            'x-initializer': 'RecordBlockInitializers',
 | 
			
		||||
                            properties: {},
 | 
			
		||||
                          },
 | 
			
		||||
                        },
 | 
			
		||||
                        properties: {},
 | 
			
		||||
                      },
 | 
			
		||||
                    },
 | 
			
		||||
                  },
 | 
			
		||||
@ -104,12 +108,22 @@ export const CalendarBlockInitializer = (props) => {
 | 
			
		||||
      icon={<FormOutlined />}
 | 
			
		||||
      onClick={async ({ item }) => {
 | 
			
		||||
        const collection = getCollection(item.name);
 | 
			
		||||
        const fieldEnum = collection?.fields?.map((field) => {
 | 
			
		||||
          return {
 | 
			
		||||
            label: field?.uiSchema?.title,
 | 
			
		||||
            value: field.name,
 | 
			
		||||
          };
 | 
			
		||||
        });
 | 
			
		||||
        const stringFields = collection?.fields
 | 
			
		||||
          ?.filter((field) => field.type === 'string')
 | 
			
		||||
          ?.map((field) => {
 | 
			
		||||
            return {
 | 
			
		||||
              label: field?.uiSchema?.title,
 | 
			
		||||
              value: field.name,
 | 
			
		||||
            };
 | 
			
		||||
          });
 | 
			
		||||
        const dateFields = collection?.fields
 | 
			
		||||
          ?.filter((field) => field.type === 'date')
 | 
			
		||||
          ?.map((field) => {
 | 
			
		||||
            return {
 | 
			
		||||
              label: field?.uiSchema?.title,
 | 
			
		||||
              value: field.name,
 | 
			
		||||
            };
 | 
			
		||||
          });
 | 
			
		||||
        const values = await FormDialog('创建日历区块', () => {
 | 
			
		||||
          return (
 | 
			
		||||
            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
 | 
			
		||||
@ -119,21 +133,22 @@ export const CalendarBlockInitializer = (props) => {
 | 
			
		||||
                    properties: {
 | 
			
		||||
                      title: {
 | 
			
		||||
                        title: '标题字段',
 | 
			
		||||
                        enum: fieldEnum,
 | 
			
		||||
                        enum: stringFields,
 | 
			
		||||
                        required: true,
 | 
			
		||||
                        'x-component': 'Select',
 | 
			
		||||
                        'x-decorator': 'FormItem',
 | 
			
		||||
                      },
 | 
			
		||||
                      start: {
 | 
			
		||||
                        title: '开始日期字段',
 | 
			
		||||
                        enum: fieldEnum,
 | 
			
		||||
                        enum: dateFields,
 | 
			
		||||
                        required: true,
 | 
			
		||||
                        default: 'createdAt',
 | 
			
		||||
                        'x-component': 'Select',
 | 
			
		||||
                        'x-decorator': 'FormItem',
 | 
			
		||||
                      },
 | 
			
		||||
                      end: {
 | 
			
		||||
                        title: '结束日期字段',
 | 
			
		||||
                        enum: fieldEnum,
 | 
			
		||||
                        enum: dateFields,
 | 
			
		||||
                        'x-component': 'Select',
 | 
			
		||||
                        'x-decorator': 'FormItem',
 | 
			
		||||
                      },
 | 
			
		||||
 | 
			
		||||
@ -115,6 +115,7 @@ export const LinkToFieldInitializer = (props) => {
 | 
			
		||||
                drawer1: {
 | 
			
		||||
                  'x-component': 'Action.Drawer',
 | 
			
		||||
                  'x-component-props': {
 | 
			
		||||
                    className: 'nb-action-popup',
 | 
			
		||||
                  },
 | 
			
		||||
                  type: 'void',
 | 
			
		||||
                  title: 'Drawer Title',
 | 
			
		||||
 | 
			
		||||
@ -31,7 +31,7 @@ export const RecordBlockInitializers = (props: any) => {
 | 
			
		||||
      items={[
 | 
			
		||||
        {
 | 
			
		||||
          type: 'itemGroup',
 | 
			
		||||
          title: 'Data blocks',
 | 
			
		||||
          title: '当前数据区块',
 | 
			
		||||
          children: [
 | 
			
		||||
            {
 | 
			
		||||
              type: 'item',
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,7 @@ export const TabPaneInitializers = () => {
 | 
			
		||||
    const ctx = useActionContext();
 | 
			
		||||
    return {
 | 
			
		||||
      async run() {
 | 
			
		||||
        form.submit();
 | 
			
		||||
        await form.submit();
 | 
			
		||||
        const { title } = form.values;
 | 
			
		||||
        insertBeforeEnd({
 | 
			
		||||
          type: 'void',
 | 
			
		||||
@ -29,6 +29,7 @@ export const TabPaneInitializers = () => {
 | 
			
		||||
            },
 | 
			
		||||
          },
 | 
			
		||||
        });
 | 
			
		||||
        await form.reset();
 | 
			
		||||
        ctx.setVisible(false);
 | 
			
		||||
      },
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user