fe-11 看板组件

lazy-timer-fe/src/pages/Charts/Kanban.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';
+
+import { kanbanData, kanbanGrid } from '../data/dummy';
+import { Header } from '../components';
+
+const Kanban = () => (
+  <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
+    <Header category="App" title="Kanban" />
+    <KanbanComponent
+      id="kanban"
+      keyField="Status"
+      dataSource={kanbanData}
+      cardSettings={{ contentField: 'Summary', headerField: 'Id' }}
+    >
+      <ColumnsDirective>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        {kanbanGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
+      </ColumnsDirective>
+    </KanbanComponent>
+  </div>
+);
+
+export default Kanban;

lazy-timer-fe/src/pages/Charts/Orders.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { GridComponent, ColumnsDirective, ColumnDirective, Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport, Edit, Inject } from '@syncfusion/ej2-react-grids';
+
+import { ordersData, contextMenuItems, ordersGrid } from '../data/dummy';
+import { Header } from '../components';
+
+const Orders = () => {
+  const editing = { allowDeleting: true, allowEditing: true };
+  return (
+    <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
+      <Header category="Page" title="Orders" />
+      <GridComponent
+        id="gridcomp"
+        dataSource={ordersData}
+        allowPaging
+        allowSorting
+        allowExcelExport
+        allowPdfExport
+        contextMenuItems={contextMenuItems}
+        editSettings={editing}
+      >
+        <ColumnsDirective>
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          {ordersGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
+        </ColumnsDirective>
+        <Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, Edit, PdfExport]} />
+      </GridComponent>
+    </div>
+  );
+};
+export default Orders;