feat: add drawerSelect component for linkTo

packages/app/.gitignore

@@ -18,3 +18,4 @@
 /src/.umi-production
 /src/.umi-test
 /.env.local
+report.*.json

packages/app/src/components/form.fields/drawer-select/index.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { connect } from '@formily/react-schema-renderer'
-import moment from 'moment'
+import { Select, Drawer, Button } from 'antd'
-import { Select } from 'antd'
 import {
   mapStyledProps,
   mapTextComponent,
@@ -9,14 +8,93 @@ import {
   isStr,
   isArr
 } from '../shared'
+import ViewFactory from '@/components/views'
+
+function transform({value, multiple, labelField, valueField = 'id'}) {
+  let selectedKeys = [];
+  let selectedValue = [];
+  const values = Array.isArray(value) ? value : [];
+  selectedKeys = values.map(item => item[valueField]);
+  selectedValue = values.map(item => {
+    return {
+      value: item[valueField],
+      label: item[labelField],
+    }
+  });
+  if (!multiple) {
+    return [selectedKeys.shift(), selectedValue.shift()];
+  }
+  return [selectedKeys, selectedValue];
+}
 
 function DrawerSelectComponent(props) {
-  console.log(props);
+  const { target, multiple, associatedName, labelField, valueField = 'id', value, onChange } = props;
+  const [selectedKeys, selectedValue] = transform({value, multiple, labelField, valueField });
+  const [visible, setVisible] = useState(false);
+  const [selectedRowKeys, setSelectedRowKeys] = useState(selectedKeys);
+  const [selectedRows, setSelectedRows] = useState(selectedValue);
+  const [options, setOptions] = useState(selectedValue);
+  // console.log('valuevaluevaluevaluevaluevalue', value);
   return (
     <>
-      <Select>
+      <Select
-        <Select.Option value={'aaa'}>aaa</Select.Option>
+        open={false}
-      </Select>
+        mode={multiple ? 'tags' : undefined}
+        labelInValue
+        value={options}
+        notFoundContent={''}
+        onChange={(data) => {
+          setOptions(data);
+          if (Array.isArray(data)) {
+            const srks = data.map(item => item.value);
+            onChange(srks);
+            setSelectedRowKeys(srks);
+            console.log('datadatadatadata', {data, srks});
+          } else if (data && typeof data === 'object') {
+            onChange(data.value);
+            setSelectedRowKeys([data.value]);
+          } else {
+            onChange(data);
+            setSelectedRowKeys([]);
+          }
+        }}
+        onClick={() => {
+          setVisible(true);
+        }}
+      ></Select>
+      <Drawer 
+        width={'40%'}
+        title={'关联数据'}
+        visible={visible}
+        bodyStyle={{padding: 0}}
+        onClose={() => {
+          setVisible(false);
+        }}
+        footer={[
+          <Button type={'primary'} onClick={() => {
+            setOptions(selectedRows);
+            // console.log('valuevaluevaluevaluevaluevalue', {selectedRowKeys});
+            onChange(multiple ? selectedRowKeys : selectedRowKeys.shift());
+            setVisible(false);
+          }}>确定</Button>
+        ]}
+      >
+        <ViewFactory
+          multiple={multiple}
+          resourceName={target}
+          isFieldComponent={true}
+          selectedRowKeys={selectedRowKeys}
+          onSelected={(values) => {
+            const [selectedKeys, selectedValue] = transform({value: values, multiple, labelField, valueField });
+            setSelectedRows(selectedValue);
+            setSelectedRowKeys(selectedKeys);
+            // console.log('valuevaluevaluevaluevaluevalue', {values, selectedKeys, selectedValue});
+          }}
+          // associatedKey={} 
+          associatedName={associatedName} 
+          viewName={'table'}
+        />
+      </Drawer>
     </>
   );
 }

packages/app/src/components/form.fields/registry.ts

@@ -15,6 +15,7 @@ import { Rating } from './rating'
 import { Upload } from './upload'
 import { Filter } from './filter'
 import { RemoteSelect } from './remote-select'
+import { DrawerSelect } from './drawer-select'
 import { SubTable } from './sub-table'
 import { Icon } from './icons'
 
@@ -47,7 +48,7 @@ export const setup = () => {
     upload: Upload,
     filter: Filter,
     remoteSelect: RemoteSelect,
-    drawerSelect: RemoteSelect,
+    drawerSelect: DrawerSelect,
     subTable: SubTable,
   })
 }

packages/app/src/components/form.fields/remote-select/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from '@formily/react-schema-renderer'
 import moment from 'moment'
 import { Select } from 'antd'
@@ -11,18 +11,21 @@ import {
 } from '../shared'
 import { useRequest } from 'umi';
 import api from '@/api-client';
