feat: print button for descriptions

packages/app/package.json

@@ -43,6 +43,7 @@
     "react-drag-listview": "^0.1.8",
     "react-image-lightbox": "^5.1.1",
     "react-sortable-hoc": "^1.11.0",
+    "react-to-print": "^2.12.3",
     "styled-components": "^5.2.1",
     "umi": "^3.2.23",
     "yorkie": "^2.0.0"

packages/app/src/components/pages/AdminLoader/Actions/index.tsx

@@ -5,11 +5,17 @@ import {
   PlusOutlined,
   SelectOutlined,
   DeleteOutlined,
+  PrinterOutlined,
+  ExportOutlined,
 } from '@ant-design/icons';
 import Drawer from '@/components/pages/AdminLoader/Drawer';
 import View from '@/components/pages/AdminLoader/View';
 import get from 'lodash/get';
 import set from 'lodash/set';
+import ReactToPrint from 'react-to-print';
+import api from '@/api-client';
+
+const ACTIONS = new Map<string, any>();
 
 export function Create(props) {
   const { size, onFinish, schema = {}, associatedKey, ...restProps } = props;
@@ -284,12 +290,53 @@ export function Filter(props) {
   );
 }
 
+export function Print(props) {
+  const { schema = {}, contentRef } = props;
+  const { title, buttonProps = {} } = schema;
+  return (
+    <ReactToPrint
+      trigger={() => (
+        <Button {...buttonProps} icon={<PrinterOutlined />}>
+          {title}
+        </Button>
+      )}
+      content={() => contentRef.current}
+      pageStyle={`
+        @page {
+          margin: 1cm;
+        }
+        table { page-break-inside:auto }
+        tr { page-break-inside:avoid; page-break-after:auto }
+      `}
+      documentTitle={' '}
+    />
+  );
+}
+
+export function Export(props) {
+  const { schema = {}, onFinish } = props;
+  const { title, buttonProps = {} } = schema;
+  return (
+    <Button
+      {...buttonProps}
+      icon={<ExportOutlined />}
+      onClick={async () => {
+        onFinish && (await onFinish({ fields: [] }));
+      }}
+    >
+      {title}
+    </Button>
+  );
+}
+
 export function Actions(props) {
   const { onTrigger = {}, actions = [], style, ...restProps } = props;
   return (
     actions.length > 0 && (
       <div className={'action-buttons'} style={style}>
-        {actions.map(action => (
+        {actions.map(
+          action =>
+            ACTIONS.has(action.type) && (
               <div className={`${action.type}-action-button action-button`}>
                 <Action
                   {...restProps}
@@ -297,7 +344,8 @@ export function Actions(props) {
                   schema={action}
                 />
               </div>
-        ))}
+            ),
+        )}
       </div>
     )
   );
@@ -305,8 +353,6 @@ export function Actions(props) {
 
 export default Actions;
 
-const ACTIONS = new Map<string, any>();
-
 export function registerAction(type: string, Action: any) {
   ACTIONS.set(type, Action);
 }
@@ -328,3 +374,5 @@ registerAction('update', Update);
 registerAction('create', Create);
 registerAction('destroy', Destroy);
 registerAction('filter', Filter);
+registerAction('print', Print);
+registerAction('export', Export);

packages/app/src/components/pages/AdminLoader/View/Descriptions.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef } from 'react';
 import './style.less';
 import { Helmet } from 'umi';
 import { Spin } from '@nocobase/client';
@@ -24,7 +24,6 @@ import Field from '@/components/views/Field';
 import { Form } from './Form';
 import { configResponsive, useResponsive } from 'ahooks';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import scopes from '@/components/views/Form/scopes';
 
 configResponsive({
   small: 0,
@@ -84,6 +83,7 @@ export function Descriptions(props) {
       'fields[appends]': appends,
     });
   });
+  const contentRef = useRef();
   if (loading) {
     return <Spin />;
   }
@@ -97,6 +97,7 @@ export function Descriptions(props) {
     };
   }
   const groups = toGroups(fields);
+
   return (
     <div>
       <Actions
@@ -106,11 +107,13 @@ export function Descriptions(props) {
             onDataChange && onDataChange(values);
           },
         }}
+        contentRef={contentRef}
         associatedKey={associatedKey}
         data={data}
         actions={actions}
         style={{ marginBottom: 14 }}
       />
+      <div ref={contentRef} className={'print-content'}>
         {groups.map(group => (
           <AntdDescriptions
             // layout={'vertical'}
@@ -156,5 +159,6 @@ export function Descriptions(props) {
           </AntdDescriptions>
         ))}
       </div>
+    </div>
   );
 }

packages/plugin-pages/src/collections/views_actions_v2.ts

@@ -25,6 +25,8 @@ export default {
       title: '操作类型',
       dataSource: [
         { label: '筛选', value: 'filter' },
+        { label: '打印', value: 'print' },
+        { label: '导出', value: 'export' },
         { label: '新增', value: 'create' },
         { label: '编辑', value: 'update' },
         { label: '删除', value: 'destroy' },