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,20 +290,62 @@ 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(
-          <div className={`${action.type}-action-button action-button`}>
+          action =>
-            <Action
+            ACTIONS.has(action.type) && (
-              {...restProps}
+              <div className={`${action.type}-action-button action-button`}>
-              onFinish={onTrigger[action.type]}
+                <Action
-              schema={action}
+                  {...restProps}
-            />
+                  onFinish={onTrigger[action.type]}
-          </div>
+                  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,55 +107,58 @@ export function Descriptions(props) {
             onDataChange && onDataChange(values);
           },
         }}
+        contentRef={contentRef}
         associatedKey={associatedKey}
         data={data}
         actions={actions}
         style={{ marginBottom: 14 }}
       />
-      {groups.map(group => (
+      <div ref={contentRef} className={'print-content'}>
-        <AntdDescriptions
+        {groups.map(group => (
-          // layout={'vertical'}
+          <AntdDescriptions
-          // size={'middle'}
+            // layout={'vertical'}
-          // bordered
+            // size={'middle'}
-          {...descriptionsProps}
+            // bordered
-          title={
+            {...descriptionsProps}
-            group.title && (
+            title={
-              <span>
+              group.title && (
-                {group.title}{' '}
+                <span>
-                {group.tooltip && (
+                  {group.title}{' '}
-                  <Tooltip title={group.tooltip}>
+                  {group.tooltip && (
+                    <Tooltip title={group.tooltip}>
+                      <InfoCircleOutlined />
+                    </Tooltip>
+                  )}
+                </span>
+              )
+            }
+            column={1}
+          >
+            {group.children.map((field: any) => {
+              const label = field.tooltip ? (
+                <>
+                  {field.title || field.name}&nbsp;
+                  <Tooltip title={field.tooltip}>
                     <InfoCircleOutlined />
                   </Tooltip>
-                )}
+                </>
-              </span>
+              ) : (
-            )
+                field.title || field.name
-          }
+              );
-          column={1}
+              return (
-        >
+                <AntdDescriptions.Item label={label}>
-          {group.children.map((field: any) => {
+                  <Field
-            const label = field.tooltip ? (
+                    data={data}
-              <>
+                    viewType={'descriptions'}
-                {field.title || field.name}&nbsp;
+                    schema={field}
-                <Tooltip title={field.tooltip}>
+                    value={get(data, field.name)}
-                  <InfoCircleOutlined />
+                  />
-                </Tooltip>
+                </AntdDescriptions.Item>
-              </>
+              );
-            ) : (
+            })}
-              field.title || field.name
+          </AntdDescriptions>
-            );
+        ))}
-            return (
+      </div>
-              <AntdDescriptions.Item label={label}>
-                <Field
-                  data={data}
-                  viewType={'descriptions'}
-                  schema={field}
-                  value={get(data, field.name)}
-                />
-              </AntdDescriptions.Item>
-            );
-          })}
-        </AntdDescriptions>
-      ))}
     </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' },