+import { Spin } from '@nocobase/client'
 
 function RemoteSelectComponent(props) {
-  const { value, onChange, resourceName, associatedKey, labelField, valueField } = props;
+  const { value, onChange, disabled, resourceName, associatedKey, labelField, valueField } = props;
-  const { data = [], loading } = useRequest(() => api.resource(resourceName).list({
+  const { data = [], loading = true } = useRequest(() => {
+    return api.resource(resourceName).list({
       associatedKey,
-  }), {
+    });
+  }, {
     refreshDeps: [resourceName, associatedKey]
   });
   return (
     <>
-      <Select allowClear loading={loading} value={value} onChange={onChange}>
+      <Select disabled={disabled} notFoundContent={loading ? <Spin/> : undefined} allowClear loading={loading} value={value} onChange={onChange}>
-        {data.map(item => (<Select.Option value={item[valueField]}>{item[valueField]} - {item[labelField]}</Select.Option>))}
+        {!loading && data.map(item => (<Select.Option value={item[valueField]}>{item[labelField]}</Select.Option>))}
       </Select>
     </>
   );

packages/app/src/components/views/SimpleTable.tsx

@@ -24,6 +24,9 @@ export function SimpleTable(props: SimpleTableProps) {
     resourceName,
     associatedName,
     associatedKey,
+    isFieldComponent,
+    onSelected,
+    selectedRowKeys: srk,
   } = props;
   const { rowKey = 'id', name: viewName, actionDefaultParams = {}, fields = [], rowViewName, actions = [], paginated = true, defaultPerPage = 10 } = schema;
   const { sourceKey = 'id' } = activeTab.field||{};
@@ -53,10 +56,14 @@ export function SimpleTable(props: SimpleTableProps) {
     defaultPageSize: defaultPerPage,
   });
   console.log(schema, data);
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState(srk||[]);
-  const onChange = (selectedRowKeys: React.ReactText[]) => {
+  const onChange = (selectedRowKeys: React.ReactText[], selectedRows: React.ReactText[]) => {
     setSelectedRowKeys(selectedRowKeys);
+    onSelected && onSelected(selectedRows);
   }
+  useEffect(() => {
+    setSelectedRowKeys(srk);
+  }, [srk]);
   const tableProps: any = {};
   if (actions.length) {
     tableProps.rowSelection = {
@@ -130,6 +137,9 @@ export function SimpleTable(props: SimpleTableProps) {
         })}
         onRow={(record) => ({
           onClick: () => {
+            if (isFieldComponent) {
+              return;
+            }
             drawerRef.current.setVisible(true);
             drawerRef.current.getData(record[rowKey]);
           }

packages/app/src/components/views/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Table as AntdTable, Card, Pagination } from 'antd';
 import { redirectTo } from '@/components/pages/CollectionLoader/utils';
 import { Actions } from '@/components/actions';
@@ -22,6 +22,9 @@ export function Table(props: TableProps) {
     resourceName,
     associatedName,
     associatedKey,
+    isFieldComponent,
+    onSelected,
+    selectedRowKeys: srk,
   } = props;
   const { name: viewName, fields, actionDefaultParams = {}, defaultTabName, rowKey = 'id', actions = [], paginated = true, defaultPerPage = 10 } = schema;
   // const { data, mutate } = useRequest(() => api.resource(name).list({
@@ -55,10 +58,15 @@ export function Table(props: TableProps) {
   });
   const { sourceKey = 'id' } = activeTab.field||{};
   console.log(props);
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState(srk||[]);
-  const onChange = (selectedRowKeys: React.ReactText[]) => {
+  const onChange = (selectedRowKeys: React.ReactText[], selectedRows: React.ReactText[]) => {
     setSelectedRowKeys(selectedRowKeys);
+    onSelected && onSelected(selectedRows);
   }
+  useEffect(() => {
+    setSelectedRowKeys(srk);
+  }, [srk]);
+  console.log(srk);
   const tableProps: any = {};
   if (actions.length) {
     tableProps.rowSelection = {
@@ -121,6 +129,9 @@ export function Table(props: TableProps) {
         })}
         onRow={(data) => ({
           onClick: () => {
+            if (isFieldComponent) {
+              return;
+            }
             redirectTo({
               ...props.match.params,
               [activeTab ? 'newItem' : 'lastItem']: {

packages/plugin-pages/src/actions/getView.ts

@@ -76,6 +76,12 @@ const transforms = {
         set(prop, 'x-component-props.children', prop.title);
         delete prop.title;
       }
+      if (interfaceType === 'linkTo') {
+        set(prop, 'x-component-props.associatedName', field.get('collection_name'));
+        set(prop, 'x-component-props.target', field.get('target'));
+        set(prop, 'x-component-props.multiple', field.get('multiple'));
+        set(prop, 'x-component-props.labelField', field.get('labelField'));
+      }
       if (interfaceType === 'multipleSelect') {
         set(prop, 'x-component-props.mode', 'multiple');
       }
@@ -178,6 +184,7 @@ export default async (ctx, next) => {
     });
     view.setDataValue('defaultTabName', get(defaultTabs, [0, 'name']));
   }
+  
   if (view.get('template') === 'SimpleTable') {
     view.setDataValue('rowViewName', 'form');
   }
@@ -196,7 +203,7 @@ export default async (ctx, next) => {
   const viewType = view.get('type');
   const actionDefaultParams:any = {};
   const appends = fields.filter(field => {
-    if (field.get('interface') !== 'subTable') {
+    if (!['subTable', 'linkTo'].includes(field.get('interface'))) {
       return false;
     }
     if (viewType === 'table') {