feat: add remote select component
This commit is contained in:
parent
2a383e2142
commit
85aee08260
@ -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,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -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
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user