feat: add remote select component

This commit is contained in:
chenos 2020-12-20 17:27:33 +08:00
parent 2a383e2142
commit 85aee08260
4 changed files with 78 additions and 10 deletions

View File

@ -14,7 +14,7 @@ import { Range } from './range'
import { Rating } from './rating' import { Rating } from './rating'
import { Upload } from './upload' import { Upload } from './upload'
import { Filter } from './filter' import { Filter } from './filter'
import { DrawerSelect } from './drawer-select' import { RemoteSelect } from './remote-select'
import { SubTable } from './sub-table' import { SubTable } from './sub-table'
export const setup = () => { export const setup = () => {
@ -45,7 +45,8 @@ export const setup = () => {
rating: Rating, rating: Rating,
upload: Upload, upload: Upload,
filter: Filter, filter: Filter,
drawerSelect: DrawerSelect, remoteSelect: RemoteSelect,
drawerSelect: RemoteSelect,
subTable: SubTable, subTable: SubTable,
}) })
} }

View File

@ -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 (
<>
<Select allowClear loading={loading} value={value} onChange={onChange}>
{data.map(item => (<Select.Option value={item[valueField]}>{item[valueField]} - {item[labelField]}</Select.Option>))}
</Select>
</>
);
}
export const RemoteSelect = connect({
getProps: mapStyledProps,
getComponent: mapTextComponent,
})(RemoteSelectComponent)
export default RemoteSelect

View File

@ -172,7 +172,7 @@ export function SubTableField(props: any) {
} }
return ( return (
<div> <div>
<Table columns={fields2columns(children)} dataSource={value} pagination={false}/> <Table size={'middle'} columns={fields2columns(children)} dataSource={value} pagination={false}/>
</div> </div>
); );
} }

View File

@ -100,11 +100,11 @@ export default {
"target": "target", "target": "target",
"condition": "{{ ['linkTo'].indexOf($self.value) !== -1 }}" "condition": "{{ ['linkTo'].indexOf($self.value) !== -1 }}"
}, },
{ // {
"type": "value:visible", // "type": "value:visible",
"target": "labelField", // "target": "labelField",
"condition": "{{ ['linkTo'].indexOf($self.value) !== -1 }}" // "condition": "{{ ['linkTo'].indexOf($self.value) !== -1 }}"
}, // },
{ {
"type": "value:visible", "type": "value:visible",
"target": "createable", "target": "createable",
@ -268,10 +268,34 @@ export default {
type: 'virtual', type: 'virtual',
name: 'target', name: 'target',
title: '要关联的数据表', title: '要关联的数据表',
required: true,
component: { component: {
type: 'drawerSelect', type: 'remoteSelect',
showInDetail: true, showInDetail: true,
showInForm: 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', type: 'virtual',
name: 'labelField', name: 'labelField',
title: '要关联的字段', title: '要关联的字段',
required: true,
component: { component: {
type: 'drawerSelect', type: 'remoteSelect',
'x-component-props': {
mode: 'simple',
resourceName: 'collections.fields',
labelField: 'title',
valueField: 'name',
},
showInDetail: true, showInDetail: true,
showInForm: true, showInForm: true,
}, },