diff --git a/packages/client/src/schemas/DesignableSchemaField/index.tsx b/packages/client/src/schemas/DesignableSchemaField/index.tsx index 2281a490c..2b90cfda8 100644 --- a/packages/client/src/schemas/DesignableSchemaField/index.tsx +++ b/packages/client/src/schemas/DesignableSchemaField/index.tsx @@ -30,7 +30,6 @@ import { Checkbox } from '../checkbox'; import { ColorSelect } from '../color-select'; import { DatabaseField } from '../database-field'; import { DatePicker } from '../date-picker'; -import { DrawerSelect } from '../drawer-select'; import { Filter } from '../filter'; import { Form } from '../form'; import { Grid } from '../grid'; @@ -97,7 +96,6 @@ export const components = { ColorSelect, DatabaseField, DatePicker, - DrawerSelect, Filter, Form, Grid, diff --git a/packages/client/src/schemas/action/index.tsx b/packages/client/src/schemas/action/index.tsx index c1ed3942a..5e44180ac 100644 --- a/packages/client/src/schemas/action/index.tsx +++ b/packages/client/src/schemas/action/index.tsx @@ -116,13 +116,13 @@ const BaseAction = observer((props: any) => { const { run } = useAction(); const { DesignableBar } = useDesignableBar(); const { setVisible } = useVisibleContext(); - // const schema = useFieldSchema(); + const fieldSchema = useFieldSchema(); const { schema } = useDesignable(); useEffect(() => { field.componentProps.setVisible = setVisible; }, []); - console.log('BaseAction', { field, schema }, field.title); + console.log('BaseAction', { field, schema, fieldSchema }, field.title); const renderButton = () => ( { - const { - value, - dataRequest, - labelField: lf, - valueField: vf, - renderTag, - renderOptions, - onChange, - ...others - } = props; - const labelField = getFieldName(lf); - const valueField = getFieldName(vf); - const getValues = () => { - if (!isValid(value)) { - return []; - } - return isArr(value) ? value : [value]; - } - const getOptionValue = () => { - const values = getValues().map((item) => { - return { - value: item[valueField], - label: item[labelField], - }; - }); - if (props.mode === 'multiple' || props.mode === 'tags') { - return values; - } - return values.length ? values[0] : null; - }; - return ( - { - }} - defaultValue={'and'} - > - 全部 - 任意 - {' '} - 条件 - - { - console.log({ list }); - }} - /> - - ); -} - -export function List(props) { - const { initialValue } = props; - const { list, push, remove } = useDynamicList(initialValue || []); - useEffect(() => { - props.onChange && props.onChange(list); - }, [list]); - const fields = useContext(FilterSourceFieldsContext); - return ( -
-
- {list.map((item, index) => { - if (item.type === 'group') { - return remove(index)} />; - } - return remove(index)} />; - })} -
- { - push({ - type: 'item', - key: new Date().toTimeString(), - }); - }} - > - 添加条件 - {' '} - { - push({ - type: 'group', - key: new Date().toTimeString(), - }); - }} - > - 添加条件组 - -
- ); -} diff --git a/packages/client/src/schemas/filter/index.md b/packages/client/src/schemas/filter/index.md index 78a3c6a8e..78f6470de 100644 --- a/packages/client/src/schemas/filter/index.md +++ b/packages/client/src/schemas/filter/index.md @@ -8,3 +8,66 @@ group: title: Schemas path: /client/schemas --- + + + +```tsx +import React from 'react'; +import { SchemaRenderer } from '../'; + +const schema = { + name: 'filter', + type: 'object', + 'x-component': 'Filter', + properties: { + column1: { + type: 'void', + title: '字段1', + 'x-component': 'Filter.Column', + 'x-component-props': { + operations: [ + { label: '等于', value: 'eq' }, + { label: '不等于', value: 'ne' }, + ], + }, + properties: { + field1: { + type: 'string', + 'x-component': 'Input', + }, + }, + }, + column2: { + type: 'void', + title: '字段2', + 'x-component': 'Filter.Column', + 'x-component-props': { + operations: [ + { label: '大于', value: 'gt' }, + { label: '小于', value: 'lt' }, + { label: '非空', value: 'notNull', noValue: true }, + ], + }, + properties: { + field1: { + type: 'number', + 'x-component': 'InputNumber', + }, + }, + }, + } +}; + +export default () => { + return ( + + ); +}; +``` diff --git a/packages/client/src/schemas/filter/index.tsx b/packages/client/src/schemas/filter/index.tsx index 2b6a3ab87..aec158b25 100644 --- a/packages/client/src/schemas/filter/index.tsx +++ b/packages/client/src/schemas/filter/index.tsx @@ -1,16 +1,93 @@ -import React, { useEffect } from 'react' -import { connect, mapProps, mapReadPretty, useFieldSchema } from '@formily/react' -import { LoadingOutlined } from '@ant-design/icons' +import React, { useEffect } from 'react'; +import { + connect, + mapProps, + mapReadPretty, +} from '@formily/react'; +import { LoadingOutlined } from '@ant-design/icons'; import { useDynamicList } from 'ahooks'; -import { Group, FilterSourceFieldsContext } from './Group' +import { Select } from 'antd'; +import { CloseCircleOutlined } from '@ant-design/icons'; +import { FilterItem } from './FilterItem'; +import './style.less'; + +export function FilterGroup(props) { + const { onRemove } = props; + return ( +
+ {onRemove && ( + onRemove()}> + + + )} +
+ 满足组内{' '} + {' '} + 条件 +
+ { + console.log({ list }); + }} + /> +
+ ); +} + +export function FilterList(props) { + const { initialValue } = props; + const { list, push, remove } = useDynamicList(initialValue || []); + useEffect(() => { + props.onChange && props.onChange(list); + }, [list]); + return ( +
+
+ {list.map((item, index) => { + if (item.type === 'group') { + return remove(index)} />; + } + return remove(index)} />; + })} +
+ { + push({ + type: 'item', + key: new Date().toTimeString(), + }); + }} + > + 添加条件 + {' '} + { + push({ + type: 'group', + key: new Date().toTimeString(), + }); + }} + > + 添加条件组 + +
+ ); +} export const Filter = connect( (props) => { - const schema = useFieldSchema(); return ( - - - +
+ +
); }, mapProps((props, field) => { @@ -25,12 +102,11 @@ export const Filter = connect( )} ), - } + }; }), mapReadPretty((props) => { return null; - }) -) + }), +); export default Filter; - diff --git a/packages/client/src/schemas/filter/style.less b/packages/client/src/schemas/filter/style.less index 6e2fc7353..319df56cc 100644 --- a/packages/client/src/schemas/filter/style.less +++ b/packages/client/src/schemas/filter/style.less @@ -1,6 +1,10 @@ -.filter-group { +.nb-filter-group { position: relative; margin-bottom: 14px; padding: 14px; border: 1px dashed rgb(222, 222, 222); + &-close { + position: absolute; + right: 10px; + } } \ No newline at end of file diff --git a/packages/client/src/schemas/select/index.md b/packages/client/src/schemas/select/index.md index 36cb1782a..972c87e29 100644 --- a/packages/client/src/schemas/select/index.md +++ b/packages/client/src/schemas/select/index.md @@ -362,7 +362,7 @@ export default () => { ```tsx import React from 'react'; import { SchemaRenderer } from '../'; -import { useSelect } from './'; +import { useSelect, useOptionTagValues } from './'; console.log({ useSelect }) @@ -519,9 +519,15 @@ const schema = { form: { type: 'void', 'x-component': 'Form', + 'x-component-props': { + useValues: '{{ useOptionTagValues }}', + }, properties: { - input: { + title: { type: 'string', + title: '标题', + 'x-read-pretty': true, + 'x-decorator': 'FormItem', 'x-component': 'Input', }, }, @@ -535,7 +541,7 @@ const schema = { export default () => { return ( - + ); }; ``` diff --git a/packages/client/src/schemas/select/index.tsx b/packages/client/src/schemas/select/index.tsx index f2261c22a..374204c39 100644 --- a/packages/client/src/schemas/select/index.tsx +++ b/packages/client/src/schemas/select/index.tsx @@ -17,7 +17,7 @@ import { useState } from 'react'; import { useDesignable } from '../DesignableSchemaField'; import { createContext } from 'react'; import { useContext } from 'react'; -import { useTableContext } from '../table'; +import { SelectedRowKeysContext, useTableContext } from '../table'; export const Select: any = connect( (props) => { @@ -128,8 +128,9 @@ Select.Object = connect( {...others} value={optionValue} onChange={(selectValue: any) => { - if (!selectValue) { + if (!isValid(selectValue)) { onChange(null); + return; } if (isArr(selectValue)) { const selectValues = selectValue.map((s) => s.value); @@ -273,6 +274,10 @@ Select.Drawer = connect( } }; + const selectedKeys = toArr(optionValue).map(item => item.value); + + console.log({ selectedKeys }) + return ( <> setVisible(false)} + destroyOnClose > - - { - return s['x-component'] === 'Select.Options'; + + - + > + { + return s['x-component'] === 'Select.Options'; + }} + /> + + ); @@ -386,6 +394,11 @@ export function useSelect() { }; } +export function useOptionTagValues() { + const { data } = useContext(OptionTagContext); + return data; +} + Select.OptionTag = observer((props) => { const [visible, setVisible] = useState(false); const { data, fieldNames } = useContext(OptionTagContext); diff --git a/packages/client/src/schemas/table/index.tsx b/packages/client/src/schemas/table/index.tsx index 37654f8f6..50607683b 100644 --- a/packages/client/src/schemas/table/index.tsx +++ b/packages/client/src/schemas/table/index.tsx @@ -240,7 +240,9 @@ export function useTableUpdateAction() { const [TableContextProvider, useTableContext] = constate(() => { const field = useField(); const schema = useFieldSchema(); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const defaultSelectedRowKeys = useContext(SelectedRowKeysContext); + const [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelectedRowKeys || []); + console.log({ defaultSelectedRowKeys }) const pagination = usePaginationProps(); const response = useRequest<{ list: any[]; @@ -284,6 +286,8 @@ const [TableContextProvider, useTableContext] = constate(() => { export { TableContextProvider, useTableContext }; +export const SelectedRowKeysContext = createContext([]); + const TableContainer = observer((props) => { const field = useField(); const schema = useFieldSchema();