feat: add remote select component

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,
   })
 }

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 (
+    <>
+      <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

packages/app/src/components/views/Field/index.tsx

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

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,
       },