test: 导出word

src/views/products/Detail/Header.jsx

@@ -15,6 +15,10 @@ import VendorSelector from '@/components/VendorSelector';
 import AuditStateSelector from '@/components/AuditStateSelector';
 import NewProductModal from './NewProductModal';
 
+import AgencyContract from './../Print/AgencyContract';
+import { saveAs } from "file-saver";
+import { Packer } from "docx";
+
 const Header = ({ refresh, ...props }) => {
   const location = useLocation();
   const isEditPage = location.pathname.includes('edit');
@@ -25,7 +29,8 @@ const Header = ({ refresh, ...props }) => {
   const isPermitted = useAuthStore((state) => state.isPermitted);
   const [activeAgency, setActiveAgency] = useProductsStore((state) => [state.activeAgency, state.setActiveAgency]);
   const [switchParams, setSwitchParams] = useProductsStore((state) => [state.switchParams, state.setSwitchParams]);
-  const [activeAgencyState] = useProductsStore((state) => [state.activeAgencyState]);
+  // const [activeAgencyState] = useProductsStore((state) => [state.activeAgencyState]);
+  // const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]);
   const stateMapVal = useProductsAuditStatesMapVal();
   const { message, notification } = App.useApp();
   const navigate = useNavigate();
@@ -75,6 +80,9 @@ const Header = ({ refresh, ...props }) => {
   };
 
   const handleAuditAgency = (state) => {
+    // const s = Object.keys(agencyProducts).map((typeKey) => {
+
+    // });
     postAgencyProductsAuditAction(state, { travel_agency_id: activeAgency.travel_agency_id, use_year: switchParams.use_year })
       .then((json) => {
         if (json.errcode === 0) {
@@ -120,6 +128,16 @@ const Header = ({ refresh, ...props }) => {
       });
   };
 
+
+  const handleDownload = () => {
+    const documentCreator = new AgencyContract();
+    const doc = documentCreator.create([]);
+
+    Packer.toBlob(doc).then(blob => {
+      saveAs(blob, `${pickYear}地接合同-${Date.now().toString(32)}.docx`);
+    });
+  };
+
   return (
     <div className='flex justify-end items-center gap-4 h-full'>
       <div className='grow'>
@@ -171,7 +189,7 @@ const Header = ({ refresh, ...props }) => {
       </RequireAuth>
       {/* todo: export, 审核完成之后才能导出 */}
       <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
-        <Button size='small'>{t('Print')} PDF</Button>
+        <Button size='small' onClick={handleDownload}>{t('Export')} .docx</Button>
         {/* <PrintContractPDF /> */}
       </RequireAuth>
       {/* 编辑 */}

src/views/products/Print/AgencyContract.jsx

@@ -0,0 +1,175 @@
+import {
+  AlignmentType,
+  Document,
+  Header,
+  Footer,
+  HeadingLevel,
+  Packer,
+  Paragraph,
+  TabStopPosition,
+  TabStopType,
+  Table,
+  TableCell,
+  TableRow,
+  TextRun,
+  BorderStyle,
+  NumberFormat,
+  PageNumber,
+  WidthType,
+} from 'docx';
+const DOC_TITLE = '地接合同';
+const pageMargins = {
+  top: `15mm`,
+  bottom: `15mm`,
+  left: `10mm`,
+  right: `10mm`,
+};
+const tableBorderNone = {
+  top: { style: BorderStyle.NONE, size: 0, color: 'FFFFFF' },
+  bottom: { style: BorderStyle.NONE, size: 0, color: 'FFFFFF' },
+  left: { style: BorderStyle.NONE, size: 0, color: 'FFFFFF' },
+  right: { style: BorderStyle.NONE, size: 0, color: 'FFFFFF' },
+};
+const tableBorderOne = {
+  top: { style: BorderStyle.SINGLE, space: 0, size: 6, color: 'auto' },
+  bottom: { style: BorderStyle.SINGLE, space: 0, size: 6, color: 'auto' },
+  left: { style: BorderStyle.SINGLE, space: 0, size: 6, color: 'auto' },
+  right: { style: BorderStyle.SINGLE, space: 0, size: 6, color: 'auto' },
+};
+
+export default class AgencyContract {
+  create([data]) {
+    const document = new Document({
+      creator: 'China Highlights',
+      title: DOC_TITLE,
+      styles: {
+        paragraphStyles: [
+          {
+            id: 'Normal',
+            name: 'Normal',
+            quickFormat: true,
+            run: {
+              size: 20,
+              font: { name: '宋体' },
+              color: '000000',
+            },
+            paragraph: {
+              spacing: {
+                after: 0,
+              },
+            },
+          },
+          {
+            id: 'Heading1',
+            name: 'Heading 1',
+            basedOn: 'Normal',
+            next: 'Normal',
+            quickFormat: true,
+            run: {
+              size: 32,
+              font: { name: '宋体' },
+              color: '000000',
+            },
+            paragraph: {
+              spacing: {
+                after: 120,
+              },
+            },
+          },
+          {
+            id: 'Heading2',
+            name: 'Heading 2',
+            basedOn: 'Normal',
+            next: 'Normal',
+            quickFormat: true,
+            run: {
+              size: 24,
+              font: { name: '宋体' },
+              color: '000000',
+            },
+            paragraph: {
+              spacing: {
+                before: 120,
+                // after: 120,
+              },
+            },
+          },
+        ],
+      },
+      sections: [
+        {
+          properties: {
+            page: {
+              pageNumbers: {
+                start: 1,
+                formatType: NumberFormat.DECIMAL,
+              },
+              margin: pageMargins,
+            },
+          },
+          headers: {
+            default: new Header({
+              children: [this.createPageHeaderText(`${new Date().toLocaleString()}系统生成`)],
+            }),
+          },
+          footers: {
+            default: new Footer({
+              children: [
+                new Paragraph({
+                  alignment: AlignmentType.CENTER,
+                  children: [
+                    new TextRun({
+                      children: ['第', PageNumber.CURRENT, '页'],
+                      size: 20,
+                    }),
+                    new TextRun({
+                      children: [', 共 ', PageNumber.TOTAL_PAGES, '页'],
+                      size: 20,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          },
+          children: [
+            new Paragraph({
+              text: DOC_TITLE,
+              heading: HeadingLevel.HEADING_1,
+              alignment: 'center',
+            }),
+            this.createSubHeading(`副标题`),
+          ],
+        },
+      ],
+    });
+
+    return document;
+  }
+
+  createHeading(text) {
+    return new Paragraph({
+      text: text,
+      heading: HeadingLevel.HEADING_1,
+      thematicBreak: true,
+    });
+  }
+
+  createSubHeading(text) {
+    return new Paragraph({
+      text: text,
+      heading: HeadingLevel.HEADING_2,
+    });
+  }
+  createPageHeaderText(text) {
+    return new Paragraph({
+      alignment: AlignmentType.RIGHT,
+      children: [
+        new TextRun({
+          text: text,
+          italics: true,
+          size: 20,
+        }),
+      ],
+    });
+  }
+}