From 85aee0826027200ee09b989be38410625eedc7ef Mon Sep 17 00:00:00 2001 From: chenos Date: Sun, 20 Dec 2020 17:27:33 +0800 Subject: [PATCH] feat: add remote select component --- .../src/components/form.fields/registry.ts | 5 ++- .../form.fields/remote-select/index.tsx | 36 +++++++++++++++ .../app/src/components/views/Field/index.tsx | 2 +- .../src/collections/fields.ts | 45 ++++++++++++++++--- 4 files changed, 78 insertions(+), 10 deletions(-) create mode 100644 packages/app/src/components/form.fields/remote-select/index.tsx diff --git a/packages/app/src/components/form.fields/registry.ts b/packages/app/src/components/form.fields/registry.ts index b430ff266..a48d44dc2 100644 --- a/packages/app/src/components/form.fields/registry.ts +++ b/packages/app/src/components/form.fields/registry.ts @@ -14,7 +14,7 @@ import { Range } from './range' import { Rating } from './rating' import { Upload } from './upload' import { Filter } from './filter' -import { DrawerSelect } from './drawer-select' +import { RemoteSelect } from './remote-select' import { SubTable } from './sub-table' export const setup = () => { @@ -45,7 +45,8 @@ export const setup = () => { rating: Rating, upload: Upload, filter: Filter, - drawerSelect: DrawerSelect, + remoteSelect: RemoteSelect, + drawerSelect: RemoteSelect, subTable: SubTable, }) } diff --git a/packages/app/src/components/form.fields/remote-select/index.tsx b/packages/app/src/components/form.fields/remote-select/index.tsx new file mode 100644 index 000000000..3b0efc13b --- /dev/null +++ b/packages/app/src/components/form.fields/remote-select/index.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { connect } from '@formily/react-schema-renderer' +import moment from 'moment' +import { Select } from 'antd' +import { + mapStyledProps, + mapTextComponent, + compose, + isStr, + isArr +} from '../shared' +import { useRequest } from 'umi'; +import api from '@/api-client'; + +function RemoteSelectComponent(props) { + const { value, onChange, resourceName, associatedKey, labelField, valueField } = props; + const { data = [], loading } = useRequest(() => api.resource(resourceName).list({ + associatedKey, + }), { + refreshDeps: [resourceName, associatedKey] + }); + return ( + <> + + + ); +} + +export const RemoteSelect = connect({ + getProps: mapStyledProps, + getComponent: mapTextComponent, +})(RemoteSelectComponent) + +export default RemoteSelect diff --git a/packages/app/src/components/views/Field/index.tsx b/packages/app/src/components/views/Field/index.tsx index 53ecb1d9b..bca3d6904 100644 --- a/packages/app/src/components/views/Field/index.tsx +++ b/packages/app/src/components/views/Field/index.tsx @@ -172,7 +172,7 @@ export function SubTableField(props: any) { } return (
- +
); } diff --git a/packages/plugin-collections/src/collections/fields.ts b/packages/plugin-collections/src/collections/fields.ts index bf354d821..66b8ea278 100644 --- a/packages/plugin-collections/src/collections/fields.ts +++ b/packages/plugin-collections/src/collections/fields.ts @@ -100,11 +100,11 @@ export default { "target": "target", "condition": "{{ ['linkTo'].indexOf($self.value) !== -1 }}" }, - { - "type": "value:visible", - "target": "labelField", - "condition": "{{ ['linkTo'].indexOf($self.value) !== -1 }}" - }, + // { + // "type": "value:visible", + // "target": "labelField", + // "condition": "{{ ['linkTo'].indexOf($self.value) !== -1 }}" + // }, { "type": "value:visible", "target": "createable", @@ -268,10 +268,34 @@ export default { type: 'virtual', name: 'target', title: '要关联的数据表', + required: true, component: { - type: 'drawerSelect', + type: 'remoteSelect', showInDetail: true, showInForm: true, + 'x-component-props': { + mode: 'simple', + resourceName: 'collections', + labelField: 'title', + valueField: 'name', + }, + "x-linkages": [ + { + "type": "value:visible", + "target": "labelField", + "condition": "{{ !!$self.value }}" + }, + { + type: "value:schema", + target: "labelField", + // condition: "{{ $self.value }}", + schema: { + "x-component-props": { + "associatedKey": "{{ $self.value }}" + }, + }, + }, + ], }, }, { @@ -279,8 +303,15 @@ export default { type: 'virtual', name: 'labelField', title: '要关联的字段', + required: true, component: { - type: 'drawerSelect', + type: 'remoteSelect', + 'x-component-props': { + mode: 'simple', + resourceName: 'collections.fields', + labelField: 'title', + valueField: 'name', + }, showInDetail: true, showInForm: true, },