ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: filter support custom fields

Browse Source
This commit is contained in:
chenos 2021-08-09 10:40:40 +08:00
parent cf3a6ff2ff
commit 6d7a811d56
3 changed files with 212 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/client/src/schemas/add-new/index.tsx
View File

@ -415,6 +415,57 @@ function generateCardItemSchema(component) {
'x-component-props': { 'x-component-props': {
fieldNames: [], fieldNames: [],
}, },
properties: {
column1: {
type: 'void',
title: '操作类型',
'x-component': 'Filter.Column',
'x-component-props': {
operations: [
{
label: '等于',
value: 'eq',
selected: true,
schema: { 'x-component': 'Select' },
},
{
label: '不等于',
value: 'ne',
schema: { 'x-component': 'Select' },
},
{
label: '包含',
value: 'in',
schema: {
'x-component': 'Select',
'x-component-props': { mode: 'tags' },
},
},
{
label: '不包含',
value: 'notIn',
schema: {
'x-component': 'Select',
'x-component-props': { mode: 'tags' },
},
},
{ label: '非空', value: '$notNull', noValue: true },
{ label: '为空', value: '$null', noValue: true },
],
},
properties: {
type: {
type: 'string',
'x-component': 'Select',
enum: [
{ label: '新增数据', value: 'create' },
{ label: '更新数据', value: 'update' },
{ label: '删除数据', value: 'destroy' },
],
},
},
},
},
}, },
}, },
}, },
@ -456,7 +507,8 @@ function generateCardItemSchema(component) {
'x-read-pretty': true, 'x-read-pretty': true,
'x-decorator': 'Form', 'x-decorator': 'Form',
'x-decorator-props': { 'x-decorator-props': {
useResource: '{{ Table.useActionLogDetailsResource }}', useResource:
'{{ Table.useActionLogDetailsResource }}',
}, },
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
'x-component-props': { 'x-component-props': {
@ -806,7 +858,9 @@ AddNew.CardItem = observer((props: any) => {
<Menu.Item key={'Ref.ActionLogs'}>操作日志</Menu.Item> <Menu.Item key={'Ref.ActionLogs'}>操作日志</Menu.Item>
</Menu.ItemGroup> </Menu.ItemGroup>
<Menu.Divider></Menu.Divider> <Menu.Divider></Menu.Divider>
<Menu.Item disabled key={'addNewRef'}>新建模板</Menu.Item> <Menu.Item disabled key={'addNewRef'}>
新建模板
</Menu.Item>
</Menu.SubMenu> </Menu.SubMenu>
</Menu> </Menu>
} }

150
packages/client/src/schemas/table/SimpleDesignableBar.tsx
View File

@ -17,12 +17,13 @@ import {
SchemaField, SchemaField,
useDesignable, useDesignable,
removeSchema, removeSchema,
updateSchema,
} from '../'; } from '../';
import get from 'lodash/get'; import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd'; import { Button, Dropdown, Menu, Select, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons'; import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames'; import cls from 'classnames';
import { FormLayout } from '@formily/antd'; import { FormDialog, FormLayout } from '@formily/antd';
import './style.less'; import './style.less';
import AddNew from '../add-new'; import AddNew from '../add-new';
import { DraggableBlockContext } from '../../components/drag-and-drop'; import { DraggableBlockContext } from '../../components/drag-and-drop';
@ -31,6 +32,7 @@ import constate from 'constate';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer'; import { getSchemaPath } from '../../components/schema-renderer';
import { set } from 'lodash';
export const SimpleDesignableBar = observer((props) => { export const SimpleDesignableBar = observer((props) => {
const field = useField(); const field = useField();
@ -40,6 +42,8 @@ export const SimpleDesignableBar = observer((props) => {
if (!designable) { if (!designable) {
return null; return null;
} }
const defaultPageSize =
field?.componentProps?.pagination?.defaultPageSize || 10;
return ( return (
<div className={cls('designable-bar', { active: visible })}> <div className={cls('designable-bar', { active: visible })}>
<span <span
@ -59,15 +63,143 @@ export const SimpleDesignableBar = observer((props) => {
}} }}
overlay={ overlay={
<Menu> <Menu>
{/* <Menu.Item <Menu.Item
key={'update'} key={'defaultFilter'}
onClick={() => { onClick={async () => {
field.readPretty = true; const { defaultFilter } = await FormDialog(
'设置筛选范围',
() => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
defaultFilter: {
type: 'object',
'x-component': 'Filter',
properties: {
column1: {
type: 'void',
title: '操作类型',
'x-component': 'Filter.Column',
'x-component-props': {
operations: [
{
label: '等于',
value: 'eq',
selected: true,
schema: {
'x-component': 'Select',
},
},
{
label: '不等于',
value: 'ne',
schema: {
'x-component': 'Select',
},
},
{
label: '包含',
value: 'in',
schema: {
'x-component': 'Select',
'x-component-props': {
mode: 'tags',
},
},
},
{
label: '不包含',
value: 'notIn',
schema: {
'x-component': 'Select',
'x-component-props': {
mode: 'tags',
},
},
},
{
label: '非空',
value: '$notNull',
noValue: true,
},
{
label: '为空',
value: '$null',
noValue: true,
},
],
},
properties: {
type: {
type: 'string',
'x-component': 'Select',
enum: [
{
label: '新增数据',
value: 'create',
},
{
label: '更新数据',
value: 'update',
},
{
label: '删除数据',
value: 'destroy',
},
],
},
},
},
},
},
},
}}
/>
</FormLayout>
);
},
).open({
initialValues: {
defaultFilter:
field?.componentProps?.defaultFilter || {},
},
});
schema['x-component-props']['defaultFilter'] =
defaultFilter;
field.componentProps.defaultFilter = defaultFilter;
await updateSchema(schema);
}} }}
> >
编辑表单配置 设置筛选范围
</Menu.Item> */} </Menu.Item>
{/* <Menu.Divider /> */} <Menu.Item key={'defaultPageSize'}>
每页默认显示{' '}
<Select
bordered={false}
size={'small'}
onChange={(value) => {
const componentProps = schema['x-component-props'] || {};
set(componentProps, 'pagination.defaultPageSize', value);
set(componentProps, 'pagination.pageSize', value);
schema['x-component-props'] = componentProps;
field.componentProps.pagination.pageSize = value;
field.componentProps.pagination.defaultPageSize = value;
refresh();
updateSchema(schema);
}}
defaultValue={defaultPageSize}
>
<Select.Option value={10}>10</Select.Option>
<Select.Option value={20}>20</Select.Option>
<Select.Option value={50}>50</Select.Option>
<Select.Option value={100}>100</Select.Option>
</Select>{' '}
条
</Menu.Item>
<Menu.Divider />
<Menu.Item <Menu.Item
key={'delete'} key={'delete'}
onClick={async () => { onClick={async () => {

22
packages/client/src/schemas/table/index.tsx
View File

@ -362,7 +362,10 @@ const useTableColumns = () => {
}), }),
); );
if (designable && schema['x-designable-bar'] !== 'Table.SimpleDesignableBar') { if (
designable &&
schema['x-designable-bar'] !== 'Table.SimpleDesignableBar'
) {
columns.push({ columns.push({
title: <AddColumn />, title: <AddColumn />,
dataIndex: 'addnew', dataIndex: 'addnew',
@ -1209,9 +1212,11 @@ Table.Filter = observer((props: any) => {
const count = Object.values(obj).filter((i) => const count = Object.values(obj).filter((i) =>
Array.isArray(i) ? i.length : i, Array.isArray(i) ? i.length : i,
).length; ).length;
const icon = props.icon || 'FilterOutlined'; const icon = props.icon || 'FilterOutlined';
const properties = fieldsToFilterColumns(fields, { fieldNames });
schema.mapProperties((p) => {
properties[p.name] = p;
});
return ( return (
<Popover <Popover
trigger={['click']} trigger={['click']}
@ -1228,7 +1233,7 @@ Table.Filter = observer((props: any) => {
filter: { filter: {
type: 'object', type: 'object',
'x-component': 'Filter', 'x-component': 'Filter',
properties: fieldsToFilterColumns(fields, { fieldNames }), properties,
}, },
}, },
}} }}
@ -2026,7 +2031,10 @@ Table.useResource = ({ onSuccess, manual = true }) => {
resourceName: collection?.name || props.collectionName, 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) 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);
@ -2052,7 +2060,7 @@ Table.useActionLogDetailsResource = ({ onSuccess }) => {
const service = useRequest( const service = useRequest(
(params?: any) => { (params?: any) => {
console.log('Table.useResource', params); console.log('Table.useResource', params);
return resource.get({...params, 'fields[appends]': 'changes'}); return resource.get({ ...params, 'fields[appends]': 'changes' });
}, },
{ {
formatResult: (result) => result?.data, formatResult: (result) => result?.data,
@ -2085,4 +2093,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; Table.SimpleDesignableBar = SimpleDesignableBar;