feat: can set editable fields on tabs

packages/app/src/components/form.fields/draggable-table/index.tsx

@@ -16,11 +16,12 @@ import { Spin } from '@nocobase/client'
 import { fields2columns, components } from '@/components/views/SortableTable'
 
 function DraggableTableComponent(props) {
-  const { value, onChange, disabled, rowKey = 'id', fields = [], resourceName, associatedKey, filter, labelField, valueField = 'id', objectValue, placeholder } = props;
+  const { mode = 'showInDetail', value, onChange, disabled, rowKey = 'id', fields = [], resourceName, associatedKey, filter, labelField, valueField = 'id', objectValue, placeholder } = props;
   const { data = [], loading = true, mutate } = useRequest(() => {
     return api.resource(resourceName).list({
       associatedKey,
       filter,
+      perPage: -1,
     });
   }, {
     refreshDeps: [resourceName, associatedKey]
@@ -34,7 +35,9 @@ function DraggableTableComponent(props) {
     selectedRowKeys: Array.isArray(value) ? value : data.map(item => item[rowKey]),
     onChange: onTableChange,
   }
-  const dataSource = data.filter(item => get(item, ['component', 'showInDetail']));
+  const dataSource = data.filter(item => {
+    return get(item, ['component', mode])
+  });
   // const sortIds = get(value, 'sort')||[];
   // let values = [];
   // sortIds.forEach(id => {

packages/app/src/components/views/Form/DrawerForm.tsx

@@ -42,7 +42,7 @@ export const DrawerForm = forwardRef((props: any, ref) => {
   const [form, setForm] = useState<any>({});
   const [changed, setChanged] = useState(false);
   console.log(associatedKey);
-  const { title, actionDefaultParams = {}, fields: properties ={} } = props.schema||{};
+  const { title, actionDefaultParams = {}, fields = {} } = props.schema||{};
   const [resourceKey, setResourceKey] = useState(props.resourceKey);
   const [visible, setVisible] = useState(false);
   const name = associatedName ? `${associatedName}.${resourceName}` : resourceName;
@@ -60,7 +60,17 @@ export const DrawerForm = forwardRef((props: any, ref) => {
     setVisible,
     getData: run,
   }));
-
+  const { displayFormFields = [] } = activeTab;
+  const properties: any ={};
+  for (const key in fields) {
+    if (Object.prototype.hasOwnProperty.call(fields, key)) {
+      const field = fields[key];
+      if (Array.isArray(displayFormFields) && displayFormFields.length && displayFormFields.indexOf(field.id) === -1) {
+        continue;
+      }
+      properties[key] = field;
+    }
+  }
   return (
     <Drawer
       {...props}

packages/plugin-collections/src/collections/tabs.ts

@@ -79,6 +79,11 @@ export default {
             target: "displayFields",
             condition: "{{ $self.value === 'details' }}",
           },
+          {
+            type: "value:visible",
+            target: "displayFormFields",
+            condition: "{{ $self.value === 'details' }}",
+          },
           // {
           //   type: "value:schema",
           //   target: "association",
@@ -99,6 +104,16 @@ export default {
               },
             },
           },
+          {
+            type: "value:schema",
+            target: "displayFormFields",
+            condition: "{{ $self.value === 'details' }}",
+            schema: {
+              "x-component-props": {
+                associatedKey: "{{ $form.values && $form.values.associatedKey }}"
+              },
+            },
+          },
           {
             type: "value:schema",
             target: "associationField",
@@ -176,7 +191,7 @@ export default {
       interface: 'json',
       type: 'json',
       name: 'displayFields',
-      title: '显示的字段',
+      title: '显示在详情中的字段',
       labelField: 'title',
       // valueField: 'name',
       component: {
@@ -187,7 +202,44 @@ export default {
           resourceName: 'collections.fields',
           labelField: 'title',
           valueField: 'name',
+          mode: 'showInDetail',
+          fields: [
+            // {
+            //   interface: 'sort',
+            //   name: 'sort',
+            //   title: '排序',
+            //   type: 'sort',
+            //   dataIndex: ['sort'],
+            //   className: 'drag-visible',
+            // },
+            {
+              interface: 'string',
+              name: 'title',
+              title: '字段名称',
+              type: 'string',
+              className: 'drag-visible',
+              dataIndex: ['title'],
+            }
+          ],
+        },
+      },
+    },
+    {
+      interface: 'json',
+      type: 'json',
+      name: 'displayFormFields',
+      title: '当前标签页可编辑字段',
+      labelField: 'title',
+      // valueField: 'name',
+      component: {
+        type: 'draggableTable',
         showInDetail: true,
+        showInForm: true,
+        'x-component-props': {
+          resourceName: 'collections.fields',
+          labelField: 'title',
+          valueField: 'name',
+          mode: 'showInForm',
           fields: [
             // {
             //   interface: 'sort',

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

@@ -145,6 +145,7 @@ const transforms = {
         prop.enum = field.get('dataSource');
       }
       schema[field.name] = {
+        id: field.id,
         ...prop,
       };
     }